2D HTML5 Canvas 游戏：特定宽度/高度限制玩家移动（未实现碰撞）

Question

问：为什么根据画布的宽度/高度+玩家位置，这些方向上的移动受到限制，如何解决这个问题？

正如标题中提到的，我一直在构建一个 2D 画布游戏（像 Pokémon 这样的自上而下的生物收集器），并且 没有实现任何碰撞 有一个神秘的错误。

该错误阻止我的角色根据角色起始位置和画布的宽度/高度向两个方向移动，即使我能够在停止之前沿这些方向移动到某些图块：

• 上/右

或

• 左/下

只有当画布的宽度/高度设置为特定值时才会发生这种情况，并且我仍然可以在不受影响的两个方向上移动任意距离。

我想要的宽度和高度是 360x240，以显示地图的 24x24 像素图块，宽度为 15，高度为 10。当尝试使用 720x480（所需尺寸的 2 倍）和 300x200 时，移动不受限制。

如果您想测试一下，这里是该错误的存储库链接：https://github.com/LateSupper/CreatureCollectorBug

我添加了两张不同大小的地图，以在“engine.js”文件内部测试此问题。只需切换您想要测试的那个即可。

这是我在仓库中的示例中似乎看不见的对角线障碍的图像：

我尝试过的事情包括：

• 控制台记录移动逻辑以查看它是否仍然触发（确实如此，但没有移动）
• 将画布的宽度/高度设置为不同的尺寸会产生不同的结果，并且大多数宽高比尺寸为 3:2，不允许在这些方向上移动
• 创建了不同的地图，通过我的代码逻辑更改了玩家的起始位置，并更改了被阻止的两个方向
• 谷歌搜索。当然，我今天在谷歌上搜索了这件事，因为为什么会发生这种情况？我在 HTML Canvas 游戏中遇到过的最奇怪的错误。

编辑： 根据添加代码的建议，我认为可能会引起我的麻烦：

// "main.js" -> line 1
const game = new GameEngine(
  { width: 24 * 16, height: 24 * 10 }, // Dimensions
  24, // Tile Size
  18 // Camera Offset
)

在上面的代码中，当宽度和/或高度乘以奇数时，移动受到限制，但如果两个数字都是 24 * 偶数，则效果非常好。

这可能是我如何将背景/玩家精灵绘制到画布上的问题吗？：

// "engine.js" -> GameEngine.determineSpriteProperties()
determineSpriteProperties = (image) => {
  const properties = {
    type: 0,
    position: { x: 0, y: 0 },
    image: image
  }
  if (image.currentSrc.indexOf("map_") > -1) {
    properties.position.x = ((this.canvas.width / 2) - (image.width / 2)) + (this.tileSize / 2),
    properties.position.y = ((this.canvas.height / 2) - (image.height / 2))
  } else {
    properties.type = 1
    properties.position.x = (this.canvas.width / 2 - (image.width / 3)) + ((image.width / 3) / 2)
    properties.position.y = this.canvas.height / 2 - (image.height / 4) + this.cameraOffset
  }
  return properties
}

Answer 1

问题出在停止运动的情况下...
您有一个

if

声明：

this.mapSprite.position.x !== this.targetPosition.position && 
this.mapSprite.position.y !== this.targetPosition.position

...但是

targetPosition

还有一个您未包含在该条件中的轴属性

(targetPosition.axis == "x" && mapSprite.position.x !== targetPosition.position) ||
(targetPosition.axis == "y" && mapSprite.position.y !== targetPosition.position)

（我删除了代码以使这个示例变小）

---

详情请参阅我的 PR：
https://github.com/LateSupper/CreatureCollectorBug/pull/1