javascript - 如何根据增量时间计算跳跃？

Question

我正在尝试用 JavaScript(没有引擎)制作一个小游戏，我想摆脱基于帧的动画。

我成功地为水平运动添加了增量时间(在 60 或 144fps 下工作正常)。

但我无法让它与跳跃一起工作，高度(或力量)并不总是相同，我也不知道为什么。

我已经尝试过(但仍然遇到完全相同的问题):

• 在 update() 结束时传递增量时间:x += Math.round(dx * dt)
• 将 Date.now() 更改为 performance.now()
• 不舍入 DeltaY
• 锁定跳跃高度

我做了一个简化的例子，有 2 种跳跃类型，高度锁定跳跃和正常跳跃(IDK 怎么调用它)。两者都有同样的问题。

const canvas  = document.getElementById('canvas'),
      ctx     = canvas.getContext('2d'),
      canvas2 = document.getElementById('canvas2'),
      ctx2    = canvas2.getContext('2d');



// CLASS PLAYER ------------------------

class Actor {
  constructor(color, ctx, j) {
    this.c     = ctx
  
    this.w     = 20
    this.h     = 40
    this.x     = canvas.width /2 - this.w/2
    this.y     = canvas.height/2 - this.h/2
    this.color = color

    // Delta
    this.dy = 0

    // Movement
    this.gravity   =  25/1000
    this.maxSpeed  = 600/1000
    
    // Jump Height lock
    this.jumpType = (j) ? 'capedJump' : 'normalJump'
    this.jumpHeight = -50

    // Booleans
    this.isOnFloor = false
  }
  
  
 // Normal jump
 normalJump(max) {
   if(!this.isOnFloor) return
   
   this.dy        = -max
   this.isOnFloor = false
 }
 
  
 // Jump lock (locked max height)
 capedJump(max) {
     const jh = this.jumpHeight;
     if(jh >= 0) return
     
     this.dy += -max/15
     if(jh - this.dy >= 0) {
       this.dy = (jh - this.dy) + jh
       this.jumpHeight = 0
     } else {
       this.jumpHeight += -this.dy
     }
 }
 
 
 
 update(dt) {
   const max     = this.maxSpeed*dt,
         gravity = this.gravity*dt;
   
   // JUMP
   this[this.jumpType](max)
  
   // GRAVITY
   this.dy += gravity
   
   
  // TOP AND DOWN COLLISION (CANVAS BORDERS)
  const y = this.y + this.dy,
        h = y      + this.h;
  
  if (y <= 0) this.y = this.dy = 0
  else if (h >= canvas.height) {
    this.y          = canvas.height - this.h
    this.dy         = 0
    this.isOnFloor  = true
    this.jumpHeight = -50
  }
  
  // Update Y
  this.y += Math.round(this.dy)
 }
 
 
 draw() {
 const ctx = this.c
  ctx.fillStyle = this.color
  ctx.fillRect(this.x, this.y, this.w, this.h)
 }
}
const Player  = new Actor('brown', ctx,  false)
const Player2 = new Actor('blue',  ctx2, true)



// ANIMATE -----------------------------

let lastRender = 0
let currRender = Date.now()
function animate() {
  // Set Delta Time
  lastRender = currRender
  currRender = Date.now()
  let dt     = currRender - lastRender
  
  // CANVAS #1 (LEFT)
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  background(ctx)
  
  Player.update(dt)
  Player.draw()
  
  
  // CANVAS #2 (RIGHT)
  ctx2.clearRect(0, 0, canvas2.width, canvas2.height)
  background(ctx2)
  
  Player2.update(dt)
  Player2.draw()
  
  window.requestAnimationFrame(animate)
}
animate()



// EVENT LISTENERS -----------------------

window.addEventListener('keydown', (e) => {
  e.preventDefault()
  if (Player.keys.hasOwnProperty(e.code)) Player.keys[e.code] = true
})

window.addEventListener('keyup', (e) => {
  e.preventDefault()
  if (Player.keys.hasOwnProperty(e.code)) Player.keys[e.code] = false
})


// Just a function to draw Background nothing to see here
function background(c) {
	const lineNumber = Math.floor(canvas.height/10)
  
  c.fillStyle = 'gray'
	for(let i = 0; i < lineNumber; i++) {
  	c.fillRect(0, lineNumber*i, canvas.width, 1)
  }
}

div {
  display: inline-block;
  font-family: Arial;
}

canvas {
  border: 1px solid black;
}

span {
  display: block;
  color: gray;
  text-align: center;
}

<div>
<canvas width="100" height="160" id="canvas"></canvas>
<span>Normal</span>
</div>

