HTML5 implements WeChat masturbation game code sharing

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

// 用于记录游戏的时间，越到后面越快
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);
   //$(&#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="重新开始">你屎了</a>
&#39; + jifen  + &#39; 分&#39;).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(&#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();
       // 设置背景
       dotu.setBg();
       // 设置小飞机
       dotu.setFlivver();
       // 画自己
       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个档位
       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;
                   $(&#39;#isdz&#39;).html(&#39;打中了编号&#39; + j);

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

   // 绑定鼠标事件
   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>打飞机 - 多途</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>

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!