自己制作飞机大战小游戏 canvas应用实例

最新推荐文章于 2021-12-05 22:05:00 发布
最新推荐文章于 2021-12-05 22:05:00 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S_1978P1/article/details/82348554
版权
这篇博客分享了如何利用HTML5的canvas元素制作一款飞机大战小游戏。通过提供的百度云链接，读者可以获取到相关的图片资源。
摘要由CSDN通过智能技术生成

 图片只能打包上传

百度云链接：https://pan.baidu.com/s/1bxHZYtsZxTzPFis4Fq4AvA 密码：xshc

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>飞机大战</title>
		<style type="text/css">
			canvas{
				display: block;
				margin: 150px auto;
				cursor: none;
			}
		</style>
	</head>
	<body>
		<!--创建基本的canvas及基本属性-->
		<canvas id="canvas" width="480" height="600"></canvas>
		
		<script type="text/javascript">
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");
//		创建基本的canvas及基本属性	  以上

//			0,游戏初始化
//			0.1定义游戏的几个状态/阶段
			var START = 0; 				//游戏开始阶段(欢迎界面)
			var STARTING = 1;			//游戏运行前阶段(加载界面)
			var RUNNING = 2;			//游戏运行中阶段(游戏中)
			var PAUSE = 3;				//游戏暂停阶段(游戏暂停)
			var GAMEOVER = 4;			//游戏结束阶段(死亡时刻)
			
//			0.2定义一个状态,与上面定义的状态对比,确定当前是处于哪个阶段
			var status = START;
//			0.3定义当前画布宽高
			var w = canvas.width;
			var h = canvas.height;
//			0.4定义分数
			var socre = 0;
//			0.5定义我方飞机血量
			var HP = 50;
			
//			1游戏开始阶段
//			1.1加载背景图片
//			1.1.1创建背景图片对象
			var bg = new Image();
			bg.src = "img/background.png";
//			1.1.2初始化背景图片数据
			var BG = {
				imgs : bg,
				width : 480,
				height : 852,
			}
//			1.1.3创建背景图片的构造器函数(构造对象)
			function Bg(imagess){
				this.imgs = imagess.imgs;
				this.width = imagess.width;
				this.height = imagess.height;
				
				this.x1 = 0;
				this.y1 = 0;
				this.x2 = 0;
				this.y2 = -this.height;
				
				
//				绘制背景图片 方法
				this.paint = function(){
					context.drawImage(this.imgs,this.x1,this.y1);
					context.drawImage(this.imgs,this.x2,this.y2);
				}
				
//				背景图片运动方法
				this.imgMove = function(){
					this.y1++;
					this.y2++
//					判断图片临界点
					if(this.y1 == this.height){
						this.y1 = -this.height 
					}
					if(this.y2 == this.height){
						this.y2 = -this.height;
					}
				}
			}
			
			//			1.1.4创建背景图片对象
			var back = new Bg(BG);
			
			
//			1.2绘制游戏名
			var logo = new Image();
			logo.src = "img/start.png";
			
//			2游戏运行前阶段
//			2.1绘制正在加载游戏的图片
			var loadding = [];
			loadding[0] = new Image();
			loadding[0].src = "img/game_loading1.png";
			loadding[1] = new Image();
			loadding[1].src = "img/game_loading2.png";
			loadding[2] = new Image();
			loadding[2].src = "img/game_loading3.png";
			loadding[3] = new Image();
			loadding[3].src = "img/game_loading4.png";
//			2.2初始化图片的数据
			var LOADING = {
				imgs : loadding,
				length : loadding.length,
				width: 186,
				height : 38,
			}
			
//			2.3定义开始前动画构造器
			function loading(imagess){
				this.imgs = imagess.imgs;
				this.length = imagess.length;
				this.width = imagess.width;
				this.height = imagess.height;
//				定义索引,判断对应图片
				this.goIndex = 0;
//				定义绘制方法
				this.paint = function(){
//					goIndex++
					context.drawImage(this.imgs[this.goIndex],0,h-this.height);
				}
//				定义运动方法
				this.time = 0;
				this.imgMove = function(){
					this.time++;
					if(this.time%100 ==0){
						this.goIndex++;
					}
					if(this.goIndex == this.length){			//索引等于长度，进入下一阶段
						status = RUNNING;				
					}
				}
			}
			
//			创建游戏运行前的动画对象
			var loading = new loading(LOADING);
//			第一阶段时,点击屏幕进入第二阶段
			canvas.onclick = function(){
				if(status == START){
					status = STARTING;
				}
			}
			
