javascript 如何让角色跳起来

Question

我正在尝试为我想开发的游戏开发机制，但是我在这方面的编程方面没有太多经验。我已经得到一个圆圈，可以使用 requestAnimationFrame() 使用 A 和 D 键平滑地左右移动，但是我完全不知道制作圆圈的最佳方法是什么 "jump" 可以这么说。

我想让小球在按下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();

    }
}

角色移动：

//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 link 来展示我目前所做的工作： https://codepen.io/shanetorres/pen/OvRdjq?editors=1010

如有任何帮助或建议，我们将不胜感激！

Answer 1

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

Answer 2

你的方向是正确的，但棋子排列不正确。

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

在第一阶段，运动计算，你只改变速度。 Left/right修改速度的水平分量，跳跃和重力修改垂直分量。你想要完全的空气控制，所以两者都是独立的（否则，改变水平速度操纵将受垂直位置的限制，即，不是 jumping/falling）。暂时忽略惯性（我认为这是一个比摩擦更好的名字恕我直言）。水平速度 velX 是 maxVelX、-maxVelX 或 0，具体取决于按下的是右、左还是 none/both。如果 y 低于或恰好是给定值（即地板），则垂直速度 velY 为 0；在地板上时，按跳跃会将 velY 设置为 velJump，并且您每帧将此值减小一定量（即重力。请记住它是加速度，即随时间变化的速度）。当角色的 y 低于楼层时，您将 velY 设置为 0，将 y 设置为楼层。

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

一旦有了这个运行，就可以增加惯性了。水平速度每帧 increased/decreased，直到达到其 "target" 速度。我会删除垂直 inertia/movement 阻尼，除非您希望您的播放器卡在空中或像羽毛一样掉落。但是，如果您的游戏中有很多垂直度，通常最好将下落速度限制在一个硬性限制内。

这当然是一种 over-simplistic 物理方法（在大多数 platforming/arcade 游戏中很常见）。对于现实的或更复杂的方法，我会考虑使用 2D 物理引擎并使用力而不仅仅是速度。

javascript 如何让角色跳起来

How to make a character jump up with javascript

html

javascript

game-physics