简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter un jeu de devinettes en utilisant JavaScript (tutoriel détaillé)

亚连
Libérer： 2018-06-13 17:44:11
original
4446 Les gens l'ont consulté

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 dans le besoin peuvent s'y référer

L'exemple de cet article décrit un jeu de devinettes basé sur une implémentation orientée objet en 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>
Copier après la connexion

style css (police : mini dessin animé) 

*{
  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;
}
Copier après la connexion

js code

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 );
Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Interprétation détaillée de la séparation et de la combinaison de vue-admin et backend (flask)

Comment implémenter pandas en utilisant la navigation jquery+css3 tv

Comment implémenter la boîte de dialogue de masquage chronométré dans jQuery

Comment implémenter le délai DIV dans JS/jQuery pour disparaître après quelques secondes ou Affichage

Utilisez JS natif pour réaliser un lien à trois niveaux entre les provinces et les municipalités

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!

Étiquettes associées：
javascript 面向对象
source：php.cn
Article précédent：Comment utiliser les modules de nœuds et les outils de gestion de packages NPM Article suivant：Comment implémenter diverses méthodes de tri à l'aide de js
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！