//			3游戏运行阶段
//			3.1绘制我方飞机
//			3.1.1加载我方飞机图片
			var hero = [];
			hero[0] = new Image();
			hero[0].src = "img/hero1.png";
			hero[1] = new Image();
			hero[1].src = "img/hero2.png";
			hero[2] = new Image();
			hero[2].src = "img/hero_blowup_n1.png";
			hero[3] = new Image();
			hero[3].src = "img/hero_blowup_n2.png";
			hero[4] = new Image();
			hero[4].src = "img/hero_blowup_n3.png";
			hero[5] = new Image();
			hero[5].src = "img/hero_blowup_n4.png";	
			
//			3.1.2初始化我方飞机数据
			var HERO = {
				imgs : hero,
				length : hero.length,
				width : 99,
				height : 124,
				mark : 2,    		//飞机的两种状态
			}
//			3.1.3我方飞机构造器
			function Hero(imagess){
				this.imgs = HERO.imgs;
				this.length = HERO.length;
				this.width = HERO.width;
				this.height = HERO.height;
				this.mark = HERO.mark;
//				定义索引,判断对应图片
				this.goIndex = 0;
//				定义飞机位置
				this.x = w/2 - this.width/2;
				this.y = h/2 - this.height/2;
//				定义碰撞属性
				this.on = false;
//				定义撞悔动画是否完成
				this.off = false;
				
				
				//定义绘制方法
				this.paint = function(){
					context.drawImage(this.imgs[this.goIndex],this.x,this.y);
				}
				
//				定义运动方法
				this.imgMove = function(){
//					两个,一个为碰撞时的状态
//					一个为正常移动状态
					if(!this.on){			//正常移动
						if(this.goIndex == 0){
							this.goIndex = 1;
						}else{
							this.goIndex = 0;
						}
					}else{				//碰撞以后
						this.goIndex++
						if(this.goIndex == this.length){
							HP--;
							if(HP == 0){
								status = GAMEOVER;
								this.goIndex = this.length-1;
							}else{
								heros = new Hero(HERO);
							}
							
						}
					}
				}
				
				//			飞机的碰撞方法
				this.flow = function(){
					this.on = true;
				}
	//			飞机射击方法
				 this.time = 0;
				 this.shoot = function(){
				 	this.time++;
				 	if(this.time % 2 == 0){
				 		bullets.push(new Bullet(BULLET));
				 	}
				 }
					
			}

			
//			3.1.4创建我方飞机对象
			var heros = new Hero(HERO);
			
//			3.1.5增加移动事件
			canvas.onmousemove = function(event){
				var event = event || window.event;
				if(status == RUNNING){
					heros.x = event.offsetX - heros.width/2;
					heros.y = event.offsetY - heros.height/2;
				}
			}
			
//			3.2绘制子弹
//			3.2.1加载子弹图片
			var bullet = new Image();
			bullet.src = "img/bullet1.png";
//			3.2.2创建子弹对象
			var BULLET = {
				imgs : bullet,
				width : 9,
				height : 21,
			}
//			3.2.3创建子弹构造器
			function Bullet(imagess){
				this.imgs = imagess.imgs;
				this.width = imagess.width;
				this.height = imagess.height;
//				子弹坐标
				this.x = heros.x + heros.width/2 - this.width/2;
				this.y = heros.y - this.height;
//				绘制子弹
				this.paint = function(){
					context.drawImage(this.imgs,this.x,this.y);
				}
//				运动方法 
				this.imgMove = function(){
					this.y -=15;
				}
//				碰撞属性
				this.on = false;
//				碰撞方法
				this.flow = function(){
					this.on = true;
				}	
			}
//			3.2.4所有new出来的子弹放到一个数组中去
				var bullets = [];
//				3.2.5遍历所有子弹,然后绘制
				function bulletsPaint(){
					for(var i = 0;i < bullets.length;i++){
						bullets[i].paint();
					}
				}	
//				3.2.6绘制所有子弹运动方法
				function bulletsImgMove(){
					for(var j = 0;j < bullets.length;j++){
						bullets[j].imgMove();
					}
				}
//				3.2.7删除子弹
				function myDel(){
//					两种状态:碰到敌方飞机或者超出画布
					for(var k = 0;k < bullets.length;k++)
						if(bullets[k].on || bullets[k].y < -bullets[k].height){
							bullets.splice(k,1);    //参数1选位置，参数2删除几个
						}
				}
			
