七夕情人节也不要忘了打游戏喔喔～，下面小编为大家准备的情人节礼物之纯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<=){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px"; } else if(scores>&&scores<=){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px"; } else if(scores>&&scores<=){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px"; } else if(scores>&&scores<=){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px"; } else if(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<||bodyobjX>||bodyobjY<||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); } } }
//暂停界面重新开始事件