如何用javascript让角色跳起来答案

【问题标题】：How to make a character jump up with javascript如何用javascript让角色跳起来
【发布时间】：2018-03-22 03:11:48
【问题描述】：

我正在努力研究我想要开发的游戏的机制，但是我在这方面的编程方面没有太多经验。我已经使用 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();

    }
}

角色移动：

//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

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

【问题讨论】：

标签： javascript html game-physics

【解决方案1】：

你在正确的轨道上，但碎片排列不正确。

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

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

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

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

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

【讨论】：

非常感谢，这正是我所需要的！我添加了一个 maxVelY 变量；当按下 W 时，我将球的速度设置为此。然后我将一个布尔跳跃变量设置为真，然后我稍后检查它是否为真，并从它的速度中减去一个值。当球处于某个高度时，我将 jumping 设置为 false 并且它会从更新其运动中退出。
现在看起来好多了 :) 如果您需要建议，我会调整（增加）maxVelY 和 gravity 的值，使其更具街机风格。
另外，你可以在空中跳跃并保持跳跃。你通常只在地面上跳跃，或者，如果你想要二段跳，只在 keydown 事件时跳跃，而不是在按住它时跳跃。
啊，好吧，这是有道理的。感谢您的建议！

【解决方案2】：

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

【讨论】：