JavaScript 飞机大战

最新推荐文章于 2024-08-31 21:50:03 发布
最新推荐文章于 2024-08-31 21:50:03 发布
阅读量168 收藏 2
点赞数
分类专栏： 原生js小游戏 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46104664/article/details/113663356
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>飞机大战</title>
<style>
	html,body{
		position: relative;
		width: 100%;
		height: 100%;
	}
	h1{
		font-size: 6rem;
		
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translate(-50%,-50%);
		
		background: linear-gradient(to bottom,red,blue);
		-webkit-text-fill-color:transparent;
		-webkit-background-clip: text;
		
		z-index: 1;
		cursor: progress;
	}
	#tips{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		
		z-index: 1;
		
		font-size: 20px;
		
	}
	#tips svg{
		width: 30px;
		height: 30px;
	}
	#tips span{
		display: inline-block;
		height: 30px;
		line-height: 30px;
	}
	#start{
		font-size: 16px;
		font-weight: 800;
		text-align: center;
		line-height: 60px;
		
		width: 120px;
		height: 60px;
		
		border-radius: 80px 70px;
		margin: 0 auto;

		/*设置手型*/
		cursor: pointer;
		
		box-shadow: 1px 2px 0 1px #606060,
					-1px 0 0 1px #606060;
	}
	#start:hover{
		font-size: 20px;
		font-weight: 1.2em;
		background: url('img/start.gif');
		background-size: 100% 100%;
	}
	#canvas{
		
		background: url('img/background.png') repeat;
		
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		
		z-index: 0;
	}	
</style>
</head>

<body>
<h1>飞机大战</h1>
<div id="tips">
	<div>
		<svg t="1586957990263" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4430" width="200" height="200"><path d="M489.90890884 1017.28884579l0-662.73273745L551.27305136 354.55610835 551.27305135 1017.28884579l-61.3641425-2e-8z" fill="" p-id="4431"></path><path d="M306.28092891 358.28692148L515.86227332 1.43220042l215.24570478 356.85472106-424.82704919 0z" fill="" p-id="4432"></path></svg>
		<svg t="1586958009679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4551" width="200" height="200"><path d="M533.74591785 14.43962576l0 652.37753843L473.34059007 666.81716419 473.34059007 14.43962576l60.40532778 1e-8z" fill="" p-id="4552"></path><path d="M714.5047106 673.81131166L508.1980747 1025.0901777l-211.88249064-351.27886604 418.18912654 0z" fill="" p-id="4553"></path></svg>
		<svg t="1586958037827" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5320" width="200" height="200"><path d="M1017.28884579 534.09109115l-662.73273745 1e-8L354.55610835 472.72694864 1017.28884579 472.72694864l-2e-8 61.36414251z" fill="" p-id="5321"></path><path d="M358.28692148 717.71907109L1.43220042 508.13772668l356.85472106-215.24570478 0 424.82704919z" fill="" p-id="5322"></path></svg>
		<svg t="1586958054232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6089" width="200" height="200"><path d="M6.71115421 489.90890885l662.73273745-1e-8L669.44389165 551.27305136 6.71115421 551.27305136l2e-8-61.36414251z" fill="" p-id="6090"></path><path d="M665.71307852 306.28092891L1022.56779958 515.86227332l-356.85472106 215.24570478 0-424.82704919z" fill="" p-id="6091"></path></svg>
	<span>移动方向</span></div>
	<div id="start">开始游戏</div>
