(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();
});
}
})();
演示出处：请点击打开