Pure JavaScript imitate micro-letter playing _javascript game skills

Tanabata Valentine's Day also don't forget to play the game Oh ~, the following small set for everyone prepared Valentine's Day gift of pure JavaScript imitation micro-letter playing aircraft games to share the love of the world.

First to show you the effect of the picture:

View Demo Source Download

Pure JavaScript imitate micro-letter playing aircraft games, do web games for reference, interface design is vertical long shape imitation mobile phone screen style, the game effect is smooth. With score statistics, inside the JS package includes the creation of aircraft, aircraft mobile behavior control, create bullets, the number of min to max random numbers, judge whether the plane moved out of the boundary, if the move out of the boundary, then cancel the MouseMove event, and vice versa plus MouseMove event, To pause the continuation button of the interface to add a pause event, create an enemy aircraft class, collision judgment, complete interface initialization, one of the enemy small aircraft, one of our aircraft.

//Get the main interface

Copy Code code as follows:

var Maindiv=document.getelementbyid ("Maindiv");

//Get Started interface

Copy Code code as follows:

var Startdiv=document.getelementbyid ("Startdiv");

//Get the score display interface in the game

Copy Code code as follows:

var Scorediv=document.getelementbyid ("Scorediv");

Get the Score interface

Copy Code code as follows:

var Scorelabel=document.getelementbyid ("label");

Get Pause interface

Copy Code code as follows:

var Suspenddiv=document.getelementbyid ("Suspenddiv");

//Get the game End Interface

Copy Code code as follows:

var Enddiv=document.getelementbyid ("Enddiv");

//Get score Statistic interface after game end

Copy Code code as follows:

var Planscore=document.getelementbyid ("Planscore");

//Initialization score

var scores=;/ * Create aircraft class * *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;//behavior/* Mobile behavior * *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 (); }/ * Create bullet type * *function Bullet (X,Y,SIZEX,SIZEY,IMAGESRC) {this.bulletx=x;
 This.bullety=y;
 This.bulletimage=null;
 this.bulletattach=;
 This.bulletsizex=sizex; This.bulletsizey=sizey;//behavior/* Mobile behavior * *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 (); }/ * Create a single bullet type * *function Oddbullet (x,y) {bullet.call (this,x,y,,, "image/bullet.png");* * Create enemy classfunction 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); }//Generate random numbers between min and Maxfunction Random (Min,max) {return Math.floor (Min+math.random () * (Max-min));}* * Create our own aircraft class * *function Ourplan (x,y) {var imagesrc= "image/my plane. gif";
 Plan.call (this,,x,y,,,,,, "image/plane exploded. gif", IMAGESRC);
This.imagenode.setAttribute (' id ', ' Ourplan '); }* * Create our own aircraftvar selfplan=new ourplan (,);//Move Eventsvar 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"; }/ * Pause Event/*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=; }
}//Judge whether the plane is moving out of the boundary, and if you move out of the boundary, cancel the MouseMove event, plus the MouseMove eventvar 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); }
 }
}

Pause Interface Restart Event

