JavaScript基于面向对象实现的猜拳游戏

2023-09-18 10:45:05 158

*{ 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%; } #gameul{ width:100%; height:415px; } #gameulli{ width:50%; height:100%; float:left; text-align:center; } #gameulli.anim{ width:223px; height:337px; border:10pxsolid#ff6699; border-radius:50%; margin:20pxauto0; 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.opbutton{ width:200px; height:60px; border:10pxsolid#ff6699; background:rgb(253,217,227); border-radius:50%; outline:none; cursor:pointer; font-weight:bold; } #game.opbutton:hover{ border-color:#ff0000; background-color:#ff0000; font-size:36px; color:rgb(253,217,227); } #game.opbutton.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; } #gameul.guessli{ width:100%; height:32%; } #gameul.guesslidiv{ width:100%; height:90%; border:10pxsolid#ff6699; border-radius:50%; background-position:center; background-repeat:no-repeat; cursor:pointer; background-color:rgba(244,184,202,1); } #gameul.guesslidiv: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'); } #gamediv.text{ margin-top:20px; text-align:center; font-size:50px; font-weight:bold; }

Function.prototype.extend=function(fn){ for(varattrinfn.prototype){ this.prototype[attr]=fn.prototype[attr]; } } //父级构造函数用于继承,共有属性 functionCaiquan(name){ this.name=name; this.point=0; } //用于继承下面衍生，共有方法 Caiquan.prototype.guess=function(){} //继承父，玩家的构造函数 functionUser(name){ Caiquan.call(this,name); } User.extend(Caiquan); User.prototype.guess=function(point){ returnthis.point=point; } //电脑的构造函数 functionComp(name){ Caiquan.call(this,name); } Comp.extend(Caiquan); //电脑的猜拳方法，随机 Comp.prototype.guess=function(){ returnthis.point=Math.floor(Math.random()*3); } //裁判构造函数 functionGame(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(){ varThis=this; this.timer=setInterval(function(){ This.anim[0].className='animuserguess'+((This.num++)%3); This.anim[1].className='animcompguess'+((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); varuserGu=user.guess(point); varcompGu=comp.guess(); this.anim[0].className='animuserguess'+userGu; this.anim[1].className='animcompguess'+compGu; varres=userGu-compGu; switch(res){ case0: this.textValue('平局!!!') break; case1: case-2: this.textValue('lose~~~'); break; case2: case-1: this.textValue('win!!!') break; } this.guess.style.display='none'; this.BtnDisable(); } varuser=newUser('锐雯'); varcomp=newComp('拉克丝'); vargame=newGame(user,comp);

JavaScript基于面向对象实现的猜拳游戏

热门推荐

随机推荐