小飞机 呼呼呼

最新推荐文章于 2021-11-24 11:13:33 发布
最新推荐文章于 2021-11-24 11:13:33 发布
阅读量90 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43967169/article/details/117231626
版权

用画布写飞机大战

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>飞机大战</title>
</head>
<body>
	<div style="margin: 0 auto; width: 480px; height: 852px; text-align:center;vertical-align:middle">
		<canvas id="canvas" width="480px" height="852px"></canvas>
	</div>
	
	<script type="text/javascript">
		var canvas = document.getElementById('canvas');
		var context = canvas.getContext('2d');
		// 获取canvas元素的高宽
		const WIDTH = canvas.width;
		const HEIGHT = canvas.height;

		// 定义阶段
		const START = 0; 
		const STARTTING = 1; 
		const RUNNING = 2; 
		const PAUSED = 3; 
		const GAMEOVER = 4;

		 //定义当前阶段变量 
		var state =  0; 
		var score = 0; // 游戏得分
		var life = 3; //我方飞机的生命值

		// 游戏开始
		// 绘制背景图片
		// 加载背景图片
		var bg = new Image();
		bg.src = 'img/background.png';

		var BG = {
			imgs:bg,
			width : 480,
			height : 852
		}


		// 创造一个背景的构造函数，动态效果创建两张
		function Bg(config){
			this.imgs = config.imgs;
			this.width = config.width ;
			this.height = config.height;

			this.y1 = 0;
			this.y2 = -this.height;

			// 绘制图片
			this.paint = function (ctx){
				ctx.drawImage(this.imgs,0,this.y1);
				ctx.drawImage(this.imgs,0,this.y2);
			}


			// 运动
			this.step = function(){
				this.y1++;
				this.y2++;
				if(this.y2 == 0){
					this.y1 = -this.height;
				}
				if(this.y1 == 0 ){
					this.y2 = - this.height;
				}
			}
		}

		// 创建背景对象
		var sky = new Bg(BG);

		// 创建logo
		var logo = new Image();
		logo.src = 'img/start.png';

		//点击画布游戏进入加载
		canvas.onclick = function(){
			if(state == START){
				state = STARTTING;
			}
		}

		// 加载阶段
		// 加载图片

		var  loadings = [];
		loadings[0] = new Image();
		loadings[0].src = 'img/game_loading1.png';
		loadings[1] = new Image();
		loadings[1].src = 'img/game_loading2.png';
		loadings[2] = new Image();
		loadings[2].src = 'img/game_loading3.png';
		loadings[3] = new Image();
		loadings[3].src = 'img/game_loading4.png';

		var LOADING = {
			imgs : loadings,
			width : 186,
			height : 38,
			sum : loadings.length
		}

		function Loading(config){
			this.imgs = config.imgs;
			this.width = config.width;
			this.height = config.height;
			this.sum = config.sum;

			// 定义索引
			this.frameIndex = 0;

			// 绘制图片
			this.paint = function(ctx){
				ctx.drawImage(this.imgs[this.frameIndex],0,HEIGHT-this.height);
			}

			// 定义速度
			this.speed = 0;
			// 运动
			this.step = function(){
				this.speed++;
				if(this.speed % 3 == 0){
					this.frameIndex++;
				}
				if(this.frameIndex == 4){
					state = RUNNING;
				}
			}
		}

		var loading = new Loading(LOADING);
		// 游戏运行

		// 我方飞机

		// 加载我方

		var heros = [];
		heros[0] = new Image();
		heros[0].src = 'img/hero1.png';
		heros[1] = new Image();
		heros[1].src = 'img/hero2.png';
		heros[2] = new Image();
		heros[2].src = 'img/hero_blowup_n1.png';
		heros[3] = new Image();
		heros[3].src = 'img/hero_blowup_n2.png';
		heros[4] = new Image();
		heros[4].src = 'img/hero_blowup_n3.png';
		heros[5] = new Image();
		heros[5].src = 'img/hero_blowup_n4.png';

		// 我方飞机的数据
		var HERO = {
			imgs : heros,
			width : 99,
			height : 124,
			sum : heros.length
		}

		// 创建我方飞机
		function Hero(config){
			this.imgs = config.imgs;
			this.width = config.width;
			this.height = config.height;
			this.sum = config.sum;

			// 定义索引
			this.frameIndex = 0;
			// 定义飞机坐标值
			this.x = (WIDTH - this.width)/2;
			this.y = HEIGHT - this.height - 30;
			// 是否爆炸
			this.down = false;

			// 绘制
			this.paint = function(ctx){
				ctx.drawImage(this.imgs[this.frameIndex],this.x,this.y);
			}

			// 运动
			this.step = function(){
				if(this.down){//爆炸了
					this.frameIndex ++;
					if(this.frameIndex == this.sum){
						this.frameIndex = this.sum - 1;
						life --;
						if(life == 0){
							state = GAMEOVER;
						}else{
							hero = new Hero(HERO);
						}
					}
				}else{
					this.frameIndex = (++this.frameIndex) % 2;	
				}
			}


			// 射击

			this.shoot = function(){
				bullets[bullets.length] = new Bullet(BULLET);
			}

			// 撞击
			this.canDown = function(){
				this.down = true; 
				this.frameIndex = 2;
			}

		}

		// 创建我方飞机对象
		var hero = new Hero(HERO);

		// canvas绑定mousemove事件
		canvas.onmousemove = function(event){
			if(state == RUNNING){
				hero.x = event.offsetX - hero.width / 2;
				hero.y = event.offsetY - hero.height / 2;
			}
		}

		// 子弹

		// 加载图片

		var bullet = new Image();
		bullet.src = 'img/bullet1.png';

		// 子弹初始化数据
		var BULLET = {
			imgs : bullet,
			width : 9,
			height : 21
		}

		function Bullet(config){
			this.imgs = config.imgs;
			this.width = config.width;
			this.height = config.height;

			// 子弹坐标
			this.x = hero.x + hero.width/2 - this.width/2;
			this.y = hero.y - this.height - 10;
			// 子弹是否消失
			this.del = false;
			// 绘制
			this.paint = function(ctx){
				ctx.drawImage(this.imgs,this.x,this.y);
			}

			//移动
			this.step = function(){
				this.y -= 25;
			}
		}

		// 存储子弹
		var bullets = [];
		// 绘制

		function paintBullets(){
			for(var i = 0; i < bullets.length; i++){
				bullets[i].paint(context);
			}
		}
		// 移动所有子弹
		function stepBullets(){
			for(var i = 0; i < bullets.length;i++){
				bullets[i].step();
			}
		}
		// 删除子弹
		function delBullets(){
			for(var i = 0; i < bullets.length;i++){
				if(bullets[i].y <= -bullets[i].height || bullets[i].del){
					bullets.splice(i,1);
				}
			}
		}


		// 敌机
		// 加载图片

		// 小飞机
		var enemy1 = [];
		enemy1[0] = new Image();
		enemy1[0].src = 'img/enemy1.png';
		enemy1[1] = new Image();
		enemy1[1].src = 'img/enemy1_down1.png';
		enemy1[2] = new Image();
		enemy1[2].src = 'img/enemy1_down2.png';
		enemy1[3] = new Image();
		enemy1[3].src = 'img/enemy1_down3.png';
		enemy1[4] = new Image();
		enemy1[4].src = 'img/enemy1_down4.png';
		// 中等飞机
		var enemy2 = [];
		enemy2[0] =new Image();
		enemy2[0].src = 'img/enemy2.png';
		enemy2[1] = new Image();
		enemy2[1].src = 'img/enemy2_down1.png';
		enemy2[2] = new Image();
		enemy2[2].src = 'img/enemy2_down2.png';
		enemy2[3] = new Image();
		enemy2[3].src = 'img/enemy2_down3.png';
		enemy2[4] = new Image();
		enemy2[4].src = 'img/enemy2_down4.png';

		// 大飞机
		var enemy3 = [];
		enemy3[0] = new Image();
		enemy3[0].src = 'img/enemy3_n1.png';
		enemy3[1] = new Image();
		enemy3[1].src = 'img/enemy3_n2.png';
		enemy3[2] = new Image();
		enemy3[2].src = 'img/enemy3_down1.png';
		enemy3[3] = new Image();
		enemy3[3].src = 'img/enemy3_down2.png';
		enemy3[4] = new Image();
		enemy3[4].src = 'img/enemy3_down3.png';
		enemy3[5] = new Image();
		enemy3[5].src = 'img/enemy3_down4.png';
		enemy3[6] = new Image();
		enemy3[6].src = 'img/enemy3_down5.png';
		enemy3[7] = new Image();
		enemy3[7].src = 'img/enemy3_down6.png';

		// 敌机数据
		var ENEMY1 = {
			imgs : enemy1,
			width : 57,
			height : 51,
			sum : enemy1.length,
			type : 1,
			life : 1,
			score : 1
		}

		var ENEMY2 = {
			imgs : enemy2,
			width : 69,
			height : 95,
			sum : enemy2.length,
			type : 2,
			life : 5,
			score : 3
		}

		var ENEMY3 = {
			imgs : enemy3,
			width : 169,
			height : 258,
			sum : enemy3.length,
			type : 3,
			life : 20,
			score : 10
		}

		function Enemy(config){
			this.imgs = config.imgs;
			this.width = config.width;
			this.height = config.height;
			this.sum = config.sum;
			this.type = config.type;

			this.life = config.life;
			this.score = config.score;

			this.x = Math.random()* (WIDTH - this.width);
			this.y = - this.height;

			// 定义索引
			this.frameIndex = 0;
			// 是否爆炸
			this.down = false;
			// 是否删除
			this.del = false;

			// 绘制
			this.paint = function(ctx){
				ctx.drawImage(this.imgs[this.frameIndex],this.x,this.y);
			}

			this.step = function(){
				if(this.down){
					this.frameIndex++;
					if(this.frameIndex == this.sum){
						this.del = true;
						score += this.score;
						this.frameIndex = this.sum - 1;
					}
				}else{
					switch (this.type) {
						case 1: //小飞机
							this.frameIndex = 0;
							this.y += 10;
							break;
						case 2:
							this.frameIndex = 0;
							this.y += 5;
							break;
						case 3:
							this.frameIndex = (this.frameIndex == 0) ? 1 : 0;
							this.y ++;
							break;
					}
				}
			}

			// 撞敌机

			this.hit = function(compont){
				return compont.y + compont.height >= this.y && compont.x + compont.width >= this.x && compont.y <= this.y + this.height && compont.x <= this.x + this.width;
			}

			this.canDown = function(){
				this.life -- ;

				if(this.life == 0){
					this.down = true;
					if(this.type == 3){
						this.frameIndex = 2;
					}else{
						this.frameIndex = 1;
					}
				}
			}
		}

		//创建敌机数组
		var enemies = [];
		function createEnemy(){
			var num = Math.random()*50;
			if(num <= 5){
				enemies[enemies.length] = new Enemy(ENEMY1);
			}else if (num <= 8) {
				enemies[enemies.length] = new Enemy(ENEMY2);
			}else if (num <= 10) {
				if(enemies.length > 0 && enemies[0].type != 3){
					enemies.splice(0,0,new Enemy(ENEMY3));
				}
			}
		}

		// 绘制敌机
		function paintEnemies(){
			for(var i = 0; i < enemies.length; i++){
				enemies[i].paint(context);
			}
		}

		// 移动敌机
		function stepEnemies(){
			for(var i = 0; i < enemies.length; i++){
				enemies[i].step();
			}
		}

		//移除飞出画布的敌机
		function  delEnemies() {
			for(var i = 0; i < enemies.length; i++){
				if(enemies[i].y == HEIGHT || enemies[i].del){
					enemies.splice(i,1);
				}
			}
		}

		// 判断是否被撞击
		function checkHit(){
			for(var i = 0; i < enemies.length; i++){
				if(enemies[i].hit(hero) && !hero.down && !enemies[i].down){
					hero.canDown();
					enemies[i].canDown();
				}
				// 被子弹打
				for(var j = 0; j < bullets.length;j++){
					if(enemies[i].hit(bullets[j])&& !enemies[i].down){
						bullets[j].del = true;

						enemies[i].canDown();
					}
				}
			}
		}

		// 绘制得分和生命
		function paintText(){
			context.font = 'bold 24px 微软雅黑';
			context.fillText('分数:'+score,10,30);
			context.fillText('生命值:' + life,380,30);
		}

		// 鼠标离开画布
		canvas.onmouseout = function(){
			if(state ==RUNNING){
				state = PAUSED;
			}
		}

		// 回到画布
		canvas.onmouseover = function(){
			if(state == PAUSED){
				state = RUNNING;
			}
		}

		// 绘制暂停
		var paused = new Image();
		paused.src = 'img/game_pause_nor.png';
		paused.width = 60;
		paused.height = 45;

		// 绘制GAMEOVWE 
		function paintOver(){
			context.font = 'bold 48px 微软雅黑';
			context.fillText('GAME OVER!',WIDTH/2-150,HEIGHT/2);
		}

		// 控制器
		setInterval(function(){
			sky.paint(context);
			sky.step();
			switch (state) {
				case START:
					context.drawImage(logo,20,0);
					break;
				case STARTTING:
					loading.paint(context);
					loading.step();
					break;
				case RUNNING:
					hero.paint(context);
					hero.step();
					hero.shoot();

					paintBullets();
					stepBullets();
					delBullets();

					createEnemy();
					paintEnemies();
					stepEnemies();
					delEnemies();

					checkHit();
					paintText();
					break;
				case PAUSED:
					hero.paint(context);
					paintBullets();
					paintEnemies();

					paintText();

					context.drawImage(paused,WIDTH/2-paused.width/2,HEIGHT/2-paused.height/2);
					break;
				case GAMEOVER:
					hero.paint(context);
					paintBullets();
					paintEnemies();

					paintText();
					paintOver();
					break;
			}
		},30);

	

	</script>

