Why must I add velocity to object.position.y + object.height?

Question

There nothing wrong with my code really. I was watching a tutorial to help me learn to make games in canvas.

I’ve understood every single bit of it, but the one thing I don’t understand is why must I add velocity to my equation?

I understand its the speed and direction of an object, but why must I add it? I’ve been trying to understand it for 8 hours now. And I don’t think I can continue with learning until I understand why.

I’ve interrogated two separate AI bots, but what they were saying were making no sense to me whatsoever even when I asked them to simplify it.

Here is my code of course:

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvasWidth = 770;
canvasHeight = 650;
canvas.width = canvasWidth;
canvas.height = canvasHeight;

let gravity = 7.4;

class Player {

  constructor() {
    this.position = {
      x: 175,
      y: 0
    }
    this.velocity = {
      x: 0,
      y: 0
    }
    this.width = 65;
    this.height = 60;
  }

  draw() {
    ctx.fillStyle = "goldenrod";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height)
  }

  update() {
    this.draw();
    this.position.y += this.velocity.y;

    if(this.position.y + this.height + this.velocity.y <= canvas.height) {
      this.velocity.y += gravity;
    }
    else {
      this.velocity.y = 0
    }
  }
}

let player = new Player();
player.draw()

function animate() {
  requestAnimationFrame(animate)
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  player.update();
}

animate()

The specific part of the code I don’t understand is: this.position.y + this.height + this.velocity.y <= canvas.height

I understand that this.position.y + this.height is the position of the bottom of the player, but if I already have the bottom position of th eplayer, why do I have to add velocity?

I’m only 15 and I just started taking geometry, lol.

Answer 1

You're right to be confused, because the code is a mess. It will animate at different speeds depending on how quickly the browser can provide animation frames.

Gravity causes the velocity to increase as time increases. Therefore, use the physics formula distance = initial speed + 0.5 * gravity * time^2 to get the distance that the box would have dropped at a particular time.

Then use Math.min() to ensure that when the box reaches the bottom of the canvas, it cannot travel any further (because it has reached the ground).

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvasWidth = 770;
canvasHeight = 180;
canvas.width = canvasWidth;
canvas.height = canvasHeight;

let gravity = 7.4/4000;
class Player {
  constructor() {
    this.position = {
      x: 175,
      y: 0
    };
    this.width = 65;
    this.height = 60;
    }
  draw(){
    ctx.fillStyle = "goldenrod";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height)
  }
  update(){
    this.position.y = Math.min(canvas.height - this.height, 0.5 * gravity * Math.pow(+new Date() - start, 2));
    this.draw();
    }
}
let player = new Player();

let start = +new Date();
player.draw();

function animate(){
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  player.update();
    requestAnimationFrame(animate);
}
animate()

<canvas id="canvas"></canvas>