Html5 implementation of WeChat airplane hitting game code sharing

This article mainly introduces html5 to implement aircraft logging games. For more information, see this article.

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 Documentvar c = document. getElementById ("dotu"); var cxt = c. getContext ("2d"); var img = newImg (". /assets/bg_01.jpg "); var fps; cxt. drawImage (img, 0, 0, 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 the game is, var time1 = 0; var time2 = 80; // points var jifen = 0; functi On 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;} // gets the airplane function getFlivver (Type) {switch (type) {case 1: return new flivverObj (, 50, 30, flivver1, getSudu (); case 2: return new flivverObj (, 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 (); ('.content'salary .css ('position', 'relative '); $ ('. content '). append (''); $ ('{Sil'}.html ('you '). hide (). fadeIn (1000, function () {users (this).html ('You shy '). hide (). fadeIn (1000, function () {token (this).html ('you have loose '+ jifen + 'Fen '). hide (). fadeIn () ;}) ;}( function (cxt) {var dotu = {nums: 0}; // used to store small aircraft var flivver = new Array (); var fliv1_mg = newImg (". /assets/flivver.png "); // self var me = {x: 240, y: 750}; var meImg = newImg ('assets/me.png '); // bullet var cartridges = new Array (); var cartridge Img = 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 the small aircraft dotu. setFlivver (); // draw your own dotu. setMe (); // bullet dotu. cartridge (); cxt. font = "italic 20px "; cxt. strokeText ("points:" + jifen, 10, 30); character ('{fjs'}.html (flivver. length); parameter ('{zds'}.html (cartridges. length); $ ('0000scfj'0000.html ("1000/" + time2 + "millisecond");} dotu. setTimes = function () {time1 ++; // if (time1 = 100) {time1 = 0; time2 = (time2 = 20) in the second of 1000 )? 20: time2-20;}/*** set the moving background */dotu. setBg = function () {dotu. nums ++; if (dotu. nums = 800) {dotu. nums = 0;} // background cxt of the canvas. drawImage (img, 0, dotu. NUM, 480,800); cxt. drawImage (img, 0, dotu. nums-800,480,800);} dotu. setFlivver = function () {// generates 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; // if the screen is exceeded, delete the aircraft if (flivver [a]. y> 780) {flivver. splice (a, 1) ;}/// draw a plane onto the canvas // death 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); // determines whether 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 to 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) {// The OBJ will be deleted if (cartridges [I] when flying to the top. y <0) {cartridges. splice (I, 1); continue;} cartridges [I]. y-= 20; // draw the plane to the canvas cxt. drawImage (cartridgeImg, cartridges [I]. x, cartridges [I]. y, 7, 17); // The case where 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 ('hitting number' + j); if (flivver [j]. hp> 1) {flivver [j]. hp-= 80;} else {flivver [j]. over = 40; jifen + = 50000;} // The bullet disappears from cartridges. splice (I, 1); break ;}}// bind the mouse event c. addEventListener ('mousemove ', function onMouseMove (evt) {me. x = evt. layerX-$ ('# dotu '). offset (). left-32; me. y = evt. layerY-36; ('{sbx'{.html (me. x); condition ('{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. updates, 1000/65 );

The code is as follows:

 Stopover-multi-path