Maison > Article > interface Web > Native JS implémente le jeu "Don't Step on White Blocks" (compatible avec IE)

Native JS implémente le jeu "Don't Step on White Blocks" (compatible avec IE)

高洛峰original: 2017-02-21 14:20:491365parcourir

Cet article présente principalement l'exemple de code pour implémenter le jeu "Don't Step on the White Block" (compatible avec IE) en utilisant JS natif. Il a une très bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous

Il est compatible avec IE et sera accéléré tous les 20 points ! ! !

L'effet est le suivant :

Native JS implémente le jeu Dont Step on White Blocks (compatible avec IE)

Image (1) Initialisation du jeu

Native JS implémente le jeu Dont Step on White Blocks (compatible avec IE)

Image (2) Le jeu démarre

Le code est le suivant :

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <style>
  *{ margin: 0; padding: 0; } 
  .box {
  margin: 50px auto 0 auto;
  width: 400px;
  height: auto;
  border: solid 1px #222;
  } 
  #cont {  
  width: 400px;
  height: 600px;  
  position: relative;
  overflow: hidden;
  }
  #go {
  width: 100%;
  height: 600px;
  position: absolute;
  top: 0;
  font: 700 60px &#39;微软雅黑&#39;;
  text-align: center;  
  z-index: 99;
  }
  #go span {
  cursor: pointer;
  background-color: #fff;
  border-bottom: solid 1px #222;
  }
  #main {
  width: 400px;
  height: 600px;
  position: relative;
  top: -150px;
  }
  .row {
  width: 400px;
  height: 150px;
  }
  .row p {
  width: 99px;
  height: 149px;
  border: solid 1px #222;
  float: left;
  border-top-width: 0;
  border-left-width: 0;
  cursor: pointer;
  }
 #count {
 border-top: solid 1px #222;
 width: 400px;
  height: 50px;
  font: 700 36px/50px &#39;微软雅黑&#39;;
  text-align: center;
 }
 </style>
 </head>
 <body>
 <p class="box">
 <!-- 布局 --> 
 <p id="cont"> 
 <p id="go">
  <span>Game start</span> 
  </p> 
 <p id="main">
 </p>
 </p> 
 <p id="count"></p>
 </p>  
 </body>
 <script>
 //得当前样式
 function getStyle(obj,arrt){
 //兼容IE
 return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
 }
 var main = document.getElementById(&#39;main&#39;);
 var go = document.getElementById(&#39;go&#39;);
 var count = document.getElementById(&#39;count&#39;);
 var cols = [&#39;#1AAB8A&#39;,&#39;#E15650&#39;,&#39;#121B39&#39;,&#39;#80A84E&#39;];
 //动态创建p
 function cp(classname){
 //创建p
 var op = document.createElement(&#39;p&#39;);
 //随机值
 var index = Math.floor(Math.random()*4);
 //行 添加相应的class类
 op.className = classname; 
 //创建行之后再动态创建4个小p并添加到行里面 
 for(var j =0;j<4;j++){
 var ip = document.createElement(&#39;p&#39;); 
 op.appendChild(ip);  
 }
 //然后把行添加到main里面
 //判断需要添加的位置
 if(main.children.length == 0){
 main.appendChild(op);
 }else {
 main.insertBefore(op, main.children[0]);
 } 
 //随机给行里面的某一个p添加背景色 
 op.children[index].style.backgroundColor = cols[index];
  //标记颜色盒子
  op.children[index].className = "i";
 }
 //移动p
 function move(obj){
 //关闭上一个定时器
 clearInterval(obj.timer);
 //默认速度与计分
 var speed = 5,num = 0;
 //定时器管理与开启定时器
 obj.timer = setInterval(function(){
 //速度 
 var step = parseInt(getStyle(obj,&#39;top&#39;)) + speed;
 //移动盒子
 obj.style.top = step + &#39;px&#39;;
 //判断并创建新的盒子
  if(parseInt(getStyle(obj,&#39;top&#39;)) >= 0){   
   cp(&#39;row&#39;);
   obj.style.top = -150 + &#39;px&#39;;
  }
 //删除边界外的盒子
 if(obj.children.length == 6){
   //删除前，如果有盒子没有点击则结束游戏
   for(var i = 0;i<4;i++){
   if(obj.children[obj.children.length - 1].children[i].className == &#39;i&#39;){
    //游戏结束
    obj.style.top = &#39;-150px&#39;;
    count.innerHTML = &#39;游戏结束,最高得分: &#39; + num;
    //关闭定时器
    clearInterval(obj.timer);
    //显示开始游戏
    go.children[0].innerHTML = &#39;Renew game&#39;;
    go.style.display = "block";    
   }
   }   
 obj.removeChild(obj.children[obj.children.length - 1]);
 }
 //点击与计分
 obj.onclick = function(event){
 //点击的不是白盒子 
   // 兼容IE
   event = event || window.event;
   if((event.target? event.target : event.srcElement).className == &#39;i&#39;){
  //点击后的盒子颜色
  (event.target? event.target : event.srcElement).style.backgroundColor = "#bbb";
   //清除盒子标记
   (event.target? event.target : event.srcElement).className = &#39;&#39;;
  //计分
  num++;
  //显示得分
  count.innerHTML = &#39;当前得分: &#39; + num;
 }else {
  //游戏结束
  obj.style.top = 0;
  count.innerHTML = &#39;游戏结束,最高得分: &#39; + num;
  //关闭定时器
  clearInterval(obj.timer);
   //显示开始游戏
   go.children[0].innerHTML = &#39;Renew game&#39;;
   go.style.display = "block";
 }
 //盒子加速
 if(num%20 == 0){
  speed++;
 }
 }  
 },20) 
 } 
 //开始游戏
 go.children[0].onclick = function(){
 //开始前判断main里面是否有盒子，有则全部删除
 if(main.children.length){
 //暴力清楚main里面所有盒子
 main.innerHTML = &#39;&#39;;
 }
  //清空计分
  count.innerHTML = &#39;游戏开始&#39;; 
 //隐藏开始盒子
 this.parentNode.style.display = "none";
 //调用定时器
 move(main);
 } 
 </script>
</html>

Pour une implémentation JS plus native du jeu "Don't Step on the White Block" (compatible avec IE), veuillez faire attention au site Web PHP 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：Copie profonde d'objets en JavaScriptArticle suivant：Copie profonde d'objets en JavaScript

Articles Liés

Voir plus