HTML5用canvas制作飞机大战小游戏

css样式：

<!DOCTYPE html>
<html lang="en"><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: 50px auto;border: 1px solid black;}</style>
</head><body><canvas width="480" height="600"></canvas><script src="./index.js"></script>
</body></html>

js部分：

// 获取画布画笔
var canvas = document.getElementsByTagName('canvas')[0]
var ctx = canvas.getContext('2d')
// 初始化游戏数据 画布数据 背景图片数据 阶段数据
var canWidth = canvas.width
var canHeight = canvas.height
// 初始化各个游戏阶段数据
// 开始
var start = 0
// 加载
var ready = 1
// 游戏中
var playing = 2
// 暂停
var pause = 3
// 游戏结束
var over = 4
// 定义一个变量用以记录游戏状态（状态码）
var state = start
// 分数
var score = 0
// 生命值
var lives = 3// 准备阶段
// 绘制背景图片
var bgimg = new Image()
// 设置图片地址
bgimg.src = 'img/background.png'
// 设置一个背景图片对象，存储图片数据
var bgi = {// 图片对象名称img: bgimg,// 宽高width: 480,height: 600,
}// 定义一个构造函数创建背景图片对象
function bg(config) {// 图片的基本属性this.img = config.img;this.width = config.width;this.height = config.height;// 图片坐标this.x = 0;this.y = 0;// 定义第二张的坐标this.x1 = 0;this.y1 = -this.height;// 绘制方法this.paint = function () {// 实现无缝衔接绘制两张 一张放在画布上方ctx.drawImage(this.img, this.x, this.y);ctx.drawImage(this.img, this.x1, this.y1);}// 运动方法// 移动到底后位置回到画布上方this.sport = function () {// 移动速度this.y += 1;this.y1 += 1;if (this.y > this.height) {this.y = -this.height;}if (this.y1 > this.height) {this.y1 = -this.height;}}
}
// 实例化背景图片对象
var backImg = new bg(bgi)// 绘制标题图片
var titleImg = new Image()
// 设置标题图片地址
titleImg.src = 'img/start.png'
// 创建对象存储标题图片属性
var timg = {img: titleImg,width: 480,height: 600
}
// 创建一个构造函数 绘制标题
function tit(config) {this.img = config.imgthis.width = config.widththis.height = config.heightthis.x = 40this.y = 0// 绘制方法this.paint = function () {ctx.drawImage(this.img, this.x, this.y);}
}// 实例化标题图片对象
var t = new tit(timg)// 点击开始游戏
canvas.onclick = function () {// 如果游戏状态处于开始阶段if (state === start) {// 切换游戏状态至准备阶段state = ready}
}// 加载阶段
var imgs = 'game_loading'
var loading = []
for (var i = 0; i < 4; i++) {loading[i] = new Image()// 拼接图片地址loading[i].src = `img/${imgs}${i + 1}.png`
}
// 创建图片对象
var Loading = {img: loading,width: 186,height: 38,length: loading.length
}
// 创建一个构造函数 绘制加载阶段图片
function Load(config) {this.img = config.imgthis.width = config.widththis.height = config.heightthis.x = 0this.y = canHeight - this.heightthis.time = 0this.Index = 0this.length = config.length// 绘制加载阶段图片this.paint = function () {ctx.drawImage(this.img[this.Index], this.x, this.y)}// 加载图片的运动方法this.sport = function () {this.time++if (this.time % 3 == 0) {this.Index++}if (this.Index == this.length) {state = playing}}
}// 实例化加载图片对象
var loadfour = new Load(Loading)// 用数组储存图片地址
var heros = ['img/hero1.png', 'img/hero2.png', 'img/hero_blowup_n1.png', 'img/hero_blowup_n2.png', 'img/hero_blowup_n3.png', 'img/hero_blowup_n4.png']
// 创建数组储存图片对象
var heroObj = []
// 循环创建我方飞机图片对象，对相应图片地址赋值
for (var i = 0; i < heros.length; i++) {heroObj[i] = new Image();heroObj[i].src = heros[i]
}
// 我方飞机数据
var heroplane = {img: heroObj,width: 99,height: 124,length: heroObj.length,
}// 绘制我方飞机
function Hero(config) {this.img = config.imgthis.width = config.widththis.height = config.heightthis.length = config.lengththis.x = (canWidth - this.width) / 2this.y = canHeight - this.height - 100this.Index = 0this.boom = falsethis.time = 0this.paint = function () {ctx.drawImage(this.img[this.Index], this.x, this.y)}// 我方飞机运动方法this.sport = function () {if (this.boom) {this.Index++if (this.Index == this.length) {lives--this.boom = falsethis.Index = 0if (lives == 0) {state = overthis.Index = this.length - 1}}} else {if (this.Index == 0) {this.Index = 1} else {this.Index = 0}}}// 子弹的射击方案this.shoot = function () {// 用变量控制子弹输出频率  每刷新三次发射一次子弹if (this.time % 3 == 0) {// 将创建的子弹对象存入弹夹数组bulletbox.push(new Bullet(bulletObj))}this.time++}
}// 实例化我方飞机对象
var hero = new Hero(heroplane)// 子弹部分// 创建子弹图片对象
var bullet = new Image()
bullet.src = 'img/bullet1.png'
var bulletObj = {img: bullet,width: 9,height: 21
}
// 绘制子弹函数
function Bullet(config) {this.img = config.imgthis.width = config.widththis.height = config.heightthis.x = hero.x + hero.width / 2 - this.width / 2this.y = hero.y - this.heightthis.bang = falsethis.paint = function () {ctx.drawImage(this.img, this.x, this.y)}this.sport = function () {this.y -= this.height}
}var bullets = new Bullet(bulletObj)
// 创建数组存储所以绘制的子弹图片对象
var bulletbox = []
// 子弹绘制方法
function bulletPaint() {for (var i = 0; i < bulletbox.length; i++) {bulletbox[i].paint()}
}
// 子弹运动方法
function bulletSport() {for (var i = 0; i < bulletbox.length; i++) {bulletbox[i].sport()}
}
// 删除子弹
function bulletDelete() {for (var i = 0; i < bulletbox.length; i++) {// 当子弹超出屏幕范围或者命中后删除子弹if (bulletbox[i].y <= -bulletbox[i].height || bulletbox[i].bang) {bulletbox.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 enemy1 = []
for (var i = 0; i < enemy1Arr.length; i++) {enemy1[i] = new Image()enemy1[i].src = enemy1Arr[i]
}
// 小敌机对应数据
var enemy1Obj = {img: enemy1,height: 51,width: 57,length: enemy1Arr.length,life: 2,type: 1, //设置类型状态码用以判断敌机类型score: 1
}
// 中敌机
var enemy2Arr = ['img/enemy2.png', 'img/enemy2_down1.png', 'img/enemy2_down2.png', 'img/enemy2_down3.png', 'img/enemy2_down4.png']
var enemy2 = []
for (var i = 0; i < enemy2Arr.length; i++) {enemy2[i] = new Image()enemy2[i].src = enemy2Arr[i]
}
//中敌机的对应数据
var enemy2Obj = {img: enemy2,height: 95,width: 69,length: enemy2Arr.length,life: 10,type: 1, //设置类型状态码用以判断敌机类型score: 5
}
// 大敌机
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']
var enemy3 = []
for (var i = 0; i < enemy3Arr.length; i++) {enemy3[i] = new Image()enemy3[i].src = enemy3Arr[i]
}
//大敌机的对应数据
var enemy3Obj = {img: enemy3,height: 258,width: 169,length: enemy3Arr.length,life: 20,type: 2, //设置类型状态码用以判断敌机类型score: 10
}// 构造函数 绘制敌机
function Enemy(config) {this.img = config.imgthis.width = config.widththis.height = config.heightthis.length = config.lengththis.life = config.lifethis.type = config.typethis.x = Math.random() * (canWidth - this.width)this.y = -this.heightthis.Index = 0this.down = falsethis.boom = falsethis.time = 0this.score = config.scorethis.paint = function () {ctx.drawImage(this.img[this.Index], this.x, this.y)}// 敌机运动方法this.sport = function () {// 受击状态if (this.down) {this.life--if (this.life < 0) {this.Index++if (this.Index == this.length - 1) {this.Index = this.length - 1this.boom = truescore += this.score}}}// 正常状态if (!this.down) {if (this.type == 2) {this.Index = this.Index == 0 ? 1 : 0}}this.y += 2}// 判断自身是否被碰撞this.chenckhit = function (my) {return my.x > this.x && my.x < this.x + this.width && my.y <= this.y + this.height && my.y > 0}
}// 定义敌方飞机对象数组
var enemyFleet = []
// 往数组中添加不同型号的敌机
function createEnemy() {var random = Math.random()// 设置不同型号敌机出现概率if (random < 0.08) {enemyFleet.push(new Enemy(enemy1Obj))} else if (random < 0.1) {enemyFleet.push(new Enemy(enemy2Obj))} else if (random < 0.12) {enemyFleet.push(new Enemy(enemy3Obj))}
}
// 敌机绘制方法
function enemyPaint() {for (var i = 0; i < enemyFleet.length; i++) {enemyFleet[i].paint();}
}
// 敌机运动方法
function enemySport() {for (var i = 0; i < enemyFleet.length; i++) {enemyFleet[i].sport()}
}
// 删除敌机
function enemyDelete() {for (var i = 0; i < enemyFleet.length; i++) {if (enemyFleet[i].boom || (enemyFleet[i].y >= canHeight)) {enemyFleet.splice(i, 1)}}
}// 封装一个函数判断是否发生碰撞
function hit() {for (var i = 0; i < enemyFleet.length; i++) {if (enemyFleet[i].chenckhit(hero)) {// 发生碰撞则将我方飞机碰撞状态改为truehero.boom = true}for (var j = 0; j < bulletbox.length; j++) {if (enemyFleet[i].chenckhit(bulletbox[j])) {// 将子弹命中状态，与敌机受击状态改为truebulletbox[j].bang = trueenemyFleet[i].down = trueenemyFleet[i].y += 0}}}
}// 鼠标移出事件 移出暂停
canvas.onmouseout = function () {if (state == playing) {state = pause}
}// 鼠标移入事件 移入游戏继续
canvas.onmouseover = function () {if (state == pause) {state = playing}
}// 移动事件，让飞机跟随鼠标移动
canvas.onmousemove = function (e) {var x = e.offsetXvar y = e.offsetYif (state === playing) {hero.x = x - hero.width / 2hero.y = y - hero.height / 2}
}// 暂停阶段
var pauseImg = new Image()
pauseImg.src = 'img/game_pause_nor.png'var paused = {img: pauseImg,width: 60,height: 45
}
// 绘制暂停图片
function Pause(config) {this.img = config.imgthis.width = config.widththis.height = config.heightthis.x = canWidth / 2 - this.width / 2this.y = canHeight / 2 - this.height / 2this.paint = function () {ctx.drawImage(this.img, this.x, this.y)}
}// 实例化暂停图片对象
var pause = new Pause(paused)// 游戏结束阶段
function paintOver() {ctx.font = "bold 50px 微软雅黑";ctx.fillText("游戏结束！", 130, 300);
}// 飞机的生命值与得分
function paintText() {ctx.font = "bold 30px 微软雅黑";ctx.fillText("SCORE:" + score, 10, 30);ctx.fillText("LIFE:" + lives, 380, 30)
}setInterval(function () {// 绘制背景backImg.paint();backImg.sport();if (state === start) {// 准备阶段绘制LOGOt.paint()} else if (state === ready) {// 加载阶段绘制加载图片loadfour.paint()loadfour.sport()} else if (state === playing) {// 游戏进行中// 绘制我方灰机hero.paint()hero.sport()hero.shoot()// 绘制子弹bulletPaint()bulletSport()bulletDelete()// 绘制敌机enemyPaint()createEnemy()enemySport()enemyDelete()hit()// 当前生命值与分数paintText()} else if (state === pause) {// 暂停阶段 停止运动hero.paint()bulletPaint()enemyPaint()pause.paint()paintText()} else if (state === over) {// 结束阶段 停止运动  绘制游戏结束文本paintOver()hero.paint()bulletPaint()enemyPaint()paintText()}
}, 20)

HTML5用canvas制作飞机大战小游戏相关推荐

canvas绘制“飞机大战”小游戏，真香
canvas是ArkUI开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活.高效等优点,被广泛应用于UI界面开发中. 本期,我们将为大家介绍canvas组件的使用. 目录一.canvas介 ...
jq制作飞机大战小游戏
飞机大战小游戏页面布局: <h1 class="score">0</h1><div class="contain">< ...
自己制作飞机大战小游戏 canvas应用实例
图片只能打包上传百度云链接:https://pan.baidu.com/s/1bxHZYtsZxTzPFis4Fq4AvA 密码:xshc <!DOCTYPE html> <htm ...
pygame为游戏添加背景_用 Python 制作飞机大战小游戏
这这次用Python中的pygame模块来完成一个飞机大战的小游戏:基本思路是通过方向键来控制飞机的左右移动射击飞船.先来看下最后的效果为了新手也能完成,本文记录了编写的全部流程,也就是每次修改的代码 ...
手把手教你使用Pygame制作飞机大战小游戏，4万字超详细讲解！
点击上方"早起Python",关注并"星标" 每日接收原创Python干货! 大家好,偷学Python系列是由小甜同学从初学者的角度学习Python的笔记,其特 ...
拾起童年的回忆 - 手把手教你制作飞机大战小游戏
拾起童年的回忆最记得小学时,每逢放学便会打开电视机,接上红白机/小霸王,插上一张游戏卡带,魂斗罗.超级玛丽.冒险岛.足球小将,拳王.飞机大战.雪人兄弟--,这些游戏到现在还是如数家珍,一张游戏卡可以 ...
使用小程序制作一个飞机大战小游戏
此文主要基于微信小程序制作一个飞机大战小游戏,上手即用,操作简单. 一.创建小程序二.页面实现三.代码块一.创建小程序访问微信公众平台,点击账号注册. 选择小程序,并在表单填写所需的各项信息进 ...
Qt学习总结——飞机大战小游戏制作
Qt学习总结--飞机大战小游戏制作 1. 需求分析这篇文章写于2020年暑假,完成学校实训项目之后,对自己的项目实践做了一个总结,回顾整个项目的制作过程,同时也复习一下Qt的相关知识,总结项目制作过 ...
点击list view中一行内容可以在combox中显示_java版飞机大战小游戏详细教程（零基础小白也可以分分钟学会！）...
一:游戏展示飞机大战小游戏我们都玩过,通过移动飞机来打敌机,这里给大家展示一下游戏成果:呜呜呜由于gif只能上传5M大小,所以就不能给大家展示操作了,如果大家有兴趣可以自己自己做出来再玩哟. 这里面 ...

HTML5用canvas制作飞机大战小游戏

HTML5用canvas制作飞机大战小游戏相关推荐

最新文章

热门文章