Heim > Artikel > Web-Frontend > Native JS implementiert das Spiel „Don't Step on White Blocks“ (kompatibel mit IE)

Native JS implementiert das Spiel „Don't Step on White Blocks“ (kompatibel mit IE)

高洛峰Original: 2017-02-21 14:20:491367Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode für die Implementierung des Spiels „Don't Step on the White Block“ (kompatibel mit IE) mit nativem JS vorgestellt. Es hat einen sehr guten Referenzwert. Schauen wir uns den Editor unten an.

Es ist mit dem IE kompatibel und wird alle 20 Punkte beschleunigt! ! !

Der Effekt ist wie folgt:

Native JS implementiert das Spiel „Dont Step on White Blocks“ (kompatibel mit IE)

Bild (1) Spielinitialisierung

Native JS implementiert das Spiel „Dont Step on White Blocks“ (kompatibel mit IE)

Bild (2) Das Spiel beginnt

Der Code lautet wie folgt:

<!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>

Weitere native JS-Implementierungen des Spiels „Don't Step on the White Block“ (kompatibel mit IE) finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tiefe Kopie von Objekten in JavaScriptNächster Artikel：Tiefe Kopie von Objekten in JavaScript

In Verbindung stehende Artikel

Mehr sehen