字符不撞右墙和底墙的边界墙

Question

我一直想弄清楚如何让角色在撞到 canvas 的右墙和底墙时停止，但没有运气，请看下面的代码：

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', keydown);
}

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

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

  switch (x) {

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

Case 39的意思是让角色一直跑到撞到右边的墙停下来，结果穿墙了：

case 39:
        if(!(character.left+15 < canvasbound.left))
          {
          place('character', left+15, top);
          }
      break;

情况 40 相同，除了角色倒下并通过了不应该通过的墙。

case 40:
          if(!(character.top+15 < canvasbound.top))
            {
                place('character', left, top+15);
            }
      break;

有没有我遗漏的东西我在想我可能在代码的这个区域遗漏了一些东西：

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';

}

Answer 1

向右移动时，您正在测试字符是否穿过左边界 (canvasbound.left)，您需要更改它以测试右边界 (canvasbound.right)。底部边界相同。

Answer 2

代码有点混淆了哪个键是哪个，而且条件很难阅读。例如 x、y、左、右、加号、减号、<、> 和 !。

这里的代码有点re-organized，将关于移动的规则与约束分开，并且只引用边界矩形（没有硬编码常量），如果canvas或字符改变大小。

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';
}

function init() {
  const bounds = document.getElementById("canvas").getBoundingClientRect();
  place('character', 0, 0);
  document.addEventListener('keydown', keydown);
}
init();

function keydown(e) {
  let key = e.keyCode;
  const character = document.getElementById("character").getBoundingClientRect();
  let dx = 0, dy = 0;

  // get x and y increments based on the key, don't worry about the bounds
  const rules = {
    37: () => dx -= character.width,  // left
    38: () => dy -= character.height, // up
    39: () => dx += character.width,  // right
    40: () => dy += character.height  // down
  };
  if (key in rules) rules[key]();

  // functions that clamp x,y to bounds
  const bounds = document.getElementById("canvas").getBoundingClientRect();
  const clampX = x => Math.min(Math.max(x, bounds.left), bounds.right - character.width);
  const clampY = y => Math.min(Math.max(y, bounds.top), bounds.bottom - character.height);

  // increment the character position and clamp
  const newX = clampX(character.left + dx)
  const newY = clampY(character.top + dy)
  place('character', newX, newY);

  return key
}

html, body {
  margin: 0;
}

<div id="character" style="width:20px; height:20px; background-color:blue"></div>
<canvas id="canvas" style="background-color:yellow;"></canvas>

与 OP 相关的最重要的想法是“钳位”的想法。我们一直使用它来实施端点约束。它总是采用这种形式....

Math.min(upperLimit, Math.max(lowerLimit, someValue))

字符不撞右墙和底墙的边界墙

Character Not hitting boundary wall for right wall and bottom wall

javascript

canvas

boundary