[Html5] Write a plane-hitting game like WeChat

Reading the PHP kernel in recent days is getting depressed. I'm disappointed that this game is hot and has been updated! This game has no playability! For entertainment with HTML5, HTML5 APIs that have been viewed for a long time ago are so bad that you do not need to spray them:

The material and source code are packaged here ..
Http://pan.baidu.com/share/link? Consumer id = 148488406 & uk = 704908641

// 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; fu Nction 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 getFl Ivver (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 ('<Span style = "position: absolute; top: 5px; left: 2px; font-size: 150px; color: # cc0000; text-align: center "id =" sil "> </span> '); ('your sil'.html .html ('you '). hide (). fadeIn (1000, function () {users (this).html ('You shy '). hide (). fadeIn (1000, function () {signature (this).html ('<a href = "javascript: location. reload (); "style =" color: # cc0000 "title =" Start again "> you have crashed </a> <br> '+ jifen +' Fen '). hide (). fadeIn () ;}) ;}( function (cxt) {var dotu = {nums: 0}; // used to store small aircraft var flivver = new Array (); var flivw.mg = newImg (". /assets/flivver.png "); // self 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 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); parameter ('%scfj'%.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 );

<! DOCTYPE html>