小实操（4）：实现飞机的移动并且能够发射子弹

。。。。。。。

**
今天学习的也是一个例子，利用我们js 实现用我们的上、下、左、右来控制一个小飞机的移动，并且当我们按下空格可以向上发射子弹。
**

关注小文我们一起学习进步。

那么我们就进入例子，先看一下我们的最终结果：
在这里插入图片描述
首先先将这两张图片（一张飞机的图片、一张子弹的图片）保存到我们的文件夹里：

然后就可以开始了：先将我们的飞机和子弹插入：

但是我们的子弹在没有发射的情况下应该是不出现在屏幕的所以我们要进行设置：style="display: none;"

然后我们就获取飞机的节点，这里控制飞机移动，和我们上一个训练控制小人快跑的移动一样：
在这里插入图片描述
当然除了移动的四个键，还要添加一个发射子弹的空格键，空格的keycoad是32，为其添加一个函数，当我们按下空格触发：

函数传入的两个参数就是我们飞机的top值和left值，当我们按下空格，子弹会在屏幕显示，并且会从我们飞机头的位置射出，
在这里插入图片描述
当然了我们这里子弹射出，垂直向上移动，这里会用到我们前面学到的定时器，每隔一段时间，子弹的位置进行变化：

这里最前面忘记了一个重要的东西，前面的飞机和子弹要设置定位，不然的话我们的飞机是没法动起来的：
在这里插入图片描述
好了这样基本上我们就完成了：那么下面附上完整的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	//给我们插入的所有图片进行定位
		img{
			position: absolute;
			left: 0px;
			top: 0px;			
		}		
	</style>
				
	<body>
	//插入几张子弹的图片
		<img src="../images/飞机发射子弹%20图/zidan.png" id="zidan1" style="display: none;">
		<img src="../images/飞机发射子弹%20图/zidan.png" id="zidan2" style="display: none;">
		<img src="../images/飞机发射子弹%20图/zidan.png" id="zidan3" style="display: none;">
		<img src="../images/飞机发射子弹%20图/zidan.png" id="zidan4" style="display: none;">
		<img src="../images/飞机发射子弹%20图/zidan.png" id="zidan5" style="display: none;">
		
		//插入的飞机的图片		
		<img src="../images/飞机发射子弹%20图/feiji.gif" id="fj">
		<script>
		//获取飞机的节点
			var fj = document.getElementById("fj");
			
		//给我们的document添加键盘事件	
			document.onkeydown = function(e){			
			    var e = window.event || e;			
			    switch(e.keyCode){			
			        case 37:
			            fj.style.left = fj.offsetLeft-10+"px";
			            break;
			
			        case 38:
			            fj.style.top = fj.offsetTop-10+"px";
			            break;
			
			        case 39:
			            fj.style.left = fj.offsetLeft+10+"px";
			            break;
			        case 40:
			            fj.style.top = fj.offsetTop+10+"px";
			            break;
						
			        case 32:
	   //我们的子弹是从我们飞机的头头那里射出，相当于我们子弹的offsetTop和我们飞机的   
	  //offsetTop一样,而子弹的offsetLeft是我们飞机的offsetLeft加上我们飞机宽度的一半，
	  //这样就能保证我们的子弹始终是从我们飞机的头那里射出
			            fashe(fj.offsetTop,fj.offsetLeft+fj.offsetWidth/2);
			            break;
			    }			
			}
			
			function fashe(top,left){			
			    for(var i=1;i<6;i++){
			        var zidan = document.getElementById("zidan"+i);
			        if(zidan.style.display == "none"){
			           zidan.style.display = "block";
			           zidan.style.left = left+"px";
			           zidan.style.top = top+"px";
			           break;
			        }
			    }
			}
		//这里设置一个定时器，每隔一段时间，子弹的位置发生变化，垂直向上移动，就是每隔一段时间我们
		//的offsetTop进行减小	
			setInterval(function(){
			    for(var i=1;i<6;i++){
			        var zidan = document.getElementById("zidan"+i);
			        zidan.style.top =zidan.offsetTop-10+"px";
			        
	   //我们只添加了五发子弹如果子弹无限制的向上移动，那么我们射出五发之后，将不能够继续发射子弹
	   //所以我们要进行限制，一旦子弹的尾部超出屏幕，那么它便立即消失，那么我们的子弹便能一直发射
	   //就是只要我们的offsetTop小于我们子弹长度的负数那么 它的display就变为none，这里也和前面
	   //射出来的时候，变为block形成一个循环
			        if(zidan.offsetTop<-7){
			            zidan.style.display = "none";
			        }			
			    }
			},20);
		</script>
	</body>
</html>

Maybe you like to be different, and I’m too ordinary.
---------------------------大概你喜欢与众不同而我太过普通
在这里插入图片描述

小实操（4）：实现飞机的移动并且能够发射子弹

猜你喜欢