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

Question

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

    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);
        }
    }

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

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

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

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);

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

        var position = i;

最后，如果您不喜欢 console.log，您可以尝试将其放在您的 if 块中：

        debugger;

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