JS飞机大战小游戏 用JS实现飞机大战小游戏
joyouscola 人气:0想了解用JS实现飞机大战小游戏的相关内容吗，joyouscola在本文为您仔细讲解JS飞机大战小游戏的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：js,飞机大战，下面大家一起来学习吧。
小的时候玩的飞机大战感觉还蛮神奇，今天自己就学着做了一个
先制作好要做好的几步以及背景样式
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var start = 0; // 开始阶段
var starting = 1; // 开始的加载阶段
var running = 2; // 游戏阶段
var pause = 3; // 暂停阶段
var gameover = 4; // 结束阶段
var state = start; // 目前状态
var width = canvas.width; // 获取画布的宽度
var height = canvas.height; // 获取画布的高度
var score = 0; // 分数
var life = 3; // 我放飞机生命值
var bg = new Image(); // 创建背景图片
bg.src = "img/background.png";
var BG = {
imgs: bg,
width: 480,
height: 852,
};
// 创建生成背景图片的构造函数
function Bg(config) { // 参数为BG对象
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// 定义两张背景图片，用于动画
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
//第二张背景图的初始高度放在背景高度(固定)的上面
this.y2 = -this.height;
// 背景图片绘制方法
this.paint = function() {
//分别绘制了两张背景图
ctx.drawImage(this.imgs, this.x1, this.y1);
ctx.drawImage(this.imgs, this.x2, this.y2);
};
// 背景图片运动的方法
this.step = function() {
//背景图片位置向下移动一个，然后利用定时器让背景图动起来
this.y1++;
this.y2++;
//判断图片高度的临界点，
if (this.y1 == this.height) {
this.y1 = -this.height;
}
if (this.y2 == this.height) {
this.y2 = -this.height;
}
}
};
// 创建背景图片对象
var sky = new Bg(BG);
// 生成游戏名文字
var logo = new Image();
logo.src = "img/start.png";
// 游戏加载过程的4张图片存入一个数组中
var loadings = [];
loadings[0] = new Image();
loadings[0].src = "img/game_loading1.png";
loadings[1] = new Image();
loadings[1].src = "img/game_loading2.png";
loadings[2] = new Image();
loadings[2].src = "img/game_loading3.png";
loadings[3] = new Image();
loadings[3].src = "img/game_loading4.png";
var LOADING = {
imges: loadings,
length: loadings.length,
width: 186,
height: 38,
};
// 构造函数
function Loading(config) {
this.imges = config.imges;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.startIndex = 0; // 用于判断需要显示的图片是哪个
// 绘制方法
this.paint = function() {
ctx.drawImage(this.imges[this.startIndex], 0, height - this.height)
};
this.time = 0; // 加载时图片切换速度
// 图片切换方法
this.step = function() {
this.time++;
if (this.time % 4 === 0) {
this.startIndex++;
}
if (this.startIndex === this.length) {
// 加载阶段结束，进入游戏阶段
state = running;
}
}
};
// 创建加载阶段的对象
var loading = new Loading(LOADING);
在制作我方飞机
// 我方飞机
var heros = [];
heros[0] = new Image();
heros[0].src = "img/hero1.png";
heros[1] = new Image();
heros[1].src = "img/hero2.png";
heros[2] = new Image();
heros[2].src = "img/hero_blowup_n1.png";
heros[3] = new Image();
heros[3].src = "img/hero_blowup_n2.png";
heros[4] = new Image();
heros[4].src = "img/hero_blowup_n3.png";
heros[5] = new Image();
heros[5].src = "img/hero_blowup_n4.png";
var HEROS = {
imgs: heros,
length: heros.length,
width: 99,
height: 124,
frame: 2
};
// 我方飞机的构造函数
function Hero(config) {
this.imgs = config.imgs;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.frame = config.frame;
this.startIndex = 0; // 用于判断我方飞机当前状态
// 定义我方飞机的位置
this.x = width / 2 - this.width / 2;
this.y = height - this.height;
// 定义飞机撞击的标志,表示飞机没有被撞击
this.down = false;
// 定义飞机是否爆破完成,表示飞机还没有完全爆炸
this.candel = false;
// 绘制方法
this.paint = function() {
ctx.drawImage(this.imgs[this.startIndex], this.x, this.y)
};
// 我方飞机运动方法
this.step = function() {
if (!this.down) { // 飞机正常状态
if (this.startIndex === 0) {
this.startIndex = 1;
} else {
this.startIndex = 0
}
} else { // 爆炸状态
this.startIndex++;
if (this.startIndex === this.length) { // 判断是否炸完了
// 炸完了，命-1
life--;
if (life === 0) { // 判断是否挂了
state = gameover;
this.startIndex = this.length - 1;
} else { // 重新开始新生命
hero = new Hero(HEROS)
}
}
}
};
// 我方飞机碰撞
this.bang = function() {
this.down = true;
};
绘制子弹状态
var bullet = new Image();
bullet.src = "img/bullet1.png";
// 初始化
var BULLETS = {
imgs: bullet,
width: 9,
height: 21,
};
// 创建子弹的构造函数
function Bullet(config) {
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// 子弹坐标
this.x = hero.x + hero.width / 2 - this.width / 2;
this.y = hero.y - this.height;
// 绘制方法
this.paint = function() {
ctx.drawImage(this.imgs, this.x, this.y)
};
// 运动方法
this.step = function() {
this.y -= 10;
};
this.candel = false; // 用于判断子弹是否碰撞
// 子弹碰撞方法
this.bang = function() {
this.candel = true;
}
};
// 所有new的子弹对象放到一个数组
var bullets = [];
// 遍历绘制子弹
function bulletdPaint() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].paint();
}
};
// 遍历调用子弹的运动;
function bulletdStep() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].step();
}
};
// 子弹的删除函数
function bulletDel() {
// 碰撞的时候删除子弹
// 超出画布的高度，即负的子弹的高度
for (var i = 0; i < bullets.length; i++) {
if (bullets[i].candel || bullets[i].y < -bullets[i].height) {
bullets.splice(i, 1)
}
}
};
子弹跟随飞机的移动而移动
// 子弹发射
this.time = 0; // 设计速度初始为0
this.shoot = function() {
this.time++;
if (this.time % 2 === 0) { // 每2步移动射击一次
bullets.push(new Bullet(BULLETS))
}
};
};
// 创建我方飞机的对象实例
var hero = new Hero(HEROS);
// 鼠标移动事件
canvas.onmousemove = function(event) {
// console.log("onmousemove");
var event = event || window.event;
if (state == running) { //判断当前游戏状态
//把获取到的页面中的鼠标横坐标的值赋给飞机的横坐标（位置）
hero.x = event.offsetX - hero.width / 2;
//把获取到的页面中的鼠标纵坐标的值赋给飞机的纵坐标（位置）
hero.y = event.offsetY - hero.height / 2;
}
};
绘制敌方飞机
// 敌方飞机的绘制
var enemy1 = []; //小飞机
enemy1[0] = new Image();
enemy1[0].src = "img/enemy1.png";
enemy1[1] = new Image();
enemy1[1].src = 'img/enemy1_down1.png';
enemy1[2] = new Image();
enemy1[2].src = 'img/enemy1_down2.png';
enemy1[3] = new Image();
enemy1[3].src = 'img/enemy1_down3.png';
enemy1[4] = new Image();
enemy1[4].src = 'img/enemy1_down4.png';
var enemy2 = []; //中飞机
enemy2[0] = new Image();
enemy2[0].src = "img/enemy2.png";
enemy2[1] = new Image();
enemy2[1].src = "img/enemy2_down1.png";
enemy2[2] = new Image();
enemy2[2].src = "img/enemy2_down2.png";
enemy2[3] = new Image();
enemy2[3].src = "img/enemy2_down3.png";
enemy2[4] = new Image();
enemy2[4].src = "img/enemy2_down4.png";
var enemy3 = []; //大飞机
enemy3[0] = new Image();
enemy3[0].src = "img/enemy3_n1.png";
enemy3[1] = new Image();
enemy3[1].src = "img/enemy3_n2.png";
enemy3[2] = new Image();
enemy3[2].src = "img/enemy3_down1.png";
enemy3[3] = new Image();
enemy3[3].src = "img/enemy3_down2.png";
enemy3[4] = new Image();
enemy3[4].src = "img/enemy3_down3.png";
enemy3[5] = new Image();
enemy3[5].src = "img/enemy3_down4.png";
enemy3[6] = new Image();
enemy3[6].src = "img/enemy3_down5.png";
enemy3[7] = new Image();
enemy3[7].src = "img/enemy3_down6.png";
// 初始化数据
var ENEMY1 = {
imgs: enemy1,
length: enemy1.length,
width: 57,
height: 51,
type: 1,
frame: 2,
life: 1,
score: 1,
};
var ENEMY2 = {
imgs: enemy2,
length: enemy2.length,
width: 69,
height: 95,
type: 2,
frame: 2,
life: 5,
score: 5,
};
var ENEMY3 = {
imgs: enemy3,
length: enemy3.length,
width: 165,
height: 261,
type: 3,
frame: 2,
life: 15,
score: 20,
};
// 敌方飞机的构造函数
function Enemy(config) {
this.imgs = config.imgs;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.type = config.type;
this.frame = config.frame;
this.life = config.life;
this.score = config.score;
// 敌方飞机的坐标
this.x = Math.random() * (width - this.width);
this.y = -this.height;
this.startIndex = 0; // 用于判断的下标
this.down = false; // 用于判断是否碰撞
this.candel = false; // 用于判断是否爆炸完成
//绘制方法
this.paint = function() {
ctx.drawImage(this.imgs[this.startIndex], this.x, this.y);
};
//运动方法
this.step = function() {
if (!this.down) { // 敌方飞机处于正常状态
// 小飞机，中飞机的下标始终都是0
// 大飞机的下标是在0和1之间进行切换
this.startIndex++;
this.startIndex = this.startIndex % this.frame;
// 飞机向下的动画
this.y += 2;
} else { //飞机发生碰撞以后
this.startIndex++;
if (this.startIndex == this.length) {
this.candel = true;
this.startIndex = this.length - 1;
}
}
};
// 判断是否被碰撞
this.checkHit = function(wo) { //判断四个边
return wo.y + wo.height > this.y &&
wo.x + wo.width > this.x &&
wo.y < this.y + this.height &&
wo.x < this.x + this.width;
};
//敌方飞机碰撞后
this.bang = function() {
this.life--;
if (this.life === 0) {
this.down = true;
score += this.score;
}
}
};
// 数组存放敌方飞机
var enemise = [];
// 往敌方飞机数组中添加数据
function enterEnemise() {
var rand = Math.floor(Math.random() * 100)
if (rand < 10) {
// 添加小飞机
enemise.push(new Enemy(ENEMY1));
} else if (rand < 55 && rand > 50) {
// 添加中飞机
enemise.push(new Enemy(ENEMY2));
} else if (rand === 88) {
// 添加大飞机
if (enemise[0].type !== 3 && enemise.length > 0) {
enemise.splice(0, 0, new Enemy(ENEMY3));
}
}
};
// 绘制敌方飞机函数
function enemyPaint() {
for (var i = 0; i < enemise.length; i++) {
enemise[i].paint();
}
};
// 敌方飞机的运动函数
function enemyStep() {
for (var i = 0; i < enemise.length; i++) {
enemise[i].step();
}
};
// 删除敌方飞机函数
function delenemy() {
for (var i = 0; i < enemise.length; i++) {
// console.log(enemise[i].candel)
if (enemise[i].y > height || enemise[i].candel) {
enemise.splice(i, 1)
}
}
};
// 碰撞以后的函数
function hitEnemise() {
for (var i = 0; i < enemise.length; i++) {
// 如果我放飞机撞到了敌方飞机以后
if (enemise[i].checkHit(hero)) {
// 敌方飞机碰撞后，碰撞状态改变
enemise[i].bang();
// 我方飞机碰撞后，碰撞状态改变
hero.bang();
};
// 子弹碰到敌方飞机
for (var j = 0; j < bullets.length; j++) {
if (enemise[i].checkHit(bullets[j])) {
enemise[i].bang();
// 子弹的碰撞后，碰撞状态改变
bullets[j].bang();
}
}
}
};
最后的收尾阶段
// 绘制分数和生命值
function scoreText() {
ctx.font = "30px bold"
ctx.fillText("score:" + score, 10, 30);
ctx.fillText("life:" + life, 300, 30);
};
// 游戏暂停的阶段
canvas.onmouseout = function() {
if (state === running) {
state = pause;
}
};
// 调用画布的鼠标移入事件
canvas.onmouseover = function() {
if (state === pause) {
state = running;
}
};
// 暂停图片
var pause = new Image()
pause.src = "img/game_pause_nor.png";
// 游戏结束
function gameoverfn() {
ctx.font = "50px bold"
ctx.fillText("GAME OVER !!!", 80, 300);
ctx.fillText("ONCE MORE !!!", 80, 400);
};
// 画布点击事件
canvas.addEventListener("click", function(e) {
p = getEventPosition(e);
// 点击画布时,判断游戏是否开始
if (state === start) {
state = starting;
}
console.log(123);
// 重新开始游戏有问题？？？
if (state === gameover) {
if (p.y >= 350 && p.y < 450) {
console.log('你点击了ONCE MORE !!!');
state = running;
}
}
});
function getEventPosition(e) {
var x, y;
if (e.layerX || ev.layerX === 0) {
x = e.layerX;
y = e.layerY;
} else if (e.offsetX || ev.offsetX === 0) {
x = e.offsetX;
y = e.offsetY;
}
return {
x: x,
y: y
};
};
后面就是基本的每个阶段的调用问题叻
setInterval(function() {
//背景图片无论在哪个状态都有背景图片以及它的动态效果
sky.paint(); // 绘制背景
sky.step(); // 背景动画
if (state === start) { // 第一阶段
ctx.drawImage(logo, 35, 0)
} else if (state === starting) { // 第二阶段
loading.paint(); // 绘制背景
loading.step(); // 背景动画
} else if (state === running) { // 第三状态
// 绘制我放飞机
hero.paint();
// 我方飞机的运动
hero.step();
// 我方飞机的射击方法
hero.shoot();
// 子弹的绘制
bulletdPaint();
// 子弹的运动
bulletdStep();
// 子弹的删除
bulletDel();
// 创建敌方飞机
enterEnemise();
// 绘制敌方飞机
enemyPaint();
// 绘制敌方飞机的运动
enemyStep();
// 删除敌方飞机
delenemy();
// 判断是否撞击
hitEnemise();
// 绘制分数和生命值
scoreText()
} else if (state === pause) { // 第四状态
sky.paint(); // 绘制背景
sky.step(); // 背景动画
// 绘制我放飞机
hero.paint();
// 子弹的绘制
bulletdPaint();
// 绘制敌方飞机
enemyPaint();
// 绘制分数和生命值
scoreText();
ctx.drawImage(pause, 220, 300)
} else if (state === gameover) { // 第五状态
sky.paint(); // 绘制背景
sky.step(); // 背景动画
hero.paint();
// 子弹的绘制
bulletdPaint();
// 绘制敌方飞机
enemyPaint();
// 绘制分数和生命值
scoreText();
// 游戏结束
gameoverfn();
}
}, 10)
})()
这个也就是飞机大战的全部源码了，仅供参考。
加载全部内容