</body>
</html>
也许丶曾经
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
花一天时间做一个高质量飞机大战游戏，过万字Unity完整教程！漂亮学妹看了直呼666！
努力前行，总会成为自己心中的那道光
06-07 26万+
Unity制作飞机大战。本篇文章完整的介绍了使用Unity引擎制作一个飞机大战的小游戏，附带游戏过程，截图和讲解，最后附带工程源码，请品尝！
java飞机大逻辑思路_大神Java8写了一段逻辑，我直呼看不懂
weixin_42347486的博客
02-27 53
mac下搭建redis环境一.redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有 ...POJ 3669 Meteor Shower【BFS】POJ 3669 去看流星雨,不料流星掉下来会砸毁上下左右中五个点.每个流星掉下的位置和时间都不同,求能否活命,...
机器人都能造飞机了，你还在呼呼大睡？
weixin_33802505的博客
03-01 55
西门子用玉米3D打印出一个机器人，可被用于制造大型结构。 日前，西门子科研技术院表示，隶属普林斯顿大学的技术团队完成一个创举——用玉米3D打印了一个蜘蛛机器人。经试验证实相当好用。 这个机器人被叫做SiSpis！它身上安装着挤出器、3D打印臂、相机和激光扫描仪。这些配置可是大有作用，挤出器可挤出PLA打印材料，相机...
电销外呼不停封，用外呼系统性价比高
m0_58240684的博客
11-24 230
电销人员常常会因为号卡被停用而难以继续开展销售业务。所以，怎么样解决电话外呼会被封停的问题，是电话销售人员亟待解决的问题，要知道电销对于任何一家企业来说都是业绩飞涨的利器，一旦电销无法有序开展，就像断臂的飞机，难以腾空起飞。 出于对电信的打击，工信部出台了严格的通信规则。对手机号卡外呼主叫进行了一些限制，一是多打电话，二是对被投诉的手机采取封停的措施。 作为销售人员每天需要主叫外呼出很多的电话。就会遭遇经常被封停的困扰。为此，有的企业会选择采购许多手机卡和多部固话坐席，来进行拨号。然而这样做不但成本
专题五压强和浮力五年中考荟萃.doc
10-08
6. 浮力与压强的变化：潜水员呼出的气泡在上升过程中，由于外部水的压强随着深度的减小而减小，气泡内的气体体积会因为压强降低而膨胀。同时，根据阿基米德原理，浮力与气泡排开水的体积成正比，所以随着体积增大，...
山东省武城县第二中学2015_2016学年八年级化学上学期期中试题无答案鲁教版五四制
08-18
6. **量筒的使用及读数**：第6题涉及量筒的读数技巧，俯视时读数偏大，仰视时读数偏小，实际倒出的液体体积小于读数差。 7. **化学学科的研究范畴**：第7题指出化学学科不研究物质的运动状态，这是物理学的研究范畴...
QT语音的极速模式.docx
09-27
- **游戏F9呼出**：在腾讯的《穿越火线》游戏中，玩家可以直接按F9键快速开启QT语音并进入极速模式。 2. **自动资源优化**： - 极速模式启动后，QT语音会自动优化性能，减少CPU、内存和带宽的占用，以适应游戏...
小学体育知识大全.doc
10-11
5. **呼吸节奏**：跑步时保持呼吸节奏，如两步一呼两步一吸或三步一呼三步一吸，能有效提高耐力。 6. **跳高技巧**：跳高包括原地起跳、摸高、登高等动作。跨越式跳高要求侧面直线助跑，根据起跳腿和摆动腿的不同...
湖北省宜昌市点军区2015_2016学年八年级物理上学期期中试题新人教版
08-06
16. **液化现象**：口里呼出的“白气”是水蒸气液化，冰箱里冲出的“白气”是空气中的水蒸气液化。 17. **速度图象**：根据st图象，甲车做匀速直线运动，速度为10m/s，乙车速度为2m/s，6s后两车相距18m，5s后两车...
分包合同计量单.docx
07-13
分包合同计量单.docx
树莓派简介PPT课件.ppt
07-13
树莓派简介PPT课件.ppt
项目债务盘点明细表.docx
07-13
项目债务盘点明细表.docx
全网最热Python3入门+进阶 更快上手实际开发
最新发布
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
管理干部培训计划PPT模板
07-13
【作品名称】：管理干部培训计划PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
黑色风格年终总结汇报PPT模板
07-13
【作品名称】：黑色风格年终总结汇报PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
Java实训教程 Java软件开发实战 Java类库 第4章 集合操作 共31页.pptx
07-13
【课程大纲】 完整教程：https://download.csdn.net/download/qq_27595745/89538425 Java软件开发实战 Java类库 第1章 Object类 共29页.pptx Java软件开发实战 Java类库 第2章 字符串处理 共49页.pptx Java软件开发实战 Java类库 第3章 包装器类等 共40页.pptx Java软件开发实战 Java类库 第4章 集合操作 共31页.pptx Java软件开发实战 Java类库 第5章 io操作 共35页.pptx Java软件开发实战 Java类库 第6章 其它综合 共38页.pptx Java软件开发实战 Java类库 第7章 JDBC 共113页.pptx
红金商务风2024新征程再出发通用工作汇报PPT模板 (2)
07-13
【作品名称】：红金商务风2024新征程再出发通用PPT模板 (2) 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
红色商务风2023年终总结暨新年计划PPT模板
07-13
【作品名称】：红色商务风2023年终总结暨新年计划PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
打小飞机python
12-12
以下是一个简单的Python打小飞机游戏的例子： ```python import pygame import random # 初始化pygame pygame.init() # 设置游戏窗口大小 screen = pygame.display.set_mode((480, 700)) # 设置游戏标题 pygame....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值