欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript制作簡(jiǎn)易的微信打飛機(jī)

 更新時(shí)間：2015年03月31日 10:38:04   投稿：hebedich  
這篇文章主要介紹了JavaScript制作簡(jiǎn)易的微信打飛機(jī)，只有簡(jiǎn)單的功能，大神們可以自由擴(kuò)展哈。有需要的小伙伴可以參考下。

簡(jiǎn)單的用JavaScript模擬微信打飛機(jī)，部分功能還不完善，剛開(kāi)始寫(xiě)，還有很多不足，還望大家多多指出。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title></title>
  <meta http-equiv="content" content="text/html" charset="utf-8"/>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #contentdiv{
      position: absolute;
      left: 500px;
    }
    #startdiv{
      width: 320px;
      height: 568px;
      background-image: url(../image/開(kāi)始背景.png);
    }
    button{
      outline: none;
    }
    #startdiv button{
      position: absolute;
      top: 500px;
      left: 82px;
      width: 150px;
      height: 30px;
      border: 1px solid black;
      border-radius: 30px;
      background-color: #c4c9ca;
    }
    #maindiv{
      width: 320px;
      height: 568px;
      background-image:url(../image/background_1.png) ;
      display: none;
    }
    #maindiv img{
      position: absolute;
      z-index: 1;
    }
    #scorediv{
      font-size: 16px;
      font-weight: bold;
      position: absolute;
      top: 10px;
      left: 10px;
      display: none;
    }
    #scorediv{
      font-size: 18px;
      font-weight: bold;
    }
    #suspenddiv{
      position: absolute;
      top: 210px;
      left: 82px;
      display: none;
      z-index: 2;
    }
    #suspenddiv button{
      width: 150px;
      height: 30px;
      margin-bottom: 20px;
      border: 1px solid black;
      border-radius: 30px;
      background-color: #c4c9ca;
    }
    #enddiv{
      position: absolute;
      top: 210px;
      left: 75px;
      border: 1px solid gray;
      border-radius: 5px;
      text-align: center;
      background-color:#d7ddde;
      display: none;
      z-index: 2;
    }
    .plantext{
      width: 160px;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
    }
    #planscore{
      width: 160px;
      height: 80px;
      line-height: 80px;
      border-top: 1px solid gray;
      border-bottom: 1px solid gray;
      font-size: 16px;
      font-weight: bold;
    }
    #enddiv div{
      width: 160px;
      height: 50px;
    }
    #enddiv div button{
      margin-top:10px ;
      width: 90px;
      height: 30px;
      border: 1px solid gray;
      border-radius: 30px;
    }
  </style>
</head>
 
<body>
<div id="contentdiv">
  <div id="startdiv">
    <button onclick="begin()">開(kāi)始游戲</button>
  </div>
  <div id="maindiv">
    <div id="scorediv">
      <label>分?jǐn)?shù)：</label>
      <label id="label">0</label>
    </div>
    <div id="suspenddiv">
      <button>繼續(xù)</button><br/>
      <button>重新開(kāi)始</button><br/>
      <button>回到主頁(yè)</button>
    </div>
    <div id="enddiv">
      <p class="plantext">飛機(jī)大戰(zhàn)分?jǐn)?shù)</p>
      <p id="planscore">0</p>
      <div><button onclick="jixu()">繼續(xù)</button></div>
    </div>
  </div>
</div>
<script type="text/javascript">
//獲得主界面
var mainDiv=document.getElementById("maindiv");
//獲得開(kāi)始界面
var startdiv=document.getElementById("startdiv");
//獲得游戲中分?jǐn)?shù)顯示界面
var scorediv=document.getElementById("scorediv");
//獲得分?jǐn)?shù)界面
var scorelabel=document.getElementById("label");
//獲得暫停界面
var suspenddiv=document.getElementById("suspenddiv");
//獲得游戲結(jié)束界面
var enddiv=document.getElementById("enddiv");
//獲得游戲結(jié)束后分?jǐn)?shù)統(tǒng)計(jì)界面
var planscore=document.getElementById("planscore");
//初始化分?jǐn)?shù)
var scores=0;
 
/*
 創(chuàng)建飛機(jī)類(lèi)
 */
