js-键盘事件案例-飞机发射子弹
js-键盘事件案例-飞机发射子弹
一.先对飞机进行研究：
css部分
改变飞机的位置，所以要加定位
<style>
#img{
position:absolute;
left:0px;
top:0px;
}
</style>
html部分
（images/1.gif为飞机图片）
<body>
<img src="images/1.gif" alt="" id="img">
<script src="script.js"></script>
</body>
js部分
我们先对小飞机设置移动，暂时不考虑子弹，利用键盘事件，
具体思路与同目录下的小人快跑案例相同，就不重复说了
var img = document.getElementById("img");
document.onkeydown = function(e) {
var e = window.event || e;
switch (e.keyCode) {
case 37:
img.style.left = img.offsetLeft - 10 + "px";
break;
case 38:
img.style.top = img.offsetTop - 10 + "px";
break;
case 39:
img.style.left = img.offsetLeft + 10 + "px";
break;
case 40:
img.style.top = img.offsetTop + 10 + "px";
break;
}
}
二.接下来研究发射子弹：
1.子弹的初始位置：结合现实情况应该在飞机头头的位置：
所以left：飞机图片的offsetLeft加自身宽度的一半即offsetWidth/2
top：就是飞机图片的offsetTop
由于子弹位置也改变，也需要定位，且刚开始隐藏状态
重修修改一下css和html部分
css部分
<style>
img {
position: absolute;
left: 0px;
top: 0px;
}
</style>
html部分 （2.png为子弹图片）
<body>
<img src="../2.png" alt="" id="pos0" style="display: none">
<img src="../2.png" alt="" id="pos1" style="display: none">
<img src="../2.png" alt="" id="pos2" style="display: none">
<img src="../2.png" alt="" id="pos3" style="display: none">
<img src="../2.png" alt="" id="pos4" style="display: none">
<img src="../1.gif" alt="" id="img">
<script src="script.js"></script>
</body>
js部分
1.空格键（keycode值为32）发射子弹，用game函数封装：
case 32:
//发射子弹
game(img.offsetTop,img.offsetLeft+img.offsetWidth/2);
break;
}
function game(top,left){
for(var i=0;i<5;i++){
var pos = document.getElementById("pos"+i);
if(pos.style.display == "none"){
pos.style.display = "block";
pos.style.left = left+"px";
pos.style.top = top+"px";
break;
//这地方break要注意，防止按一下空格，五发子弹全部弹出
//而且break的作用是跳出与它最近的内层循环，与if-else无关
}
}
2.让子弹动起来：
利用了setInterval（）函数
setInterval(function() {
for (var i = 0; i < 5; i++) {
var pos = document.getElementById("pos" + i);
pos.style.top = pos.offsetTop - 10 + "px";
}
}, 20)
3.做到这由于我们只插入了五个子弹图片，所以我们只能发射五颗子弹，所以我们需要做一个子弹回收机制
setInterval(function() {
for (var i = 0; i < 5; i++) {
var pos = document.getElementById("pos" + i);
pos.style.top = pos.offsetTop - 10 + "px";
if (pos.offsetTop < -7) {
//-7是 0-子弹高度求出来的
pos.style.display = "none";
}
}
}, 20)
-----------------------------------------------------------------------------------------------------
写代码时遇到的问题：
1.如果不知道键盘中某些键的keycode（比如此案例中的上下左右空格）
我们可以通过alert（）输出得到
pos.style.top = pos.offsetTop - 10 + "px";
这地方一定要注意 不要把’px‘忘了