画布/ HTML5：跟踪路径位置

Question

我想在我绘制的路径上滚动球，但我不知道如何做到这一点。我试图在一个数组中推动该路径的新coordonates，以便对canvas.height减去路径的位置进行抽象，但我不知道如何让它工作......这是一个小提琴看看演示。 （你可以用键盘移动）

欢迎任何帮助，谢谢！
https://jsfiddle.net/jahu3bkg/3

编辑：看看我在寻找什么，我试图制作类似这样的游戏：http://canvasrider.com/！

编辑：没有人给我另一个提示？ :(我看到我可以从一个数组数组建一个上下文，其中block = 1，空格= 0，然后我可以计算碰撞，但这似乎不方便，再次，我很确定这不是Canvas骑士或Line Rider正在使用什么:(

我的JS在这里：

window.requestAnimationFrame||window.webkitRequestAnimationFrame;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
var x = 50;
var y = 500;
var velX = 0;
var velY = 0;
var gravity = 0.2;
var speed = 2;
var friction = 0.99;

var coordinates = [
  {x: 120, y : 200},
  {x : 250, y : 300},
  {x : 350, y : 300},
  {x : 350, y : 315},
  {x : 370, y : 315},
  {x : 370, y : 330},
  {x : 390, y : 330},
  {x : 390, y : 345},
  {x : 410, y : 345},
  {x : 410, y : 360},
  {x : 430, y : 360},
  {x : 550, y : 400},
  {x : 950, y : 400}
];

var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;
var pressed = {};

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

  window.onkeydown = function(e) {
  if ( pressed[e.which] ) return;
  pressed[e.which] = e.timeStamp;
  };

  window.onkeyup = function(e) {
  if ( !pressed[e.which] ) return;
  var duration = ( e.timeStamp - pressed[e.which] ) / 1000;
  pressed[e.which] = 0;
  console.log(duration);
  };

function keyUpHandler(e) {
  if(e.keyCode == 39) {
    rightPressed = false;
  }
  else if(e.keyCode == 37) {
    leftPressed = false;
  }
  else if(e.keyCode == 38) {
    upPressed = false;
  }
  else if(e.keyCode == 40) {
    downPressed = false;
  }
}
function keyDownHandler(e) {
  if(e.keyCode == 39) {
    rightPressed = true;
  }
  else if(e.keyCode == 37) {
    leftPressed = true;
  }
  else if(e.keyCode == 38) {
    upPressed = true;
  }
  else if(e.keyCode == 40) {
    downPressed = true;
  }
}
function Ball() {

  this.draw = function(ctx) {
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2, false);
    ctx.closePath();
    ctx.fill();
  }
}

var ball = new Ball();
var newCord = {};
function draw() {
  var pos = {x: 0, y: 0};
  function line() {
    ctx.beginPath();
    ctx.strokeStyle = 'rgb(0,0,0)';
    ctx.lineWidth = 4;

    for (var i =0; i < coordinates.length; i++) {
      ctx.moveTo(pos.x,pos.y);
      pos = coordinates[i];
      ctx.lineTo(pos.x,pos.y);
    }
    ctx.stroke();
  }
  var newCord = { xl:canvas.width - pos.y, yl: canvas.height - pos.x}

  requestAnimationFrame(draw);
  ctx.clearRect(0, 0, W, H);

  velY *= friction;
  y += velY;
  velX *= friction;
  x += velX;

  if (x >= canvas.width) {
      x = 0;
  }

  if (y > canvas.height - ballRadius || y < ballRadius) {
    velY = -velY;
    y = canvas.height - ballRadius;
  }

  if(x + velX > canvas.width-ballRadius || x < ballRadius) {
      velX = 2;
  }

  velY += gravity;

  if(upPressed) {
    if (velY > -speed) {
            velY--;
        }
  }
  if(downPressed) {
    if (velY < speed) {
           velY++;
       }
  }
  if (rightPressed) {
    if (velX < speed) {
            velX++;
        }
  }
  if (leftPressed) {
    if (velX > -speed) {
            velX--;
        }
  }

  line();
  ball.draw(ctx);

};

draw();