如何使对象从画布边缘反弹

Question

我正在尝试制作HTML / JavaScript游戏，但我需要让我的一个对象从画布的边缘反弹而不是跑掉。

这是我的代码： http://pastebin.ca/3594744

Answer 1

你有正确的想法。你的对象有x＆amp; y位置，每个帧以相应的x或y速度递增/递减。现在您需要做的就是检测对象何时与画布的边界发生碰撞，并在相应的方向上取消速度，以便在相反的轨迹中发送对象。

这里有一些伪代码：

// Called each frame to update the position of the object.
updatePosition():
  handleCollision()  
  updatePosition()

// Detects a collision with a wall, calculating the bounce offset, and new velocity if applicable.
handleCollision():
  // Detect collision with right wall.
  if (object.x + object.width > canvas.width)
    // Need to know how much we overshot the canvas width so we know how far to 'bounce'.
    overshootX = (object.x + object.width) - canvas.width
    object.x = canvas.width - overshootX - object.width
    velocityX = -velocityX

  // Repeat the same algorithm for top, left, and bottom walls.