如何在不取消同步的情况下使画布形状移动得更快？

Question

因此，我已经为这个画布动画编写了代码，尽管这样做会使形状不同步，但我希望形状能够更快地移动。

当我增加下面显示的值时，为了使形状更快，它们会这样做，但最终彼此移开并取消同步。

    if (this.dir[i][j] === 'downright') { //go down and right
      this.boxLines[i][j].y += 1;
      this.boxLines[i][j].x += 1;
    }
    if (this.dir[i][j] === 'downleft') { //go down and left
      this.boxLines[i][j].y += 1;
      this.boxLines[i][j].x -= 1;
    }
    if (this.dir[i][j] === 'upright') { //go up and right
      this.boxLines[i][j].y -= 1;
      this.boxLines[i][j].x += 1;
    }
    if (this.dir[i][j] === 'upleft') { //go up and left
      this.boxLines[i][j].y -= 1;
      this.boxLines[i][j].x -= 1;
    }

有什么办法可以解决这个问题，或者我可以通过其他方式解决吗？

链接到jsfiddle：https://jsfiddle.net/frankpettersson/nqmy3fkd/7/