相思资源网 Design By www.200059.com
本文实例讲述了JavaScript基于面向对象实现的猜拳游戏。分享给大家供大家参考,具体如下:
html代码:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>猜拳游戏</title> <link rel="stylesheet" href="css/game.css" rel="external nofollow" ></link> </head> <body> <div id="game"> <ul class="panel"> <li> <p class="name">我:name</p> <div class="anim user"></div> </li> <li> <p class="name">电脑:name</p> <div class="anim comp"></div> </li> </ul> <div class="op"> <button id="play" onclick = "game.Caiquan();">开始</button> </div> <div id="text" class="text">请开始游戏...</div> <ul id="guess" class="guess"> <li> <div class="guess0" onclick="game.verdict(0)">石头</div> </li> <li> <div class="guess1" onclick="game.verdict(1)">剪刀</div> </li> <li> <div class="guess2" onclick="game.verdict(2)">布</div> </li> </ul> </div> <script type="text/javascript" src="/UploadFiles/2021-04-02/game.js">css样式(字体:迷你简卡通)
*{ margin:0px; padding:0px; font-family:'迷你简卡通'; font-size:28px; } html,body{ width:100%; height:100%; background:rgba(244, 184, 202, 1); } ul{ list-style:none; } #game{ width:800px; height:600px; margin:auto; top:20%; } #game ul{ width:100%; height:415px; } #game ul li{ width:50%; height:100%; float:left; text-align:center; } #game ul li .anim{ width:223px; height:337px; border:10px solid #ff6699; border-radius:50%; margin:20px auto 0; background-position:center; background-repeat:no-repeat; } .user{ background:url('../img/readyl.png'); } .comp{ background:url('../img/readyr.png'); } #game .op{ width:100%; text-align:center; } #game .op button{ width:200px; height:60px; border:10px solid #ff6699; background:rgb(253, 217, 227); border-radius:50%; outline:none; cursor:pointer; font-weight:bold; } #game .op button:hover{ border-color:#ff0000; background-color:#ff0000; font-size:36px; color:rgb(253, 217, 227); } #game .op button.disabled{ border-color:#bbb; color:#bbb; background-color:#ccc; font-size:28px; cursor:default; } #game .guess{ width:220px; height:100%; position:fixed; top:0px; left:0px; display:none; } #game ul.guess li{ width:100%; height:32%; } #game ul.guess li div{ width:100%; height:90%; border:10px solid #ff6699; border-radius:50%; background-position:center; background-repeat:no-repeat; cursor:pointer; background-color:rgba(244, 184, 202, 1); } #game ul.guess li div:hover{ background-color:#ff6699; color:#fff; } div.guess0{ background-image:url('../img/0.png'); } div.guess1{ background-image:url('../img/1.png'); } div.guess2{ background-image:url('../img/2.png'); } #game div.text{ margin-top:20px; text-align:center; font-size:50px; font-weight:bold; }js代码
Function.prototype.extend = function( fn ){ for( var attr in fn.prototype ){ this.prototype[attr] = fn.prototype[attr]; } } //父级构造函数用于继承,共有属性 function Caiquan( name ){ this.name = name; this.point = 0; } //用于继承下面衍生,共有方法 Caiquan.prototype.guess = function(){} //继承父,玩家的构造函数 function User( name ){ Caiquan.call(this,name); } User.extend( Caiquan ); User.prototype.guess = function( point ){ return this.point = point; } //电脑的构造函数 function Comp( name ){ Caiquan.call(this,name); } Comp.extend( Caiquan ) ; //电脑的猜拳方法,随机 Comp.prototype.guess = function(){ return this.point = Math.floor( Math.random()*3 ); } //裁判构造函数 function Game( u , c ){ this.text = document.getElementById('text'); this.btn = document.getElementById("play"); this.user = u; this.comp = c; this.classN =document.getElementsByClassName('name'); this.guess = document.getElementById("guess"); this.anim = document.getElementsByClassName("anim"); this.num = 0; this.init(); this.tiemr = null; } Game.prototype.Caiquan = function(){ this.textValue( '请出拳...' ); this.BtnDisable(); this.start(); this.guess.style.display = 'block'; } //怎么玩 Game.prototype.start = function(){ var This = this; this.timer = setInterval(function(){ This.anim[0].className = 'anim user guess' +( ( This.num ++ ) % 3 ); This.anim[1].className = 'anim comp guess' + ( ( This.num ++ ) % 3 ) ; },500) } //初始化名字 Game.prototype.init = function(){ this.classN[0].innerHTML = '我:' + this.user.name; this.classN[1].innerHTML = '电脑:' + this.comp.name; } //提示面板区域的修改 Game.prototype.textValue = function( val ){ this.text.innerHTML = val; } //按钮失效 Game.prototype.BtnDisable = function(){ if( this.btn.disabled ){ this.btn.disabled = false; this.btn.className =''; this.btn.innerHTML = '再来一次' }else{ this.btn.disabled = true; this.btn.className ='disabled'; } } Game.prototype.verdict = function( point ){ clearInterval(this.timer); var userGu = user.guess(point); var compGu = comp.guess(); this.anim[0].className = 'anim user guess' + userGu; this.anim[1].className = 'anim comp guess' + compGu; var res = userGu - compGu; switch (res){ case 0: this.textValue('平局!!!') break; case 1: case -2: this.textValue('lose~~~'); break; case 2: case -1: this.textValue('win!!!') break; } this.guess.style.display = 'none'; this.BtnDisable(); } var user = new User( '锐雯' ); var comp = new Comp( '拉克丝' ); var game = new Game( user , comp );更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无JavaScript基于面向对象实现的猜拳游戏的评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。