如何制作画布边界答案

【问题标题】：How to make a Canvas boundary如何制作画布边界
【发布时间】：2022-01-24 20:39:52
【问题描述】：

我正在尝试为我的迷你游戏制作画布边界。我已经用一个可以随箭头移动的角色创建了画布。我使用 switch 语句来执行此操作，下一步是创建边界，我不知道该怎么做？这就是 Javascript 代码目前的样子：

function place(id,x_pos, y_pos)
{
  let element = document.getElementById(id);
  element.style.position = "absolute";
  element.style.left = x_pos + 'px';
  element.style.top = y_pos + 'px';


}

setInterval(update,1);

function update()
{
  document.addEventListener('keydown', keyPress);
}

function keyPress(e)
{
  let x = e.keyCode;

  let character = document.getElementById("character").getBoundingClientRect();
  let canvasWidth = document.getElementById("canvas").getBoundingClientRect();
  let left = parseInt(character.left,10);
  let top = parseInt(character.top,10)

  switch (x) {

      //left
    case 37:
        place('character', left-15, top);
      break;
      //right
    case 39:
        place('character', left+15, top);
      break;
      //up
    case 38:
        place('character', left, top-15);
      break;
      //down
    case 40:
        place('character', left, top+15);
      break;
  }
  console.log(x)
  return x
}
update()

【问题讨论】：

我没有看到更新功能的任何原因。你只需要添加一次事件监听器，我看不出重复添加它有什么用。更新函数对游戏逻辑很有用，但在这种情况下它似乎是多余的。我会移动“document.addEventListener('keydown', keyPress);”在更新函数之外，目前只需注释掉间隔、函数和对函数的调用，直到它真正需要为止。我不确定是否有更好的地方提出这个建议，但我想我应该指出来。

标签： javascript canvas switch-statement boundary

【解决方案1】：

我假设你所说的边界是你的角色移动的边界？如果是这样……

您需要在移动角色之前检查 keyPress 方法。

类似这样的：

首先，我会考虑将 canvasWidth 重命名为 canvasBound 之类的名称，对于您的字符边界变量也是如此。

if (!(characterBound.left - 15 < canvasBound.left)) {
   ...move character left...
} 
... else do nothing (don't have to actually include this)

类似地重复向上、向下、向右等移动。您必须使用这些值才能使其适合您的精灵。

【讨论】：

我的意思是，画布的边缘是角色不能通过的墙，因为目前角色正在穿墙
是的，那么上面所做的应该可以工作。它基本上是检查移动是否会使角色越过边界。
是的。确保调整这些数字！您可能需要调整精灵的宽度。
我现在没有使用精灵，我只是创建一个点并移动它。这将是一个非常简单的游戏
哦，太好了。如果你愿意，完成后给我一个链接，很想测试一下。