//			3.3绘制地方飞机
//			3.3.1加载敌方飞机图片
			var enemyl = [];			//小飞机
			enemyl[0] = new Image();
			enemyl[0].src = "img/enemy1.png";
			enemyl[1] = new Image();
			enemyl[1].src = "img/enemy1_down1.png";
			enemyl[2] = new Image();
			enemyl[2].src = "img/enemy1_down2.png";
			enemyl[3] = new Image();
			enemyl[3].src = "img/enemy1_down3.png";
			enemyl[4] = new Image();
			enemyl[4].src = "img/enemy1_down4.png";
			
			var enemym = [];		//中飞机
			enemym[0] = new Image();
			enemym[0].src = "img/enemy2.png";
			enemym[1] = new Image();
			enemym[1].src = "img/enemy2_down1.png";
			enemym[2] = new Image();
			enemym[2].src = "img/enemy2_down1.png";
			enemym[3] = new Image();
			enemym[3].src = "img/enemy2_down1.png";
			enemym[4] = new Image();
			enemym[4].src = "img/enemy2_down1.png";
			
			var enemyb =[];			//大飞机
			enemyb[0] = new Image();
			enemyb[0].src = "img/enemy3_n1.png";
			enemyb[1] = new Image();
			enemyb[1].src = "img/enemy3_n2.png";
			enemyb[2] = new Image();
			enemyb[2].src = "img/enemy3_down1.png";
			enemyb[3] = new Image();
			enemyb[3].src = "img/enemy3_down2.png";
			enemyb[4] = new Image();
			enemyb[4].src = "img/enemy3_down3.png";
			enemyb[5] = new Image();
			enemyb[5].src = "img/enemy3_down4.png";
			enemyb[6] = new Image();
			enemyb[6].src = "img/enemy3_down5.png";
			enemyb[7] = new Image();
			enemyb[7].src = "img/enemy3_down6.png";
			
//			3.3.2初始化敌方飞机数据
			var ENEMYL = {
				imgs : enemyl,
				length : enemyl.length,
				width : 57,
				height : 51,
				mark : 1,
				HP : 1,
				socre : 1,
				type : 1,
			}
			
			var ENEMYM = {
				imgs : enemym,
				length : enemym.length,
				width : 69,
				height : 95,
				mark : 1,
				HP : 5,
				socre : 10,
				type : 2,
			}
			
			var ENEMYB = {
				imgs : enemym,
				length : enemym.length,
				width : 166,
				height : 261,
				mark : 2,
				HP : 10,
				socre : 50,
				type : 2,
			}
			
//			3.3.3敌方飞机构造
			function Enemy(imagess){
				this.imgs = imagess.imgs;
				this.length = imagess.length;
				this.width = imagess.width;
				this.height = imagess.height;
				this.mark = imagess.mark;
				this.HP = imagess.HP;
				this.socre = imagess.socre;
				this.type = imagess.type;
				
//				坐标
				this.x = Math.random()*(w - this.width);
				this.y = -this.height;
				
//				索引
				this.goIndex = 0;
				
//				碰撞属性
				this.on = false;
				
//				击毁动画是否完成
				this.off = false;
				
//				绘制方法
				this.paint = function(){
					context.drawImage(this.imgs[this.goIndex],this.x,this.y);
				}
				
//				移动方法
				this.imgMove = function(){
					if(!this.on){
						//正常情况，大飞机在两个图片中来回转换，其他飞机图片不变
						this.goIndex++;
						this.goIndex = this.goIndex % this.mark;
						this.y += 0.1		//飞机一直向下
					}else{		
						//如果发生碰撞
						this.goIndex++;
						if(this.goIndex == this.length){
							this.off = true;
							this.goIndex = this.length-1;
						}
					}			
				}
//				发生碰撞方法
				this.Hit = function(I){
					return I.y + I.height > this.y
						&& I.x + I.width > this.x	
						&& I.x < this.x + this.width
						&& I.y < this.y + this.height
				}
//				碰撞之后方法
				this.afterHit = function(){
					this.HP--;
					if(this.HP == 0){
						this.on = true;
						socre += this.socre;
					}
				}
		
			}
			
//			3.3.4创建数组，便于添加飞机
			var enemys = [];
			function inEnemys(){
				var rad = Math.floor(Math.random()*500);
				if(rad < 5){
					enemys.push(new Enemy(ENEMYL));
				}else if(rad >= 40 && rad < 45){
					enemys.push(new Enemy(ENEMYM));
				}else if(rad > 75 && rad < 80){
					enemys.push(new Enemy(ENEMYB));
					
//					if(enemys[0].type != 3 && enemys.length > 0){
//						enemys.splice(0,0,new Enemy(ENEMYB))
//					}
				}
			}
			
