Question

我正在尝试制作画布。通过跳跃我的意思是向上移动一段时间，然后再次下降到地板。有些事情显然是错的，因为当我按空格时没有任何事情发生想不出我的代码有什么问题，有什么想法吗？

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

超时不是链接也不是总结。浏览器不希望先前的Timeout在执行下一个Timeout之前运行。它会在注册后尝试运行超时timeoutArg ms。所有回调都将在此处或多或少地执行：注册后10毫秒。

这应该有效：

＆＃13;

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";
}

＆＃13;

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

＆＃13;

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

＆＃13;

但是，请注意使用动画超时是不好的做法。应该使用requestAnimationFrame来代替动画进度，而不是帧（帧速率不可靠）。以下是requestAnimationFrame的用户示例。

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

试图让画布“跳”

1 个答案: