javascript - 如何用javascript让 Angular 色跳起来

Question

我正在尝试研究我想要开发的游戏的机制，但是我在这方面的编程方面没有太多经验。我已经使用 requestAnimationFrame() 通过 A 和 D 键得到了一个可以左右平滑移动的圆圈，但是我完全不知道让圆圈“跳跃”的最佳方法是什么。

我希望当按下W时球能够向上移动直到达到一定的高度，然后开始以一定的速度落到地面。我还想保留球在跳跃时左右移动的能力。我不太确定如何解决这个问题，因为我对请求动画帧()缺乏经验，我尝试取消当前的动画帧并在跳转函数中调用一个新的动画帧，但这似乎不起作用全部。

这是迄今为止我的代码:

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

    }
}

Angular 色移动:

//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;
});

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

任何帮助或建议将不胜感激!

Answer 1

您的方向是正确的，但各个部分的排列不正确。

将 Angular 色控制分为两个阶段:运动计算和动画。从运动学 Angular 思考: Angular 色的下一个位置由其实际位置向量和当前速度向量驱动。

在第一阶段(运动计算)中，您仅更改速度。左/右修改速度的水平分量，跳跃和重力修改垂直分量。您想要完全的空气控制，因此两者都是独立的(否则，改变水平速度操作将受到垂直位置的限制，即不跳跃/下落)。暂时忽略惯性(恕我直言，我认为这是一个比摩擦更好的名字)。水平速度 velX 为 maxVelX、-maxVelX 或 0，具体取决于是向右、向左还是向右没有/两者都被按下。如果 y 低于或恰好低于给定值(即地板)，则垂直速度 velY 为 0；当在地板上时，按跳跃会将 velY 设置为 velJump，并且您每帧都会将该值减少一定量(即重力。请记住，这是一个加速度，即，速度随时间的变化)。当 Angular 色的 y 低于地面水平时，您将 velY 设置为 0，并将 y 设置为地面水平。

计算出运动后，将其应用到该位置(即为其设置动画):x += velX; y += velY;这是字符控制的第二阶段。

一旦你开始运行，你就可以增加惯性。水平速度每帧都会增加/减少，直到达到其“目标”速度。我会移除垂直惯性/运动阻尼，除非你希望你的玩家卡在空中或像羽毛一样掉落。但是，如果游戏中有很多垂直度，通常最好将下落速度限制为硬性限制。

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