如何制作 Canvas 边界

Question

我正在尝试为我的迷你游戏设置 canvas 边界。我已经用一个可以随箭头移动的角色创建了 canvas。我使用 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()

Answer 1

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

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

像这样：

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

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

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

如何制作 Canvas 边界

How to make a Canvas boundary

javascript

canvas

switch-statement

boundary