JavaScript實現(xiàn)一個空中避難的小游戲

2019-11-19 16:25:00

字體：大中小

供稿：網(wǎng)友

前言

最近在看js中的事件，之前也一直有用到事件，用到最多的就是onclick單擊事件，還有填寫表單信息時的用到的onfocus聚焦時間，和onblur事件，最近看到了onmousemove鼠標(biāo)移動事件，覺得很神奇，就突然很想寫一個小游戲，用到了setInterval函數(shù)。游戲的功能也很簡單，就是天上掉紙片，小人兒要不停的躲，一旦紙片和小人兒相撞，就會game over！

代碼如下：

<!DOCTYPE html><html><head><style> .move {  margin-top: 0px;  width:40px;  height: 50px;  background: #ff0;  position:absolute;  z-index: 999; } .self {  width:40px;  height: 50px;  background: #f0f;  position:absolute;  margin-top: 600px;  margin-left: 643px;  z-index: 999; } .self img {  width:40px;  height: 50px;  border-radius: 20px; }</style><title>圖圖up up</title> </head><body onload="moveDiv()"> <!--12個div就是空中的小紙片--> <div class="move" style="margin-left:100px"> </div> <div class="move" style="margin-left:200px"> </div> <div class="move" style="margin-left:300px"> </div> <div class="move" style="margin-left:400px"> </div> <div class="move" style="margin-left:500px"> </div> <div class="move" style="margin-left:600px"> </div> <div class="move" style="margin-left:700px"> </div> <div class="move" style="margin-left:800px"> </div> <div class="move" style="margin-left:900px"> </div> <div class="move" style="margin-left:1000px"> </div> <div class="move" style="margin-left:1100px"> </div> <div class="move" style="margin-left:1200px"> </div> <!--小人兒用一張圖片代替--> <div id="self" class="self">  <img src="images/tutu.jpg"> </div></body><script type="text/javascript"> var alldiv = document.querySelectorAll('.move'); var selfdiv = document.getElementById("self"); var timer, flag; function moveItem() {  //用隨機(jī)數(shù)決定哪一張紙片掉落  for (var j = 0; j < Math.round(Math.random()*11); j++)   {   var i = Math.round(Math.random()*11);   alldiv[i].style.top = alldiv[i].offsetTop + 20 +"px";   //掉落過程中改變紙片的顏色   var rgb='rgb('+Math.floor(Math.random()*255)+','      +Math.floor(Math.random()*255)+','      +Math.floor(Math.random()*255)+')';   alldiv[i].style.backgroundColor = rgb;   if (alldiv[i].offsetTop >= 600)   {    alldiv[i].style.top = "50px"; //當(dāng)紙片落到底部，又重新回到起點   }  } } function moveDiv() {  timer = setInterval(moveItem,20); //每隔20ms掉落  flag = setInterval(meeting,1); //間隔1ms判斷是否相撞 } var selfdiv = document.getElementById("self"); selfdiv.onmousedown = function(e) //鼠標(biāo)點擊小人兒開始移動 {  document.onmousemove = function(e) //小人兒跟著鼠標(biāo)移動  {   if (e.clientY > 600)   {    selfdiv.style.marginTop = "600px"; //如果到達(dá)屏幕底部就不再往下   }   else if(e.clientX > 1300)   {    selfdiv.style.marginLeft = "1300px"; //到達(dá)最右部就回到不再往右   }   else   {    //小人兒的位置始終等于鼠標(biāo)的位置    selfdiv.style.marginTop = e.clientY + "px";    selfdiv.style.marginLeft = e.clientX + "px";   }  } } function meeting() {  for (var i = 0; i < alldiv.length; i++)  {   //判斷是否相撞   if (Math.abs(alldiv[i].offsetTop-selfdiv.offsetTop) <= 50 &&     Math.abs(alldiv[i].offsetLeft-selfdiv.offsetLeft) <= 40)   {    clearInterval(flag);    clearInterval(timer);    alert("一不小心撞到了！！！游戲結(jié)束");   }  } }</script></html>

效果如圖：