JavaScript实现飞机大战游戏
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
用JS实现飞机大战小游戏
本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 小的时候玩的飞机大战感觉还蛮神奇,今天自己就学着做了一个 先制作好要做好的几步以及背景样式 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var start = 0; // 开始阶段 var starting = 1; // 开始的加载阶段 var running =
-
js实现飞机大战游戏
本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 CSS部分的代码: <style> * { margin: 0px; padding: 0px; } canvas{ border: 1px solid #000; display: block; margin: auto; } </style> JavaScript代码: <!-- 先创建一个画布 --> <canvas id="canvas" width=&quo
-
JS面向对象实现飞机大战
本文实例为大家分享了JS面向对象实现飞机大战的具体代码,供大家参考,具体内容如下 主页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relative; ma
-
原生JS实现飞机大战小游戏
本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 <html> <head> <title> 飞机大战 </title> <style type="text/css"> *{margin:0;padding:0;font-family:"Microsoft yahei"} body{overflow:hidden;;} </style> </head>
-
JavaScript原生编写《飞机大战坦克》游戏完整实例
先来看看开始的界面图 实现思路: 1.打开页面,背景开始走动: 2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方: 3.当敌人碰到子弹,敌人消失: 4.当敌人和飞机相遇,飞机死亡,结束游戏: html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link r
-
js实现飞机大战小游戏
本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.html代码 <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/
-
JavaScript实现飞机大战游戏
本文实例为大家分享了canvas ,js 实现一个简单的飞机大战,供大家参考,具体内容如下 预览图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
-
javascript实现飞机大战小游戏
本文实例为大家分享了javascript实现飞机大战游戏的具体代码,供大家参考,具体内容如下 文档结构如下 其中tool文件中只使用了随机数,audio中是存放的音乐文件,images中是己方和敌方飞机的图片. HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X
-
JavaScript实现微信飞机大战游戏
本文实例为大家分享了JavaScript实现微信飞机大战游戏的具体代码,供大家参考,具体内容如下 html代码 <!DOCTYPE> <html> <head> <title>微信经典飞机大战 </title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <li
-
Python3实现飞机大战游戏
本文实例为大家分享了Python3实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.主程序:plane_main.py import pygame from plane_sprites import * class PlaneGame(object): #飞机大战主游戏类 def __init__(self): print("游戏初始化") #1.创建游戏的窗口 self.screen = pygame.display.set_mode(SCREEN_RECT.size) #2
-
Unity3D实现飞机大战游戏(2)
本文为大家分享了Unity3D飞机大战游戏第一部分的实现代码,供大家参考,具体内容如下 让飞机可以发射子弹 准备工作: 1.将子弹设置成预制体 2.在飞机下新建一个子物体Gun 3.调整好位置以后,将子弹设置成预制体 //发射子弹的速率 public float rate = 0.2f; public GameObject bullet;//子弹的类型 //发射子弹的方法 public void fire() { //初始化一个子弹预制体 GameObject.Instantiate(bulle
-
Unity3D实现飞机大战游戏(1)
本文为大家分享了Unity3D飞机大战游戏第一部分的实现代码,供大家参考,具体内容如下 实现背景轮播 1.首先找两个背景图片,让两张图片竖直摆放且没有间隔 2.两个图片的下降的播放速度应当同步 public float moveSpeed = 3f;//指的是在unity里的移动速度 // Update is called once per frame void Update() { this.transform.Translate(Vector3.down * moveSpeed *Time.
-
基于JS实现飞机大战游戏的示例代码
目录 演示 技术栈 源码 定义敌方战机 定义我方战机 碰撞检测 演示 技术栈 今天没有什么特别要讲的,要不我们提前介绍下次要做的技术吧.你不说话就是同意了.我们开始了. 下图是正则表达式的一些总结大家可以先看看哦 (function() { /** * 1. JavaScript使用正则式的函数 */ const str = "abchelloasdasdhelloasd"; // 1. 查找 console.log(str.search("h")); // 3 /
-
python实现飞机大战游戏
飞机大战(Python)代码分为两个python文件,工具类和主类,需要安装pygame模块,能完美运行(网上好多不完整的,调试得心累.实现出来,成就感还是满满的),如图所示: 完整代码如下: 1.工具类plane_sprites.py import random import pygame # 屏幕大小的常量 SCREEN_RECT = pygame.Rect(0, 0, 480, 700) # 刷新的帧率 FRAME_PER_SEC = 60 # 创建敌机的定时器常量 CREATE_ENEM
-
500行代码使用python写个微信小游戏飞机大战游戏
这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手. 帮助蹲厕族.YP族.饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手 / 右手有节奏有韵律的朝着同一个方向来回移动起来! 这是史诗级的发明,是浓墨重彩的一笔,是-- 在一阵抽搐后,我结束了游戏,瞬时觉得一切都索然无味,正在我进入贤者模式时,突然想到,如果我可以让更多人已不同的方式体会到这种美轮美奂的感觉岂不美哉? 所以我打开电脑,创建了一个 plan_game.py-- 先