锐客网

  1. 首页 > 睿知 > it技术 > >

js+canvas实现飞机大战

本文实例为大家分享了js canvas实现飞机大战的具体代码，供大家参考，具体内容如下
首先我们绘制一个canvas区域，确实其宽高为480px*852px; 水平居中

Document - 锐客网canvas {position: absolute; left: 0; right: 0; margin: auto; border: #000 solid 1px; }

然后我们再用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 = 'https://www.it610.com/article/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 = 'https://www.it610.com/article/img/start.png'// 暂停图片var pause = new Image(); pause.src = 'https://www.it610.com/article/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 = https://www.it610.com/article/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 = https://www.it610.com/article/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 = 'https://www.it610.com/article/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 = https://www.it610.com/article/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 = https://www.it610.com/article/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; //随机带buffthis.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 = https://www.it610.com/article/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; //随机带buffthis.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
再创建一个函数判断碰撞
// 检测敌机是否产生碰撞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实现飞机大战】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

    推荐阅读


    上一篇：Java 17中对switch的模式匹配增强

    下一篇：论文解读（SAGPool）《Self-Attention|论文解读（SAGPool）《Self-Attention Graph Pooling》