(function () {var imageUrl = "images/";//获取画布对象var c = $("#game-box").get(0);//手机屏幕自适应(function () {$(window).on("resize", resize);resize();function resize() {$(c).attr("height", $(window).height() < 800 ? $(window).height() : 800);$(c).attr("width", $(window).width() < 480 ? $(window).width() : 480);}})();//创建画布var cxt = c.getContext("2d");//图片资源, 存放图片对象var sources = [];//新建图片方法function creatImg(src) {if (typeof sources[src] != "undefined") {return sources[src];}sources[src] = new Image();sources[src].src = src;return sources[src];}$(function () {var images = ['bg.jpg', 'loading1.png', 'loading2.png', 'loading3.png', 'logo.png'];loadImages(images, loading);});function loading() {var loadingTime = 0;var refresh = function () {drawBg();drawLogo();load();loadingTime++;}var loadingClock = setInterval(refresh, 1);function drawBg() {var bg_img = creatImg("bg.jpg");var bg_img_width = bg_img.width;var bg_img_height = bg_img.height;cxt.drawImage(bg_img, 0, 0, bg_img_width, bg_img_height);}function drawLogo() {var logo_img = creatImg("logo.png");var logo_width = logo_img.width;var logo_height = logo_img.height;var c_width = $(c).width();var x = (c_width - logo_width) / 2;var y = 100;cxt.drawImage(logo_img, x, y, logo_width, logo_height);}function load() {if (loadingTime == 600) {loadingTime = 0;}var pic = creatImg("loading" + (parseInt(loadingTime / 200) + 1) + ".png");var pic_width = pic.width;var pic_height = pic.height;var c_width = $(c).width();var x = (c_width - pic_width) / 2;cxt.drawImage(pic, x, 220, pic_width, pic_height);}var images = ['cartridge.png', 'die1.png', 'die2.png', 'me.png', 'plain1.png', 'plain2.png', 'plain3.png', 'plain1_die1.png', 'plain1_die2.png', 'plain1_die3.png', 'plain2_die1.png', 'plain2_die2.png', 'plain2_die3.png', 'plain2_die4.png', 'plain3_die1.png', 'plain3_die2.png', 'plain3_die3.png', 'plain3_die4.png', 'plain3_die5.png', 'plain3_die6.png', 'me_die1.png', 'me_die2.png', 'me_die3.png', 'me_die4.png'];loadImages(images, function () {main();clearInterval(loadingClock);});}function loadImages(images, callback) {var loadedImages = 0;var numImages = images.length;for (var i in images) {sources[images[i]] = new Image();sources[images[i]].src = imageUrl + images[i];sources[images[i]].onload = function () {loadedImages++;if (loadedImages >= numImages) {callback();}};}}function main() {var modal = {"show": function (s) {$("#modal").find(".content").html(s);$("#modal").removeClass("hide");},"hide": function () {$("#modal").addClass("hide");}};var bg_img = creatImg("bg.jpg");var bg_img_width = bg_img.width;var bg_img_height = bg_img.height;cxt.drawImage(bg_img, 0, 0, bg_img_width, bg_img_height);var c_width = $(c).width();var c_height = $(c).height();var me = {};me.status = true;me.model = creatImg("me.png");me.width = c_width / 480 * me.model.width;me.height = me.width / me.model.width * me.model.height;me.move = function (x, y) {me.x = x - me.width / 2;me.y = y - me.height / 2;var c_width = $(c).width();var c_height = $(c).height();me.x = me.x > c_width - me.width ? c_width - me.width : me.x;me.x = me.x < 0 ? 0 : me.x;me.y = me.y > c_height - me.height ? c_height - me.height : me.y;}me.moveing = function () {if (!me.status) {return;}cxt.drawImage(me.model, me.x, me.y, me.width, me.height);}me.cartridges = [];me.cartridge = function (x, y) {var cartridgeModel = creatImg("cartridge.png");this.model = cartridgeModel;this.x = x;this.y = y;this.width = c_width / 480 * cartridgeModel.width;this.height = this.width / cartridgeModel.width * cartridgeModel.height;}me.attackTime = 0;me.attack = function () {if (!me.status) {return;}me.attackTime++;if (me.attackTime % 20 != 0) {return;}me.attackTime = 0;var cartridge = new me.cartridge(0, 0);cartridge.x = me.x + (me.width - cartridge.width) / 2;cartridge.y = me.y - cartridge.height;me.cartridges.push(cartridge);}me.attacking = function () {me.attack();var cartridgeSpeed = 10;me.cartridges.map(function (cartridge, cartridgeIndex) {cxt.drawImage(cartridge.model, cartridge.x, cartridge.y, cartridge.width, cartridge.height);if (cartridge.y <= 0) {me.cartridges.splice(cartridgeIndex, 1);}game.plains.map(function (plain) {var X = cartridge.x;var nextY = cartridge.y - cartridgeSpeed;if (X > plain.x&& X < (plain.x + plain.width)&& nextY < (plain.y + plain.height + plain.speed)&& cartridge.y >= (plain.y + plain.height)) {me.cartridges.splice(cartridgeIndex, 1);plain.byAttack();}});cartridge.y = cartridge.y - cartridgeSpeed;  //子弹向上移动});}me.die = function () {if (!me.status) {return;}$(c).off("mousemove");c.removeEventListener("touchmove");me.status = false;var dieSpeed = 25;var x = this.x;var y = this.y;var h = this.height;var w = this.width;game.plainsDies.push((new die()));function die() {var dieTime = 4 * dieSpeed;this.animationTime = 4 * dieSpeed;this.call = function () {if (this.animationTime == 1) {game.over();}var dieModel = creatImg("me_die" + (parseInt((dieTime - this.animationTime) / dieSpeed) + 1) + ".png");cxt.drawImage(dieModel, x, y, w, h);this.animationTime--;}}}var game = {};game.score = 0;game.me = me;game.time = 0;game.refresh = function () {game.time += 0.001;game.bgScroll();game.addPlain();game.plainsScroll();game.me.moveing();game.me.attacking();game.plainsDying();$("#score").html(game.score);}game.bgScrollTime = 0;game.bgScroll = function () {game.bgScrollTime += 0.5;if (game.bgScrollTime > bg_img_height) {game.bgScrollTime = 0;}cxt.drawImage(bg_img, 0, game.bgScrollTime - bg_img_height, bg_img_width, bg_img_height);cxt.drawImage(bg_img, 0, game.bgScrollTime, bg_img_width, bg_img_height);}game.plains = [];game.plainsNum = 0;game.addPlain = function () {if (game.bgScrollTime % 60 != 0) {return;}if (game.plainsNum == 25) {game.plainsNum = 0;}game.plainsNum++;switch (true) {case game.plainsNum % 13 == 0:game.plains.push(new plain(3, 0.3));break;case game.plainsNum % 6 == 0:game.plains.push(new plain(2, 0.3));break;default:game.plains.push(new plain(1, 0.3));break;}}game.plainsScroll = function () {game.plains.map(function (plain, plainIndex) {if (!plain.status) {game.plains.splice(plainIndex, 1);return;}cxt.drawImage(plain.model, plain.x, plain.y, plain.width, plain.height);if (isCollide(plain)) {game.me.die();}if (plain.y > c_height) {game.plains.splice(plainIndex, 1);}plain.y = plain.y + plain.speed;});//推断是否和玩家的飞机碰撞function isCollide(plain) {var plainTopLeft = [plain.x, plain.y];var plainBottomRight = [plain.x + plain.width, plain.y + plain.height];var meTopLeft = [game.me.x + game.me.width / 3, game.me.y];var meBottomRight = [game.me.x + (game.me.width * 2 / 3), game.me.y + (game.me.height * 2 / 3)];var collideTopLeft = [Math.max(plainTopLeft[0], meTopLeft[0]), Math.max(plainTopLeft[1], meTopLeft[1])];var collideBottomRight = [Math.min(plainBottomRight[0], meBottomRight[0]), Math.min(plainBottomRight[1], meBottomRight[1])];if (collideTopLeft[0] < collideBottomRight[0] && collideTopLeft[1] < collideBottomRight[1]) {return true;}return false;}}game.plainsDies = [];game.plainsDying = function () {game.plainsDies.map(function (plainDie, plainDieIndex) {if (plainDie.animationTime == 0) {game.plainsDies.splice(plainDieIndex, 1);return;}plainDie.call();});}game.over = function () {$(c).removeClass("playing");clearInterval(game.clock);modal.show(game.score);}game.clear = function () {game.me.x = ($(c).width() - game.me.width) / 2;game.me.y = $(c).height() - game.me.height;game.plains = [];game.plainsDies = [];game.plainsNum = 0;game.time = 0;game.bgScrollTime = 0;game.score = 0;game.me.status = true;}game.start = function () {$(c).addClass("playing");$(c).on("mousemove", function (e) {var x = e.clientX - $(this).offset().left;var y = e.clientY;me.move(x, y);});c.addEventListener("touchmove", function (e) {e.preventDefault();var touch = e.targetTouches[0];me.move(touch.pageX, touch.pageY);});modal.hide();game.clear();game.clock = setInterval(function () {game.refresh();}, 7);}game.start();//飞机类function plain(type) {this.type = type;this.hp;  //飞机生命值this.height;this.width;this.maxSpeed;this.dieTime;this.status = true;  //飞机死了没var dieSpeed = 25;  //死亡动画播放速度switch (type) {case 1:this.hp = 1;this.score = 1000;this.modelimg = "plain1.png";this.maxSpeed = 5;this.dieTime = dieSpeed * 3;break;case 2:this.hp = 6;this.score = 8000;this.modelimg = "plain2.png";this.maxSpeed = 2;this.dieTime = dieSpeed * 4;break;case 3:this.hp = 15;this.score = 30000;this.modelimg = "plain3.png";this.maxSpeed = 1.5;this.dieTime = dieSpeed * 6;break;}this.model = creatImg(this.modelimg);this.width = c_width / 480 * this.model.width;this.height = this.width / this.model.width * this.model.height;this.x = Math.random() * (c_width - this.width);this.y = -(this.height);var maxSpeed = game.time > 10 ? 10 : game.time;this.speed = Math.random() * (maxSpeed - 1) + 1;this.speed = this.speed < 0.5 ? Math.random() * 0.5 + 0.5 : this.speed;this.speed = this.speed > this.maxSpeed ? this.maxSpeed : this.speed;this.die = function () {var plainType = this.type;var plainX = this.x;var plainY = this.y;var plainW = this.width;var plainH = this.height;game.plainsDies.push((new die(this.dieTime)));function die(dieTime) {var dieTime = dieTime;this.animationTime = dieTime;this.call = function () {if (this.animationTime <= 0) {return;}var dieModel = creatImg("plain" + plainType + "_die" + (parseInt((dieTime - this.animationTime) / dieSpeed) + 1) + ".png");cxt.drawImage(dieModel, plainX, plainY, plainW, plainH);this.animationTime--;}}}this.byAttack = function () {this.hp--;if (this.hp <= 0) {game.score += this.score;this.status = false;this.die();}}}$("#modal").on("click", "button", function () {game.start();});}
})();

演示出处：请点击打开