七夕情人节也不要忘了打游戏喔喔～，下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们。
首先给大家展示效果图：
查看演示       源码下载
纯javascript模仿微信打飞机游戏，做网页小游戏的借鉴下，界面设计是竖长形仿手机屏幕风格，游戏效果流畅。具有分数统计，里面的js封装类中包括有创建飞机类、飞机移动行为控制，创建子弹类，产生min到max之间的随机数，判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件，为暂停界面的继续按钮添加暂停事件，创建敌方飞机类、碰撞判断、完成界面的初始化，敌方小飞机一个，我方飞机一个。
    //获得主界面
复制代码 代码如下:
var maindiv=document.getelementbyid(maindiv);
//获得开始界面
复制代码 代码如下:
var startdiv=document.getelementbyid(startdiv);
//获得游戏中分数显示界面
复制代码 代码如下:
var scorediv=document.getelementbyid(scorediv);
//获得分数界面
复制代码 代码如下:
var scorelabel=document.getelementbyid(label);
//获得暂停界面
复制代码 代码如下:
var suspenddiv=document.getelementbyid(suspenddiv);
//获得游戏结束界面
复制代码 代码如下:
var enddiv=document.getelementbyid(enddiv);
//获得游戏结束后分数统计界面
复制代码 代码如下:
var planscore=document.getelementbyid(planscore);
//初始化分数
var scores=;/* 创建飞机类 */function plan(hp,x,y,sizex,sizey,score,dietime,sudu,boomimage,imagesrc){ this.planx=x; this.plany=y; this.imagenode=null; this.planhp=hp; this.planscore=score; this.plansizex=sizex; this.plansizey=sizey; this.planboomimage=boomimage; this.planisdie=false; this.plandietimes=; this.plandietime=dietime; this.plansudu=sudu;//行为/*移动行为 */ this.planmove=function(){ if(scores&&scores&&scores&&scores&&scores<=){ this.imagenode.style.top=this.imagenode.offsettop+this.plansudu++px; } else{ this.imagenode.style.top=this.imagenode.offsettop+this.plansudu++px; } } this.init=function(){ this.imagenode=document.element(img); this.imagenode.style.left=this.planx+px; this.imagenode.style.top=this.plany+px; this.imagenode.src=imagesrc; maindiv.appendchild(this.imagenode); } this.init();}/*创建子弹类 */function bullet(x,y,sizex,sizey,imagesrc){ this.bulletx=x; this.bullety=y; this.bulletimage=null; this.bulletattach=; this.bulletsizex=sizex; this.bulletsizey=sizey;//行为/* 移动行为 */ this.bulletmove=function(){ this.bulletimage.style.top=this.bulletimage.offsettop-+px; } this.init=function(){ this.bulletimage=document.element(img); this.bulletimage.style.left= this.bulletx+px; this.bulletimage.style.top= this.bullety+px; this.bulletimage.src=imagesrc; maindiv.appendchild(this.bulletimage); } this.init();}/* 创建单行子弹类 */function oddbullet(x,y){ bullet.call(this,x,y,,,image/bullet.png);}/*创建敌机类 */function enemy(hp,a,b,sizex,sizey,score,dietime,sudu,boomimage,imagesrc){ plan.call(this,hp,random(a,b),-,sizex,sizey,score,dietime,sudu,boomimage,imagesrc);}//产生min到max之间的随机数function random(min,max){ return math.floor(min+math.random()*(max-min));}/*创建本方飞机类 */function ourplan(x,y){ var imagesrc=image/我的飞机.gif; plan.call(this,,x,y,,,,,,image/本方飞机爆炸.gif,imagesrc); this.imagenode.setattribute('id','ourplan');}/* 创建本方飞机 */var selfplan=new ourplan(,);//移动事件var ourplan=document.getelementbyid('ourplan');var yidong=function(){ var oevent=window.event||arguments[]; var chufa=oevent.srcelement||oevent.target; var selfplanx=oevent.clientx-; var selfplany=oevent.clienty; ourplan.style.left=selfplanx-selfplan.plansizex/+px; ourplan.style.top=selfplany-selfplan.plansizey/+px;// document.getelementsbytagname('img')[].style.left=selfplanx-selfplan.plansizex/+px;// document.getelementsbytagname('img')[]..style.top=selfplany-selfplan.plansizey/+px;}/*暂停事件 */var number=;var zanting=function(){ if(number==){ suspenddiv.style.display=block; if(document.removeeventlistener){ maindiv.removeeventlistener(mousemove,yidong,true); bodyobj.removeeventlistener(mousemove,bianjie,true); } else if(document.detachevent){ maindiv.detachevent(onmousemove,yidong); bodyobj.detachevent(onmousemove,bianjie); } clearinterval(set); number=; } else{ suspenddiv.style.display=none; if(document.addeventlistener){ maindiv.addeventlistener(mousemove,yidong,true); bodyobj.addeventlistener(mousemove,bianjie,true); } else if(document.attachevent){ maindiv.attachevent(onmousemove,yidong); bodyobj.attachevent(onmousemove,bianjie); } set=setinterval(start,); number=; }}//判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件var bianjie=function(){ var oevent=window.event||arguments[]; var bodyobjx=oevent.clientx; var bodyobjy=oevent.clienty; if(bodyobjx||bodyobjy){ if(document.removeeventlistener){ maindiv.removeeventlistener(mousemove,yidong,true); } else if(document.detachevent){ maindiv.detachevent(onmousemove,yidong); } } else{ if(document.addeventlistener){ maindiv.addeventlistener(mousemove,yidong,true); } else if(document.attachevent){ maindiv.attachevent(nomousemove,yidong); } }}
//暂停界面重新开始事件
//function chongxinkaishi(){// location.reload(true);// startdiv.style.display=none;// maindiv.style.display=block;//}var bodyobj=document.getelementsbytagname(body)[];if(document.addeventlistener){ //为本方飞机添加移动和暂停 maindiv.addeventlistener(mousemove,yidong,true); //为本方飞机添加暂停事件 selfplan.imagenode.addeventlistener(click,zanting,true); //为body添加判断本方飞机移出边界事件 bodyobj.addeventlistener(mousemove,bianjie,true); //为暂停界面的继续按钮添加暂停事件 suspenddiv.getelementsbytagname(button)[].addeventlistener(click,zanting,true);// suspenddiv.getelementsbytagname(button)[].addeventlistener(click,chongxinkaishi,true); //为暂停界面的返回主页按钮添加事件 suspenddiv.getelementsbytagname(button)[].addeventlistener(click,jixu,true);}else if(document.attachevent){ //为本方飞机添加移动 maindiv.attachevent(onmousemove,yidong); //为本方飞机添加暂停事件 selfplan.imagenode.attachevent(onclick,zanting); //为body添加判断本方飞机移出边界事件 bodyobj.attachevent(onmousemove,bianjie); //为暂停界面的继续按钮添加暂停事件 suspenddiv.getelementsbytagname(button)[].attachevent(onclick,zanting);// suspenddiv.getelementsbytagname(button)[].attachevent(click,chongxinkaishi,true); //为暂停界面的返回主页按钮添加事件 suspenddiv.getelementsbytagname(button)[].attachevent(click,jixu,true);}//初始化隐藏本方飞机selfplan.imagenode.style.display=none;/*敌机对象数组 */var enemys=[];/*子弹对象数组 */var bullets=[];var mark=;var mark=;var backgroundpositiony=;/*开始函数 */function start(){ maindiv.style.backgroundpositiony=backgroundpositiony+px; backgroundpositiony+=.; if(backgroundpositiony==){ backgroundpositiony=; } mark++; /* 创建敌方飞机 */ if(mark==){ mark++; //中飞机 if(mark%==){ enemys.push(new enemy(,,,,,,,random(,),image/中飞机爆炸.gif,image/enemy_fly_.png)); } //大飞机 if(mark==){ enemys.push(new enemy(,,,,,,,,image/大飞机爆炸.gif,image/enemy_fly_.png)); mark=; } //小飞机 else{ enemys.push(new enemy(,,,,,,,random(,),image/小飞机爆炸.gif,image/enemy_fly_.png)); } mark=; }/*移动敌方飞机 */ var enemyslen=enemys.length; for(var i=;i){ maindiv.removechild(enemys[i].imagenode); enemys.splice(i,); enemyslen--; } //当敌机死亡标记为true时，经过一段时间后清除敌机 if(enemys[i].planisdie==true){ enemys[i].plandietimes+=; if(enemys[i].plandietimes==enemys[i].plandietime){ maindiv.removechild(enemys[i].imagenode); enemys.splice(i,); enemyslen--; } } }/*创建子弹*/ if(mark%==){ bullets.push(new oddbullet(parseint(selfplan.imagenode.style.left)+,parseint(selfplan.imagenode.style.top)-)); }/*移动子弹*/ var bulletslen=bullets.length; for(var i=;i 以上代码简单吧，使用纯javascript模仿微信打飞机小游戏，当时方法还有很多种，欢迎大家一起来分享。