html+css+js实现飞机大战小游戏

最新推荐文章于 2025-04-21 14:38:28 发布
原创 最新推荐文章于 2025-04-21 14:38:28 发布
· 1.7k 阅读 · 14 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #javascript #html #前端

前言

废话不多说，直接上源码

一、requestAnimationFrame是什么？

​
在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout/ setInterval 来实现，css3 可以使用 transition和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame。
原文详解链接：https://blog.youkuaiyun.com/qq_45890970/article/details/123576140

​

二、源码


<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font-family: "Microsoft yahei", serif;
		}

		li {
			list-style-type: none;
		}

		body {
			overflow: hidden;
			user-select: none;
			/* 禁止选择文字 */
			-moz-user-select: -moz-none;
			/* 禁止鼠标右键复制 */
			-ms-user-select: none;
		}

		#box {
			position: relative;
			width: 512px;
			height: 768px;
			margin: 20px auto;
		}

		#map {
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url("img/bg_1.jpg");
		}

		#level {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
		}

		#level h1 {
			font-size: 40px;
			padding-top: 60px;
			padding-bottom: 150px;
			line-height: 60px;
			text-align: center;
			color: #fff;
		}

		#level p {
			margin: 30px auto;
			width: 200px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			background: #fff;
			font-weight: bolder;
			cursor: pointer;
		}

		#level p:hover {
			background: pink;
			color: #fff;
		}

		#map .plane,
		#map .biu,
		#map .enemy,
		#map .boom,
		#map .boom2 {
			position: absolute;
		}

		#map .plane {
			z-index: 8;
		}

		#map .biu {
			z-index: 10;
		}

		#map .boom2 {
			z-index: 11;
			animation: bling 2s 1;
			animation-fill-mode: forwards;
		}

		#map .enemy {
			z-index: 9;
		}

		#map .boom {
			z-index: 7;
			animation: fade .8s 1;
			animation-fill-mode: forwards;
		}

		/*爆炸后的消失效果*/
		/* @keyframes动画是循环的
				而transform 只执行一遍. */
		@keyframes fade {
			from {
				/* “1”完全不透明 */
				opacity: 1;
			}

			to {
				opacity: 0;
			}
		}

		@keyframes bling {
			0% {
				opacity: 1;
			}

			20% {
				opacity: 0;
			}

			40% {
				opacity: 1;
			}

			60% {
				opacity: 0;
			}

			80% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		#score {
			display: none;
			position: absolute;
			top: 10px;
			left: 10px;
			color: #fff;
			line-height: 20px;
			font-size: 14px;
			font-weight: bold;
			/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
			z-index: 20;
		}

		#restart {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 30;
		}

		#restart p {
			width: 300px;
			height: 40px;
			line-height: 20px;
			margin: 140px auto;
			color: #fff;
		}

		#restart p span {
			display: block;
			font-weight: bolder;
			font-size: 22px;
			text-align: center;
		}

		#restart .p1 span {
			color: red;
		}

		#restart .p2 span {
			color: #ffa80c;
		}

		#restart .p3 {
			font-family: "楷体";
			font-size: 20px;
			width: 100px;
			height: 35px;
			background: rgb(255, 255, 255);
			background: rgba(255, 255, 255, .8);
			color: #000;
			font-weight: bolder;
			line-height: 35px;
			text-align: center;
			border-radius: 3px;
			/* 设置浏览网页时鼠标光标的样式为手 */
			cursor: pointer;
		}

		#restart .p3:hover {
			background: white;
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			/*
				告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
				该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
				注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()
			*/
			// requestAnimationFrame实现无限循环动画
			window.requestAnimationFrame = window.requestAnimationFrame || function (fn) {
				// 间隔时间为每秒60帧
				// 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
				// 一般来说，这个频率为每秒60帧
				return setTimeout(fn, 1000 / 60)
			};
			//方法用于取消以前通过对window.requestAnimationFrame()的调用计划的动画帧请求。
			window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;

			//定义全局变量,获取数据
			var oBox = document.getElementById("box"),
				oScore = document.getElementById("score"),
				oRe = document.getElementById("restart"),
				oLevel = document.getElementById("level"),
				oMap = document.getElementById("map"),
				oBiuAll = document.getElementById("BiuAll"),
				// 获取节点
				allBiu = oBiuAll.children,
				allReChild = oRe.children,
				// offsetTop是找距离定位父级左边的距离，没有定位则找body
				boxOffsetTop = oBox.offsetTop,
				// offsetLeft是找距离定位父级上边的距离
				boxOffsetLeft = oBox.offsetLeft;

			//启动
			exe();

			//初始选择难度界面的点击事件
			function exe() {
				//难度选择
				var aP = oLevel.getElementsByTagName("p");
				for (var i = 0, length = aP.length; i < length; i++) {
					(function (i) {
						aP[i].onclick = function (e) {
							e = e || window.event;
							startGame(i, {
								x: e.clientX - boxOffsetLeft,
								y: e.clientY - boxOffsetTop
							});//第一个实参为序号 ，第二个实参为存储着鼠标距离map边缘距离的json
						}
					})(i);
				}

				//restart按钮
				allReChild[2].onclick = function (ev) {
					// cancelAnimationFrame(oMap.bgTimer);//停止背景滚动
					oRe.style.display = "none";
					oLevel.style.display = "block";
					oScore.innerHTML = 0;
					oMap.innerHTML = "<div id='BiuAll'></div>";
					oBiuAll = document.getElementById("BiuAll");
					allBiu = oBiuAll.children;
				};
			}

			//开始游戏
			function startGame(level, pos) {
				//执行 隐藏和清理
				clearMap();
				//执行 Map背景相关操作
				MapBg(level);
				//执行 创建我军
				var p = plane(level, pos);
				//执行 创建敌军
				enemy(level, p);
				//enemy(level , plane(level , pos));
				//得分清零
				oBox.score = 0;
			}

			//隐藏和清理
			function clearMap() {
				oScore.style.display = "block";
				oLevel.style.display = "none";//隐藏关卡选择框
			}

			//Map背景选择与运动
			function MapBg(level) {
				oMap.style.backgroundImage = "url('img/bg_" + (level + 1) + ".gif')";

				(function m() {
					oMap.bgPosY = oMap.bgPosY || 0;
					// oMap.bgPosY++;//背景移动
					
					oMap.style.backgroundPositionY = oMap.bgPosY + 'px';
					oMap.bgTimer = requestAnimationFrame(m);
				})();
			}

			//创建我军
			function plane(level, pos) {
				//创建我军图片
				var oImg = new Image();
				oImg.src = "img/plane_0.png";
				oImg.width = 70;
				oImg.height = 70;
				oImg.className = "plane";
				oImg.style.left = pos.x - oImg.width / 2 + 'px';
				oImg.style.top = pos.y - oImg.height / 2 + 'px';
				oMap.appendChild(oImg);

				//边界值
				var leftMin = -oImg.width / 2,
					leftMax = oMap.clientWidth - oImg.width / 2,
					topMin = 0,
					topMax = oMap.clientHeight - oImg.height / 2;

				//加入mousemove事件(飞机移动)
				document.onmousemove = function (ev) {
					ev = ev || window.event;
					//获取飞机实时坐标，并限制边界值
					var left = ev.clientX - boxOffsetLeft - oImg.width / 2;
					var top = ev.clientY - boxOffsetTop - oImg.height / 2;
					left = Math.max(leftMin, left);
					left = Math.min(leftMax, left);
					top = Math.max(topMin, top);
					top = Math.min(topMax, top);
					//赋值
					oImg.style.left = left + 'px';
					oImg.style.top = top + 'px';
				};

				//调用子弹函数
				fire(oImg, level);
				return oImg;
			}

			//我军子弹
			function fire(oImg, level) {
				oBox.biuInterval = setInterval(function () {
					if (oBox.score >= 500) {
						createBiu(true, -1);
						createBiu(true, 1);
					} else {
						createBiu();
					}
				}, [100, 200, 200, 15][level]);

				function createBiu(index, d) {
					//创建子弹
					var oBiu = new Image();
					oBiu.src = "img/fire1.png";
					oBiu.width = 30;
					oBiu.height = 30;
					oBiu.className = "biu";

					var left = oImg.offsetLeft + oImg.width / 2 - oBiu.width / 2;
					var top = oImg.offsetTop - oBiu.height + 5;

					if (index) {
						left += oBiu.width * d
					}

					oBiu.style.left = left + "px";
					oBiu.style.top = top + 'px';

					oBiuAll.appendChild(oBiu);

					//子弹运动
					function m() {
						if (oBiu.parentNode) {
							var top = oBiu.offsetTop - 20;
							if (top < -oBiu.height) {
								oBiuAll.removeChild(oBiu);
							} else {
								oBiu.style.top = top + 'px';
								requestAnimationFrame(m);
							}
						}
					}
					//将运动执行队列放后面，不然子弹会直接初始就在 top-50 的位置
					setTimeout(function () {
						requestAnimationFrame(m);
					}, 50);
				}
			}

			//创建敌军
			function enemy(level, oPlane) {
				var w = oMap.clientWidth,
					h = oMap.clientHeight;

				var speed = [5, 6, 8, 8][level]; //敌军下落速度

				var num = 1;
				oBox.enemyIntetval = setInterval(function () {
					var index = num % 30 ? 1 : 0;

					//生成敌军
					var oEnemy = new Image();
					oEnemy.index = index;
					oEnemy.HP = [20, 1][index];
					oEnemy.speed = speed + (Math.random() * 0.6 - 0.3) * speed;
					oEnemy.speed *= index ? 1 : 0.5;
					oEnemy.src = "img/enemy_" + ["big", "small"][index] + ".png";
					oEnemy.className = "enemy";
					oEnemy.width = [104, 54][index];
					oEnemy.height = [80, 40][index];
					oEnemy.style.left = Math.random() * w - oEnemy.width / 2 + 'px';
					oEnemy.style.top = -oEnemy.height + 'px';
					oMap.appendChild(oEnemy);
					num++;

					//敌军运动
					function m() {
						if (oEnemy.parentNode) {
							var top = oEnemy.offsetTop;
							top += oEnemy.speed;
							if (top >= h) {
								//漏掉飞机减分
								oBox.score--;
								oScore.innerHTML = oBox.score;
								oMap.removeChild(oEnemy);
							} else {
								oEnemy.style.top = top + 'px';
								//子弹碰撞检测
								for (var i = allBiu.length - 1; i >= 0; i--) {
									var objBiu = allBiu[i];
									if (coll(oEnemy, objBiu)) {
										//移除子弹
										oBiuAll.removeChild(objBiu);
										oEnemy.HP--;
										if (!oEnemy.HP) {
											//打掉飞机加分
											oBox.score += oEnemy.index ? 2 : 20;
											oScore.innerHTML = oBox.score;
											//敌军爆炸图
											boom(oEnemy.offsetLeft, oEnemy.offsetTop, oEnemy.width, oEnemy.height, index ? 0 : 2);
											//移除敌军
											oMap.removeChild(oEnemy);
											return;
										}
									}
								}
								//我军碰撞检测
								if (oPlane.parentNode && coll(oEnemy, oPlane)) {
									//敌军爆炸图
									boom(oEnemy.offsetLeft, oEnemy.offsetTop, oEnemy.width, oEnemy.height, index ? 0 : 2);
									//我军爆炸图
									boom(oPlane.offsetLeft, oPlane.offsetTop, oPlane.width, oPlane.height, 1);
									//移除敌军
									oMap.removeChild(oEnemy);
									//移除我军
									oMap.removeChild(oPlane);
									GameOver();
									return;
								}
								requestAnimationFrame(m);
							}
						}
					}
					requestAnimationFrame(m);
				}, [350, 150, 120, 40][level]);
			}

			//爆炸函数
			function boom(l, t, w, h, i) {
				var oBoom = new Image();
				oBoom.src = "img/" + ["boom_small", "plane_0", "boom_big"][i] + ".png";
				oBoom.className = 'boom' + ["", "2", ""][i];
				oBoom.width = w;
				oBoom.height = h;
				oBoom.style.left = l + "px";
				oBoom.style.top = t + 'px';
				oMap.appendChild(oBoom);
				setTimeout(function () {
					oBoom.parentNode && oMap.removeChild(oBoom);
				}, [1200, 2500, 1200][i]);
			}

			//两个物体 碰撞检测
			function coll(obj1, obj2) {
				var T1 = obj1.offsetTop,
					B1 = T1 + obj1.clientHeight,
					L1 = obj1.offsetLeft,
					R1 = L1 + obj1.clientWidth;

				var T2 = obj2.offsetTop,
					B2 = T2 + obj2.clientHeight,
					L2 = obj2.offsetLeft,
					R2 = L2 + obj2.clientWidth;

				return !(B1 < T2 || R1 < L2 || T1 > B2 || L1 > R2);
			}

			//游戏结束
			function GameOver() {
				document.onmousemove = null; //清除移动事件
				clearInterval(oBox.biuInterval);//不再产生新子弹
				clearInterval(oBox.enemyIntetval);//不再产生新敌军
				restart();
			}

			//结算+重新开始
			function restart() {
				oScore.style.display = "none";

				var s = oBox.score;
				var honor;

				if (s < -300) {
					honor = "闪避+MAX！！！";
				} else if (s < 10) {
					honor = "菜得…算了我不想说了…";
				} else if (s < 30) {
					honor = "抠脚侠！";
				} else if (s < 100) {
					honor = "初级飞机大师";
				} else if (s < 200) {
					honor = "渐入佳境";
				} else if (s < 500) {
					honor = "中级飞机大师";
				} else if (s < 1000) {
					honor = "高级飞机大师";
				} else if (s < 5000) {
					honor = "终极飞机大师";
				} else {
					honor = "孤独求败！";
				}

				oRe.style.display = "block";
				allReChild[0].children[0].innerHTML = s;
				allReChild[1].children[0].innerHTML = honor;
			}
		}
	</script>
