Q: Why is movement restricted in these directions depending on the canvas' width/height + player position, and how do I fix this?

正如标题中提到的，我一直在构建一个2D画布游戏(一个像精灵宝可梦一样的自上而下的生物Collection 家)，without implementing any collision有一个神秘的错误.

这个错误阻止了我的角色在两个方向上移动，这取决于角色的起始位置和画布的宽度/高度，尽管我可以在被停止之前在这些方向上移动到一些瓷砖:

• 上/右

或

• 向左/向下

100

我想要的宽度和高度是360x240，以显示 map 的24x24像素的平铺，15跨宽，10跨高.当try 使用720x480(所需尺寸的2倍)和300x200机芯was not restricted时.

Here is a link to the repo f或 the bug if you would like to test it out: https://github.com/LateSupper/CreatureCollect或Bug

我在"Engineering.js"文件中包含了两个不同大小的 map 来测试这个问题.只需切换一下你想要测试哪一个.

And here is an image of where the invisible diagonal barrier seems to be in the example I have in the repo: Invisible Barrier Visual (Player starts on the yellow square

我试过的东西包括:

• 控制台记录移动逻辑，以查看它是否仍会触发(会，但没有移动)
• 将画布的宽度/高度设置为不同的尺寸，结果不同，并且大多数画布的纵横比尺寸为3:2，不允许在这些方向上移动
• 创建了不同的 map ，通过我的代码的逻辑改变了玩家的起始位置，并改变了两个方向被阻止
• Googling.当然，我今天用谷歌搜索了一下，因为为什么会发生这种事？这是我见过的最奇怪的关于一个HTML画布游戏的错误.

添加我认为可能会给我带来麻烦的代码的建议为edit:%:

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

In the above code when the width and/或 height is multiplied by an odd number movement is restricted, but if both numbers are 24 * an even number it w或ks perfectly fine.

这可能会成为我如何在画布上绘制背景/玩家精灵的问题吗？:

// "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
}