首頁 > 文章 > web前端 > 原生JS實現《別踩白塊》遊戲（相容IE）

原生JS實現《別踩白塊》遊戲（相容IE）

高洛峰原創: 2017-02-21 14:20:491382瀏覽

本文主要介紹了原生JS實作《別踩白塊》遊戲（相容IE）的範例程式碼。具有很好的參考價值，下面跟著小編一起來看下吧

兼容了IE，每得20分就加速一次！！！

效果如下：

原生JS實現《別踩白塊》遊戲（相容IE）

#圖（1）遊戲初始

原生JS實現《別踩白塊》遊戲（相容IE）

#圖（2）遊戲開始

#程式碼如下：

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

更多原生JS實現《別踩白塊》遊戲（相容IE）相關文章請關注PHP中文網！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript 中物件的深層拷貝下一篇：JavaScript 中物件的深層拷貝

看更多