<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>雷霆战机 - 飞机控制</title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">
		*{margin: 0;padding: 0;}
		html,body{width: 100%;height: 100%;}
		body{background-color: #c3c8c9;}
		/*去掉背景音乐的图标*/
		audio{display: none;}
		.bg{
			width: 100%;
			height: 100%;
			background-image: url("images/background.png");
		}
		.me-aircraft{
			width: 102px;
			height: 126px;
			background-image: url("images/me1.png");
			position: fixed;
			top: 680px;
			left: 900px;
		}
	</style>
</head>
<body>
	<!-- 网页背景音乐 -->
	<audio src="" autoplay="autoplay" controls="controls" preload="auto" loop="loop" id="bgm"></audio>
	<div class="bg">
		<!-- 自己的飞机 -->
		<div class="me-aircraft" id="meAir"></div>
	</div>
</body>
<script type="text/javascript">
	document.getElementById("bgm").src="music/bgm.mp3";
	//定义一个数组装飞机图片
	var meAirImg = ["me1.png","me2.png"]
	//通过id找到飞机
	var meAir = document.getElementById("meAir");
	//当前图片
	var n = 0;
	//飞机火焰的动画效果
	var meAirChage = setInterval(function(args) {
		//判断是否切换到最后一张图片
		if(n >= meAirImg.length){
			n = 0;
		}
		//飞机动画效果（图片切换）
		meAir.style.backgroundImage = "url(images/"+meAirImg[n]+")";
		//下一张图
		n++;
	}, 10);


	var movingSpeed = 1;
	//js监听键盘按下
	document.onkeydown = meAirMove;
	//飞机惯性模拟
	var inertia;
	//飞机刹车距离
	var AirBD = 0;
	//飞机的移动
	function meAirMove(event){
		event = event||window.event;
		//获取飞机当前坐标
		var meAirLeft = meAir.offsetLeft;
		var meAirTop = meAir.offsetTop;

		//键盘的左
		if(event.keyCode == 37){
			//按下先清除
			clearInterval(inertia);
			//刹车归0
			AirBD = 0;
			inertia = setInterval(function(args) {
				//开始计算刹车距离
				AirBD++;
				meAirLeft -= movingSpeed;
				//想让飞机不跑出去，在赋值之前要进行判断！！！！！！！！

				meAir.style.left = meAirLeft + "px";
				//判断刹车距离是否达标
				if(AirBD >= 200){
					//停止移动
					clearInterval(inertia);
				}
			}, 1);
		}
		//键盘的右
		if(event.keyCode == 39){
			clearInterval(inertia);
			//刹车归0
			AirBD = 0;
			inertia = setInterval(function(args) {
				//开始计算刹车距离
				AirBD++;
				meAirLeft += movingSpeed;
				meAir.style.left = meAirLeft + "px";
				//判断刹车距离是否达标
				if(AirBD >= 200){
					clearInterval(inertia);
				}
			}, 1);
		}

		//键盘的上
		if(event.keyCode == 38){
			clearInterval(inertia);
			AirBD = 0;
			inertia = setInterval(function(args) {
				AirBD++;
				meAirTop -= movingSpeed;
				meAir.style.top = meAirTop + "px";
				if(AirBD >= 200){
					clearInterval(inertia);
				}
			}, 1);

		}
		//键盘的下
		if(event.keyCode == 40){
			clearInterval(inertia);
			AirBD = 0;
			inertia = setInterval(function(args) {
				AirBD++;
				meAirTop += movingSpeed;
				meAir.style.top = meAirTop + "px";
				if(AirBD >= 200){
					clearInterval(inertia);
				}
			}, 1);
		}
	}

</script>
</html>

 

最后修改于 2021-04-02 19:15:32
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