</div>
<canvas id="canvas" width="600" height="700"></canvas>
<script>
	var canvas=document.getElementById("canvas");
	if(canvas.getContext){
		var cxt=canvas.getContext("2d");
	}else{
		console.log("你的浏览器不支持HTML5画板");
	}
	
	var scores=0;  //分数
	var bumps=[];  //数组，存放炮弹
	var armys=[];  //敌机
	var armyBumps=[];  //敌机炮弹
	
	
	//敌机类
	function Army(){
		this.x=parseInt(Math.random()*19)*30;
		this.y=20;
		this.w=30;
		this.h=30;
		armys.push(this);
		
		
	}
	//画敌机
	Army.prototype.paintArmy=function(){
		const img=new Image();
		img.src='img/plane-1.png';
		
		img.onload=()=>{
			cxt.drawImage(img,this.x,this.y,this.w,this.h);
		}
	}
	//敌机自动向前移动
	Army.prototype.move=function(){
		const img=new Image();
		img.src='img/plane-1.png';
		
		let armyY=armys.filter((item)=>{
			return item.y<=700;
		})
		armyY.forEach((item)=>{
			cxt.clearRect(item.x,item.y,item.w,item.h);
			item.y+=20;
		})

		armyY.forEach((item)=>{
			cxt.drawImage(img,item.x,item.y,item.w,item.h);
		})
			
	}
	
	
	//碰撞检测
	Army.prototype.boom=function(){
		armys.forEach((item,index)=>{
			bumps.forEach((em,dx)=>{
				if(em[0]>=item.x && em[0]<=item.x+item.w && Math.abs(item.y-em[1])<=item.h){
					setTimeout(()=>{
						//清除子弹
						cxt.clearRect(em[0],em[1],6,10);
						//清除敌机
						cxt.clearRect(item.x,item.y,item.w,item.h);
					},200)
					
					//重新弄画图
					let img1=new Image();
					img1.src="img/over-0.png";
					img1.onload=()=>{
						cxt.drawImage(img1,item.x,item.y,item.w,item.h);
					}
					
					setTimeout(()=>{
						cxt.clearRect(item.x,item.y,item.w,item.h);
					},150)
					
					let img2=new Image();
					img2.src="img/over-1.png";
					img2.onload=()=>{
						cxt.drawImage(img2,item.x,item.y,item.w,item.h);
					}
					
					setTimeout(()=>{
						cxt.clearRect(item.x,item.y,item.w,item.h);
					},150)
					
					let img3=new Image();
					img3.src="img/over-2.png";
					img3.onload=()=>{
						cxt.drawImage(img3,item.x,item.y,item.w,item.h);
					}
					
					setTimeout(()=>{
						cxt.clearRect(item.x,item.y,item.w,item.h);
					},150)
					
					let img4=new Image();
					img4.src="img/over.png";
					img4.onload=()=>{
						cxt.drawImage(img4,item.x,item.y,item.w,item.h);
					}
					
					setTimeout(()=>{
						cxt.clearRect(item.x,item.y,item.w,item.h);
					},150)
					
					//把两者从存储的数组中删除
					bumps.splice(dx,1);
					armys.splice(index,1);
					
					scores++;
					cxt.clearRect(0,0,100,20);
					score();
				}
			})
		})
	}
	
	
	//自己类
	function plane(){
		this.w=40;
		this.h=40;
		this.x=canvas.width/2-this.w/2;
		this.y=canvas.height-this.h;
	}
	
	//显示自己的飞机
	plane.prototype.paintPlane=function(){
		const img=new Image();
		img.src="img/plane-2.png";
		//等到图片加载完成才可以使用,否则width===0 && height===0
		//写一个回调函数
		img.onload=()=>{
			cxt.drawImage(img,this.x,this.y,this.w,this.h);
		}
	}
	//清除函数
	plane.prototype.clearPlane=function(){
		cxt.clearRect(this.x,this.y,40,40);
	}
	
	plane.prototype.moveLeft=function(){
		this.clearPlane();
		if(this.x>0){
			this.x-=10;
		}
		this.paintPlane();
	}
	
	plane.prototype.moveRight=function(){
		this.clearPlane();
		if(this.x+40<canvas.width){
			this.x+=10;
		}
		this.paintPlane();
	}
	
	
	//发射炮弹
	plane.prototype.fire=function(){
		const img=new Image();
		img.src="img/fire-0.png";
		img.onload=()=>{
			//定时器，0.3s一次
			setInterval(()=>{
				//过滤出界的
				let bump=bumps.filter((item)=>{
					return item[1]>=0;
				})
				//添加新的
				cxt.drawImage(img,this.x+17,this.y-10,6,10);
				//添加进存储的数组
				bumps.push([this.x+17,this.y-10]);
				//先清除
				bump.forEach((item)=>{
					cxt.clearRect(item[0],item[1],6,10);
					item[1]-=20;
				})
				//再绘画
				bump.forEach((item)=>{
					cxt.drawImage(img,item[0],item[1],6,10);
				})
				 
			},100)
		}
	}
	
	plane.prototype.gameOver=function(){
		armys.forEach((item)=>{
			if(item.x+30>=this.x && item.x<=this.x+this.w && this.y===item.y+30){
				return true;
			}
		})
	}
	
	//显示分数
	function score(){
		cxt.font="20px Arial";
		cxt.fillStyle="#000";
		cxt.fillText("分数:"+scores,3,20);
	}
	
	
	(function game(){
		var startgame=document.getElementById("start");
		startgame.addEventListener('click',startGame);
	
	
	
	function startGame(){
		document.getElementById("tips").style.opacity="0";
		document.getElementsByTagName("h1")[0].style.opacity="0";
		startgame.removeEventListener('click',startgame);
		score();
		
		var planes=new plane();
		planes.paintPlane();
		planes.fire();
		
		let time=setInterval(()=>{
			let army=new Army();
			army.paintArmy();
			army.move();
			//army.Fire();
			(function over(){
				army.boom();
				//canvas动画，自动补帧 window.requestAnimationFrame()函数
				window.requestAnimationFrame(over);
			})()
			
		},300)
		
		
		
		//键盘监听移动
		document.addEventListener('keydown',(event)=>{
			//left  37
				//right  39
				//up 38
				//down  40
			switch(event.keyCode){
				case 37:
					planes.moveLeft();
					break;
				
				case 39:
					planes.moveRight();
					break;
				/*
				case 38:
					planes.moveUp();
					break;
				case 40:
					planes.moveDown();
					break;
				*/
			}
		})
	}
		
	})()