function Chongxinkaishi () {//Location.reload (TRUE);//startdiv.style.display= "none";//maindiv.style.display= "
Block ";
var bodyobj=document.getelementsbytagname ("Body") []; if (Document.addeventlistener) {//For local aircraft add move and pauseMaindiv.addeventlistener ("MouseMove", yidong,true);//To add a pause event for the local aircraftSelfplan.imagenode.addEventListener ("click", Zanting,true);//For the body to add to judge the side of the aircraft moving out of the boundary incidentBodyobj.addeventlistener ("MouseMove", bianjie,true);//Pause event added for the pause interface's RESUME buttonSuspenddiv.getelementsbytagname ("button") [].addeventlistener ("click", Zanting,true); Suspenddiv.getelementsbytagname ("button") [].addeventlistener ("click", Chongxinkaishi,true);//The return home button for the Pause interface adds eventsSuspenddiv.getelementsbytagname ("button") [].addeventlistener ("click", Jixu,true); else if (document.attachevent) {//For local aircraft add mobileMaindiv.attachevent ("OnMouseMove", Yidong);//To add a pause event for the local aircraftSelfplan.imagenode.attachEvent ("onclick", zanting);//For the body to add to judge the side of the aircraft moving out of the boundary incidentBodyobj.attachevent ("OnMouseMove", Bianjie);//Pause event added for the pause interface's RESUME buttonSuspenddiv.getelementsbytagname ("button") [].attachevent ("onclick", zanting); Suspenddiv.getelementsbytagname ("button") [].attachevent ("click", Chongxinkaishi,true);//The return home button for the Pause interface adds eventsSuspenddiv.getelementsbytagname ("button") [].attachevent ("click", Jixu,true); }//Initialize hidden local planeSelfplan.imagenode.style.display= "None";/ * Enemy Object array/*var enemys=[];/ * Bullets Object array /*var bullets=[];
var mark=;
var mark=; var backgroundpositiony=;/ * Start function * *function Start () {maindiv.style.backgroundpositiony=backgroundpositiony+ "px";
 backgroundpositiony+=.;
 if (backgroundpositiony==) {backgroundpositiony=; } mark++;* * Create enemy aircraft /if (mark==) {mark++;//Medium planeif (mark%==) {Enemys.push (The new Enemy (,,,,,,, random (,), "the aircraft exploded in image/. gif", "image/enemy_fly_.png")); }//Big planeif (mark==) {Enemys.push (New enemy (,,,,,,,, "image/big plane explosion, gif", "image/enemy_fly_.png"));
 mark=; }//Small planeelse{Enemys.push (New Enemy (,,,,,,, random (,), "image/small plane explosion, gif", "image/enemy_fly_.png"));
 } mark=; }* * Mobile enemy aircraft /var enemyslen=enemys.length;
 for (Var i=;i<enemyslen;i++) {if (enemys[i].planisdie!=true) {enemys[i].planmove (); }* * If the enemy is out of bounds, remove the enemyif (enemys[i].imagenode.offsettop>) {maindiv.removechild (Enemys[i].imagenode);
 Enemys.splice (i,);
 enemyslen--; }////When enemy aircraft death is marked as true, after a period of time, remove enemy aircraftif (enemys[i].planisdie==true) {enemys[i].plandietimes+=;
 if (enemys[i].plandietimes==enemys[i].plandietime) {maindiv.removechild (Enemys[i].imagenode);
 Enemys.splice (i,);
 enemyslen--; }
 }
 }* * Create bullets /if (mark%==) {Bullets.push (New Oddbullet (parseint (selfplan.imagenode.style.left) +,parseint (
 Selfplan.imagenode.style.top)); }* * Mobile bulletsvar bulletslen=bullets.length; for (Var i=;i<bulletslen;i++) {bullets[i].bulletmove ();* * If the bullet goes out of bounds, remove the bulletif (bullets[i].bulletimage.offsettop<) {maindiv.removechild (bullets[i].bulletimage);
 Bullets.splice (i,);
 bulletslen--; }
 }/ * Collision judgment * *for (Var k=;k<bulletslen;k++) {for (Var j=;j<enemyslen;j++) {//Judge the collision of the local planeif (enemys[j].planisdie==false) {if (enemys[j].imagenode.offsetleft+enemys[j].plansizex>= selfplan.imagenode.offsetleft&&enemys[j].imagenode.offsetleft<=selfplan.imagenode.offsetleft+ Selfplan.plansizex) {if (enemys[j].imagenode.offsettop+enemys[j].plansizey>=selfplan.imagenode.offsettop+ &&enemys[j].imagenode.offsettop<=selfplan.imagenode.offsettop-+selfplan.plansizey) {//crash-side plane, game over, statistical scoreSelfplan.imagenode.src= "image/the plane exploded. gif";
  enddiv.style.display= "Block";
  Planscore.innerhtml=scores;
  if (Document.removeeventlistener) {Maindiv.removeeventlistener ("MouseMove", yidong,true);
  Bodyobj.removeeventlistener ("MouseMove", bianjie,true); else if (document.detachevent) {

The above code is simple, use pure JavaScript imitate micro-letter playing aircraft games, at that time there are many ways, welcome to share together.