//			3.3.5绘制敌方飞机
			function enemyPaint(){
				for (var i = 0;i < enemys.length;i++) {
					enemys[i].paint();
				}
			}
//			3.3.6地方飞机运动方法
			function enemyImgMove(){
				for (var j = 0;j < enemys.length;j++) {
					enemys[j].imgMove();
				}
			}
//			3.3.7删除敌方飞机方法
			function enemyDel(){
				for(k = 0;k < enemys.length;k++){
					if(enemys[k].y > h || enemys[k].off){
						enemys.splice(k,1)
					}
				}
			}
			
//			3.4碰撞后
			function afterHitOn(){
				for(var l = 0;l < enemys.length;l++){
//					如果我方飞机撞到
					if(enemys[l].Hit(heros)){
						enemys[l].afterHit()
						heros.flow()
					}
					for (var m = 0;m < bullets.length;m++) {
	//					如果子弹碰到地方飞机
						if(enemys[l].Hit(bullets[m])){
							enemys[l].afterHit()
							bullets[m].flow()
						}
					}
				}
			}
			
//			3.5绘制分数和生命值
			function paintText(){
				context.font = "bold 30px 微软雅黑";
				context.fillText("SOCRE:" + socre,10,30);
				context.fillText("HP:" + HP,350,30)
			}
			
//			4.暂停
			canvas.onmouseover = function(){
				if(status == PAUSE){
					status = RUNNING;
				}
			}
			canvas.onmouseout = function(){
				if(status == RUNNING){
					status = PAUSE;
				}
			}
			var pause = new Image();
			pause.src = "img/game_pause_nor.png";
			
			function gameOver(){
				context.font = "bold 50px 微软雅黑";
				context.fillText("GAME OVER!",80,280);
			}
			

			
			
//			创建定时器,将一直在运动的图片表现出来
			setInterval(function(){
				back.paint()
				back.imgMove()
				if(status == START){
					context.drawImage(logo,30,0);
				}else if(status == STARTING){
					loading.paint()
					loading.imgMove()
				}else if(status == RUNNING){
					heros.paint()
					heros.imgMove()
					heros.shoot()
					bulletsPaint()
					bulletsImgMove()
					myDel()
					inEnemys()
					enemyPaint()
					enemyImgMove()
					enemyDel()
					afterHitOn()
					paintText()
				}else if(status == PAUSE){
					heros.paint()
					bulletsPaint()
					enemyPaint()
					paintText()
					context.drawImage(pause,220,270)
				}else if(status == GAMEOVER){
					heros.paint()
					bulletsPaint()
					enemyPaint()
					paintText()
					gameOver()
				}
			},1)
		</script>
	</body>
</html>

 

