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

前言

在重慶等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需網(wǎng)站策劃,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營(yíng)銷型網(wǎng)站建設(shè),外貿(mào)營(yíng)銷網(wǎng)站建設(shè),重慶網(wǎng)站建設(shè)費(fèi)用合理。

最近在看js中的事件，之前也一直有用到事件，用到最多的就是onclick單擊事件，還有填寫表單信息時(shí)的用到的onfocus聚焦時(shí)間，和onblur事件，最近看到了onmousemove鼠標(biāo)移動(dòng)事件，覺得很神奇，就突然很想寫一個(gè)小游戲，用到了setInterval函數(shù)。游戲的功能也很簡(jiǎn)單，就是天上掉紙片，小人兒要不停的躲，一旦紙片和小人兒相撞，就會(huì)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個(gè)div就是空中的小紙片-->
 <div class="move" >

 </div>

 <div class="move" >

 </div>
 <div class="move" >

 </div>
 <div class="move" >

 </div>

 <div class="move" >

 </div>
 <div class="move" >

 </div>
 <div class="move" >

 </div>
 <div class="move" >

 </div>

 <div class="move" >

 </div>
 <div class="move" >

 </div>
 <div class="move" >

 </div>
 <div class="move" >

 </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)紙片落到底部，又重新回到起點(diǎn)
   }
  }

 }

 function moveDiv()
 {
  timer = setInterval(moveItem,20); //每隔20ms掉落
  flag = setInterval(meeting,1); //間隔1ms判斷是否相撞
 }

 var selfdiv = document.getElementById("self");
 selfdiv.onmousedown = function(e) //鼠標(biāo)點(diǎn)擊小人兒開始移動(dòng)
 {
  document.onmousemove = function(e) //小人兒跟著鼠標(biāo)移動(dòng)
  {
   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>

效果如圖：

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

全部的代碼就這些，動(dòng)圖做的效果不是很好，第一次做動(dòng)圖，發(fā)現(xiàn)有很多在線網(wǎng)站都可以，做起來很簡(jiǎn)單，還是免費(fèi)的，開心?。?！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

網(wǎng)頁(yè)標(biāo)題：JavaScript實(shí)現(xiàn)一個(gè)空中避難的小游戲
分享地址：http://muchs.cn/article4/ipjhie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、建站公司、移動(dòng)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)