html5實現微信打飛機游戲的示例

這篇文章將為大家詳細講解有關html5實現微信打飛機游戲的示例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

html5實現微信的打飛機游戲,利用這個小游戲學習一個HTML5吧，這是開發WEB的一個方向

代碼如下:

// JavaScript Document
var c = document.getElementById("dotu");
var cxt = c.getContext("2d");
var img = newImg("./assets/bg_01.jpg");
var fps;
cxt.drawImage(img,0,0,480,800);

var flivverLog = 0;
var flivver1 = newImg("./assets/flivver.png");
var flivver2 = newImg("./assets/flivver2.png");
var flivver3 = newImg("./assets/flivver3.png");

// 用于記錄游戲的時間，越到后面越快
var time1 = 0;
var time2 = 80;

// 積分
var jifen = 0;

function getSudu(){
   var number = parseInt(Math.random()*10);
   if(number < 5 && number > 0){
       return number;
   }
   return 1;
}
// 飛機的對象
function flivverObj(hp,ewidth,eheight,eimg,esudu){
   // 隨機的X
   this.x = parseInt(Math.random()*460+1);
   this.y = 0;
   // 血量
   this.hp = hp;
   // 挨打   
   this.hit = 0;
   // 是否死亡
   this.over = 0;

   this.width = ewidth;
   this.height = eheight;
   this.img = eimg;
   this.sudu = esudu;
}

// 獲取飛機
function getFlivver(type){
   switch(type){
       case 1:
           return new flivverObj(100,50,30,flivver1,getSudu());
       case 2:
           return new flivverObj(500,70,90,flivver2,getSudu());
       case 3:
           return new flivverObj(1000,110,170,flivver3,getSudu());
   }
}
function cartridge(x,y){
   this.x = x;
   this.y = y; 
}

