HTML5 implémente le partage de code de jeu de masturbation WeChat

Cet article présente principalement le HTML5 pour implémenter le jeu de masturbation WeChat. Les amis qui en ont besoin peuvent se référer à

HTML5 pour implémenter le jeu de masturbation WeChat. Utilisez ce petit jeu pour apprendre le HTML5. Ceci est pour développer WEB One direction. 🎜>

le code est le suivant :

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

le code est le suivant :

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!