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

最新推荐文章于 2024-06-24 17:28:50 发布

你的阿wen

最新推荐文章于 2024-06-24 17:28:50 发布

阅读量5.7k

点赞数 42

分类专栏： js 实操文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/qq_45948983/article/details/106875788

版权

这篇博客介绍了一个利用JavaScript实现飞机移动的实例，通过上、下、左、右键控制飞机移动，并且按下空格键能发射子弹。子弹在屏幕上从飞机头部射出并垂直向上移动，应用了定时器来改变子弹位置。文章还强调实践的重要性，并提供了一个完整代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例：利用html表单和js的数学对象及函数做一个有验证码的简单登录表单

实操：利用日期对象和方法以及其他相关知识实现简单的钟表功能

。。。。。。。

js学习中的小实操（目录）

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

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

那么我们就进入例子，先看一下我们的最终结果：
在这里插入图片描述
注意：光理论是不够的，技术是不断更新的。在此赠送2020最新企业级别Vue3.0/Js/ES6/TS/React/node等实战视频教程，想学的可进裙 519293536 免费获取，小白勿进哦！

首先先将这两张图片（一张飞机的图片、一张子弹的图片）保存到我们的文件夹里：
在这里插入图片描述
然后就可以开始了：先将我们的飞机和子弹插入：

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

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	//给我们插入的所有图片进行定位
		img{
   
			position: absolute;
			left:

最低0.47元/天解锁文章