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