</script>
</body>
</html>

下面是这个游戏的数据集
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
欢迎大家来找bug，或是提出修改的意见，大家一起进步。

是落落呢
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现飞机大战
编程界明世隐的博客
08-04 3万+
系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 引言： 之前我有用Java写过一个飞机大战，感觉挺受欢迎的，有的小伙伴想用Javasript写，我这次就按我的思路写了一个版本。 实现思路 分2张画布来实现，画布1仅仅用来绘制背景图，画布2用来绘制游戏相关的动态内容。 创建我方飞机 定时创建敌机 开启主线程，用来刷新画布2. 代码实现 编写页面 <!DOCTYPE html&
javascript飞机大战
liu197023的博客
03-21 596
文档结构如下 其中tool文件中只使用了随机数，audio中是存放的音乐文件，images中是己方和敌方飞机的图片。 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view..
JavaScript飞机大战项目.rar
11-21
《JavaScript飞机大战项目详解》 JavaScript，作为一门广泛应用于网页和网络应用开发的脚本语言，是前端开发的重要基石。本项目"JavaScript飞机大战"旨在通过实战的方式，深入讲解JavaScript编程技术，以及如何利用...
HTML Javascript 飞机大战.rar
07-21
在"飞机大战"中，JavaScript是实现游戏逻辑的核心。它负责处理玩家的输入（如键盘控制飞机移动）、游戏对象的碰撞检测、分数计算、动画效果以及游戏的开始、暂停和结束等操作。 【CSS美化与布局】 Cascading Style...
原生JavaScript飞机大战
08-21
《原生JavaScript飞机大战》是一款基于JavaScript开发的经典小游戏，它为初学者提供了一个良好的实践平台，帮助提升JavaScript编程技能。这款游戏虽然功能相对简单，但涵盖了基础的编程概念和技巧，对于学习...
vue ref和reactive区别
灰海
08-25 6569
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
jQuery基础——DOM
m0_54066656的博客
08-27 2158
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
热门推荐
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1109
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
layui栅格布局设置列间距不起作用
gc_2299的博客
08-26 938
记录layui栅格布局设置列间距不起作用的解决办法
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 289
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
class 2: vue.js 3 模板语法和内置指令
ComingLiu的博客
08-29 679
vue.js 3
vue part 5
E___V___E的博客
08-29 844
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
echarts组件——饼图
weixin_42255789的博客
08-28 303
饼图
Nuxt3入门：样式的注入、定义和使用（第3节）
最新发布
沐爸的博客
08-31 1029
在 Nuxt3 中，如何在本地或全局注入本地样式表？如何注入本地字体？如何分发NPM的样式表？单文件组件的动态样式、作用域样式、CSS模块、预处理器如何使用？
Vue3搭建pinia环境
weixin_73060959的博客
08-28 920
在Vue 3中，Pinia 是 Vuex 的后续状态管理库，旨在提供 Vuex 5 中相似的功能，但具有更简洁的API、更好的TypeScript支持和模块热重载（HMR）等特性。
页面中存在多个iframe，根据src查找iframe，js将里面的某个class隐藏
qq_37161741的博客
08-30 212
【代码】页面中存在多个iframe，根据src查找iframe，js将里面的某个class隐藏。
javascript飞机大战代码
03-31
很抱歉，我是一名AI语言模型，无法提供完整的JavaScript飞机大战代码。不过，以下是一个简单的示例，可以帮助您开始编写自己的游戏： HTML: ``` <!DOCTYPE html> <title>JavaScript飞机大战游戏 canvas { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值