const canvas = document.querySelector("canvas")
const c = canvas.getContext("2d")
canvas.width = 1024;
canvas.height = 576;
const gravity = 1.5
These are constants that will make the very basics of the game function. The outlier here is "const gravity" but that is used for falling and jumping.
class Player {
constructor() {
this.position = {
x: 100,
y: 100
}
this.velocity = {
x: 0,
y: 0
}
this.width = 30
this.height = 30
}
draw() {
c.fillStyle = "red"
c.fillRect(this.position.x, this.position.y, this.width, this.height)
}
update() {
this.draw()
this.position.x += this.velocity.x
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
}
}
const player = new Player()
These define the player class and uses OOP. Using a constant for player lets you use the animate function to update the player: player.update()