This article mainly introduces html5 to implement the WeChat masturbation game. Friends who need it can refer to

html5 to implement the WeChat masturbation game. Use this small game to learn an HTML5. This is for developing WEB One direction

The code is as follows:

// 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");

// 用于記錄游戲的時(shí)間，越到后面越快
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;
}
// 飛機(jī)的對(duì)象
function flivverObj(hp,ewidth,eheight,eimg,esudu){
   // 隨機(jī)的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;
}

// 獲取飛機(jī)
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);
   //$(&#39;#dotu&#39;).fadeOut();
   $(&#39;.content&#39;).css(&#39;position&#39;,&#39;relative&#39;);
   $(&#39;.content&#39;).append(&#39;<span style="position:absolute; top:5px; left:2px; font-size:150px; color:#cc0000;  text-align:center" id="sil"></span>&#39;);
   $(&#39;#sil&#39;).html(&#39;你&#39;).hide().fadeIn(1000,function(){
       $(this).html(&#39;你屎&#39;).hide().fadeIn(1000,function(){
           $(this).html(&#39;<a href="javascript：location.reload();" style="color:#cc0000" title="重新開(kāi)始">你屎了</a>
&#39; + jifen  + &#39; 分&#39;).hide().fadeIn();
       }); 
   });
}

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

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

       dotu.setTimes();
       // 設(shè)置背景
       dotu.setBg();
       // 設(shè)置小飛機(jī)
       dotu.setFlivver();
       // 畫(huà)自己
       dotu.setMe();
       // 子彈
       dotu.cartridge();


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

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

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

   }


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

   dotu.setFlivver = function(){
       // 生成飛機(jī)
       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;
           // 如果超出屏幕將該小飛機(jī)刪除
           if(flivver[a].y > 780){
               flivver.splice(a, 1);
           }
           // 將小飛機(jī)畫(huà)到畫(huà)布上


           // 小飛機(jī)死亡
           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;
           // 將小飛機(jī)畫(huà)到畫(huà)布上
           cxt.drawImage(cartridgeImg,cartridges[i].x,cartridges[i].y,7,17);

           // 子彈碰到飛機(jī)的情況
           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;
                   $(&#39;#isdz&#39;).html(&#39;打中了編號(hào)&#39; + j);

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

   // 綁定鼠標(biāo)事件
   c.addEventListener(&#39;mousemove&#39;, function onMouseMove(evt) {
       me.x = evt.layerX - $(&#39;#dotu&#39;).offset().left - 32;
       me.y = evt.layerY -  36 ;
       $(&#39;#sbX&#39;).html(me.x);
       $(&#39;#sbY&#39;).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);

The code is as follows:

<!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>打飛機(jī) - 多途</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="/">回到博客首頁(yè)</a></p>
<p class="info">
   鼠標(biāo)X：<span id="sbX"></span>
鼠標(biāo)Y：<span id="sbY"></span>
小飛機(jī)數(shù):<span id="fjs"></span>
子彈數(shù):<span id="zds"></span>
打中:<span id="isdz"></span>
生成飛機(jī)時(shí)間:<span id="scfj"></span>

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

The above is the detailed content of HTML5 implements WeChat masturbation game code sharing. For more information, please follow other related articles on the PHP Chinese website!