Javascript 尝试创建一个步行游戏

我试图写一个游戏，但我做错了什么，我不知道具体是什么。我有两个主要问题：

1） 当我尝试删除离开画布边界的管道时（我是在帮助下完成的

splice（I，1））

，当第一个管道离开时，我遇到了一个错误。我不知道为什么以及如何修复它

2） 动画播放的时间越长，变量heroY的变化越快，我的英雄也会倒下，但我不明白为什么会这样？ 请帮我解决这些问题，谢谢

代码笔：

JS代码：

const canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”）；
让bottom=canvas.height，
dx=2，
随机高度，
跳跃=0；
const hero=新图像（）；
hero.src=”https://i.postimg.cc/SNRYWBZh/man.png";
假设高度=75，
宽度=100，
heroX=40，
heroY=底部-高度；
const pipe=新图像（）；
pipe.src=”https://i.postimg.cc/ZqHJsRRD/pipe.png";
让startPipePos=canvas.width，
管道高度=数学地板（数学随机（）*90），
pipeY=底部-管道高度；
让管道=[{
x:startPipePos，
高度：管道高度，
管道：底部-管道高度
}];
pipe.onload=（）=>{
游戏（）；
}
函数游戏（）{
动作（）；
render（）；
请求动画帧（游戏）；
}
函数动作（）{
for（设i=0，len=pipes.length；i=底部-heroHeight）跳跃=0；
}
}
函数render（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.drawImage（英雄、英雄、英雄、英雄宽度、英雄高度）；
for（设i=0，len=pipes.length；i{
如果（e.keyCode！=32 | |跳跃>=2）返回；
heroY-=90；
跳转++；
}

#画布{
保证金：0自动；
显示：块；
}

1）反向运行循环，如下-

for（让i=pipes.length；i>-1；i--）

避免数组长度更改打乱for循环

2） 您需要将渲染循环与动作循环分开，并使用固定的时间步长使所有内容保持同步

1）反向运行循环，如-

for（让i=pipes.length；i>-1；i--）

，以避免数组长度更改打乱for循环

---

2） 您需要将渲染循环与动作循环分开，并使用固定的时间步长来保持所有内容的同步

我的评论只是建议，也许这有助于节省您的时间，尝试使用画布/游戏框架（phaser、pixi等）进行练习。它们有助于您理解架构/良好的编程风格，您将获得更多的结果。因此，您是否希望我们阅读代码来重建游戏内容、可用控件、目标以及问题发生的时间？抱歉，但也许您应该确切地解释导致哪种行为的事件/操作顺序。比如“删除管道”？不知道这是怎么回事…我的评论只是建议，也许它有助于节省您的时间，尝试使用画布/游戏框架（phaser、pixi等）进行练习。它们有助于您理解架构/良好的编程风格，您将获得更多的结果。因此，您是否希望我们阅读代码来重建游戏内容、可用控件、目标以及问题发生的时间？抱歉，但也许您应该确切地解释导致哪种行为的事件/操作顺序。比如“删除管道”？不知道那是怎么回事。。。