自作JavaScript飞机大战小游戏

最新推荐文章于 2024-06-10 17:33:11 发布

舜岳

最新推荐文章于 2024-06-10 17:33:11 发布

阅读量2.7k

点赞数 10

分类专栏：游戏文章标签：小游戏 H5小游戏自作小游戏编程小游戏

本文链接：https://blog.csdn.net/qq_41614928/article/details/88744087

版权

游戏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

不会canvas画板标签小朋友们的福音来啦，用标签也能制作简单小游戏哦！

飞机大战GitHub源码链接：https://github.com/shunyue1320/fjdz.git

在这里插入图片描述

做游戏就要有素材的啦，以下是在爱给网找到的素材：
在这里插入图片描述

首先3个页面的打开我们用div来做，通过更改div的隐藏属性display: none;与显示display: block来达到页面切换的效果：

	<body>
		<div id="home">
			<div id="one" style="display: none;">
				<!--<div class="haemal"><p></p></div>
				<div class="score">0</div>-->
			</div>
			<div id="tow">
				<div class="plane" >
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="list">
					<ul>
						<li>沙丘大战</li>
						<li>黑夜突袭</li>
						<li>火焰山战</li>
						<li>天空之城</li>
						<li>丘陵战争</li>
					</ul>
				</div>
			</div>
			<div id="three" style="display: none;">
				<h1>得分</h1>
				<h1 id="newscore">0</h1>
				<div id="quit">确定</div>
			</div>
		</div>
		
		<script src="js/main.js"></script>
	</body>

就这么短短的几行样式代码足够啦！

设置完css样式后我们就可以开始js代码的编写。

首先我们创建好各个文件，存储相应的材料及代码

var one = document.getElementById('one'),
	haemal = one.querySelector("p"),
	score = one.getElementsByClassName("score")[0],
	tow = document.getElementById('tow'),
	three = document.getElementById('three'),
	air = tow.querySelectorAll(".plane li"),
	start = tow.querySelectorAll(".list li"),
 	Air = 0,	//代表哪架飞机
 	plane = 0,	//第几形态
 	index;
 	var arrPlane = [['img/my1.png','img/my11.png','img/my111.png'],['img/my2.png','img/my22.png','img/my222.png'],['img/my3.png','img/my33.png','img/my333.png'],['img/my4.png','img/my44.png','img/my444.png']],
		arrBullet = [['img/pd1.png','img/pd11.png','img/pd111.png'],['img/pd2.png','img/pd22.png','img/pd222.png'],['img/pd3.png','img/pd33.png','img/pd333.png'],['img/pd4.png','img/pd44.png','img/pd444.png']];
	for (let i=0; i<air.length; i++) {
	 	air[i].onclick = function(){
	 		Air = i;
	 	}
	}
	for (let i=0; i<start.length; i++) {
		index = i
	 	start[i].onclick = function(){
	 		startGame(Air,i);
	 	}
	}

startGame(Air,i)游戏开始函数传递2个参数，Air代表选则的飞机，i代表选则的关卡，接下来我们将写游戏开始函数

