javascript - 使用js实现简单的发射子弹的效果,结果只能发射一颗子弹没有办法做到连发

Question

var timer = null;
switch (e.keyCode) {
        case 37:
            p1.style.left = p1.offsetLeft - 10 + "px";
            break;
        case 39:
            p1.style.left = p1.offsetLeft + 10 + "px";
            break;
        case 38:
            p1.style.top = p1.offsetTop - 10 + "px";
            break;
        case 40:
            p1.style.top = p1.offsetTop + 10 + "px";
            break;
        case 81:
            p22 = document.createElement("p");
            p22.style.width = "20px";
            p22.style.height = "20px";
            p22.style.top = p1.offsetTop + 65 +"px";
            p22.style.left = p1.offsetLeft + 260+"px";
            p22.className = "pp";
            p1.appendChild(p22)
            var timer  = setInterval(function(){
                p22.style.left = p22.offsetLeft + 30+ "px";
                if(p22.offsetLeft >= 800){
                    p1.removeChild(p22);
                    clearInterval(timer);
                }
            },300)
只能同时发射一颗子弹,第一颗子弹没有消亡的时候发射第二颗,第一颗子弹会固定在屏幕上,以此类推.目前只知道是timer的问题,但是 不知道要怎么解决 额额额

Answer 1

不知道对不对：

var array = [];
var p22;
setInterval(function(){
    array.forEach(function(p, index) {
        p.style.left = p.offsetLeft + 30+ "px";
        if(p.offsetLeft >= 800){
            p1.removeChild(p22);
            array.spilce(index, 1);
        }
    });
},300)
switch (e.keyCode) {
    case 37:
        p1.style.left = p1.offsetLeft - 10 + "px";
        break;
    case 39:
        p1.style.left = p1.offsetLeft + 10 + "px";
        break;
    case 38:
        p1.style.top = p1.offsetTop - 10 + "px";
        break;
    case 40:
        p1.style.top = p1.offsetTop + 10 + "px";
        break;
    case 81:
        p22 = document.createElement("p");
        p22.style.width = "20px";
        p22.style.height = "20px";
        p22.style.top = p1.offsetTop + 65 +"px";
        p22.style.left = p1.offsetLeft + 260+"px";
        p22.className = "pp";
        p1.appendChild(p22);
        array.push(p22);
}