如何解决HTML5 Canvas中玩家对象半穿入画布的问题？

问题描述 #

我开发的游戏里，玩家对象的update函数想让玩家保持在Canvas画布内，但现在玩家会半穿入画布的顶部和左侧区域，当前代码如下：

update() { 
  if (keystate[LeftArrow] || keystate[AKey]) this.x -= 5; 
  if (keystate[RightArrow] || keystate[DKey]) this.x += 5; 
  if (keystate[UpArrow] || keystate[WKey]) this.y -= 5; 
  if (keystate[DownArrow] || keystate[SKey]) this.y += 5; 
  this.x = Math.max(Math.min(this.x, cvs.width - this.diameter), 0); 
  this.y = Math.max(Math.min(this.y, cvs.height - this.diameter), 0); 
}, 

问题原因 #

这问题核心在于玩家对象的坐标原点——看起来你是把玩家的x、y设为了对象的中心位置，而不是左上角。

当你限制this.x >= 0时，相当于让玩家中心不能超过画布左边界，那玩家的左半部分自然就会超出画布（穿入左侧）；同理this.y >=0时，玩家上半部分会穿入顶部。

而右侧和底部的限制cvs.width - this.diameter是对的，因为中心到右侧的距离是半径（直径的一半），所以中心最大只能到画布宽度减去直径（这样右半部分刚好贴画布右边缘），但左侧和顶部的0值没考虑到中心到边缘的偏移。

修复方案 #

只需要把左侧和顶部的最小值从0改成玩家半径（也就是直径的一半），这样就能保证玩家的边缘不会超出画布：

update() { 
  if (keystate[LeftArrow] || keystate[AKey]) this.x -= 5; 
  if (keystate[RightArrow] || keystate[DKey]) this.x += 5; 
  if (keystate[UpArrow] || keystate[WKey]) this.y -= 5; 
  if (keystate[DownArrow] || keystate[SKey]) this.y += 5; 
  
  // 计算玩家半径
  const radius = this.diameter / 2;
  // 修正边界限制：左/顶部取半径，右/底部取画布尺寸减半径
  this.x = Math.max(Math.min(this.x, cvs.width - radius), radius); 
  this.y = Math.max(Math.min(this.y, cvs.height - radius), radius); 
}, 

验证逻辑 #

• 当玩家中心在radius位置时，玩家左边缘刚好对齐画布左边界（x - radius = 0）
• 当玩家中心在cvs.width - radius位置时，玩家右边缘刚好对齐画布右边界（x + radius = cvs.width）
• 顶部和底部的逻辑同理，这样整个玩家对象就完全被限制在画布内了。

内容的提问来源于stack exchange，提问作者Dan