在 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 位置和 returns 一个 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（单击 canvas 键盘工作）

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

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

Add curved path on left / right arrow in JavaScript

javascript

jquery

curve

ellipse

arrow-keys