Javascript 拼接更改数组中较早的值

Question

我正在创建一个在 Canvas 上随机显示圆圈的游戏。圆圈对象被添加到一个数组中，每当玩家与其中一个对象发生碰撞时，我想删除该对象。这是我目前用于碰撞的代码 -

    for(var i = 0; i < currentGame.items.length; i++)
    {
        if (player1.x < currentGame.items[i].x + currentGame.items[i].radius*2  && player1.x + currentGame.items[i].radius*2  > currentGame.items[i].x &&
                player1.y < currentGame.items[i].y + currentGame.items[i].radius*2 && player1.y + player1.car.height > currentGame.items[i].y) {
            currentGame.score++;
            position = currentGame.items.indexOf(i);
            currentGame.items.splice(position, 1);
        }
    }

当玩家点击已添加到数组/ Canvas 中的最后一个圆圈时，此代码可以正常工作。但是，如果玩家击中数组中间的圆圈，则数组的所有后续项目也将被删除(而不是之前的项目)。删除多少个圆圈，玩家的分数就会增加。这表明，当其中一个圆圈被删除时，项目会向下移动并取代刚刚删除的项目，包括获取其位置坐标，以便玩家与所有这些项目发生碰撞，然后它们全部被删除。

我不知道如何解决这个问题，或者我是否错误地使用了 splice。

这是我添加到数组的代码 -

function createItem(){
    item1 = new itemSmall();
    item1.x = Math.floor(Math.random()*((currentGame.windowWidth - 40)-40+1)+40);
    item1.y = Math.floor(Math.random()*((currentGame.windowHeight - 40)-40+1)+40);
    item1.fillStyle = "rgb(200,80,200)";
    item1.lineWidth = 4; //Stroke Thickness
    item1.strokeStyle = "rgb(255,215,0)";

    currentGame.items.push(item1);
}

项目存储在这里(为了清楚起见，我删除了该对象中的其他所有内容)-

function gameValues(){
    this.items = [];
}
currentGame = new gameValues();

Answer 1

修改正在循环的数组时遇到麻烦是很常见的。

例如，如果您删除位置 i 处的项目，则后面的项目将向左移动，因此下一个项目现在将位于位置 i 处，但是因为循环的下一次迭代检查 i+1，该项目将被跳过!

现在您可以在拼接后执行 i--; 操作，以确保在下一次迭代时检查位置 i 中的新项目，但更简单的解决方案是向后循环。那么影响列表其余部分的操作将不再是问题。

for(var i = currentGame.items.length; i--; )

<小时/>

无论如何，我担心您代码中的其他内容:

        position = currentGame.items.indexOf(i);

我们不是已经知道当前项的位置是i吗？此 indexOf 在列表中搜索具有值 i 的项目。我想象当 indexOf 搜索失败时，position 将获得值 -1。我认为你真正的意思是:

        var position = i;

最后，如果您不喜欢 console.log，您可以尝试将其放入 if block 中:

        debugger;

这会在代码中手动设置断点，以便您可以检查变量的值以查看出了什么问题。您需要打开浏览器的调试器或“开发工具”面板。完成后不要忘记删除该语句!