Canvas 项目未正确渲染 function

Question

I cannot seem to get my Rect to render in real time no matter how much I try. The player.update() method only seems to work when it's not nested in the animate function, cause when I put the player.update method in function animate() it straight up doesn't run

const canvas = document.querySelector('canvas')

const c = canvas.getContext('2d')

canvas.width = innerWidth
canvas.height = innerHeight

const gravity = 0.5
class Player{
    constructor() {
        this.position = {
            x: 100,
            y: 100
        }
        this.velocity = {
            x: 0,
            y: 0
        }
        this.width = 30
        this.height = 30
    }

    drawPlayer() {
        c.fillStyle = 'red'
        c.fillRect(
            this.position.x, 
            this.position.y, 
            this.width, 
            this.height
            )
    }
    update() {
        this.position.y += this.velocity.y
        this.drawPlayer()

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

const player = new Player()

function animate() {
    requestAnimationFrame(animate)
    console.log('go')
    c.clearRect(0, 0, canvas.width, canvas.height)
    player.update()
}

Answer 1

Call animate

Sorry it's a boring answer, but it just simple looks like you're never actually starting your "game loop" of animate() . Seems fine otherwise.

Small concern. I would do the requestAnimationFrame last, otherwise it's just going to make a loop of calling itself over and over again. Chrome handled it well, but I'm not confident in other browsers (excluding firefox).

 const canvas = document.querySelector('canvas') const c = canvas.getContext('2d') canvas.width = innerWidth canvas.height = innerHeight const gravity = 0.5 class Player { constructor() { this.position = { x: 100, y: 100 } this.velocity = { x: 0, y: 0 } this.width = 30 this.height = 30 } drawPlayer() { c.fillStyle = 'red' c.fillRect( this.position.x, this.position.y, this.width, this.height ) } update() { this.position.y += this.velocity.y this.drawPlayer() if (this.position.y + this.height + this.velocity.y <= canvas.height) this.velocity.y += gravity else this.velocity.y = 0 } } const player = new Player() function animate() { //console.log('go') c.clearRect(0, 0, canvas.width, canvas.height) player.update() requestAnimationFrame(animate) } animate();

 <canvas></canvas>