javascriptcanvashtml5-canvasgame-physicsphysics

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


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.


Solution

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