Canvas 项目未正确渲染 function

Question

无论我尝试多少，我似乎都无法让我的 Rect 实时渲染。 player.update() 方法似乎只在它没有嵌套在动画 function 中时才起作用，因为当我将 player.update 方法放在 function animate() 中时，它不会直接运行

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

调用animate

抱歉，这是一个无聊的答案，但看起来您从未真正开始animate()的“游戏循环”。 别的好像还好。

小担心。 我会最后做requestAnimationFrame ，否则它只会一遍又一遍地循环调用自己。 Chrome 处理得很好，但我对其他浏览器（不包括 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>