javascript - 尝试制作 Canvas "jump"

Question

我正在尝试进行 Canvas 跳跃。我所说的跳跃是指向上移动一段时间，然后再次落到地板上。显然出了什么问题，因为当我按空格键时没有任何反应。想不出我的代码有什么问题，有什么想法吗？

var spaceKey = false;
var player = {
  side: 20,
  x: 0,
  y: HEIGHT - 20,
  color: "red"

};

context.fillStyle = player.color;
context.fillRect(player.x, player.y, player.side, player.side);

setInterval(update, 1000/60);

function update(){
  clearCanvas();

  if (spaceKey){
    jump();
  } 

  draw();
}

function jump(){
  // Moving the player 5 px up 60 times every 10ms.
  for (var i = 0; i < 60; i++){
    function jumpUp(){
      player.y -= 5;
    }
    setTimeout(10, jumpUp);

  }
  // Moving the player 5 px down 60 times every 10ms.
  for (var i = 0; i < 60; i++){
    function jumpDown(){
      player.y += 5;
    }
    setTimeout(10, jumpDown);
  }

}


function onKeyDown(evt) {
        //Making spaceKey true onclick and calling the jump function.
        if (evt.keyCode == 32) spaceKey = true;

    }

function onKeyUp(evt) {

      if (evt.keyCode == 32) spaceKey = false;

}

window.addEventListener("keydown", onKeyDown, false);

window.addEventListener("keyup", onKeyUp, false);

(这不是我的全部代码，如果您希望我添加更多代码，请告诉我。)谢谢

我将跳转功能更改为:

function jump(){
  // Moving the player 5 px up 60 times every 10ms.
  function jumpUp(){
    player.y -= 5;
  }
  function jumpDown(){
    player.y += 5;
  }
  for (var i = 0; i < 60; i++){

    requestAnimationFrame(jumpUp);
  }
  // Moving the player 5 px down 60 times every 10ms.
  for (var i = 0; i < 60; i++){

      requestAnimationFrame(jumpDown);
  }
}

但仍然无法工作。

Answer 1

超时不会被链接或求和。浏览器不希望在执行下一个超时之前运行上一个超时。它会在注册后尝试运行超时 timeoutArg 毫秒。您的所有回调将或多或少同时执行:注册后 10 毫秒。

这应该有效:

var player = { y: 0 };

function jump(){
  function jumpUp(){
    player.y -= 5;
    render();
  }
  function jumpDown(){
    player.y += 5;
    render();
  }
  // Moving the player 5px up every 10ms for 600ms (i.e. 5px up 60 times).
  for (var i = 0; i < 60; i++){
    setTimeout(jumpUp , i * 10);
  }
  // Same but down.
  for (var i = 0; i < 60; i++){
    setTimeout(jumpDown, i * 10 + 600);
  }
}

jump();

// This is just an example.
var repr = document.getElementById("player");
function render(){
  repr.style.top = 150 + player.y / 3 + "px";
}

#player {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 50%;
  top: 150px;
  background-color: black;
  border-radius: 100%;
}

<div id="player"></div>

但是，请注意对动画使用超时是不好的做法。应该使用requestAnimationFrame相反，动画进度基于时间，而不是帧(帧速率不可靠)。下面是 requestAnimationFrame 的用户示例。

var player = { y: 0 };

function jumpFunc(progress){
  return 1 - Math.abs(1 - progress * 2);
  // You may want to use a sinusoid instead of a linear function here.
  // It usually looks more realistic. E.g. :
  // return Math.sin(progress * Math.PI);
}

function jump(startTime, initY){
  var duration = 1200;
  var amplitude = 300;
  startTime = startTime || Date.now();
  initY = initY || player.y;
  var progress = Math.max(0, Math.min(1, (Date.now() - startTime) / duration));
  player.y = initY - jumpFunc(progress) * amplitude;
  render();
  if(progress < 1){
     requestAnimationFrame(jump.bind(null, startTime, initY));
  }
}

// This is just an example.
var repr = document.getElementById("player");
function render(){
  repr.style.top = 150 + player.y / 3 + "px";
}

jump();

#player {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 50%;
  top: 150px;
  background-color: black;
  border-radius: 100%;
}

<div id="player"></div>