介绍
这篇文章将为大家详细讲解有关html5实现微信打飞机游戏的示例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
html5实现微信的打飞机游戏,利用这个小游戏学习一个html5吧,这是开发WEB的一个方向
代码如下:
//,JavaScript 文档 var c =, . getelementbyid (“dotu"); var cxt =, c.getContext (“2 d"); var img =, newImg(“。/资产/bg_01.jpg"); var fps; cxt.drawImage (img, 0, 0480800); var flivverLog =, 0; var flivver1 =, newImg(“。/资产/flivver.png"); var flivver2 =, newImg(“。/资产/flivver2.png"); var flivver3 =, newImg(“。/资产/flivver3.png");//,用于记录游戏的时间,越到后面越快 var time1 =, 0; var time2 =, 80;//,积分 var jifen =, 0; function getSudu () { ,,var number =,方法(math . random () * 10); ,,如果(number & lt;, 5,,,, number 祝辞,0){ ,,,,,,return 数量; ,,} ,,return 1; }//,飞机的对象 function flivverObj(惠普、ewidth eheight、eimg esudu) {//,,,随机的X ,,this.x =,方法(math . random () * 460 + 1); ,,this.y =, 0;//,,,血量 ,,this.hp =,惠普; ,,//,挨打,,, ,,this.hit =, 0;//,,,是否死亡 ,,this.over =, 0; ,,this.width =, ewidth; ,,this.height =, eheight; ,,this.img =, eimg; ,,this.sudu =, esudu; }//,获取飞机 function getFlivver(类型){ ,,开关(类型){ ,,,,,,case 1: ,,,,,,,,,,return new flivverObj (flivver1 100、50、30日,getSudu ()); ,,,,,,case 2: ,,,,,,,,,,return new flivverObj (500、70、90、flivver2 getSudu ()); ,,,,,,case 3: ,,,,,,,,,,return new flivverObj (1000、110170、flivver3, getSudu ()); ,,} } function 筒(x, y) { ,,this.x =, x; ,,this.y =, y,, } function 败阵(){ ,,window.clearTimeout (fps); ,,//$ (& # 39;# dotu& # 39;) .fadeOut (); ,,美元(& # 39;.content& # 39;) . css(& # 39;位置# 39;& # 39;相对# 39;); ,,美元(& # 39;.content& # 39;) .append (& # 39; & lt; span 风格=拔恢?绝对的,,:5 px;,左:2 px;,字体大小:150 px;,颜色:# cc0000;,, text-align: center", id=皊il"祝辞& lt;/span> & # 39;); ,,美元(& # 39;#银# 39;). html(& # 39;你& # 39;)hide () .fadeIn(1000年,函数(){ ,,,,,,(这)美元. html(& # 39;你屎& # 39;)hide () .fadeIn(1000年,函数(){ ,,,,,,,,,,(这). html(美元& # 39;& lt; a  href=https://www.yisu.com/zixun/眏avascript: location.reload();“风格=把丈?# cc0000”title=爸匦驴?>你屎了> ”+ jifen +“分”)hide () .fadeIn (); }); }); } (函数(cxt) { var dotu={num: 0};//用于存放小飞机 var失败=new Array (); var flivverImg=newImg(“。/资产/flivver.png”);//自己 我var={x: 240 y: 750}; var meImg=newImg(资产/me.png ');//子弹 var墨盒=new Array (); var cartridgeImg=newImg('/资产/cartridge.png。'); var boo1=newImg('/资产/boo1.png。'); var/=newImg('/资产/over.png。');//dotu。更新=function () { dotu.setTimes ();//设置背景 dotu.setBg ();//设置小飞机 dotu.setFlivver ();//画自己 dotu.setMe ();//子弹 dotu.cartridge (); cxt。字体="斜体20 px微软雅黑”; cxt。strokeText(“积分:“+ jifen, 10、30); $ (' # fj ') . html (flivver.length); $ (' # zds ') . html (cartridges.length); $ (" # scfj”)。html (1000/+ time2 +“毫秒”); } dotu。凝固时间=function () { time1 + +;//100秒1个档位 如果(time1==1000) { time1=0; time2=(time2==20) ?20:time2 - 20; } }/* * *设置移动的背景 */dotu。setBg=function () { dotu.nums + +; 如果(dotu。num==800) { dotu。num=0; }//画布的背景 cxt.drawImage (img 0 dotu.nums, 480800); dotu cxt.drawImage (img, 0。num - 800480800); } dotu。setFlivver=function () {//生成飞机 如果(dotu。num % time2==0) { flivverLog + +; 如果(flivverLog % 6==0) { flivver.push (getFlivver (2)); }else if (flivverLog % 13==0) { flivver.push (getFlivver (3)); 其他}{ flivver.push (getFlivver (1)); } } 对(失败){ 失败[a]。y +=失败[一].sudu;//如果超出屏幕将该小飞机删除 如果失败(一个)。y> 780) { 失败。接头(1); }//将小飞机画到画布上//小飞机死亡 如果失败(一个)。/> 0){ 失败[a]。——; 如果失败(一个)。在> 20){ cxt.drawImage (boo1失败[a]。x +失败[a]。宽/2 - 20,失败[a]。y +失败[a]。高度/2 -10,41岁,39); }else if(失败[a]。/> 2){ cxt.drawImage(结束,失败[a]。x +失败[a]。宽/2 - 20,失败[a]。y +失败[a]。null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null nullhtml5实现微信打飞机游戏的示例