为画布制作边界答案

【问题标题】：Making boundary for canvas为画布制作边界
【发布时间】：2021-12-23 17:04:12
【问题描述】：

我正在尝试为我的画布创建一个边界，但我不知道从哪里开始。我已经创建了角色资产的起点，它可以移动，但是，角色移动到画布之外，我想让它撞到墙壁时它不会移动到边界之外。

这是 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 来实现

【问题讨论】：

标签： javascript canvas boundary

【解决方案1】：

在为对象（状态）设置新位置之前，您需要预先计算值并检查该值是否超出画布的反弹范围。

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

  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

【讨论】：