function gameover(){
   window.clearTimeout(fps);
   //$('#dotu').fadeOut();
   $('.content').css('position','relative');
   $('.content').append('<span style="position:absolute; top:5px; left:2px; font-size:150px; color:#cc0000;  text-align:center" id="sil"></span>');
   $('#sil').html('你').hide().fadeIn(1000,function(){
       $(this).html('你屎').hide().fadeIn(1000,function(){
           $(this).html('<a href="javascript：location.reload();" style="color:#cc0000" title="重新開始">你屎了</a>
' + jifen  + ' 分').hide().fadeIn();
       }); 
   });
}

(function(cxt){
   var dotu = {nums:0};
   // 用于存放小飛機
   var flivver = new Array();
   var flivverImg = newImg("./assets/flivver.png");
   // 自己
   var me = {x:240,y:750};
   var meImg = newImg('assets/me.png');
   // 子彈
   var cartridges = new Array();
   var cartridgeImg = newImg('./assets/cartridge.png');

   var boo1 = newImg('./assets/boo1.png');
   var over = newImg('./assets/over.png');
   // 
   dotu.update = function(){

       dotu.setTimes();
       // 設置背景
       dotu.setBg();
       // 設置小飛機
       dotu.setFlivver();
       // 畫自己
       dotu.setMe();
       // 子彈
       dotu.cartridge();


       cxt.font = "italic 20px 微軟雅黑";
       cxt.strokeText("積分：" + jifen, 10, 30);

       $('#fjs').html(flivver.length);
       $('#zds').html(cartridges.length);
       $('#scfj').html("1000/" + time2 + " 毫秒");
   }

   dotu.setTimes = function(){
       time1++ ;
       // 100 秒 1個檔位
       if(time1 == 1000){
           time1 = 0;
           time2 = (time2 == 20) ? 20 : time2 - 20;
       }

   }


   /**
    * 設置移動的背景
    */
   dotu.setBg = function(){
       dotu.nums++;
       if(dotu.nums == 800){
           dotu.nums = 0;  
       }
       // 畫布的背景
       cxt.drawImage(img,0,dotu.nums,480,800);
       cxt.drawImage(img,0,dotu.nums - 800,480,800);
   }

   dotu.setFlivver = function(){
       // 生成飛機
       if(dotu.nums % time2 == 0){
           flivverLog++;
           if(flivverLog % 6 == 0){
               flivver.push(getFlivver(2));
           }else if(flivverLog % 13 == 0){
               flivver.push(getFlivver(3));
           }else{
               flivver.push(getFlivver(1));
           }

       }

       for(a in flivver){



           flivver[a].y += flivver[a].sudu;
           // 如果超出屏幕將該小飛機刪除
           if(flivver[a].y > 780){
               flivver.splice(a, 1);
           }
           // 將小飛機畫到畫布上


           // 小飛機死亡
           if(flivver[a].over > 0){
               flivver[a].over --;

               if(flivver[a].over > 20){
                   cxt.drawImage(boo1,flivver[a].x + flivver[a].width/2 - 20  ,flivver[a].y + flivver[a].height / 2 -10,41,39);
               }else if(flivver[a].over > 2){
                   cxt.drawImage(over,flivver[a].x + flivver[a].width/2 - 20 ,flivver[a].y + flivver[a].height / 2 -10,40,43);
               }else{
                   flivver.splice(a, 1);
               }



           }else{
               cxt.drawImage(flivver[a].img,flivver[a].x,flivver[a].y,flivver[a].width,flivver[a].height);
               // 判斷自己是否死亡
               if( me.x > (flivver[a].x - flivver[a].width + 20) && (me.x) <(flivver[a].x + flivver[a].width - 20) && (me.y) < (flivver[a].y + flivver[a].height + 20) && (me.y + 72) > (flivver[a].y - 20)){
                   gameover();
               }

               if(flivver[a].hit > 0){
                   cxt.drawImage(boo1,flivver[a].x + flivver[a].width/2 - 20 ,flivver[a].y + flivver[a].height / 2 -10,41,39);
                   //cxt.drawImage(boo1,flivver[a].x + 5 ,flivver[a].y,41,39);
                   flivver[a].hit--;
               }
           }

       }
   }

   // 更新自己的距離
   dotu.setMe = function(){
       cxt.drawImage(meImg,me.x,me.y,64,72);
   }

   // 更新子彈方法
   dotu.cartridge = function(){
       if(dotu.nums % 10 == 0){
           cartridges.push(new cartridge(me.x + 30,me.y));
       }

       for(i in cartridges){
           // 飛到頂部就將OBJ刪除掉
           if(cartridges[i].y < 0){
               cartridges.splice(i, 1);
               continue;
           }


           cartridges[i].y -= 20;
           // 將小飛機畫到畫布上
           cxt.drawImage(cartridgeImg,cartridges[i].x,cartridges[i].y,7,17);

           // 子彈碰到飛機的情況
           for(j in flivver){
               if(flivver[j].over > 0){
                   continue;
               }
               if(cartridges[i].x > flivver[j].x && cartridges[i].x < flivver[j].x+ flivver[j].width && cartridges[i].y >  flivver[j].y && cartridges[i].y -flivver[j].height < flivver[j].y){

                   flivver[j].hit = 10;
                   $('#isdz').html('打中了編號' + j);

                   if(flivver[j].hp > 1){
                       flivver[j].hp -= 80;
                   }else{
                       flivver[j].over = 40;
                       jifen += 50000;
                   }
                   // 子彈消失
                   cartridges.splice(i, 1);
                   break;
               }
           }
       }
   }

   // 綁定鼠標事件
   c.addEventListener('mousemove', function onMouseMove(evt) {
       me.x = evt.layerX - $('#dotu').offset().left - 32;
       me.y = evt.layerY -  36 ;
       $('#sbX').html(me.x);
       $('#sbY').html(me.y);
   });

   fps = setInterval(dotu.update, 1000/100); 
}(cxt))


function newImg(src){
   var obj = new Image();
   obj.src = src;
   return obj;
}

//setInterval(h.update, 1000/65);

代碼如下:

<!DOCTYPE html>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打飛機 - 多途</title>
<script type="text/javascript" src="./jquery.min.1.7.1.js"></script>
<style>
body{padding:0; margin:0; text-align:center}
.content{border:1px #000 solid; width:480px; margin:0 auto; height:800px; display:block; font-size:72px;}
.info,.blog{border:1px #000 solid; position:fixed; top:5px; right:5px; width:150px; text-align:left}
.blog{ left:10px; background:#000; text-align:center; width:100px}
.blog a{ color: #FFF; text-decoration:none; font-size:15px; }
</style>
</head>
<body>
<p class="content"><canvas id="dotu" width="480" height="800"></canvas></p>
<p class="blog"><a href="/">回到博客首頁</a></p>
<p class="info">
   鼠標X：<span id="sbX"></span>
鼠標Y：<span id="sbY"></span>
小飛機數:<span id="fjs"></span>
子彈數:<span id="zds"></span>
打中:<span id="isdz"></span>
生成飛機時間:<span id="scfj"></span>

</p>
<script type="text/javascript" src="./dotu_game.js"></script>
</body>
</html>

關于“html5實現微信打飛機游戲的示例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。