使用canvas编写飞机大战小游戏

本文章讲述如何使用canvas实现一个飞机大战的小游戏，游戏我取名为fight-AO（点击查看源码）实现可以发射子弹、击败怪兽、自动生成怪兽…怪兽名字为AO，击败AO的叫做Superman。点击试玩

文章目录

  • 使用canvas编写飞机大战小游戏
  • 前言
  • 一、组件版本
  • 二、项目结构
  • 三、代码&思路讲解
    • 1. 使用canvas
      • 1.1 代码
      • 1.2 知识点
    • 2. 移动超人
      • 2.1 代码
      • 2.2 知识点
    • 3. 发射炮弹cannonball
      • 3.1 代码
      • 3.2 知识点
    • 4. AO小怪兽
      • 4.1 代码
      • 4.2 知识点
  • 四、总结

前言

在了解如何编写游戏过程时，你需要知道vue框架，element ui帮助你快速快速开发。

一、组件版本

├─┬ @vue/cli-plugin-babel@4.5.13
│ └─┬ @vue/babel-preset-app@4.5.13
│   └── vue@2.6.14 deduped
├─┬ element-ui@2.15.3 -> ./node_modules/_element-ui@2.15.3@element-ui
│ └── vue@2.6.14 deduped
└── vue@2.6.14

二、项目结构

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public                      #开放的资源
│   ├── favicon.ico
│   ├── fight-AO
│   │   ├── AO.png
│   │   └── superman.png
│   └── index.html
└── src                         #源文件├── App.vue├── assets                   #项目资源文件│   └── logo.png├── components               #vue组件│   └── fight-AO.vue      #本文章讲解的文件├── main.js                    #项目主配置└── router                    #vue组件路由└── router.js

三、代码&思路讲解

以下讲解对编写游戏过程的讲解，不会深入剖析底层代码。

1. 使用canvas

1.1 代码

<canvas id="canvas"></canvas>//样式
<style scoped>#canvas {margin: 0;background-image: url("../../public/fight-AO/sky.jpeg");}
</style>//获取canvas
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
//宽和高指定为页面布局大小
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight - 50;

1.2 知识点

  • canvas全部教程
  • 使用canvas来绘制图形
  • 使用图像 Using images
  • 2d布局里的xy轴来指定位置如图：

2. 移动超人

2.1 代码

 //超人外形this.supermanImg.src = '/fight-AO/superman.png';//超人初始位置this.supermanX = (this.canvas.width - this.supermanW) / 2;this.supermanY = (this.canvas.height - this.supermanH) / 1.2;//外形加载完成后设置superman初始位置this.supermanImg.onload = () => {this.supermanMove();}//监听走位window.onkeydown = this.keyDown;window.ontouchmove = this.touchmove;/*** 移动超人*/supermanMove() {this.moveArr.push({x: this.supermanX, y: this.supermanY, w: this.supermanW, h: this.supermanH})//如果有移动就删除指定位置if (this.moveArr.length > 1) {let m = this.moveArr[this.moveArr.length - 2];this.ctx.clearRect(m.x, m.y, m.w, m.h);}let m = this.moveArr[this.moveArr.length - 1];this.ctx.drawImage(this.supermanImg, m.x, m.y, m.w, m.h);//清除以前步数for (let i = 0; i < this.moveArr.length - 3; i++) {delete this.moveArr[i];}}/*** 键盘事件*/keyDown(event) {if (!this.checkActionStartStatus()) return;switch (event.keyCode) {  // 获取当前按下键盘键的编码case 32 :  // 按空格暂停break;case 37 :  // 按下左箭头键，向左移动this.supermanX -= this.speed;break;case 39 :  // 按下右箭头键，向右移动this.supermanX += this.speed;break;case 38 :  // 按下上箭头键，向上移动this.supermanY -= this.speed;break;case 40 :  // 按下下箭头键，向下移动this.supermanY += this.speed;break;// default://     return;}//是否超出边界if (this.supermanX >= this.canvas.width - (this.supermanW / 2)) {this.supermanX -= this.speed;} else if (this.supermanX + (this.supermanW / 2) <= 0) {this.supermanX += this.speed;} else if (this.supermanY >= this.canvas.height - this.supermanW) {this.supermanY -= this.speed;} else if (this.supermanY <= 0) {this.supermanY += this.speed;}this.supermanMove();},/*** 手指摁下* @param event*/touchmove(event) {if (!this.checkActionStartStatus()) return;let moveX = event.changedTouches[0].pageX;let moveY = event.changedTouches[0].pageY;this.supermanX = moveX;this.supermanY = moveY;this.supermanMove();}

2.2 知识点

  • 通过速度this.speed改变超人移动的速度，只有在键盘事件有用，玩家操作上下左右分别对应y-speed, y+speed, x-speed, x+speed。改变this.supermanX，this.supermanY的值超人就可以轻易的移动。
  • supermanMove()函数封装了记录this.moveArr超人位置，this.ctx.clearRect清除上一次显示位置，this.ctx.drawImage画出当前移动位置，清除历史移动delete this.moveArr[i];