<div>
<canvas width="100" height="160" id="canvas2"></canvas>
<span>Locked</span>
</div>

Answer 1

下面是我将如何重构代码:

• 不要对速度和位置都使用 dy(您似乎正在这样做)。将其重命名为 vy 并将其纯粹用作垂直速度。

• 将 isOnFloor 移动到一个函数中，这样我们就可以始终检查与地板的碰撞。

• 将跳跃功能与实际运动更新分离。如果玩家在地板上，只需让他们设置垂直速度即可。

• 根据移动方向分别执行顶部/底部碰撞检查。

• 不要舍入 DeltaY - 它会弄乱小 Action 。

有了这些改变，运动行为就正确且稳定了:

const canvas1 = document.getElementById('canvas1'),
      ctx1    = canvas1.getContext('2d'),
      canvas2 = document.getElementById('canvas2'),
      ctx2    = canvas2.getContext('2d');

// Global physics variables
const GRAVITY   = 0.0015;
const MAXSPEED  = 0.6;
const MAXHEIGHT = 95;


// CLASS PLAYER ------------------------

class Actor {
  constructor(C, W, H, J) {
    // World size
    this.worldW = W;
    this.worldH = H;

    // Size & color
    this.w = 20;
    this.h = 40;
    this.color = C;

    // Speed
    this.vy = 0;

    // Position
    this.x = W/2 - this.w/2;
    this.y = H/2 - this.h/2;

    // Jump Height lock
    this.jumpCapped = J;
    this.jumpHeight = 0;
  }

  // move isOnFloor() to a function
  isOnFloor() {
    return this.y >= this.worldH - this.h;
  }

  // Normal jump
  normalJump() {
    if(!this.isOnFloor()) return;

    this.vy = -MAXSPEED;
  }

  // Jump lock (locked max height)
  cappedJump(max) {
    if(!this.isOnFloor()) return;

    this.vy = -MAXSPEED;
    this.jumpHeight = max;
  }

  update(dt) {
    // JUMP
    if (this.jumpCapped)
      this.cappedJump(MAXHEIGHT);
    else
      this.normalJump();

    // GRAVITY
    this.vy += GRAVITY * dt;
    this.y += this.vy * dt;
   
    // Bottom collision
    if (this.vy > 0) {
      if (this.isOnFloor()) {
        this.y = this.worldH  - this.h;
        this.vy = 0;
      }
    }
    else 
    // Top collision
    if (this.vy < 0) {
      const maxh = (this.jumpCapped) ? (this.worldH - this.jumpHeight) : 0;
      if (this.y < maxh) {
        this.y = maxh;
        this.vy = 0;
      }
    }
  }

  draw(ctx) {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.w, this.h);
  }
}

const Player1 = new Actor('brown', canvas1.width, canvas1.height, false);
const Player2 = new Actor('blue',  canvas2.width, canvas2.height, true);


// ANIMATE -----------------------------

let lastUpdate = 0;
let randomDT = 0;
function animate() {
  // Compute delta time
  let currUpdate = Date.now();
  let dt = currUpdate - lastUpdate;

  // Randomize the update time interval
  // to test the physics' stability
  if (dt > randomDT) {
     randomDT = 35 * Math.random() + 5;
     Player1.update(dt);
     Player2.update(dt);
     lastUpdate = currUpdate;
  }

  // CANVAS #1 (LEFT)
  ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
  background(ctx1);
  Player1.draw(ctx1);

  // CANVAS #2 (RIGHT)
  ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
  background(ctx2);
  Player2.draw(ctx2);

  window.requestAnimationFrame(animate);
}

animate();


// EVENT LISTENERS -----------------------

window.addEventListener('keydown',
  (e) => {
    e.preventDefault();
    if (Player.keys.hasOwnProperty(e.code))
      Player.keys[e.code] = true;
  }
)

window.addEventListener('keyup',
  (e) => {
    e.preventDefault()
    if (Player.keys.hasOwnProperty(e.code))
      Player.keys[e.code] = false;
  }
)


// Just a function to draw Background nothing to see here
function background(c) {
  const lineNumber = Math.floor(canvas1.height/10)

  c.fillStyle = 'gray'
  for(let i = 0; i < lineNumber; i++) {
    c.fillRect(0, lineNumber*i, canvas1.width, 1)
  }
}

div {
  display: inline-block;
  font-family: Arial;
}

canvas {
  border: 1px solid black;
}

span {
  display: block;
  color: gray;
  text-align: center;
}

<div>
<canvas width="100" height="160" id="canvas1"></canvas>
<span>Normal</span>
</div>

<div>
<canvas width="100" height="160" id="canvas2"></canvas>
<span>Locked</span>
</div>