本文实例为大家分享了canvas ，js 实现一个简单的飞机大战，供大家参考，具体内容如下
预览图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
display: block;
margin: 0 auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
// 获取 canvas元素
var canvas = document.getElementsByTagName('canvas')[0];
// 获取画笔
var ctx = canvas.getContext('2d');
// 画布信息
var canvasParam = {
width: 480,
height: 852
}
canvas.width = canvasParam.width;
canvas.height = canvasParam.height;
// 初始化游戏状态
var ready = 0; // 准备中
var loading = 1; // 载入中
var running = 2; // 游戏中
var pause = 3; // 暂停
var gameOver = 4; // 结束
// 判断当前游戏状态
var gameState = ready;
// 初始化生命值
var life = 3;
// 初始化游戏得分
var score = 0;
// 背景 /
// 创建背景图片
var bgSrc = new Image();
bgSrc.src = 'img/background.png';
// 背景图片信息
var bgParam = {
bgSrc: bgSrc,
x: 0,
y: 0,
width: 480,
height: 852
}
// 构造函数: 背景
function Bg(param) {
this.bgSrc = param.bgSrc;
this.x = param.x;
this.y = param.y;
this.y1 = param.y1;
this.width = param.width;
this.height = param.height;
// 交替图片的坐标
this.y1 = -this.height;
// 绘制背景图
this.paint = function() {
ctx.drawImage(this.bgSrc, this.x, this.y, this.width, this.height);
ctx.drawImage(this.bgSrc, this.x, this.y1, this.width, this.height);
}
// 背景图片交替移动
this.sport = function() {
this.y += 5;
this.y1 += 5;
if (this.y >= this.height) {
this.y = -this.height;
}
if (this.y1 >= this.height) {
this.y1 = -this.height;
}
}
}
// 实例化背景图片
var bgObj = new Bg(bgParam);
// 创建logo
var logoSrc = new Image();
logoSrc.src = 'img/start.png';
// logo信息
var logoParam = {
logoSrc: logoSrc,
x: 0,
y: 0,
width: 480,
height: 852
}
// 构造函数 Logo
function Logo(param) {
this.logoSrc = param.logoSrc;
this.x = param.x;
this.y = param.y;
this.width = param.width;
this.height = param.height;
// 绘制logo
this.paint = function() {
ctx.drawImage(this.logoObj, this.x, this.y, this.width, this.height);
}
}
// 实例化logo对象
var logoObj = new Logo(logoParam);
// 点击画布，进入下一阶段 loading
canvas.onclick = function() {
if (gameState === ready) {
gameState = loading;
}
}
// 游戏加载阶段 loading
// 飞机进场
// 飞机进场图片
var loadImgArr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png', 'img/game_loading4.png']
// 一个空数组，用来存放飞机进场的图片
var loadingImg = [];
// 循环创建飞机进场图片，将其存入数组loadingImg中
for (var i = 0; i < loadImgArr.length; i++) {
loadingImg[i] = new Image();
loadingImg[i].src = loadImgArr[i];
}
// 飞机进场图片信息
var loadingParam = {
loadingImg: loadingImg,
x: 0,
width: 186,
height: 38
}
// 构造函数：飞机进场信息
function Loading(param) {
this.loadingImg = loadingImg;
this.width = param.width;
this.height = param.height;
this.x = param.x;
this.y = canvasParam.height - param.height;
// 定义载入中图片下标
this.index = 0;
// 定义 num 判断定时器的执行次数
this.num = 0;
// 绘制载入中图片
this.paint = function() {
ctx.drawImage(this.loadingImg[this.index], this.x, this.y, this.width, this.height);
}
// 改变载入中图片
this.sport = function() {
this.num++;
if (this.num % 5 == 0) {
this.index++;
if (this.index === this.loadingImg.length) {
gameState = running;
}
}
}
}
// 实例化 载入中飞机对象
var loadingObj = new Loading(loadingParam);
// 我方飞机 ///
// 我方飞机各个状态的图片
var heroImgs = [
'img/hero1.png',
'img/hero2.png',
'img/hero1.png',
'img/hero_blowup_n1.png',
'img/hero_blowup_n2.png',
'img/hero_blowup_n3.png',
'img/hero_blowup_n4.png'
]
// 创建一个空数组，存放我方飞机各个状态的图片
var heroRunning = [];
// 循环创建我方飞机图片，存入数组heroRunning中
for (var i = 0; i < heroImgs.length; i++) {
heroRunning[i] = new Image();
heroRunning[i].src = heroImgs[i];
}
// 我方飞机信息
var heroParam = {
haroRunning: heroRunning,
width: 99,
height: 124
}
// 我方飞机 构造函数
function Hero(param) {
this.heroRunning = heroRunning;
this.x = canvasParam.width / 2 - param.width / 2;
this.y = canvasParam.height - param.height * 1.2;
this.width = param.width;
this.height = param.height;
// 我方飞机图片下标
this.index = 0;
// 判断飞机是否被撞击
this.down = false;
// 间隔触发
this.num = 0;
// 绘制我方飞机
this.paint = function() {
ctx.drawImage(this.heroRunning[this.index], this.x, this.y, this.width, this.height);
}
// 交替绘制我方飞机执行时的图片
this.sport = function() {
if (!this.down) {
this.num++;
// 定时器每执行3次，我方飞机飞行图片交替一次
if (this.num % 3 === 0) {
if (this.index === 0) {
this.index = 1;
} else {
this.index = 0;
}
}
} else {
// 我方飞机被撞击了
this.index++; // 图片数组下标+1，显示被撞击的图片
if (this.index === this.heroRunning.length) {
life--; // 生命值-1
if (life == 0) {
// 游戏状态变为 结束
gamerState = gameOver;
// 游戏结束之后 让飞机停留在冒烟状态
this.index = this.heroRunning.length - 1;
} else {
// 创建一个新的我方飞机
heroObj = new Hero(heroParam);
}
}
}
}
// 创建子弹间隔
this.bulletTime = 0;
// 创建子弹
this.newBullet = function() {
this.bulletTime++;
// 定时器执行3次，创建一个子弹
if (this.bulletTime % 2 === 0) {
bullets.push(new Bullet(bulletParam));
}
}
}
// 实例化 我方飞机
var heroObj = new Hero(heroParam);
// 给画布绑定移动事件我方飞机随鼠标移动
canvas.onmousemove = function(e) {
if (gameState === running) {
heroObj.x = e.offsetX - heroObj.width / 2;
heroObj.y = e.offsetY - heroObj.height / 2;
}
}
// 子弹 //
var bulletImg = new Image();
bulletImg.src = 'img/bullet1.png';
var bulletParam = {
bulletImg: bulletImg,
width: 9,
height: 21
}
// 构造函数：子弹
function Bullet(param) {
this.bulletImg = param.bulletImg;
this.x = heroObj.x + heroObj.width / 2 - param.width / 2;
this.y = heroObj.y - param.height;
this.width = param.width;
this.height = param.height;
// 绘制子弹
this.paint = function() {
ctx.drawImage(this.bulletImg, this.x, this.y, this.width, this.height);
}
// 判断子弹是否碰到敌机
this.down = false;
// 子弹移动速度
this.sport = function() {
this.y -= 50;
}
}
// 弹夹
var bullets = [];
// 制造子弹
function bulletsPaint() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].paint();
}
}
// 发射子弹
function bulletsSport() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].sport();
}
}
// 子弹飞出屏幕外面
// 子弹与敌机碰撞
function bulletsDelete() {
for (var i = 0; i < bullets.length; i++) {
if (bullets[i].y < -this.height || bullets[i].down) {
bullets.splice(i, 1);
}
}
}
// 敌方飞机
// 小型敌机
var enemy1Arr = [
'img/enemy1.png',
'img/enemy1_down1.png',
'img/enemy1_down2.png',
'img/enemy1_down3.png',
'img/enemy1_down4.png'
];
var enemy1Img = [];
for (var i = 0; i < enemy1Arr.length; i++) {
enemy1Img[i] = new Image();
enemy1Img[i].src = enemy1Arr[i];
}
// 中型敌机
var enemy2Arr = [
'img/enemy2.png',
'img/enemy2_down1.png',
'img/enemy2_down2.png',
'img/enemy2_down3.png',
'img/enemy2_down4.png'
];
var enemy2Img = [];
for (var i = 0; i < enemy2Arr.length; i++) {
enemy2Img[i] = new Image();
enemy2Img[i].src = enemy2Arr[i];
}
// 大型敌机
var enemy3Arr = [
'img/enemy3_n1.png',
'img/enemy3_n2.png',
'img/enemy3_hit.png',
'img/enemy3_down1.png',
'img/enemy3_down2.png',
'img/enemy3_down3.png',
'img/enemy3_down4.png',
'img/enemy3_down5.png',
'img/enemy3_down6.png'
];
var enemy3Img = [];
for (var i = 0; i < enemy3Arr.length; i++) {
enemy3Img[i] = new Image();
enemy3Img[i].src = enemy3Arr[i];
}
// 小型敌机信息
var enemy1Param = {
enemyImg: enemy1Img,
width: 57,
height: 51,
life: 3,
score: 1
}
// 中型敌机信息
var enemy2Param = {
enemyImg: enemy2Img,
width: 69,
height: 95,
life: 10,
score: 3
}
// 大型敌机信息
var enemy3Param = {
enemyImg: enemy3Img,
width: 169,
height: 258,
life: 20,
score: 10
}
// 构造函数：敌机
function Enemy(param) {
this.enemyImg = param.enemyImg;
this.width = param.width;
this.height = param.height;
this.life = param.life;
this.score = param.score;
this.x = Math.random() * (canvasParam.width - this.width);
this.y = -this.height;
// 图片下标
this.index = 0;
// 判断敌机是否发生碰撞
this.down = false;
// 是否完成爆炸
this.bang = false;
// 绘制敌机
this.paint = function() {
ctx.drawImage(this.enemyImg[this.index], this.x, this.y, this.width, this.height);
}
// 敌机移动
this.sport = function() {
if (!this.down) {
// 当前敌机未被碰撞时
this.y += 3;
} else {
// 敌机碰后生命值-1
this.life--;
// 生命值-1后，碰撞变为false
this.down = false;
// 生命值变为0时，变为敌机爆炸图片
if (this.life <= 0) {
this.index++;
this.down = true;
if (this.index === this.enemyImg.length) {
this.index = this.enemyImg.length - 1;
this.bang = true;
}
}
}
}
// 判断是否被碰撞
this.hit = function(obj) {
return obj.x + obj.width >= this.x && obj.x <= this.x + this.width &&
obj.y <= this.y + this.height && obj.y + obj.height >= this.y;
}
}
// 创建一个空数组，存放敌机
var enemies = [];
// 随机创建小型、中型、大型敌机
function pushEnemy() {
var random = Math.random();
if (random < 0.65) {
enemies.push(new Enemy(enemy1Param));
} else if (random < 0.9) {
// 中号飞机
enemies.push(new Enemy(enemy2Param));
} else {
// 大号飞机
enemies.push(new Enemy(enemy3Param));
}
}
// 绘制、运动敌机对象
function enemyPaint() {
for (var i = 0; i < enemies.length; i++) {
enemies[i].paint();
enemies[i].sport();
}
}
// 绘制暂停时的敌机
function enemyPaint1() {
for (var i = 0; i < enemies.length; i++) {
enemies[i].paint();
}
}
// 删除敌机 和增加分数
function enemyDelete() {
for (var i = 0; i < enemies.length; i++) {
if (enemies[i].bang) {
score += enemies[i].score;
}
if (enemies[i].y >= canvasParam.height || enemies[i].bang) {
enemies.splice(i, 1);
// score += enemies[i].score;
}
}
}
// 如何检测每一个敌机是否被 子弹或我方飞机 碰撞
function checkHit() {
for (var i = 0; i < enemies.length; i++) {
// 子弹和敌机撞击
for (var j = 0; j < bullets.length; j++) {
if (enemies[i].hit(bullets[j])) {
enemies[i].down = true;
bullets[j].down = true;
}
}
// 敌机和hero
if (enemies[i].hit(heroObj)) {
enemies[i].down = true;
heroObj.down = true;
}
}
}
// 分数
function scoreText() {
ctx.font = '20px bold';
ctx.fillText('得分: ' + score, 20, 30);
ctx.fillText('生命值：' + life, 360, 30)
}
// 鼠标移出游戏暂停
canvas.onmouseout = function() {
if (gameState === running) {
gameState = pause;
}
};
// 鼠标移入游戏开始
canvas.onmouseover = function() {
if (gameState === pause) {
gameState = running;
}
};
// 游戏暂停界面
function pausePanit() {
var pauseImg = new Image()
pauseImg.src = "img/game_pause_nor.png";
heroObj.paint();
// 绘制子弹
bulletsPaint();
// 绘制敌机
enemyPaint1();
scoreText();
ctx.drawImage(pauseImg, 220, 420);
}
// 游戏结束
function gameOverText() {
ctx.font = '50px bold';
ctx.fillText('game over', 120, 420);
ctx.font = '30px bold';
ctx.fillText('点击重新开始', 160, 520);
}
// 点击事件，重新开始游戏
canvas.addEventListener("click", function(e) {
if (gameState === gameOver) {
gameState = ready;
loadingObj.num = 0;
loadingObj.index = 0;
enemies = [];
bullets = [];
life = 3;
score = 0;
heroObj.down = false;
}
});
// 创建敌机的时间间隔
var enemyNum = 0;
// 开启定时器， 绘制图片
setInterval(function() {
bgObj.paint();
bgObj.sport();
if (gameState === ready) {
ctx.drawImage(logoSrc, 0, 0, 480, 852);
// logoObj.paint();
} else if (gameState === loading) {
loadingObj.paint();
loadingObj.sport();
} else if (gameState === running) {
canvas.style.cursor = 'none';
heroObj.paint();
heroObj.sport();
heroObj.newBullet();
// 绘制子弹
bulletsPaint();
bulletsSport();
// 删除子弹
bulletsDelete();
// 绘制敌机
enemyNum++;
if (enemyNum % 20 === 0) {
pushEnemy();
}
enemyPaint();
checkHit();
enemyDelete();
scoreText();
if (life === 0) {
gameState = gameOver;
}
} else if (gameState === pause) {
pausePanit();
} else if (gameState === gameOver) {
canvas.style.cursor = 'pointer';
gameOverText();
heroObj.paint();
}
}, 60)
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持NICE源码。
