为 canvas 划界

Question

我正在尝试为我的 canvas 创建边界，但我不确定从哪里开始。我已经创建了角色资产的起点，可以移动，但是，角色移动到canvas之外，我想让它在撞墙时不移动到边界之外。

这是 CSS 代码：

#canvas
{
  width: 500px;
  height: 200px;
  border: 1px solid black;
  margin: auto;
  margin-top: 200px;
}

#character
{
  width: 12px;
  height: 12px;
  background-color: blue;
  border-radius: 20px;
  position: relative;
  top:100px;
  left: 250px;
}

.animate
{
  animation:UpKey 300ms linear;
  animation:DownKey 300ms linear;
}

JavaScript代码：

function place(id,x_pos, y_pos)
{
  var 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)
{
  var x = e.keyCode;

  var character = document.getElementById("character").getBoundingClientRect();

  var left = parseInt(character.left,10);
  var top = parseInt(character.top,10)

  switch (x) {
    case 37:
        place('character', left-10, top);
      break;
    case 39:
        place('character', left+10, top);
      break;
    case 38:
        place('character', left, top-10);
      break;
    case 40:
        place('character', left, top+10);
      break;
  }

 

  console.log(x);
}
update();

我希望在 JavaScript

完成

Answer 1

在为对象（状态）设置新位置之前，您需要预先计算该值并检查该值是否超出您的 canvas.

的反弹范围

这将是设置边界所需的最小更改。只有在满足要求时才允许更改位置。

  switch (x) {
    case 37:
        if (left-10 >= 0)
        place('character', left-10, top);
      break;
    case 39:
        if (left+10 <= canvasWidth)
        place('character', left+10, top);
      break;
    case 38:
        if (top-10 >= 0)
        place('character', left, top-10);
      break;
    case 40:
        if (top+10 <= canvasHeight)
        place('character', left, top+10);
      break;
  }

您的代码有很多改进的可能：

在全局范围内缓存字符值，而不是在每次按键时缓存
将状态存储在值存储中，而不是从渲染对象中读取它
将您的更新逻辑分离到单个 update() 函数中
将渲染分离到单个 render() 函数中（渲染应在更新后调用）
使用requestAnimationFrame代替setInterval

为 canvas 划界

Making boundary for canvas

javascript

canvas

boundary