JavaScript实现飞机发射子弹
- 前言
- 实现过程
- 源码展示
- 源码讲解
- HTML结构
- CSS结构
- js结构
前言
文本主要讲解如何利用JavaScript实现飞机发射子弹，实现过程以及源码讲解。实现效果图如下：
实现过程
- 首先，找到飞机和子弹的UI图，gif图最好，这里我用的是jpg图。
飞机：
子弹：
2.把这两个UI图放在代码文件夹中
3.创建初始子弹数和飞机的img，这里我创建的是十个子弹和一架飞机。
4.创建img的position定位确定飞机初始位置，以及子弹初始消失display：none。并对文字剩余子弹数使用position:fixed固定定位。
5.创建script文件，使用document.onkeydown按键监听事件对上下左右键进行监听。并通过控制飞机的offsetLeft和offsetTop也就是在页面中的位置属性，并通过空格键调用shoots发射子弹方法。
6.在shoots中使用for循环，for循环中调用每个子弹的id，并判断子弹display是否为none，如果为none则把它定义为block，并对接收的top和left参数，对当前idDOM元素的top和left进行参数赋值，最后用break；跳出循环。
7.用setInterval定时进行子弹的动画效果。
源码展示
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>飞机发射子弹</title><style>body {background-color: #f5f5f5;}img {position: absolute;left:50%;bottom:0;transform: translate(-50%,0);}div {position: fixed;top: 0;left: 0;}</style></head><body><div>剩余子弹:<span id="bullets">10</span>发</div><img src="子弹.jpg" alt="" id="bullet1" style="display:none;width:10px;"><img src="子弹.jpg" alt="" id="bullet2" style="display:none;width:10px;"><img src="子弹.jpg" alt="" id="bullet3" style="display:none;width:10px;"><img src="子弹.jpg" alt="" id="bullet4" style="display:none;width:10px;"><img src="子弹.jpg" alt="" id="bullet5" style="display:none;width:10px;"><img src="子弹.jpg" alt="" id="bullet6" style="display:none;width:10px;"><img src="子弹.jpg" alt="" id="bullet7" style="display:none;width:10px;"><img src="子弹.jpg" alt="" id="bullet8" style="display:none;width:10px;"><img src="子弹.jpg" alt="" id="bullet9" style="display:none;width:10px;"><img src="子弹.jpg" alt="" id="bullet10" style="display:none;width:10px;"><img src="飞机.jpg" alt="" id="plane" style="width:100px;height:100px;"><script>let plane = document.getElementById('plane')document.onkeydown = function(e) {switch (e.keyCode) {case 37:plane.style.left = plane.offsetLeft - 10 + "px";break;case 38:plane.style.top = plane.offsetTop - 10 + "px";break;case 39:plane.style.left = plane.offsetLeft + 10 + "px";break;case 40:plane.style.top = plane.offsetTop + 10 + "px";break;case 32: //space空格键发射子弹shoots(plane.offsetTop, plane.offsetLeft);break;}}function shoots(top, left) {let bullet;for (let i = 1; i <= 10; i++) {bullet = document.getElementById(`bullet` + i)if (bullet.style.display == 'none') {bullet.style.display = 'block'bullet.style.top = top + 'px'bullet.style.left = left + 'px'break;}}}setInterval(function() {let bullet;let bulletnum=0;for (let i = 1; i <= 10; i++) {bullet = document.getElementById(`bullet` + i)bullet.style.top = bullet.offsetTop - 10 + "px";if (bullet.offsetTop < -7) {bullet.style.display = "none";}if(bullet.style.display=='none'){bulletnum++;}}document.getElementById('bullets').innerHTML=bulletnum;}, 15);</script></body>
</html>
源码讲解
HTML结构
div为剩余子弹数量。数字的span的id为bullets
前十个img为子弹。Id为bullet1-10.
最后一个img是飞机。id为plane
CSS结构
img:用abolute实现定位，并用top和left进行定位。
div：用fix实现固定定位。
js结构
定义块变量plane，把DOM中id为plane赋过去。
用document.onkeydown键盘监听事件，对键盘进行监听，并且通过e.keyCode和switch语句是否为上下左右的keyCode，如果是则对offsetLeft和offsetTop进行±10操作，并且把值赋给absolute中的top和left。
然后如果是32也就是space空格则调用发射子弹方法shoots
shoots方法用for循环来调用每个子弹，并通过判断这些子弹是否为display：none，如果是则定义为block，且把参数top和left值赋值过去，也就是当前飞机的位置，然后用break退出循环。
最后用setInterval定时器，也是for循环每15毫秒则把top-10，直到top<-7则让该DOM元素的display为none。然后把所有获取到display为none的变成剩余子弹数量，并把变量用innerHTML赋值给bulletsDOM元素。