</head>
<div id="box">
	<div id="level">
		<h1>飞机大作战</h1>
		<p>简单</p>
		<p>中等</p>
		<p>困难</p>
		<p style="color: #f00">开挂啊</p>
	</div>
	<div id="map">
		<div id="BiuAll"></div>
	</div>
	<div id="score">0</div>
	<div id="restart">
		<p class="p1">您的最终得分是：<span>0</span></p>
		<p class="p2">获得称号：<span>抠脚侠</span></p>
		<p class="p3">重新开始</p>
	</div>
</div>
</body>

</html>

总结

以上就是今天所展示的内容，本文是我初学这门课程后做的一个实战小项目，欢迎何为大佬留言指点

赖胃
关注
飞机大战的HTML
qianmingmaoyao的博客
10-19 851
飞机大战
html飞机大战小游戏文本讲解,html、JS 飞机大战游戏
weixin_29331115的博客
05-31 392
飞机大战你的浏览器不支持canves画布元素，请更新浏览器获得演示效果。飞机大战分数：0分var canvas=document.getElementById('myCanvas');var context=canvas.getContext('2d');document.addEventListener('keydown',onKeydown);//飞机类和其属性var Plan=functio...
贪吃蛇小游戏开发（html+js+css）
最新发布
weixin_53689450的博客
04-21 320
snake.html ：作为游戏的入口文件，负责搭建 HTML 结构，引入样式和脚本文件。style.css ：用于定义游戏的样式，包括布局、颜色、动画效果等。game.js ：实现游戏的核心逻辑，如蛇的移动、食物的生成、碰撞检测等。通过 snake.html 、 style.css 和 game.js 三个文件的协同工作，我们实现了一个简单而有趣的贪吃蛇游戏。html 负责搭建页面结构， css 负责样式设计， js 负责实现游戏的核心逻辑。
简易的飞机大战源码HTML
08-29
HTML文件，飞机大战源代码，可以让你在电脑上玩的代码
用html做飞机大战
02-06
飞机大战html版！目前虽然有些卡顿，但是有闯关游戏，想想还是挺划算的，双击play.html即可开始大战，加油！！！
HTML5飞机大战
m0_71663621的博客
06-01 770
基于HTML5 Canvas的简单游戏，名为“HTML5飞机大战”。它包括了一个Canvas元素和一个JavaScript脚本。JavaScript脚本定义了四个类：GameObject、Player、Enemy和Bullet，分别代表游戏对象、玩家、敌人和子弹。它还定义了三个变量：player、enemies和bullets，分别代表玩家、敌人和子弹。它还定义了两个函数：spawnEnemy和shoot，分别用于生成敌人和发射子弹。最后，它定义了一个update函数，用于更新游戏状态和绘制游戏画面。在up
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
08-09
这款HTML5坦克大战游戏代码，是利用HTML、CSS和JavaScript技术实现的一款网页小游戏，它不仅完美地复刻了小霸王学习机上的游戏体验，还赋予了其在现代浏览器中的生命力。 HTML（HyperText Markup Language）是构成...
基于JavaScript的HTML+CSS飞机大战小游戏设计源码
02-16
本项目是一个基于前端技术栈的飞机大战小游戏，主要使用HTML、CSS和JavaScript技术构建。游戏中包含了多种资源文件，共集成121个文件，其中包括大量的图像和脚本资源。具体来说，游戏中使用了106个PNG格式的图片文件...
百行代码实现的飞机大战，html+css+javascript陈氏飞机大战.rar
08-04
完全是用JavaScript+html+css写的，思路清晰，适合小白深入理解JavaScript，记忆用到的动画效果，带游戏声效，干货巨多，也适合有基础的同学，但又不太了解游戏的同学观看， 游戏设有评分功能以及游戏道具功能，欢迎...
纯前端实现坦克大战，HTML+css+javascript实现坦克大战.rar
08-04
【坦克大战】是一款经典的街机游戏，通过使用前端技术HTML、CSS和JavaScript，可以将其完全在浏览器环境中实现。这个项目展示了Web开发中的交互设计和动态功能实现能力。 HTML（HyperText Markup Language）是构建...
html+css+js实现PC端坦克大战.rar
05-09
《HTML+CSS+JS实现PC端坦克大战》 在当今的Web开发领域，利用HTML、CSS和JavaScript构建交互式游戏已经变得越来越普遍。本项目"坦克大战"正是一个典型的实例，它展示了如何运用这些基础技术来创建一个具有趣味性的...
HTML版飞机大战
04-01
发现一款实用HTML版的小游戏。感觉很好给大家共享下！
html5飞机大战源码
12-14
html5飞机大战源码
飞机大战-HTML-JavaScript-代码
05-24
一个web网页，用HTML写的，css样式、JavaScript也在里面，会动，有特效，学习前端的朋友可以试着下载来看看，有些地方是可以借鉴的，挺不错的
HTML5飞机大战项目源码
10-15
用了HTML5的新技术，代码注释清晰，拿来学习参考交流
html5简单的飞机大战源码.zip
04-04
炒鸡好玩的游戏，飞机大战啊，有简单，一般，困难和开挂啊。每个程度飞机的速度就不同，飞机出现的次数也不同。
HTML JS小游戏 制作飞机大战
a1119603432的博客
08-03 969
废话不多说，直接上代码 设置背景图片移动 var sky = document.getElementById("sky"); //获取div var y = 0; var x = 0; // var y=0;//定义垂直方向初始距离 var skyTimer = setInterval(moveBg, 100); //设置调用这个方法的定时器，100ms调用一次 function moveBg() { //背景移动函数 ...
HTML 飞机大战代码(可保存本地html运行)
热门推荐
主要从事JAVA开发，目前是优快云博客Java领域新星创作者、阿里云博客专家、担任公司研发经理、技术负责人等。热爱编程，喜欢在Python、C、C++领域探索。
12-27 2万+
HTML5版本的飞机大战         元素,作为容器 -->     QWE切换飞机   ZXC切换子弹   // 0 游戏的初始化阶段 // 01 获取元素,并且创建画布对象 var canvas = document.getElementById("canvas"); var context = canvas.get
html5飞机大战游戏源码
a13689028602的博客
05-02 668
下载地址：https://download.youkuaiyun.com/download/qq_31293575/18333602 项目介绍 html5飞机大战游戏源码 适用场景： 毕业论文、课程设计、公司项目参考 运行截图
创建前端飞机大战游戏：HTML+CSS+JavaScript实现
通过以上的知识点介绍，可以看出开发一个基础的前端飞机大战游戏需要掌握HTML来构建页面结构，CSS来美化和动画化游戏界面，以及JavaScript来实现游戏的交互和逻辑。这些技能的组合使得开发一个简单有趣的游戏成为...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值