拼接的Javascript数组中改变以前的值 [英] Javascript splice changing earlier values in an array

问题描述

我创建一个游戏，随机显示圈到画布上。圆圈对象添加到阵列中，每当玩家与其中一人发生冲突我想删除该对象。这是目前碰撞我的code -

 为（VAR I = 0; I＆LT; currentGame.items.length;我++）
    {
        如果（player1.x＆下; currentGame.items [I] .X + currentGame.items [Ⅰ] .radius * 2和;＆放大器; player1.x + currentGame.items [Ⅰ] .radius * 2  - ; currentGame.items [ I] .X＆放大器;＆安培;
                player1.y＆LT; currentGame.items [I] .Y + currentGame.items [Ⅰ] .radius * 2和;＆放大器; player1.y + player1.car.height＆GT; currentGame.items [I] .Y）{
            currentGame.score ++;
            位置= currentGame.items.indexOf（ⅰ）;
            currentGame.items.splice（位置，1）;
        }
    }
 

这code正常工作当玩家点击已添加到阵列/帆布的最后一圈。然而，如果玩家击中是在阵列那么所有的阵列的subsequant项也将被删除（不是previous的）的中间圆圈。该球员得分将由但是许多圈子被删除增加。这表明，当一个圈子中被删除的项向下移动，走刚删除的人的地方，包括采取它的位置坐标，以便届时玩家与他们发生冲突，他们都然后被删除。

我不知道如何解决这个问题，如果我使用的拼接错误。

下面是我的code添加到阵列 -

 功能createItem中（）{
    ITEM1 =新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; //笔画粗细
    item1.strokeStyle =RGB（255,215,0）;    currentGame.items.push（ITEM1）;
}
 

物品存放在这里（我删除一切从该对象为清楚起见） -

 函数gameValues​​（）{
    this.items = [];
}
currentGame =新gameValues​​（）;
 

解决方案

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

例如，如果你在位置 I 删除的项目，然后后面的项目将左移，那么下一个项目，现在会坐在位置我，而是因为你的循环的下一次检查 I + 1 ，该项目将被忽略！

现在你可以做 I - ; 拼接后，以确保您的位置检查新项目 I 在下一迭代中，但更简单的解决方案是简单地循环倒退。然后了影响列表的其余部分的操作将不会是一个问题。

 为（VAR I = currentGame.items.length;我 - ;）
 

---

不管怎样，我对别的东西有关在code：

 位置= currentGame.items.indexOf（I）
 

不，我们已经知道，当前项目的位置是 I ？这的indexOf 搜索列表中的的值的的项目我。我想象位置将获得值 1 在的indexOf 搜索失败。我觉得你真的是这里是：

  VAR位置=我;
 

最后，如果你不喜欢的console.log 你可以尝试把这里面你如果块：

 调试;
 

这是手动设置了断点在code，这样你就可以检查变量的值，看看什么错误。你需要让你的浏览器的调试器或开发工具面板中打开。不要忘记删除该语句时，你完蛋了！

I am creating a game that randomly displays circles onto a canvas. The circles objects are added to an array and whenever the player collides with one of them I want to remove that object. Here is my code currently for the collision -

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

This code works fine when the player hits the last circle that has been added to the array/canvas. However, if the player hits circles that are in the middle of the array then all the subsequant items of the array will also be removed (not the previous ones). The players score will be increased by however many circles get deleted. This suggests that when one of the circles is removed the items are shifted down and take the place of the one just deleted, including taking it's position coordinates so then the player collides with all of them and they are all then deleted.

I don't know how to fix this, or if I am using splice incorrectly.

Here is my code for adding to the array -

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

items is stored here (I removed everything else from this object for clarity) -

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

解决方案

It is quite common to run into trouble when modifying an array which you are looping.

For example, if you remove the item at position i, then the later items will shift left, so the next item will now sit in position i, but because the next iteration of your loop inspects i+1, that item will be skipped!

Now you could do i--; after the splice, to ensure you inspect the new item in position i on the next iteration, but a simpler solution is simply to loop backwards. Then operations which affect the rest of the list will not be an issue.

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

---

Anyway, I am concerned by something else in your code:

        position = currentGame.items.indexOf(i);

Don't we already know that the position of the current item is i? This indexOf searches the list for an item with the value i. I imagine position will get the value -1 when the indexOf search fails. I think what you really mean here is:

        var position = i;

Finally, if you don't enjoy console.log you can try putting this inside your if block:

        debugger;

That manually sets a breakpoint in your code, so you can inspect the values of the variables to see what is going wrong. You will need to have your browser's debugger or "dev tools" panel open. Don't forget to remove the statement when you are finished!

这篇关于拼接的Javascript数组中改变以前的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！