S_1978P1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jq制作飞机大战小游戏
sj1255897381的博客
07-03 540
飞机大战小游戏 页面布局： <h1 class="score">0</h1> <div class="contain"> <div class="plane"></div> </div> <style> * { margin: 0; padding: 0; } .contain {
html5 canvas技术实现飞机大战小游戏
02-26
html5 canvas技术实现飞机大战小游戏
用canvas实现简易版飞机大战
weixin_45214220的博客
12-04 940
运行图片 飞机背景素材：https://www.aigei.com/view/64573.html 代码如下 //获取画笔和画布 var huabu = document.getElementsByTagName("canvas")[0] var ctx = huabu.getContext("2d") //定义初始化状态，首页的运动背景还有logo var strat = 0;//开始阶段 var strating = 1;//正式开始阶段 var run
canvas飞机大战
m0_49266584的博客
12-05 730
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> canvas{ position: absolute; left: 0; right: 0; top.
自作JavaScript飞机大战小游戏
舜岳的博客
03-22 2716
不会canvas画板标签小朋友们的福音来啦，用标签也能制作简单小游戏哦！ 做游戏就要有素材的啦 ，以下是在爱给网找到的素材： 首先3个页面的打开我们用div来做，通过更改div的隐藏属性display: none;与显示display: block来达到页面切换的效果： <body> <div id="home"> <div id="one" style...
canvas 飞机大战小游戏
01-19
总的来说，“canvas 飞机大战小游戏”是HTML5 Canvas技术和JavaScript结合的典型应用实例。它展示了如何使用这两项技术构建一个简单的互动游戏，包括图形绘制、动画制作、事件处理、游戏逻辑和用户交互等多个方面。...
飞机大战游戏.rar
07-25
总结，"飞机大战游戏"作为JavaScript编程的一个实例，展示了前端技术在游戏开发中的强大应用。通过深入理解并运用JavaScript、HTML和CSS，开发者可以构建出富有创意和互动性的网页游戏，为用户提供丰富的在线娱乐...
html+javascript实现的网页版飞机大战小游戏源码
12-26
【网页版飞机大战小游戏概述】 网页版飞机大战是一款基于HTML5和JavaScript技术开发的轻量级游戏，它利用这两种技术的交互性和动态性为玩家提供了一种在浏览器中直接游玩的体验。HTML5是现代网页开发的核心标准，...
HTML5飞机大战小游戏特效代码
03-20
总的来说，这个HTML5飞机大战小游戏是一个展示HTML5技术能力的实例，通过学习其代码，我们可以深入理解HTML5在游戏开发中的实际应用，以及JavaScript如何与HTML5特性结合以实现动态交互和游戏逻辑。这不仅对Web...
飞机大战小游戏设计
weixin_46775588的博客
07-02 576
摘要 本设计题目为飞机大战小游戏。玩家可以通过方向键和空格键来操作飞机，并对敌人的飞机来发射子弹进行攻击以获取相应的分数来赢取。 1．引言 本论文介绍飞机大战小游戏设计过程所使用方法和需解决问题。本设计题目是关于游戏方面，故使用pygame模块来进行实现。本论文将介绍设计过程所解决的各个问题及其实现原理。 2. 系统结构 图1 系统结构框架图 3. 实现代码 第一步加入pygame模块并初始化界面 import pygame import random import math 初始化界面设定游戏窗口大小和
canvas效果~飞机大战
06-06
canvas开发小游戏，效果流畅性比较不错，资源共享，含有img文件
第一个微信小程序小游戏Demo：飞机大战
12-29
第一个微信小程序小游戏Demo：飞机大战 完善的Js代码，可以自由修改
flash做的飞机大战小游戏
06-02
该资源含源码
canvas飞机大战.zip
04-17
利用canvas写的一个经典版飞机大战，canvas画布加上jvasrcipt进行控制,鼠标点击游戏开始，每一帧都是图片的改变。
一个FLASH小游戏，飞机大战
12-14
一个FLASH小游戏，飞机大战~呃，FLA
canvas编写飞机大战
忘川的博客
12-21 674
整体分析 1、定义游戏状态 （1）游戏欢迎状态 START （2）游戏加载状态 LOADING （3）游戏运行状态 RUNNING （4）游戏暂停状态 PAUSE （5）游戏结束状态 GAMEOVER 2、定义游戏得分 score = 0 3、定义我方飞机生命值 life = 3 4、定义游戏开关 State = 0 代码实现 首先，我们先来编写背景，背景采用的思维方法是和和轮播图差不多的，就相...
H5 canvas 实现飞机大战游戏
weixin_30342827的博客
04-09 1913
首先看几张效果图： 上面三张图分别对应游戏的三种状态 ready，play，pause。体验一下 先介绍一下canvas 画图的原理，在这个游戏中的背景，飞机，子弹以及飞机被击中爆炸的效果都是一张张的图片，通过canvas的 drawImage() 函数把这一帧需要的所有图片按其所在的位置（坐标）画到画布上，当然有时候也需要画些文本，比如左上角的得分；然后接着画下一帧，同时改变飞机和子弹的...
飞机大战（canvas小练习）
EricYep的博客
09-30 251
1、创建一个画布，然后初始化对象 // 初始化 var canvas = document.getElementsByTagName("canvas")[0] var ctx = canvas.getContext("2d") var ready = 0; var loading = 1; var running = 2; var pause = 3; var over = 4;
网页HTML5--飞机大战小游戏开发--canvas的应用
HoggiChen的博客
08-13 7758
一，概述 此小项目，是用来练习HTML5的canvas的编程运用。在这个项目中，我们需要创建一个可运行的网页小游戏，开发此小游戏并不难，大概如下图所示： 在整个游戏的运行中，总共要分为5个状态（state）去实现，分别是首页（START），加载中（STARTING），游戏中（RUNNING），暂停（PAUSE）和游戏结束（GAME_OVER），运用一个计时器在网页的canvas
html飞机大战小游戏
最新发布
07-29
如果您想开发一个基于 HTML 的飞机大战小游戏，您可以遵循以下步骤： 1. 创建 HTML 页面：创建一个基本的 HTML 页面结构，包括 `<html>`, `<head>`, `<body>` 等标签。您可以使用一个 `<canvas>` 元素来绘制游戏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值