Question

我已经学习了大约2个月的JavaScript，而且我试图制作一个空间侵略者的愚蠢版本。基本上，有一艘宇宙飞船在包含游戏的div的底部左右移动。小行星来自顶部，你必须通过击中空格键射击它们。我设法让子弹正确生成，但我无法让它们慢慢向上移动。

这就是我产生子弹所得到的：

  function spawnBullet(evento) {
        if (evento.charCode==32) {
            newBullet=document.createElement("img");
            newBullet.classList.add("bullet");
            newBullet.setAttribute("src", "images/bullet.png");
            newBullet.setAttribute("style", "left: "+parseInt(parseInt(document.getElementById("spaceship").style.left)+15)+"px");
            document.getElementById("spaceWrap").appendChild(newBullet);
            bullets.push(newBullet);
        }
    }

其中bullets基本上是一个对象数组，包含当前屏幕上的每个项目符号，参数evento由onkeypress="event"传递到容器div上

以下是bullets类的CSS：

.bullet {
    width: 10px;
    position: absolute;
    top: -10px;
    display: block;
}

现在进行运动：

function moveBulletsTimer() {
    bulletTimer=setInterval(moveBullets, 100);
}

function moveBullets() {
    for (var i=0; i<=bullets.length-1; i++) {
        if (bullets[i].style.top<=document.getElementById("gameWindow").style.height)
            bullets[i].style.top=parseInt(bullets[i].style.top)-10+'px';
        else {
            bullets[i].remove();
            bullets.pop(bullets[i]);
        }
    }
}

当玩家点击START按钮时，

moveBulletsTimer()即被启动。

我认为我在setInterval的某个地方遇到了问题，因为top属性永远不会改变。

我可以在某个地方托管整个HTML / CSS / JS文件，因为在这里复制它们会很疯狂，它们每行都有70多行，而且目前非常糟糕。

使用JavaScript移动动态创建的图像

0 个答案: