javascript - 碰到 Canvas x 边框时向后移动一个圆圈

Question

这是我的jsfiddle:http://jsfiddle.net/seekpunk/s54RM/

正如你所看到的，当圆圈击中 x 边框时，它卡在那里，我应该如何修改我的更新函数以使其在击中边框时向后移动:

 if(Bluecircle.x==xborder) {                  
    Bluecircle.x -= 0.5;
 }
 else {
    Bluecircle.x += 0.5;
 }

Answer 1

将方向存储为变量，并在满足边界命中条件时翻转其符号。

var xDir = 0.5;

// ... then in your update function

if(Bluecircle.x>=xborder || Bluecircle.x <= 0) {
  xDir *= -1;
}

Bluecircle.x += xDir;

这将从屏幕的左侧和右侧反弹。