function plan(hp,X,Y,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
  this.planX=X;
  this.planY=Y;
  this.imagenode=null;
  this.planhp=hp;
  this.planscore=score;
  this.plansizeX=sizeX;
  this.plansizeY=sizeY;
  this.planboomimage=boomimage;
  this.planisdie=false;
  this.plandietimes=0;
  this.plandietime=dietime;
  this.plansudu=sudu;
//行為
  /*
   移動(dòng)行為
   */
  this.planmove=function(){
    if(scores<=50000){
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px";
    }
    else if(scores>50000&&scores<=100000){
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+1+"px";
    }
    else if(scores>100000&&scores<=150000){
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+2+"px";
    }
    else if(scores>150000&&scores<=200000){
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+3+"px";
    }
    else if(scores>200000&&scores<=300000){
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+4+"px";
    }
    else{
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+5+"px";
    }
  }
  this.init=function(){
    this.imagenode=document.createElement("img");
    this.imagenode.style.left=this.planX+"px";
    this.imagenode.style.top=this.planY+"px";
    this.imagenode.src=imagesrc;
    mainDiv.appendChild(this.imagenode);
  }
  this.init();
}
 
/*
 創(chuàng)建子彈類(lèi)
 */
function bullet(X,Y,sizeX,sizeY,imagesrc){
  this.bulletX=X;
  this.bulletY=Y;
  this.bulletimage=null;
  this.bulletattach=1;
  this.bulletsizeX=sizeX;
  this.bulletsizeY=sizeY;
//行為
  /*
   移動(dòng)行為
   */
  this.bulletmove=function(){
    this.bulletimage.style.top=this.bulletimage.offsetTop-20+"px";
  }
  this.init=function(){
    this.bulletimage=document.createElement("img");
    this.bulletimage.style.left= this.bulletX+"px";
    this.bulletimage.style.top= this.bulletY+"px";
    this.bulletimage.src=imagesrc;
    mainDiv.appendChild(this.bulletimage);
  }
  this.init();
}
 
/*
 創(chuàng)建單行子彈類(lèi)
 */
function oddbullet(X,Y){
  bullet.call(this,X,Y,6,14,"../image/bullet1.png");
}
 
/*
 創(chuàng)建敵機(jī)類(lèi)
 */
function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
  plan.call(this,hp,random(a,b),-100,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc);
}
//產(chǎn)生min到max之間的隨機(jī)數(shù)
function random(min,max){
  return Math.floor(min+Math.random()*(max-min));
}
 
/*
 創(chuàng)建本方飛機(jī)類(lèi)
 */
function ourplan(X,Y){
  var imagesrc="../image/我的飛機(jī).gif";
  plan.call(this,1,X,Y,66,80,0,660,0,"../image/本方飛機(jī)爆炸.gif",imagesrc);
  this.imagenode.setAttribute('id','ourplan');
}
 
/*
 創(chuàng)建本方飛機(jī)
 */
var selfplan=new ourplan(120,485);
//移動(dòng)事件
var ourPlan=document.getElementById('ourplan');
var yidong=function(){
  var oevent=window.event||arguments[0];
  var chufa=oevent.srcElement||oevent.target;
  var selfplanX=oevent.clientX-500;
  var selfplanY=oevent.clientY;
  ourPlan.style.left=selfplanX-selfplan.plansizeX/2+"px";
  ourPlan.style.top=selfplanY-selfplan.plansizeY/2+"px";
//  document.getElementsByTagName('img')[0].style.left=selfplanX-selfplan.plansizeX/2+"px";
//  document.getElementsByTagName('img')[0]..style.top=selfplanY-selfplan.plansizeY/2+"px";
}
/*
 暫停事件
 */