3. 发射炮弹cannonball

3.1 代码

//启动炮弹setInterval(() => {if (this.checkActionStartStatus()) {this.cannonball();this.upup = 10;}}, 300)/*** 炮弹*/cannonball() {let cannonballArr = []//先把y画出来 当前y-upup直到小于0 y越小就越往上 直到小于-AO的高度while (this.supermanY - this.upup > -this.aoHeight) {this.upup += this.cannonballSpace;//加上每个炮弹的间距//记录当前这组炮弹发射的轨迹cannonballArr.push({x: this.supermanX + (this.supermanW / 2), y: this.supermanY - this.upup});}let index = 0;//炮弹位置let clearCannonball = 0;//清除多余炮弹let cannonballNum = this.cannonballNum;//炮弹数量//通过定时器实现炮弹动起来的效果let interval = setInterval(() => {//炮弹发完了 只有发射一次炮弹才会走这个判断 避免浪费资源if (cannonballArr.length === 0) {clearInterval(interval);return;}//到顶了炮弹看不见了if (cannonballNum >= cannonballArr.length) {cannonballNum = cannonballArr.length - 1;}//清除历史炮弹 // console.log(index + '===' + cannonballNum + '====' + clearCannonball + '====' + cannonballArr.length)if (index >= cannonballNum && clearCannonball < cannonballArr.length) {let arrElement = cannonballArr[clearCannonball];this.ctx.clearRect(arrElement.x, arrElement.y + this.cannonballHeight,this.cannonballWidth + this.cannonballWidth / 2,this.cannonballSpace)clearCannonball++;}//炮弹发完了if (index >= cannonballArr.length - 1) {if (clearCannonball > cannonballArr.length - 1) clearInterval(interval);} else {//发射炮弹let arrElement = cannonballArr[index];if (!arrElement) return;//炮弹的样式this.ctx.fillStyle = "rgb(200,100,200)"this.ctx.fillRect(arrElement.x, arrElement.y, this.cannonballWidth, this.cannonballHeight)//清除啊哦 这段判断主要是消灭AOif (this.aoArr.length > 0) {// let arrElement = cannonballArr[cannonballArr.length - 1 - index];//查找啊哦的位置let aoObj = this.aoArr.find(o =>//把区间放大(o.x + this.aoWidth) >= arrElement.x && (o.x) <= arrElement.x&& o.y + this.aoWidth >= arrElement.y && o.y - this.aoHeight <= arrElement.y);if (aoObj) {this.aoDieNum++;// console.log(index + '===' + arrElement.x + '===' + arrElement.y)this.ctx.clearRect(aoObj.x, aoObj.y, this.aoWidth, this.aoHeight)aoObj.x = 1000;aoObj.y = 1000;this.resetAO();}}index++;}}, 30);}

3.2 知识点

  • this.upup一组炮弹移动间隙，通过它来改变y值的变化让AO动起来
  • this.cannonballSpace每个炮弹之间的空间，让炮弹看起来更加有节奏
  • this.cannonballNum每次发射的炮弹数量

4. AO小怪兽

4.1 代码

    this.aoImg1.src = "/fight-AO/AO01.png"this.aoImg2.src = "/fight-AO/AO02.png"this.aoImg3.src = "/fight-AO/AO03.png"this.aoImg4.src = "/fight-AO/AO04.png"this.aoImg5.src = "/fight-AO/AO05.png"//初始化啊哦this.AO();//开启AO移动速度 50ms移动一次setInterval(() => {//检查游戏是否开始 如果以开始就判断超人是否已触碰到AO游戏结束if (this.checkActionStartStatus()) {//查找啊哦的位置let aoObj = this.aoArr.find(o =>//把区间放大o.x + (this.aoWidth / 2) >= this.supermanX && o.x - (this.aoWidth * 1.1) <= this.supermanX&& o.y + this.aoHeight >= this.supermanY && o.y - this.aoHeight <= this.supermanY);//是否已触碰到超人if (aoObj) {//游戏暂停this.actionPause();//提示游戏结束this.$alert('游戏结束												


											