//开始游戏
function startGame(Air,index){
	one.innerHTML = "";	//清空初始页面
	plane = 0;
	var haemal = document.createElement("div");
	haemal.className = "haemal";
	var score = document.createElement("div");
	score.className = "score";
	var p = document.createElement("p");
	haemal.appendChild(p)
	one.appendChild(haemal);
	one.appendChild(score);
 	tow.style.display = 'none';
 	one.style.display = 'block';
 	one.style.backgroundImage = ['url(img/context1.jpg)','url(img/context2.jpg)','url(img/context3.jpg)','url(img/context4.jpg)','url(img/context5.jpg)'][index];

通过document.createElement(“div”),我们可以在页面上创建相应的标签，图片，可以用来实现生成飞机，通过定时器setInterval我们可以实现，背景的移动效果，从而感觉飞机在移动！

audio()函数为实现背景音乐的生成我们来看看该函数里面有啥

//声音效果
function audio(n){
	var music = ["audio/bgm.mp3","audio/boom.mp3","audio/bullet.mp3"],
		dio = document.createElement("audio");
	if(n != 1){
		dio.className = "dio"
	}
	dio.src = music[n];
	dio.autoplay = "autoplay";
	dio.loop = "loop";
	one.appendChild(dio);
	if (n==1) {
		setTimeout(function(){
			one.removeChild(dio);
		},800)
	}
}

可见参数n是用与播放哪一个背景音乐而设计的，本游戏一共用了3个背景音乐，分别是爆炸音效，发射子弹音效，背景音乐。

如何实现生成我方飞机呢，接下来我们来看看：

function myAir(Air){
	var myAirPlane = document.createElement("img");
	var speed = 4;	//速度
	myAirPlane.className = "myplane";
	myAirPlane.src = arrPlane[Air][plane];
	myAirPlane.width = 70;
	myAirPlane.height = 50;
	myAirPlane.style.bottom = 5 + 'px';
	myAirPlane.style.left = home.clientWidth/2 - myAirPlane.width/2 + 'px';
	one.appendChild(myAirPlane);
	//键盘移动事件
	document.onkeydown = function (e) {
		e = e || window.event;
		switch (e.keyCode){
			case 37:
			case 65:
				myAirPlane.style.left = Math.max(0,myAirPlane.offsetLeft-5) +'px';
				break;
			case 39:
			case 68:
				myAirPlane.style.left = Math.min(home.clientWidth - myAirPlane.width,myAirPlane.offsetLeft+5) +'px';
				break;
			default:break;
		}
	}
	//触摸移动事件
	one.ontouchstart = function(e){
		if(e.touches[0].screenX < home.clientWidth/2){
			myAirPlane.style.left = Math.max(0,myAirPlane.offsetLeft-5) +'px';
		}else{
			myAirPlane.style.left = Math.min(home.clientWidth - myAirPlane.width,myAirPlane.offsetLeft+5) +'px';
		}
	}

让我们来生成子弹吧

//生成子弹
	one.bulletTimer = setInterval(function(){
		var myAirBullet = document.createElement("img");
		myAirBullet.className = "myAirBullet";
		myAirBullet.src = arrBullet[Air][plane];
		myAirBullet.width = 10*(1+plane);
		myAirBullet.height = 20*(1+plane);
		myAirBullet.style.top = myAirPlane.offsetTop - myAirBullet.height + 'px';
		myAirBullet.style.left = myAirPlane.offsetLeft + myAirPlane.clientWidth/2 - myAirBullet.width/2 + 'px';
		one.appendChild(myAirBullet);
		//子弹发射
		bulletEmit();
		function bulletEmit(){
			let top = myAirBullet.offsetTop -speed;
			myAirBullet.style.top = top + 'px';
			if(top <= 0){
				//cancelAnimationFrame(motion);//清除运动函数
				one.removeChild(myAirBullet);//清除
				return false;
			}else{
				myAirPlane.parentNode && (myAirBullet.timer = requestAnimationFrame(bulletEmit));
			}
		}
	},400);

设置完我方飞机我们就开始制作生成敌军啦，这个故事是一个漫长的事情，让我们来简单分析一下：

1.生成敌军，也就是通过创建img标签实现位置Math.random()实现

2.敌军下落，通过改变img标签的top值可以实现哦

3.敌军与我方子弹碰撞敌军消失子弹消失生成爆炸效果img标签

4.生成我军补给子弹击中升级我军的形态与子弹形态

4.敌军撞到我方飞机关闭所有运动函数背景声音游戏结束弹出得分

下面是碰撞判断

//敌军与子弹碰撞
				for(let i=0; i<aBiu.length; i++){
					if(isCollision(aBiu[i],enemyPlane)){
						scoreis++;
						score.innerHTML = scoreis;
						Boom(enemyPlane);	//爆炸效果
						audio(1)	//声音效果
						cancelAnimationFrame(aBiu[i].timer);//清除子弹运动函数
						one.removeChild(enemyPlane);//清除飞机
						one.removeChild(aBiu[i]);//清除子弹
						return false;
					}
				}
				//敌军与我军碰撞 游戏结束
				if(myPlane.parentNode && isCollision(myPlane,enemyPlane)){	//判断我方飞机是否存在 && 是否碰撞
					let dio = one.getElementsByClassName("dio");
					var pp = one.querySelector("p");
					pp.style.width = 0 +"px";
					one.removeChild(dio[0]);
					one.removeChild(dio[0]);
					Boom(enemyPlane);	//敌军爆炸效果
					Boom(myPlane);	//我军爆炸效果
					audio(1);
					clearInterval(one.enemyTimer);	//停止生成敌军
					clearInterval(one.bulletTimer);	//停止生成子弹
					clearInterval(one.backgroundMove);//背景停止
					clearInterval(one.supplyTimer);//补给生成停止
					one.removeChild(myPlane);
					one.removeChild(enemyPlane);
					document.onkeydown = null;	//清除移动事件
					one.ontouchstart = null;
					newscore.innerHTML = scoreis;
					three.style.display = "block";
					return false;
				}

接下来我们来了解以下碰撞判断函数： isCollision()

//碰撞过程
function isCollision(obj,enemy){	//obj:我军或子弹 	 enemy:敌军
	var t1 = obj.offsetTop,
		b1 = obj.offsetTop + obj.height,
		l1 = obj.offsetLeft,
		r1 = obj.offsetLeft + obj.width;
		
	var t2 = enemy.offsetTop,
		b2 = enemy.offsetTop + enemy.height,
		l2 = enemy.offsetLeft,
		r2 = enemy.offsetLeft + enemy.width;
	
	return !(t1 > b2 || l1 > r2 || b1 < t2 || r1 < l2);
}

通过一个矩形体左边距离是否大于另一个矩形右边距离的方法来监测是否没有碰撞： return false(没有碰撞) / true（碰撞）
这是比较重要的一步哦代码并不难好好理解以下吧！

以下是飞机大战小游戏代码连接永久有效哦拿去玩玩吧不过要用谷歌浏览器打开哦没做兼容呢！

链接:https://pan.baidu.com/s/1ztqe_eNxU7TrAjfLkDbo8Q

提取码:2ylk

舜岳

关注

10
点赞
踩
26

收藏

觉得还不错? 一键收藏
2
评论
自作JavaScript飞机大战小游戏

不会canvas画板标签小朋友们的福音来啦，用标签也能制作简单小游戏哦！做游戏就要有素材的啦，以下是在爱给网找到的素材：首先3个页面的打开我们用div来做，通过更改div的隐藏属性display: none;与显示display: block来达到页面切换的效果： <body> <div id="home"> <div id="one" style...
复制链接

扫一扫

专栏目录