var number=0;
var zanting=function(){
  if(number==0){
    suspenddiv.style.display="block";
    if(document.removeEventListener){
      mainDiv.removeEventListener("mousemove",yidong,true);
      bodyobj.removeEventListener("mousemove",bianjie,true);
    }
    else if(document.detachEvent){
      mainDiv.detachEvent("onmousemove",yidong);
      bodyobj.detachEvent("onmousemove",bianjie);
    }
    clearInterval(set);
    number=1;
  }
  else{
    suspenddiv.style.display="none";
    if(document.addEventListener){
      mainDiv.addEventListener("mousemove",yidong,true);
      bodyobj.addEventListener("mousemove",bianjie,true);
    }
    else if(document.attachEvent){
      mainDiv.attachEvent("onmousemove",yidong);
      bodyobj.attachEvent("onmousemove",bianjie);
    }
    set=setInterval(start,20);
    number=0;
  }
}
//判斷本方飛機(jī)是否移出邊界,如果移出邊界,則取消mousemove事件,反之加上mousemove事件
var bianjie=function(){
  var oevent=window.event||arguments[0];
  var bodyobjX=oevent.clientX;
  var bodyobjY=oevent.clientY;
  if(bodyobjX<505||bodyobjX>815||bodyobjY<0||bodyobjY>568){
    if(document.removeEventListener){
      mainDiv.removeEventListener("mousemove",yidong,true);
    }
    else if(document.detachEvent){
      mainDiv.detachEvent("onmousemove",yidong);
    }
  }
  else{
    if(document.addEventListener){
      mainDiv.addEventListener("mousemove",yidong,true);
    }
    else if(document.attachEvent){
      mainDiv.attachEvent("nomousemove",yidong);
    }
  }
}
//暫停界面重新開(kāi)始事件
//function chongxinkaishi(){
//  location.reload(true);
//  startdiv.style.display="none";
//  maindiv.style.display="block";
//}
var bodyobj=document.getElementsByTagName("body")[0];
if(document.addEventListener){
  //為本方飛機(jī)添加移動(dòng)和暫停
  mainDiv.addEventListener("mousemove",yidong,true);
  //為本方飛機(jī)添加暫停事件
  selfplan.imagenode.addEventListener("click",zanting,true);
  //為body添加判斷本方飛機(jī)移出邊界事件
  bodyobj.addEventListener("mousemove",bianjie,true);
  //為暫停界面的繼續(xù)按鈕添加暫停事件
  suspenddiv.getElementsByTagName("button")[0].addEventListener("click",zanting,true);
//  suspenddiv.getElementsByTagName("button")[1].addEventListener("click",chongxinkaishi,true);
  //為暫停界面的返回主頁(yè)按鈕添加事件
  suspenddiv.getElementsByTagName("button")[2].addEventListener("click",jixu,true);
}
else if(document.attachEvent){
  //為本方飛機(jī)添加移動(dòng)
  mainDiv.attachEvent("onmousemove",yidong);
  //為本方飛機(jī)添加暫停事件
  selfplan.imagenode.attachEvent("onclick",zanting);
  //為body添加判斷本方飛機(jī)移出邊界事件
  bodyobj.attachEvent("onmousemove",bianjie);
  //為暫停界面的繼續(xù)按鈕添加暫停事件
  suspenddiv.getElementsByTagName("button")[0].attachEvent("onclick",zanting);
//  suspenddiv.getElementsByTagName("button")[1].attachEvent("click",chongxinkaishi,true);
  //為暫停界面的返回主頁(yè)按鈕添加事件
  suspenddiv.getElementsByTagName("button")[2].attachEvent("click",jixu,true);
}
//初始化隱藏本方飛機(jī)
selfplan.imagenode.style.display="none";
 
/*
 敵機(jī)對(duì)象數(shù)組
 */
var enemys=[];
 
/*
 子彈對(duì)象數(shù)組
 */
var bullets=[];
var mark=0;
var mark1=0;
var backgroundPositionY=0;
/*
 開(kāi)始函數(shù)
 */
