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

2024-05-06 16:41:46

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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="js/game.js"></script> </body></html>

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/Ajax教程频道。

上一篇：基于js 各种排序方法和sort方法的区别(详解)

下一篇：JS实现带导航城市列表以及输入搜索功能