html5实现微信打飞机游戏代码分享
| 这篇文章主要介绍了html5实现微信打飞机游戏,需要的朋友可以参考下 html5实现微信的打飞机游戏,利用这个小游戏学习一个HTML5吧，这是开发WEB的一个方向 代码如下: // JavaScript Documentvar 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实现微信打飞机游戏代码分享的详细内容，更多请关注php中文网其它相关文章！ |