function start(){
  mainDiv.style.backgroundPositionY=backgroundPositionY+"px";
  backgroundPositionY+=0.5;
  if(backgroundPositionY==568){
    backgroundPositionY=0;
  }
  mark++;
  /*
   創(chuàng)建敵方飛機(jī)
   */
 
  if(mark==20){
    mark1++;
    //中飛機(jī)
    if(mark1%5==0){
      enemys.push(new enemy(6,25,274,46,60,5000,360,random(1,3),"../image/中飛機(jī)爆炸.gif","../image/enemy3_fly_1.png"));
    }
    //大飛機(jī)
    if(mark1==20){
      enemys.push(new enemy(12,57,210,110,164,30000,540,1,"../image/大飛機(jī)爆炸.gif","../image/enemy2_fly_1.png"));
      mark1=0;
    }
    //小飛機(jī)
    else{
      enemys.push(new enemy(1,19,286,34,24,1000,360,random(1,4),"../image/小飛機(jī)爆炸.gif","../image/enemy1_fly_1.png"));
    }
    mark=0;
  }
 
  /*
   移動(dòng)敵方飛機(jī)
   */
  var enemyslen=enemys.length;
  for(var i=0;i<enemyslen;i++){
    if(enemys[i].planisdie!=true){
      enemys[i].planmove();
    }
    /*
     如果敵機(jī)超出邊界,刪除敵機(jī)
     */
    if(enemys[i].imagenode.offsetTop>568){
      mainDiv.removeChild(enemys[i].imagenode);
      enemys.splice(i,1);
      enemyslen--;
    }
    //當(dāng)敵機(jī)死亡標(biāo)記為true時(shí)，經(jīng)過(guò)一段時(shí)間后清除敵機(jī)
    if(enemys[i].planisdie==true){
      enemys[i].plandietimes+=20;
      if(enemys[i].plandietimes==enemys[i].plandietime){
        mainDiv.removeChild(enemys[i].imagenode);
        enemys.splice(i,1);
        enemyslen--;
      }
    }
  }
 
  /*
   創(chuàng)建子彈
   */
  if(mark%5==0){
    bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+31,parseInt(selfplan.imagenode.style.top)-10));
  }
 
  /*
   移動(dòng)子彈
   */
  var bulletslen=bullets.length;
  for(var i=0;i<bulletslen;i++){
    bullets[i].bulletmove();
    /*
     如果子彈超出邊界,刪除子彈
     */
    if(bullets[i].bulletimage.offsetTop<0){
      mainDiv.removeChild(bullets[i].bulletimage);
      bullets.splice(i,1);
      bulletslen--;
    }
  }
 
  /*
   碰撞判斷
   */
  for(var k=0;k<bulletslen;k++){
    for(var j=0;j<enemyslen;j++){
      //判斷碰撞本方飛機(jī)
      if(enemys[j].planisdie==false){
        if(enemys[j].imagenode.offsetLeft+enemys[j].plansizeX>=selfplan.imagenode.offsetLeft&&enemys[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft+selfplan.plansizeX){
          if(enemys[j].imagenode.offsetTop+enemys[j].plansizeY>=selfplan.imagenode.offsetTop+40&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-20+selfplan.plansizeY){
            //碰撞本方飛機(jī)，游戲結(jié)束，統(tǒng)計(jì)分?jǐn)?shù)
            selfplan.imagenode.src="../image/本方飛機(jī)爆炸.gif";
            enddiv.style.display="block";
            planscore.innerHTML=scores;
            if(document.removeEventListener){
              mainDiv.removeEventListener("mousemove",yidong,true);
              bodyobj.removeEventListener("mousemove",bianjie,true);
            }
            else if(document.detachEvent){
              mainDiv.detachEvent("onmousemove",yidong);
              bodyobj.removeEventListener("mousemove",bianjie,true);
            }
            clearInterval(set);
          }
        }
        //判斷子彈與敵機(jī)碰撞
        if((bullets[k].bulletimage.offsetLeft+bullets[k].bulletsizeX>enemys[j].imagenode.offsetLeft)&&(bullets[k].bulletimage.offsetLeft<enemys[j].imagenode.offsetLeft+enemys[j].plansizeX)){
          if(bullets[k].bulletimage.offsetTop<=enemys[j].imagenode.offsetTop+enemys[j].plansizeY&&bullets[k].bulletimage.offsetTop+bullets[k].bulletsizeY>=enemys[j].imagenode.offsetTop){
            //敵機(jī)血量減子彈攻擊力
            enemys[j].planhp=enemys[j].planhp-bullets[k].bulletattach;
            //敵機(jī)血量為0，敵機(jī)圖片換為爆炸圖片，死亡標(biāo)記為true，計(jì)分
            if(enemys[j].planhp==0){
              scores=scores+enemys[j].planscore;
              scorelabel.innerHTML=scores;
              enemys[j].imagenode.src=enemys[j].planboomimage;
              enemys[j].planisdie=true;
            }
            //刪除子彈
            mainDiv.removeChild(bullets[k].bulletimage);
            bullets.splice(k,1);
            bulletslen--;
            break;
          }
        }
      }
    }
  }
}
/*
 開(kāi)始游戲按鈕點(diǎn)擊事件
 */
