js-键盘事件案例-飞机发射子弹

js-键盘事件案例-飞机发射子弹

js-键盘事件案例-飞机发射子弹_第1张图片
一.先对飞机进行研究:

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‘忘了

你可能感兴趣的:(#,js-事件案例)