在JavaScript中的左/右箭头上添加弯曲路径

Question

if(game.pressedKeys[37]) {
        this.ship.x -= this.shipSpeed * dt;
    }
if(game.pressedKeys[39]) {
        this.ship.x += this.shipSpeed * dt;
    }

此代码非常有效。但我想，滚动路径是弯曲的。有点像这样：

我的解决方案应该是什么？我怎么解决这个问题？感谢。

Answer 1

您始终知道船舶的x位置。创建一个取x位置并返回y。

的函数

您所拥有的曲线可以用抛物线函数y=a(x-s)^2+b表示，其中a是垂直拉伸，s是横向移位，b是垂直移位

在这里，我创建了一个适用于屏幕宽度为500的功能，并且船舶最多可以达到150

function parabolic(x) {
    return Math.pow((((1/20.412415)*x)-12.24745),2)+150;
}
//I am using ugly numbers, however you can have a variable `w` for the screen width

这是一个有效的演示：JSFiddle（点击画布上键盘可以工作）

document.addEventListener('keydown', function(e) {
    if(e.which===37) {
    ship.x--;
  } else if(e.which===39) {
    ship.x++;
  }
  ship.y = parabolic(ship.x);
  update();
})