var set;
function begin(){
 
  startdiv.style.display="none";
  mainDiv.style.display="block";
  selfplan.imagenode.style.display="block";
  scorediv.style.display="block";
  /*
   調(diào)用開(kāi)始函數(shù)
   */
  set=setInterval(start,20);
}
//游戲結(jié)束后點(diǎn)擊繼續(xù)按鈕事件
function jixu(){
  location.reload(true);
}
</script>
</body>
</html>

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

相關(guān)文章

  • 如何使用JavaScript檢測(cè)空閑的瀏覽器選項(xiàng)卡

    如何使用JavaScript檢測(cè)空閑的瀏覽器選項(xiàng)卡

    這篇文章主要介紹了如何使用JavaScript檢測(cè)空閑的瀏覽器選項(xiàng)卡，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-05-05
  • JavaScript 不只是腳本

    JavaScript 不只是腳本

    JavaScript 不只是腳本...
    2007-05-05
  • 微信小程序中this.data與this.setData的區(qū)別詳解

    微信小程序中this.data與this.setData的區(qū)別詳解

    這篇文章主要給大家介紹了關(guān)于微信小程序中this.data與this.setData區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧
    2018-09-09
  • JS模擬的Map類(lèi)實(shí)現(xiàn)方法

    JS模擬的Map類(lèi)實(shí)現(xiàn)方法

    這篇文章主要介紹了JS模擬的Map類(lèi)實(shí)現(xiàn)方法,可實(shí)現(xiàn)模擬java中map屬性按照鍵值對(duì)保存的功能,提供了采用數(shù)組和json兩種實(shí)現(xiàn)方式,需要的朋友可以參考下
    2016-06-06
  • request請(qǐng)求獲取參數(shù)的實(shí)現(xiàn)方法(post和get兩種方式)

    request請(qǐng)求獲取參數(shù)的實(shí)現(xiàn)方法(post和get兩種方式)

    下面小編就為大家?guī)?lái)一篇request請(qǐng)求獲取參數(shù)的實(shí)現(xiàn)方法(post和get兩種方式)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-09-09
  • JavaScript利用canvas實(shí)現(xiàn)鼠標(biāo)跟隨特效

    JavaScript利用canvas實(shí)現(xiàn)鼠標(biāo)跟隨特效

    canvas是一個(gè)很神奇的玩意兒，比如畫(huà)表格、畫(huà)海報(bào)圖都要用canvas去做。本文就來(lái)利用canvas制作個(gè)簡(jiǎn)單的鼠標(biāo)跟隨特效，快跟隨小編一起學(xué)習(xí)一下吧
    2022-10-10
  • next.js初始化參數(shù)設(shè)置getServerSideProps應(yīng)用學(xué)習(xí)

    next.js初始化參數(shù)設(shè)置getServerSideProps應(yīng)用學(xué)習(xí)

    這篇文章主要為大家介紹了next.js初始化參數(shù)設(shè)置getServerSideProps的應(yīng)用示例學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-10-10
  • Javascript獲取當(dāng)前日期的農(nóng)歷日期代碼

    Javascript獲取當(dāng)前日期的農(nóng)歷日期代碼

    這篇文章主要介紹了利用Javascript獲取當(dāng)前日期的農(nóng)歷日期代碼，很實(shí)用，需要的朋友可以參考下
    2014-10-10
  • javascript json2 使用方法

    javascript json2 使用方法

    這是個(gè)人在最近使用json時(shí)做的總結(jié)，拿出來(lái)給沒(méi)接觸過(guò)的小弟們曬曬，適用與沒(méi)接觸過(guò)json的人員，其中json2。js請(qǐng)到j(luò)son官網(wǎng)下載。
    2010-03-03
  • 微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果

    微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-07-07

最新評(píng)論