Javascript 如何在画布动画的While循环的每次迭代之间添加延迟？

我在画布上写了一个面具游戏克隆人的坟墓作为作业，我想制作一个小动画，这样当我的角色“捕捉”到下一面墙时，它就不会像现在这样“传送”

请参见此处以获取实时评论：

目前我有一个大的keydown事件和一个switch case，它检测4个箭头键中的任何一个，这是case语句之一的示例：

case“ArrowLeft”：
如果（映射[playerCoords[1]][playerCoords[0]-1]！=1）{
while（映射[playerCoords[1]][playerCoords[0]-1]！=1）{
playerCoords[0]-；
}
}

为了更好地理解，我将拆分这些map语句：

map[playerCoords[1][playerCoords[0]-1]！=1.
地图[]-主地图数据（决定游戏布局的1和0）
playerCoords[0/1]-播放器的位置
map[pc[1]]（将获取map[playerCoords[1]]的子数组）>[pc[0]-1]（-1查找播放器左侧的块）
然后我把所有这些都选在一个语句中，检测它是否等于1（1是一个砖块），看玩家是否应该移动。

无论如何，我有一个animationFrame在我的播放器位置上一直运行，这样如果做了任何调整，它就会显示出来

我使用while循环将玩家发送到对面的墙（而不仅仅是向左或向右移动1个区块，它需要像TotM一样工作）只是立即发送结果。我想让它快速移动所有的方块，一个接一个，但几乎看不到

我可以在while循环中添加一些“延迟”吗，这样它可以移动1个块，然后等待10毫秒，然后是下一个，依此类推，第四个

完整游戏和代码：

查看整个页面，否则无法正常工作。

const cvs=document.querySelector（“.bastione”），
ctx=cvs.getContext（“2d”）；
const cvs2=document.querySelector（“.basPlayer”），
ctx2=cvs2.getContext（“2d”）；
ctx.imageSmoothingEnabled=ctx.mozImageSmoothingEnabled=ctx.webkitImageSmoothingEnabled=false；
ctx2.imageSmoothingEnabled=ctx2.mozImageSmoothingEnabled=ctx2.webkitImageSmoothingEnabled=false；
函数loadImage（src，回调）{
var img=新图像（）；
img.onload=回调；
img.setAttribute（“交叉源”、“匿名”）；
img.src=src；
返回img；
}
函数运行（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1）+min）；
}
常数映射=[
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
施工环境={
初始化：（）=>{
DreamEnvironment.renderBack（）；
},
renderBack:（）=>{
设cx=0，cy=0；
map.forEach（e=>{
对于（变量i=0；i0&&v<8）{
drawImage（spriteImage，0，0，32，32，cx，cy，32，32）；
}否则{
ctx.drawImage（spriteImage，32,0,32,32，cx，cy，32,32）；
}
cx+=32；
}else如果（e[i]==2 | e[i]==3）{
ctx.drawImage（spriteImage，64，64，32，32，cx，cy，32，32）；
cx+=32；
}否则{
设v=ran（0,10）；
如果（v>0&&v<5）{
ctx.drawImage（SpriteMage128、64、32、32、cx、cy、32、32）；
如果（v==10）{
ctx.drawImage（spriteImage，128，32，32，32，cx，cy，32，32）；
}
}否则{
ctx.drawImage（spriteImage，128，32，32，32，cx，cy，32，32）；
}
cx+=32；
}
}
cx=0；
cy+=32；
});
drawImage（spriteImage，0,0,32,32,0,0,32,32）；
}
};
让playerCoords=[1,1]；
const drawPlayer={
初始化：（）=>{
drawPlayer.playerLoc（）；
drawPlayer.playerMove（）；
},
playerLoc:（）=>{
ctx2.drawImage（精灵图像，0,64,32,32，playerCoords[0]*32，playerCoords[1]*32,32,32）；
requestAnimationFrame（drawPlayer.playerLoc）；
},
玩家移动：（）=>{
文档.添加的事件列表器（“键控”，函数（事件）{
ctx2.clearRect（0，0，cvs2.width，cvs2.height）；
event.preventDefault（）；
const key=event.key；
开关（钥匙）{
案例“箭头左”：
如果（映射[playerCoords[1]][playerCoords[0]-1]！=1）{
while（映射[playerCoords[1]][playerCoords[0]-1]！=1）{
playerCoords[0]-；
}
}
打破
案例“ArrowRight”：
如果（映射[playerCoords[1]][playerCoords[0]+1]！=1）{
while（映射[playerCoords[1]][playerCoords[0]+1]！=1）{
playerCoords[0]++；
}
}
打破
案例“ArrowUp”：
case "ArrowLeft":
    if (map[playerCoords[1]][playerCoords[0] - 1] != 1) {
        let interval = setInterval(() => {
            if (map[playerCoords[1]][playerCoords[0] - 1] != 1) {
                // Stop the interval, and do nothing.
                clearInterval(interval)
                return
            }
            playerCoords[0]--;
        }, 100) // <- 100 here is delay in milliseconds
    }

const allTheThings = [];

function loop() {
  for (const thing of things) {
    thing.update();
  }
  requestAnimationFrame(loop);
}

class Player() {
  constructor() { 
    this.coords = [1, 1];
    this.delta = [0, 0];
  }
  update() {
    if (this.waiting) {
      this.waiting -= 1;
    } else if (this.moving) {
      this.coords[0] = this.delta[0];
      this.coords[1] = this.delta[1];
      this.waiting = 10;
    } else {
      // check the keys
      // and set this.delta and moving appropriately
    }
  }
}

const player = new Player();
allTheThings.push(player);