집 > 기사 > 웹 프론트엔드 > Native JS는 "Don't Step on White Blocks" 게임을 구현합니다(IE와 호환 가능)

Native JS는 "Don't Step on White Blocks" 게임을 구현합니다(IE와 호환 가능)

高洛峰원래의: 2017-02-21 14:20:491372검색

이 글에서는 기본 JS를 사용하여 "흰 블록을 밟지 마세요" 게임(IE 호환)을 구현하기 위한 샘플 코드를 주로 소개합니다. 참조값이 매우 좋습니다.

IE와 호환되며 20포인트마다 가속됩니다. ! !

효과는 다음과 같습니다.

Native JS는 Dont Step on White Blocks 게임을 구현합니다(IE와 호환 가능)

사진(1) 게임 초기화

Native JS는 Dont Step on White Blocks 게임을 구현합니다(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>

"Don't Step on the White Block" 게임(IE와 호환 가능)의 기본 JS 구현과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!

성명：

이전 기사：JavaScript의 객체 전체 복사다음 기사：JavaScript의 객체 전체 복사

Native JS는 "Don't Step on White Blocks" 게임을 구현합니다(IE와 호환 가능)

관련 기사