search

Home  >  Article  >  Web Front-end  >  Native JS implements the 'Don't Step on White Blocks' game (compatible with IE)

Native JS implements the 'Don't Step on White Blocks' game (compatible with IE)

高洛峰
高洛峰Original
2017-02-21 14:20:491380browse

This article mainly introduces the sample code for implementing the "Don't Step on the White Block" game (compatible with IE) using native JS. It has a very good reference value. Let’s take a look at it with the editor.

It is compatible with IE and will be accelerated every 20 points! ! !

The effect is as follows:

Native JS implements the Dont Step on White Blocks game (compatible with IE)

##Picture (1) Game initialization

Native JS implements the Dont Step on White Blocks game (compatible with IE)

Picture (2) Game starts

The code is as follows: 

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

For more articles related to the native JS implementation of the "Don't Step on the White Block" game (compatible with IE), please pay attention to the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Deep copy of objects in JavaScriptNext article：Deep copy of objects in JavaScript

Related articles

See more