Question

我正在努力研究我想要参与的游戏的机制，但是我对这个编程领域没有多少经验。我已经使用requestAnimationFrame（）使用A和D键左右平滑地移动了一个圆圈，但是我完全不知道最好的方法是使圆圈“跳跃”＃34;可以这么说。

我希望当按下W直到达到一定高度时，球能够向上移动，然后开始以一定速率下降到地面。我还想保持球在跳跃时左右移动的能力。由于我对请求动画帧（）没有什么经验，我不确定如何解决这个问题，我尝试取消当前动画帧并在跳转函数中调用一个新动画帧，但是没有＃39似乎完全没用。

到目前为止，这是我的代码：

var canvas,
    ctx,
    westX = 300,
    westY = 400,
    velX = 0,
    velY = 0,
    speed = 3,
    jumpSpeed = 2,
    friction = 0.98,
    keys = [],
    jumping = false;


window.onload = function(){
  canvas = document.getElementById("gameCanvas");
  ctx = canvas.getContext("2d");
  drawLevel();    //intial level draw
}

function drawLevel() {
  move();
 ctx.clearRect(0,0,canvas.width, canvas.height);
  ctx.fillStyle = "#c3c3d5";
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.arc(westX,westY,8,0,Math.PI*2,true);
  ctx.fill();
  if (!keys[87] && !keys[32])
  requestAnimationFrame(drawLevel);
  if (keys[87] || keys[32])
    { 
      jump();

    }
}

角色运动：

//moves character
function move()
{
  //requestAnimationFrame(move);
  if (keys[65]) {     //if a is pressed
    if (velX > -speed) {
      velX--;
    }
  }
  if (keys[68]) {     //if d is pressed
    if (velX < speed) {
      velX++;
    }
  }
  velX*= friction;
  westX += velX;

  //checks if character is at the edge
  if (westX >= canvas.width-8)
    {
      westX = canvas.width-8;
    } else if (westX <= 8)
      {
        westX = 8;
      }
}

尝试跳转功能：

function jump()
{
  requestAnimationFrame(jump)
   if (velY > -jumpSpeed) {
      velY--;
    }
    velY*= friction;
    westY += velY;   
  }

document.addEventListener("keydown", function(e) {
                          keys[e.keyCode] = true;
                          });
document.addEventListener("keyup", function(e) {
                          keys[e.keyCode] = false;
});

此外，这是一个代码链接，显示我目前为止所做的工作： https://codepen.io/shanetorres/pen/OvRdjq?editors=1010

非常感谢任何帮助或建议！

Answer 1

你在正确的轨道上，但是这些部分没有正确排列。

将角色控制分为两个阶段：移动计算和动画。在运动学中思考：角色的下一个位置由其实际位置矢量及其当前速度矢量驱动。

在第一阶段，运动计算，您只改变速度。左/右修改速度的水平分量，跳跃和重力修改垂直分量。您需要完全空气控制，因此两者都是独立的（否则，改变水平速度操纵将受垂直位置的限制，即不跳跃/下降）。暂时忽略惯性（我认为这比摩擦恕我直言更好）。水平速度velX可以是maxVelX，-maxVelX或0，具体取决于是按下右，左还是非/两者。如果y低于或恰好是给定值（即地板），则垂直速度velY为0;当在地板上时，按下跳跃会将velY设置为velJump，并且每帧减少此值一定量（即重力。请记住它是加速度，即速度超过时间）。当角色的y低于最低等级时，您将velY设置为0，将y设置为最低等级。

计算出移动后，将其应用于该位置（即为其设置动画）：x += velX; y += velY;这是角色控制的第二阶段。

运行后，您可以添加惯性。水平速度每帧增加/减少，直到它的目标为＃34;速度达到了。除非您希望播放器卡在空中或像羽毛一样掉落，否则我将移除垂直惯性/运动阻尼。但是，如果您的游戏中有很多垂直性，那么将下降速度限制在硬限制通常是一个好主意。

当然，这是一种过于简单化的物理方法（在大多数平台/街机游戏中很常见）。对于现实的或更复杂的方法，我考虑使用2D物理引擎并使用力而不仅仅是速度。

Answer 2

你是否特别希望自己编写物理程序或者将游戏本身作为主要目标？如果您对物理编程不太感兴趣，我建议您查看Phaser.io framework来编写游戏。它包含了物理库，有大量的教程，它只是构建HTML游戏的好工具。

如何让一个角色用javascript跳起来

2 个答案: