How to calculate jump based on delta time?

Question

I'm trying to make a little game with JavaScript (no engine) and I want to get rid of frame-based animation.

I successfully added delta time for horizontal movements (work fine with 60 or 144fps).

But I can't make it work with the jump, height (or the strength) isn't always the same, and I don't know why.

I already tried (And still had the exact same problem):

Passing Delta Time at the end of update(): x += Math.round(dx * dt)
Changing Date.now() to performance.now()
Not rounding DeltaY
Locking Jump Height

I made a simplified example with 2 jump type, height locked jump and a normal jump (IDK what to call it). Both have the same problem.

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



Normal




Locked

meowgoesthedog · Accepted Answer

Here's how I would refactor the code:

Don't use dy for both speed and position (which you seem to be doing). Rename it vy and use it purely as the vertical velocity.
Move isOnFloor to a function so that we can always check for collisions with the floor.
Decouple the jump functions from actual movement updates. Just make them set the vertical velocity if the player is on the floor.
Perform top / bottom collision checking separately depending on the direction of movement.
Don't round DeltaY - it'll mess up small movements.

With these changes in place, the movement behavior is correct and stable:

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



Normal




Locked

How to calculate jump based on delta time?

Answers (1)

Related Questions