Maison > Article > interface Web > Implémentation orientée objet JavaScript d'un jeu de devinettes

Implémentation orientée objet JavaScript d'un jeu de devinettes

小云云original: 2018-01-05 09:47:092466parcourir

Cet article présente principalement l'implémentation orientée objet du jeu de devinettes en JavaScript et analyse la mise en page spécifique, le style et les compétences opérationnelles liées aux fonctions de l'implémentation orientée objet du jeu de devinettes en JavaScript sur la base d'un exemple complet .Les amis qui en ont besoin peuvent s'y référer. J'espère que vous pourrez aider tout le monde.

L'exemple de cet article décrit le jeu de devinettes orienté objet basé sur JavaScript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

code html :

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>猜拳游戏</title>
 <link rel="stylesheet" href="css/game.css" rel="external nofollow" ></link>
 </head>
 <body>
  <p id="game">
    <ul class="panel">
      <li>
        <p class="name">我：name</p>
        <p class="anim user"></p>
      </li>
      <li>
        <p class="name">电脑：name</p>
        <p class="anim comp"></p>
      </li>
    </ul>
    <p class="op">
      <button id="play" onclick = "game.Caiquan();">开始</button>
    </p>
    <p id="text" class="text">请开始游戏...</p>
    <ul id="guess" class="guess">
      <li>
        <p class="guess0" onclick="game.verdict(0)">石头</p>
      </li>
      <li>
        <p class="guess1" onclick="game.verdict(1)">剪刀</p>
      </li>
      <li>
        <p class="guess2" onclick="game.verdict(2)">布</p>
      </li>
    </ul>
  </p>
  <script type="text/javascript" src="js/game.js"></script>
 </body>
</html>

style CSS (police : mini dessin animé simple)

*{
  margin:0px;
  padding:0px;
  font-family:&#39;迷你简卡通&#39;;
  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(&#39;../img/readyl.png&#39;);
}
.comp{
  background:url(&#39;../img/readyr.png&#39;);
}
#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 p{
  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 p:hover{
  background-color:#ff6699;
  color:#fff;
}
p.guess0{
  background-image:url(&#39;../img/0.png&#39;);
}
p.guess1{
  background-image:url(&#39;../img/1.png&#39;);
}
p.guess2{
  background-image:url(&#39;../img/2.png&#39;);
}
#game p.text{
  margin-top:20px;
  text-align:center;
  font-size:50px;
  font-weight:bold;
}

Code 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(&#39;text&#39;);
  this.btn = document.getElementById("play");
  this.user = u;
  this.comp = c;
  this.classN =document.getElementsByClassName(&#39;name&#39;);
  this.guess = document.getElementById("guess");
  this.anim = document.getElementsByClassName("anim");
  this.num = 0;
  this.init();
  this.tiemr = null;
}
Game.prototype.Caiquan = function(){
  this.textValue( &#39;请出拳...&#39; );
  this.BtnDisable();
  this.start();
  this.guess.style.display = &#39;block&#39;;
}
//怎么玩
Game.prototype.start = function(){
  var This = this;
  this.timer = setInterval(function(){
    This.anim[0].className = &#39;anim user guess&#39; +( ( This.num ++ ) % 3 );
    This.anim[1].className = &#39;anim comp guess&#39; + ( ( This.num ++ ) % 3 ) ;
  },500)
}
//初始化名字
Game.prototype.init = function(){
  this.classN[0].innerHTML = &#39;我:&#39; + this.user.name;
  this.classN[1].innerHTML = &#39;电脑:&#39; + 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 =&#39;&#39;;
    this.btn.innerHTML = &#39;再来一次&#39;
  }else{
    this.btn.disabled = true;
    this.btn.className =&#39;disabled&#39;;
  }
}
Game.prototype.verdict = function( point ){
  clearInterval(this.timer);
  var userGu = user.guess(point);
  var compGu = comp.guess();
  this.anim[0].className = &#39;anim user guess&#39; + userGu;
  this.anim[1].className = &#39;anim comp guess&#39; + compGu;
  var res = userGu - compGu;
  switch (res){
    case 0:
    this.textValue(&#39;平局!!!&#39;)
      break;
    case 1:
    case -2:
    this.textValue(&#39;lose~~~&#39;);
    break;
    case 2:
    case -1:
    this.textValue(&#39;win!!!&#39;)
      break;
  }
  this.guess.style.display = &#39;none&#39;;
  this.BtnDisable();
}
var user = new User( &#39;锐雯&#39; );
var comp = new Comp( &#39;拉克丝&#39; );
var game = new Game( user , comp );

Recommandations associées :

Js natif pour implémenter la brique html5 -Méthode de jeu de rupture

Exemple de partage de jQuery pour implémenter le jeu de puzzle

Exemple de partage d'implémentation jQuery+vue.js du neuf carrés jeu de réflexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Fonction de panier simple par glisser-déposer implémentée dans JSArticle suivant：Fonction de panier simple par glisser-déposer implémentée dans JS

Articles Liés

Voir plus