为画布制作边界

Posted 2023-03-15

【中文标题】为画布制作边界

【英文标题】：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 来实现

【参考方案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