飞机大战使用js canvas编写的过程是怎样
Admin发表于 2022-05-17 17:54:55474 次浏览
这篇文章给大家分享的是“飞机大战使用js canvas编写的过程是怎样”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“飞机大战使用js canvas编写的过程是怎样”吧。本文实例为大家分享了js canvas实现飞机大战的具体代码，供大家参考，具体内容如下
首先我们绘制一个canvas区域，确实其宽高为480px*852px;水平居中
<!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 {
position: absolute;
left: 0;
right: 0;
margin: auto;
border: #000 solid 1px;
}
</style>
</head>
<body>
<canvas width="480" height="852"></canvas>
</body>
</html>
然后我们再用js查询相应的canvas，再确定画笔cex；然后定一个全局变量state代表游戏状态。
其中state=0表示游戏初始化，state=1代表我方飞机入场，state=2代表战斗过程，state=3代表暂停过程，state=4代表游戏结束过程。
var canvas = document.getelementsbytagname("canvas")[0];
var cex = canvas.getcontext('2d');
var state = 0; //状态
再确实背景图片，根据图片大小确实背景的的宽高等数据，再编写相应的函数，最终使用函数声明出一个背景图片对象出来。
//背景图片
var bg = new image()
bg.src = 'img/background.png'
// 背景数据对象
var bakgobj = {
img: bg,
width: 480,
height: 852,
}
// 背景函数
function by(params) {
this.width = params.width;
this.height = params.height;
this.img = params.img;
this.x = 0;
this.y = 0;
this.y1 = -this.height;
// 背景绘制
this.paint = function () {
cex.drawimage(this.img, this.x, this.y);
cex.drawimage(this.img, this.x, this.y1)
}
// 背景运动
this.sprot = function () {
this.y += 3;
this.y1 += 3;
if (this.y >= this.height) {
this.y = -this.height;
}
if (this.y1 >= this.height) {
this.y1 = -this.height;
}
}
}
// 背景对象
var bakg = new by(bakgobj);
声明出相应的logo图片与暂停图片
// logo图片 var logo = new image(); logo.src = 'img/start.png' // 暂停图片 var pause = new image(); pause.src = 'img/game_pause_nor.png';
使用相同的思路声明入场时的飞机对象
// 入场阶段
var gamearr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png',
'img/game_loading4.png'
];
// 入场图片对象
var gamearr = [];
for (var i = 0; i < gamearr.length; i++) {
gamearr[i] = new image();
gamearr[i].src = gamearr[i];
}
// 入场飞机数据
var gameobj = {
img: gamearr,
width: 186,
height: 38,
length: gamearr.length
}
// 入场飞机函数
function game(params) {
this.imgs = params.img;
this.width = params.width;
this.height = params.height;
this.length = params.length;
this.index = 0; //入场顺序图片下标
this.thim = 0;
this.paint = function () {
cex.drawimage(this.imgs[this.index], 0, bakg.height - this.height);
}
this.sprot = function () {
this.thim++;
if (this.thim % 3 == 0) {
this.index++;
}
if (this.index == this.length) {
state = 2;
}
}
}
// 入场飞机对象
var game = new game(gameobj);
再声明飞机对象
// 飞机图片
var heroarr = ['img/hero1.png', 'img/hero2.png']
// 飞机图片对象
var heroarr = [];
for (var i = 0; i < heroarr.length; i++) {
heroarr[i] = new image();
heroarr[i].src = heroarr[i];
}
// 飞机数据
var heroobj = {
img: heroarr,
width: 99,
height: 124,
length: heroarr.length,
full:4, //生命
invinc_:50, //无敌时间
maga:500, //子弹数量
}
// 飞机函数
function hero(params) {
this.imgs = params.img;
this.width = params.width;
this.height = params.height;
this.length = params.length;
this.x = (bakgobj.width - this.width) / 2;
this.y = bakgobj.height - this.height;
this.index = 0;
this.maga=params.maga;
this.full=params.full; //飞机生命
this.invinc=0; //初始无敌时间
this.invinc_=params.invinc_;
this.frac=0; //飞机分数;
this.cou = 0; //控制子弹发射速度
this.ene = 0; //控制敌机出现频率
this.paint = function () {
if((this.invinc>0 && this.invinc%2==0)||this.invinc<=0){
cex.drawimage(this.imgs[this.index], this.x, this.y)
}
}
this.sprot = function () {
this.index++;
if (this.index == 2) {
this.index = 0;
}
}
// 增加射出子弹
this.bullk = function () {
this.cou++;
// 子弹发射速度
// if (this.cou % 5 == 0) {
bullsec.push(new bull(bullobj))
// }
}
// 增加敌机
this.enemysos = function () {
if (this.ene % 20 == 0) {
var rand = math.random();
if (rand < 0.5) {
enemy.push(new enemy(enemy1obj))
} else if (rand < 0.8) {
enemy.push(new enemy(enemy2obj))
} else {
enemy.push(new enemy3(enemy3obj))
}
}
this.ene++;
}
}
var hero = new hero(heroobj);
子弹对象与数组
// 子弹图像
var bullimg = new image();
bullimg.src = 'img/bullet1.png';
// 子弹数据
var bullobj = {
img: bullimg,
width: 9,
height: 21,
}
// 子弹函数
function bull(params) {
this.img = params.img;
this.width = params.width;
this.height = params.height;
this.x = hero.x + hero.width / 2 - this.width / 2;
this.y = hero.y - this.height;
this.paint = function () {
cex.drawimage(this.img, this.x, this.y)
}
this.sprot = function () {
this.y -= 20; //子弹飞行速度
}
}
var bull = new bull(bullobj);
// 界面上的子弹数组;
var bullsec = [];
function bull_paint() {
for (var i = 0; i < bullsec.length; i++) {
bullsec[i].paint();
}
}
function bull_sprot() {
for (var i = 0; i < bullsec.length; i++) {
bullsec[i].sprot();
}
}
敌机小、中、大对象与数组、方法
// 敌机--小
var enemy1arr = ['img/enemy1.png', 'img/enemy1_down1.png', 'img/enemy1_down2.png', 'img/enemy1_down3.png',
'img/enemy1_down4.png'
]
var enemy1arr = [];
for (var i = 0; i < enemy1arr.length; i++) {
enemy1arr[i] = new image();
enemy1arr[i].src = enemy1arr[i];
}
//敌机—-小 数据
var enemy1obj = {
img: enemy1arr,
width: 57,
height: 51,
length: enemy1arr.length,
frac:3,
full:1,
}
// 敌机--中
var enemy2arr = ['img/enemy2.png', 'img/enemy2_down1.png', 'img/enemy2_down2.png', 'img/enemy2_down3.png',
'img/enemy2_down4.png'
]
var enemy2arr = [];
for (var i = 0; i < enemy2arr.length; i++) {
enemy2arr[i] = new image();
enemy2arr[i].src = enemy2arr[i];
}
//敌机--中 数据
var enemy2obj = {
img: enemy2arr,
width: 69,
height: 95,
length: enemy2arr.length,
frac:5,
full:2,
}
// 敌机--小、中 函数
function enemy(params) {
this.imgs = params.img;
this.width = params.width;
this.height = params.height;
this.length = params.length;
this.frac=params.frac;
this.index = 0;
this.buff=math.random<0.05?true:false; //随机带buff
this.ext=false;//敌机是否被击落
this.full = params.full; //敌机生命值
this.x = math.random() * (bakg.width - this.width);
this.y = -this.height;
this.paint = function () {
cex.drawimage(this.imgs[this.index], this.x, this.y);
}
this.sprot = function () {
this.y += 5;
if (this.full <= 0) {
this.index++;
}
}
}
// 敌机--大
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 enemy3arr = [];
for (var i = 0; i < enemy3arr.length; i++) {
enemy3arr[i] = new image();
enemy3arr[i].src = enemy3arr[i];
}
//敌机--大 数据
var enemy3obj = {
img: enemy3arr,
width: 169,
height: 258,
length: enemy3arr.length,
frac:10,
full:4,
}
// 敌机--大 函数
function enemy3(params) {
this.imgs = params.img;
this.width = params.width;
this.height = params.height;
this.length = params.length;
this.frac=params.frac;
this.index = 0;
this.thim = 0;
this.buff=math.random<0.2?true:false; //随机带buff
this.ext=false;//敌机是否被击落
this.full = params.full;
this.full_=math.floor(this.full/2);//战损
this.x = math.random() * (bakg.width - this.width);
this.y = -this.height;
this.paint = function () {
cex.drawimage(this.imgs[this.index], this.x, this.y);
}
this.sprot = function () {
this.y += 5;
if (this.full <= 0) {
this.index++;
}else if(this.full>0&&this.full<=this.full_){
this.index=2;
}else if (this.thim % 5 == 0) {
this.index++;
if (this.index == 2) {
this.index = 0;
}
}
this.thim++;
}
}
//敌机数组
var enemy = [];
// 敌机绘制
function enemy_paint() {
for (var i = 0; i < enemy.length; i++) {
enemy[i].paint();
}
}
// 敌机移动
function enemy_sprot() {
for (var i = 0; i < enemy.length; i++) {
enemy[i].sprot();
}
}
// 敌机爆炸后删除
function enemy_del(){
for(var i=0;i<enemy.length;i++){
if(enemy[i].index==enemy[i].length){
hero.frac+=enemy[i].frac;
enemy.splice(i,1);
i--;
}
}
}
再创建一个函数判断碰撞
// 检测敌机是否产生碰撞
function enemy_bull_hero() {
hero.invinc--;
for (var i = 0; i < enemy.length; i++) {
if (hero.invinc<=0&&hero.y <= enemy[i].y + enemy[i].height&&hero.y>enemy[i].y-hero.height) {
if (hero.x > enemy[i].x - hero.width && hero.x < enemy[i].x + enemy[i].width) {
// 飞机与敌机碰撞;
hero.full--;
hero.invinc=hero.invinc_;
if(hero.full==0){
state = 4;
}
}
}
for (var n = 0; n < bullsec.length; n++) {
if (!enemy[i].ext&&bullsec[n].y <= enemy[i].y + enemy[i].height&&bullsec[n].y>enemy[i].y-bullsec[n].height) {
if (bullsec[n].x > enemy[i].x - bullsec[n].width && bullsec[n].x < enemy[i].x + enemy[i]
.width) {
// 敌机与子弹碰撞;
bullsec.splice(n, 1);
n--;
enemy[i].full--;
if(enemy[i].full<=0){
enemy[i].ext=true;
}
}
}
}
}
}
再分别绑定相应的事件
//点击画布从状态0切换到状态1;
canvas.onclick = function () {
if (state == 0) {
state = 1;
}
}
// 飞机跟随鼠标移动
canvas.onmousemove = function (e) {
if (state == 3) {
state = 2;
}
if (state == 2) {
var x = e.offsetx;
var y = e.offsety;
hero.x = x - hero.width / 2;
hero.y = y - hero.height / 2;
}
}
// 鼠标移出暂停
canvas.onmouseout = function () {
if (state == 2) {
state = 3;
}
}
// 弹夹子弹发射
document.onkeydown =function(event){
if(state==2){
if(event.keycode==32&&hero.maga>0){
hero.bullk() //增加界面射出子弹
hero.maga--;
}
}
};
最终在定时器中实时更新相应的画面
setinterval(function () {
bakg.paint()
bakg.sprot()
cex.font='40px 微软雅黑';
cex.filltext('生命：'+hero.full,330,40);
cex.filltext('分数:'+hero.frac,0,40);
cex.filltext('子弹:'+hero.maga,0,80);
if (state == 0) { //初始化
cex.drawimage(logo, 40, 0);
}
if (state == 1) { //出场动画
game.paint();
game.sprot();
}
if (state == 2) { //战斗状态
hero.paint()
hero.sprot()
bull_paint()
bull_sprot()
hero.enemysos() //增加敌机数量
enemy_paint()
enemy_sprot()
enemy_bull_hero() //碰撞检测
enemy_del();
}
if (state == 3) { //暂停状态
cex.drawimage(pause, 210, 375)
hero.paint()
bull_paint()
enemy_paint()
}
if (state == 4) { //游戏结束状态
cex.filltext('菜',bakg.width/2-30,bakg.height/2-90);
}
}, 30)
到此这篇关于“飞机大战使用js canvas编写的过程是怎样”的文章就介绍到这了，感谢各位的阅读，更多相关飞机大战使用js canvas编写的过程是怎样内容，欢迎关注群英网络资讯频道，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
标签：
js,canvas,飞机大战
相关信息推荐
2022-05-06 17:56:28
2022-05-17 11:47:18
2022-08-25 17:45:33
2022-12-14 11:21:38
2022-08-19 17:53:01
2022-08-19 17:51:59
js,canvas,飞机大战
mysql的数据类型
jar包
什么是mysql死锁
Python调用函数
set用法
字符串后三位
ApplicationContextAware接口
表单提交中文乱码
触发器
quazel
python代码
PHP数组排序
python 进制转化
php 加密后出错
golang 闭包
元宇宙+chatgpt+midjourney+意间绘画+AI作图
oracle查询空字段
python入口函数
Python关键字
jquery返回顶部
Gateway过滤器
PHP二维数组分页
关系数据库
跟踪sql语句
array_filter函数
oracle 注入类型
与php的区别
SpringBoot整合Mapper
postMessage跨域通信
2022-01-24 19:23:44
2022-02-25 17:19:26
2022-01-04 18:53:44
2022-01-26 18:39:38
2021-11-20 17:46:01
2022-01-18 18:00:09
2022-01-13 18:58:11
2022-01-24 19:23:57
2021-11-22 17:53:55
2021-11-20 17:45:40
群英网络助力开启安全的云计算之旅
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2019 群英网络 版权所有 茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号