使用canvas编写飞机大战游戏相关推荐
	

    
						
  1. 用Java编写飞机大战游戏
		
    飞机大战(Plane War)是一款非常受欢迎的小游戏,它通过增加玩家的难度和挑战性,促使玩家不断提高自己的操作能力和反应速度,并在升级过程中逐步拓展游戏世界的规模和内容.本文将介绍如何使用Java编 ...
    
		
    2. 
						
  2. 游戏角色坐标的保存间隔_使用C++编写飞机大战游戏【手把手教程】
		
    友情地提示本文较长,建议保存,慢慢学学.可以直接观看视频教程. C++干大事系列之游戏篇:Qt飞机大战​yun.itheima.com 1.项目简介 飞机大战是我们大家所熟知的一款小游戏,本教程就是教 ...
    
		
    3. 
						
  3. canvas编写飞机大战
		
    整体分析 1.定义游戏状态 (1)游戏欢迎状态 START (2)游戏加载状态 LOADING (3)游戏运行状态 RUNNING (4)游戏暂停状态 PAUSE (5)游戏结束状态 GAMEOVER ...
    
		
    4. 
						
  4. 飞机大战HTML5游戏源码，基于Canvas制作的网页版飞机大战游戏+飞机大战手机端
		
    简介: 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏,画质精美的飞机大战手机端游戏源码 网盘下载地址: http://kekewangLuo.net/W1S2LQcqAT2 ...
    
		
    5. 
						
  5. 用C语言实现飞机大战游戏编写
		
    用C语言实现飞机大战游戏编写 前段时间(其实是寒假)看了知乎上童晶老师的书<"啥名字忘了挺长的">,非常感兴趣,遂自己进行了一系列魔改. 程序用的是单纯的C语言,调用了 ...
    
		
    6. 
						
  6. Python实验，用pygame做飞机大战游戏设计
		
    飞机大战游戏设计 摘 要:根据课程要求,以及面向对象程序设计的编程思想,在Windows操作系统环境下,运用PyCharm编译程序,以Python语言为开发语言,最终实现飞机大战游戏相应的游戏操作功能 ...
    
		
    7. 
						
  7. python飞机大战概要设计_飞机大战游戏开发文档(Android版)
		
    飞机大战游戏 开发文档 (Android版) 课程名称:飞机大战游戏 课程类型:Android游戏编程精彩内容,尽在百度攻略:https://gl.baidu.com 姓名:苏均灿 学号:131342 ...
    
		
    8. 
						
  8. 鸿蒙开发实例 | ArkUI JS飞机大战游戏开发
		
    本篇介绍使用ArkUI JS框架开发一款基于鸿蒙操作系统的飞机大战游戏.这款飞机大战游戏是在普通单机游戏的基础上添加了鸿蒙操作系统分布式支持,使游戏可以同时使用多台鸿蒙操作系统设备,为游戏玩家提供分布 ...
    
		
    9. 
						
  9. 用Unity快速开发太空飞机大战游戏实战经验分享（上）
		
    用unity动手先来试试一个简单的太空飞机大战吧.看官请继续往下... 最终效果,可控制己方战机,朝目标敌机发射子弹,打飞机~~~!伴随想象,慢慢呈现这个太空飞机大战游戏. 1. 新建打飞机unity ...
    
		
    10. 
						
  10. 基于Java的飞机大战游戏的设计与实现论文
		
    源码下载 http://www.byamd.xyz/hui-zong-1/ 摘 要 现如今,随着智能手机的兴起与普及,加上4G(the 4th Generation mobile communicat ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. SQLSERVER2000同表数据复制(部分复制)
		
    2. 
						
  2. Linux_文件系统、磁盘分区_RHEL7
		
    3. 
						
  3. JQuery预加载的四种种方式
		
    4. 
						
  4. Linux中mod相关的命令 内核模块化   mod相关命令都是用来动态加载内核模块/驱动程序模块...
		
    5. 
						
  5. 为什么有必要对网站开启https？
		
    6. 
						
  6. tensorflow之dropout
		
    7. 
						
  7. j2ee学习方法摘要
		
    8. 
						
  8. WebService
		
    9. 
						
  9. AllenNLP常用命令记录
		
    10. 
						
  10. Arduino温控风扇
		
    11. 
						
  11. python config方法_Python config.Configuration方法代码示例
		
    12. 
						
  12. 外文文献查找技巧方法有哪些
		
    13. 
						
  13. 数据中心产业深度报告：IDC产业链景气周期及投资框架分析
		
    14. 
						
  14. 云硬盘备份 | 概览
		
    15. 
						
  15. python房价预测_python房价预测
		
    16. 
						
  16. html [JS]随机密码生成[运维工具]
		
    17. 
						
  17. stm32f10x.h解析
		
    18. 
						
  18. 开机自启动bat脚本，并显示Dos窗口
		
    19. 
						
  19. vue移动端禁止双击放大
		
    20. 
						
  20. HTML5网页页面无刷新更新页面URL
		
    21. 
		

	


热门文章
	

    
									
  1. Godaddy绑定手机遗失，成功申诉取消手机两步验证全过程
			
    2. 
						
  2. java+vue+onlyoffice的简单集成
			
    3. 
						
  3. Routing Congestion
			
    4. 
						
  4. 滥用exchage远程调用域管理员API接口
			
    5. 
						
  5. 【语音智能管家】之语音唤醒（附演示视频）
			
    6. 
						
  6. 如何利用【百度地图API】，制作房产酒店地图？（上）——制作自定义标注和自定义信息窗口
			
    7. 
						
  7. CrowdPose: Efficient Crowded Scenes Pose Estimation and A New Benchmark
			
    8. 
						
  8. 编程之美 - 让CPU占用率曲线听你指挥
			
    9. 
						
  9. 轻量级服务器和ECS云服务器有什么区别？
			
    10. 
						
  10. windows media 服务器运行失败,Windows Media Player出现服务器运行失败怎么办？出现服务器运行失败处理方法介绍...
			
    11.