Javascript 移位数组问题

Question

我对 JS 很陌生。

正在学习本教程 (https://youtu.be/0ArCFchlTq4)。在这个项目中注意到了一些有趣的事情，这让我很困扰。可能有人可以帮我想出一些答案。

有这部分代码，我们在其中移动管道数组（下面列出的代码）。但是在移动之后，最左边的管道会出现这种奇怪的情况 - 它会在短时间内保持运动，使管道在视觉上相对于前景向后移动几个像素，例如，前景以与管道相同的速度移动。这发生在执行 shift 命令的同一时刻，并且只影响数组中的下一个管道。

如果有人能向我解释这一点，并可能给出修复提示，我将非常高兴。谢谢！

 // if the pipes go beyond canvas, we delete them from the array
            if(p.x + this.w<= 0){
            
                this.position.shift();
                score.value += 1;
                SCORE_S.play();
                score.best = Math.max(score.value, score.best);
                localStorage.setItem("best", score.best);
            }
        }
    },
    
    reset : function(){
        this.position = [];
    }
    
}

Answer 1

我认为这是由于 .shift() 方法的行为所致。

正如您在 MDN 上看到的那样，它改变了调用它的数组的长度。我还没有完成整个代码，但是来自

if(p.x + this.w<= 0){
        
            this.position.shift();
            score.value += 1;
            SCORE_S.play();
            score.best = Math.max(score.value, score.best);
            localStorage.setItem("best", score.best);
        }
    }
}

我们可以看到 position 数组中的第一个管道正在被删除，当它发生时，其他所有管道都会影响其在数组中的顺序。除了那个，我看不出为什么它会让小管子冻结在管道上。

Javascript 移位数组问题

Javascript shift array issue

html

javascript

arrays

game-development