A simple JS game, the need for jquery plug-in, is based on the Floyd of the game to make some simplification and modification, the interface is ugly, add some material on the good looking, such as adding a background picture, bullets into various gift pictures, yellow brick for gift baskets and so on, It's good to use the code to relax and unwind.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
var Fly = function () {//board brick DOM element this.dom = null; Brick information this.left = 0; this.top = 0; this.width = 0; this.height = 0; Move state this.ismove = false; SetInterval id this.moveid = null;} Fly.prototype = {//move displacement movepx:10,//Move position update frequency movespeed:30,//Initialize tile position init:function (gamewidth, game Height) {this.dom = $ (' #fly '); This.width = This.dom.width (); This.height = This.dom.height (); This.left = (gamewidth-this.width)/2; This.top = Gameheight-this.height; This.update (); },//Update location update:function () {this.dom.css ({' Left ': this.left, ' top ': this.top}); },//keyboard pressed event keydown:function (E, gamewidth) {switch (E.keycode) {//direction left case 37: { if (!this.ismove) {this.ismove = true; This.move (' left '); } break; }; Direction right Case 39: {if (!this.ismove) {this.ismove = true; This.move (' right ', gamewidth); } break; }; }},///Keyboard release event Keyup:function (e) {if (E.keycode = = Notoginseng | | e.keycode = =) {this.stop (); }},//board Brick Move move:function (dir, gamewidth) {_this = this; if (dir = = ' left ') {This.moveid = SetInterval (function () {_this.left = _this.left-_this.mov EPX <= 0? 0: _this.left-_this.movepx; _this.update (); }, This.movespeed); } else {This.moveid = SetInterval (function () {_this.left = _this.left + _this.movepx & gt;= gamewidth-_this.width? Gamewidth-_this.width: _this.left + _this.movepx; _this.update (); }, This.movespeed); }}, Stop:function () {this.ismove = false; Clearinterval (This.moveid); }}//bullet class, type var Bullet = function (type) {//bullet dom element this.dom = null; Bullet information this.left = 0; this.top = 0; this.width = 0; this.height = 0; This.type = type; This.create ();} Bullet.prototype = {//bullet type and color mapping table Bullettype: {"Good": "White", "bad": "Blue", "Heart": "Red" },//move displacement movepx:10,//bullet speed movespeed:50,//Create Bullet Dom Create:function () {this.width = 5; This.height = 5; This.dom = $ (' <div style= "position:absolute;width: ' + this.width + ' px;height: ' + this.height + ' Px;overflow:hidden;ba Ckground: ' + this.bullettype[this.type] + '; ' ></div> '); },//Initialize bullet position initposition:function (gamewidth) {this.left = parseint (Math.random () * gamewidth + 1, 10); This.dom.css (' left ', this.left); },//Bullet animation, height for the game background altitude animation:function (height) {var _this = this; Move Down function var downmove = function () {//Update position _this.top = _this.top + _this.movepx; _this.update (); Determine the position of the bullet and whether to hit the brick if (_this.top < height &&!_this.isbeatfly ()) {SetTimeout (Downmove, _this.movespeed); } else {//animation end Trigger event _this.onend (); }} downmove (); },//Update location update:function () {this.dom.css ({' Left ': this.left, ' top ': this.top}); },//Judging bullet hit Board brick no Checkbeatfly:function (fly) {if (this.left >= fly.left && this.left + this.width <= Fly.left + fly.width) {if (this.top + this.height >= fly.top && this.top + this.height <= Fly.top + fly.height) {return true; }} return false; },//animation end trigger event, external overwrite onend:function () {},//bullet hit board brick and hit post-processing event, external overwrite isbeatfly:function () {}}var Game = { Score gamescore:100,//game background DOM element Gamepanel:null,//Game background width gamewidth: 0,//game background height gameheight:0,//Bullet generation Frequency bullethz:200,//board brick Fly:null,//Score score:0,//Love Hear t:0,//Time time:0,//whether to start Start:false,//Initialize Init:function () {//Initialize game background data This.gamepa Nel = $ (' #panel '); This.gamewidth = This.gamePanel.width (); This.gameheight = This.gamePanel.height (); This.score = 0; This.heart = 0; This.time = 30; $ (' #time, #heart, #score '). HTML (0); Initialization board Brick this.fly = new Fly (); This.fly.init (This.gamewidth, this.gameheight); Bind keyboard Event $ (' body ') to body. Off (' KeyDown '). Off (' KeyUp '). KeyDown (function (e) {Game.fly.keyd Own (E, game.gamewidth); }). KeyUp (function (e) {Game.fly.keyup (e); }); Initialize bullets var _this = this; var process = function () {//random number, decide to generate bonus points or split bullets var random = parseint (Math.random () * 10 + 1, 10); RandomNumber, decided to generate Love bullets var heart = parseint (Math.random () * 50 + 1, 10); Create a new Bullet object var bullet = new Bullet (random% 3 = = 0?) ' Bad ': Heart < 10? ' Heart ': ' good '); Bullet.initposition (_this.gamewidth); Overlay Bullet Animation End Event Bullet.onend = function () {this.dom.remove (); This.dom = null; }//covers whether the bullet hits the plane and hits the post-processing event bullet.isbeatfly = function () {if (This.checkbeatfly (_this). Fly)) {_this.changescore (this.type); return true; } return false; } _this.gamepanel.append (Bullet.dom); Bullet.animation (_this.gameheight); if (_this.time > 0) {setTimeout (process, _this.bullethz); }; } process (); Chronograph This.starttime (); This.start = true; },//Change the score changescore:function (type) {switch(type) {case ' heart ': This.heart + = 1; $ (' #heart '). HTML (This.heart); Break Case ' good ': This.score + = 1; Break Default:this.score-= 1; Break } $ (' #heart '). HTML (This.heart); $ (' #score '). HTML (This.score); },//Chronograph starttime:function () {var _this = this; $ (' #time '). HTML (this.time); SetTimeout (function () {if (_this.time > 0) {_this.time-= 1; _this.starttime (); } else {$ (' body '). Off (' KeyDown '). Off (' KeyUp '); Game.fly.stop (); _this.start = false; }}, 1000); }}function Gamestart () {if (Game.start = = False) {game.init (); }}
JavaScript game aircraft, pick up gifts