Html5 implements WeChat airplane-hitting games

Comments: This article mainly introduces html5 to implement aircraft-hitting games. For more information, see

Html5-based aircraft-hitting Games use this small game to learn about HTML5. This is a direction for WEB development.

The Code is as follows:
// JavaScript Document
Var c = document. getElementById ("dotu ");
Var cxt = c. getContext ("2d ");
Var img = newImg ("./assets/bg_01.jpg ");
Var fps;
Cxt. drawImage (img, 480,800 );

Var flivverLog = 0;
Var flivver1 = newImg ("./assets/flivver.png ");
Var flivver2 = newImg ("./assets/flivver2.png ");
Var flivver3 = newImg ("./assets/flivver3.png ");

// Used to record the game time, the faster it gets to the back
Var time1 = 0;
Var time2 = 80;

// Points
Var jifen = 0;

Function getSudu (){
Var number = parseInt (Math. random () * 10 );
If (number <5 & number> 0 ){
Return number;
}
Return 1;
}
// Aircraft object
Function flivverObj (hp, ewidth, eheight, eimg, esudu ){
// Random X
This. x = parseInt (Math. random () * 460 + 1 );
This. y = 0;
// Blood volume
This. hp = hp;
// Beat
This. hit = 0;
// Whether it is dead
This. over = 0;

This. width = ewidth;
This. height = eheight;
This. img = eimg;
This. sudu = esudu;
}

// Obtain the plane
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 ();
Condition ('.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> ');
Certificate ('{sil'}.html ('you'). hide (). fadeIn (1000, function (){
Certificate (this).html ('You shy'). hide (). fadeIn (1000, function (){
Certificate (this).html ('<a href = "javascript: location. reload ();" style = "color: # cc0000" title = ""> you have crashed </a>
'+ Jifen +' Fen '). hide (). fadeIn ();
});
});
}

(Function (cxt ){
Var dotu = {nums: 0 };
// Used to store small aircraft
Var flivver = new Array ();
Var flivswitchmg = newImg ("./assets/flivver.png ");
// Yourself
Var me = {x: 240, y: 750 };
Var meImg = newImg ('Assets/me.png ');
// Bullet
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 ();
// Set the background
Dotu. setBg ();
// Set up a plane
Dotu. setFlivver ();
// Draw yourself
Dotu. setMe ();
// Bullet
Dotu. cartridge ();


Cxt. font = "italic 20px ";
Cxt. strokeText ("points:" + jifen, 10, 30 );

Certificate ('{fjs'}.html (flivver. length );
Certificate ('{zds'}.html (cartridges. length );
Certificate ('0000scfj'0000.html ("1000/" + time2 + "millisecond ");
}

Dotu. setTimes = function (){
Time1 ++;
// 1 shift in 100 seconds
If (time1 = 1000 ){
Time1 = 0;
Time2 = (time2 = 20 )? 20: time2-20;
}

}


/**
* Set the moving background.
*/
Dotu. setBg = function (){
Dotu. nums ++;
If (dotu. nums = 800 ){
Dotu. nums = 0;
}
// Canvas background
Cxt. drawImage (img, 0, dotu. nums, 480,800 );
Cxt. drawImage (img, 0, dotu. nums-800,480,800 );
}

Dotu. setFlivver = function (){
// Generate an airplane
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;
// Delete the plane if it exceeds the screen
If (flivver [a]. y> 780 ){
Flivver. splice (a, 1 );
}
// Draw a plane to the canvas


// The plane is killed.
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 );
// Determine whether or not you have died
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 --;
}
}

}
}

// Update your distance
Dotu. setMe = function (){
Cxt. drawImage (meImg, me. x, me. y, 64, 72 );
}

// Update the bullet Method
Dotu. cartridge = function (){
If (dotu. nums % 10 = 0 ){
Cartridges. push (new cartridge (me. x + 30, me. y ));
}

For (I in cartridges ){
// Fly to the top and delete the OBJ
If (cartridges [I]. y <0 ){
Cartridges. splice (I, 1 );
Continue;
}


Cartridges [I]. y-= 20;
// Draw a plane to the canvas
Cxt. drawImage (cartridgeImg, cartridges [I]. x, cartridges [I]. y, 7,17 );

// When the bullet hits the plane
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;
Nickname ('{isdz'{.html ('hit number' + j );

If (flivver [j]. hp> 1 ){
Flivver [j]. hp-= 80;
} Else {
Flivver [j]. over = 40;
Jifen ++ = 50000;
}
// The bullet disappears.
Cartridges. splice (I, 1 );
Break;
}
}
}
}

// Bind a mouse event
C. addEventListener ('mousemove ', function onMouseMove (evt ){
Me. x = evt. layerX-$ ('# dotu'). offset (). left-32;
Me. y = evt. layerY-36;
Certificate ('{sbx'{.html (me. x );
Certificate ('{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 );

The Code is as follows:
<! 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> stopover-multi-path </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>
<Div class = "content"> <canvas id = "dotu" width = "480" height = "800"> </canvas> </div>
<Div class = "blog"> <a href = "/"> return to the blog homepage </a> </div>
<Div class = "info">
Mouse X: <span id = "sbX"> </span>
Mouse Y: <span id = "sbY"> </span>
Aircraft quantity: <span id = "fjs"> </span>
Number of bullets: <span id = "zds"> </span>
Hit: <span id = "isdz"> </span>
Aircraft generation time: <span id = "scfj"> </span>

</Div>
<Script type = "text/javascript" src = "./dotu_game.js"> </script>
</Body>
</Html>