运行多个 requestAnimation 循环来发射多个球？

基本原则这是您可以做到的一种方法：你需要一个Game对象来处理更新逻辑，存储所有当前实体，处理游戏循环...... IMO，这是你应该跟踪最后一次发射的时间Ball以及是否发射新的。在这个演示中，这个对象还处理当前时间、增量时间和请求动画帧，但有些人可能会争辩说这个逻辑可以外部化，并且只需在每个帧上调用某种形式Game.update(deltaTime)。您需要为游戏中的所有实体使用不同的对象。我创建了一个Entity类，因为我想确保所有游戏实体都具有运行所需的最低要求（即更新、绘制、x、y...）。有一个Ball类extends Entity负责了解它自己的参数（速度，大小，......），如何更新和绘制自己，......我留下了一Paddle门课让你完成。归根结底，这完全是关注点分离的问题。谁应该知道谁的事？然后传递变量。至于你的另一个问题：我是否需要为每个球创建多个 requestAnimationFrame 循环？这绝对是可能的，但我认为有一个集中的地方来处理lastUpdate, deltaTime,lastBallCreated让事情变得简单得多。在实践中，开发者倾向于为此尝试使用单个动画帧循环。class Entity {    constructor(x, y) {        this.x = x        this.y = y    }    update() { console.warn(`${this.constructor.name} needs an update() function`) }    draw() { console.warn(`${this.constructor.name} needs a draw() function`) }    isDead() { console.warn(`${this.constructor.name} needs an isDead() function`) }}class Ball extends Entity {    constructor(x, y) {        super(x, y)        this.speed = 100 // px per second        this.size = 10 // radius in px    }    update(deltaTime) {        this.y -= this.speed * deltaTime / 1000 // deltaTime is ms so we divide by 1000    }    /** @param {CanvasRenderingContext2D} context */    draw(context) {        context.beginPath()        context.arc(this.x, this.y, this.size, 0, 2 * Math.PI)        context.fill()    }    isDead() {        return this.y < 0 - this.size    }}class Paddle extends Entity {    constructor() {        super(0, 0)    }    update() { /**/ }    draw() { /**/ }    isDead() { return false }}class Game {    /** @param {HTMLCanvasElement} canvas */    constructor(canvas) {        this.entities = [] // contains all game entities (Balls, Paddles, ...)        this.context = canvas.getContext('2d')        this.newBallInterval = 1000 // ms between each ball        this.lastBallCreated = 0 // timestamp of last time a ball was launched    }    start() {        this.lastUpdate = performance.now()        const paddle = new Paddle()        this.entities.push(paddle)        this.loop()    }    update() {        // calculate time elapsed        const newTime = performance.now()        const deltaTime = newTime - this.lastUpdate        // update every entity        this.entities.forEach(entity => entity.update(deltaTime))        // other update logic (here, create new entities)        if(this.lastBallCreated + this.newBallInterval < newTime) {            const ball = new Ball(100, 300) // this is quick and dirty, you should put some more thought into `x` and `y` here            this.entities.push(ball)            this.lastBallCreated = newTime        }        // remember current time for next update        this.lastUpdate = newTime    }    draw() {        this.entities.forEach(entity => entity.draw(this.context))    }    cleanup() {        // to prevent memory leak, don't forget to cleanup dead entities        this.entities.forEach(entity => {            if(entity.isDead()) {                const index = this.entities.indexOf(entity)                this.entities.splice(index, 1)            }        })    }    loop() {        requestAnimationFrame(() => {            this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)            this.update()            this.draw()            this.cleanup()            this.loop()        })    }}const canvas = document.querySelector('canvas')const game = new Game(canvas)game.start()<canvas height="300" width="300"></canvas>管理玩家输入现在假设您要将键盘输入添加到您的游戏中。在那种情况下，我实际上会创建一个单独的类，因为根据您要支持的“按钮”数量，它会很快变得非常复杂。所以首先，让我们画一个基本的桨，这样我们就可以看到发生了什么：class Paddle extends Entity {    constructor() {        // we just add a default initial x,y and height,width        super(150, 20)        this.width = 50        this.height = 10    }    update() { /**/ }    /** @param {CanvasRenderingContext2D} context */    draw(context) {         // we just draw a simple rectangle centered on x,y        context.beginPath()        context.rect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height)        context.fill()    }    isDead() { return false }}现在我们添加一个基本InputsManager类，您可以根据需要将其复杂化。仅针对两个键，处理keydown和keyup可以同时按下两个键的事实已经有几行代码，因此最好将事情分开，以免弄乱我们的Game对象。class InputsManager {    constructor() {        this.direction = 0 // this is the value we actually need in out Game object        window.addEventListener('keydown', this.onKeydown.bind(this))        window.addEventListener('keyup', this.onKeyup.bind(this))    }    onKeydown(event) {        switch (event.key) {            case 'ArrowLeft':                this.direction = -1                break            case 'ArrowRight':                this.direction = 1                break        }    }    onKeyup(event) {        switch (event.key) {            case 'ArrowLeft':                if(this.direction === -1) // make sure the direction was set by this key before resetting it                    this.direction = 0                break            case 'ArrowRight':                this.direction = 1                if(this.direction === 1) // make sure the direction was set by this key before resetting it                    this.direction = 0                break        }    }}现在，我们可以更新我们的Game类来利用这个新的InputsManagerclass Game {    // ...    start() {        // ...        this.inputsManager = new InputsManager()        this.loop()    }    update() {        // update every entity        const frameData = {            deltaTime,            inputs: this.inputsManager,        } // we now pass more data to the update method so that entities that need to can also read from our InputsManager        this.entities.forEach(entity => entity.update(frameData))    }    // ...}update在更新实体方法的代码以实际使用 new 之后InputsManager，结果如下：class Entity {    constructor(x, y) {        this.x = x        this.y = y    }    update() { console.warn(`${this.constructor.name} needs an update() function`) }    draw() { console.warn(`${this.constructor.name} needs a draw() function`) }    isDead() { console.warn(`${this.constructor.name} needs an isDead() function`) }}class Ball extends Entity {    constructor(x, y) {        super(x, y)        this.speed = 300 // px per second        this.radius = 10 // radius in px    }    update({deltaTime}) {    // Ball still only needs deltaTime to calculate its update        this.y -= this.speed * deltaTime / 1000 // deltaTime is ms so we divide by 1000    }    /** @param {CanvasRenderingContext2D} context */    draw(context) {        context.beginPath()        context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)        context.fill()    }    isDead() {        return this.y < 0 - this.radius    }}class Paddle extends Entity {    constructor() {        super(150, 50)        this.speed = 200        this.width = 50        this.height = 10    }    update({deltaTime, inputs}) {    // Paddle needs to read both deltaTime and inputs        this.x += this.speed * deltaTime / 1000 * inputs.direction    }    /** @param {CanvasRenderingContext2D} context */    draw(context) {         context.beginPath()        context.rect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height)        context.fill()    }    isDead() { return false }}class InputsManager {    constructor() {        this.direction = 0        window.addEventListener('keydown', this.onKeydown.bind(this))        window.addEventListener('keyup', this.onKeyup.bind(this))    }    onKeydown(event) {        switch (event.key) {            case 'ArrowLeft':                this.direction = -1                break            case 'ArrowRight':                this.direction = 1                break        }    }    onKeyup(event) {        switch (event.key) {            case 'ArrowLeft':                if(this.direction === -1)                     this.direction = 0                break            case 'ArrowRight':                this.direction = 1                if(this.direction === 1)                    this.direction = 0                break        }    }}class Game {    /** @param {HTMLCanvasElement} canvas */    constructor(canvas) {        this.entities = [] // contains all game entities (Balls, Paddles, ...)        this.context = canvas.getContext('2d')        this.newBallInterval = 500 // ms between each ball        this.lastBallCreated = -Infinity // timestamp of last time a ball was launched    }    start() {        this.lastUpdate = performance.now()    // we store the new Paddle in this.player so we can read from it later        this.player = new Paddle()    // but we still add it to the entities list so it gets updated like every other Entity        this.entities.push(this.player)        this.inputsManager = new InputsManager()        this.loop()    }    update() {        // calculate time elapsed        const newTime = performance.now()        const deltaTime = newTime - this.lastUpdate        // update every entity        const frameData = {            deltaTime,            inputs: this.inputsManager,        }        this.entities.forEach(entity => entity.update(frameData))        // other update logic (here, create new entities)        if(this.lastBallCreated + this.newBallInterval < newTime) {        // we can now read from this.player to the the position of where to fire a Ball            const ball = new Ball(this.player.x, 300)            this.entities.push(ball)            this.lastBallCreated = newTime        }        // remember current time for next update        this.lastUpdate = newTime    }    draw() {        this.entities.forEach(entity => entity.draw(this.context))    }    cleanup() {        // to prevent memory leak, don't forget to cleanup dead entities        this.entities.forEach(entity => {            if(entity.isDead()) {                const index = this.entities.indexOf(entity)                this.entities.splice(index, 1)            }        })    }    loop() {        requestAnimationFrame(() => {            this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)            this.update()            this.draw()            this.cleanup()            this.loop()        })    }}const canvas = document.querySelector('canvas')const game = new Game(canvas)game.start()<canvas height="300" width="300"></canvas><script src="script.js"></script>单击“运行代码片段”后，您必须单击 iframe 以使其聚焦，以便它可以侦听键盘输入（左箭头，右箭头）。x作为奖励，因为我们现在可以绘制和移动球拍，所以我添加了在与球拍相同的坐标处创建球的功能。您可以阅读我在上面的代码片段中留下的评论，以快速了解其工作原理。如何添加功能现在我想给你一个更一般的展望，告诉你如何处理你在这个例子上扩展时可能遇到的未来问题。我将以想要测试两个游戏对象之间的碰撞为例。你应该问问自己把逻辑放在哪里？所有游戏对象可以共享逻辑的地方在哪里？（创建信息）您需要在哪里了解碰撞？（获取信息）在这个例子中，所有游戏对象都是的子类，Entity所以对我来说，将代码放在那里是有意义的：class Entity {    constructor(x, y) {        this.collision = 'none'        this.x = x        this.y = y    }    update() { console.warn(`${this.constructor.name} needs an update() function`) }    draw() { console.warn(`${this.constructor.name} needs a draw() function`) }    isDead() { console.warn(`${this.constructor.name} needs an isDead() function`) }    static testCollision(a, b) {        if(a.collision === 'none') {            console.warn(`${a.constructor.name} needs a collision type`)            return undefined        }        if(b.collision === 'none') {            console.warn(`${b.constructor.name} needs a collision type`)            return undefined        }        if(a.collision === 'circle' && b.collision === 'circle') {            return Math.sqrt((a.x - b.x)**2 + (a.y - b.y)**2) < a.radius + b.radius        }        if(a.collision === 'circle' && b.collision === 'rect' || a.collision === 'rect' && b.collision === 'circle') {            let circle = a.collision === 'circle' ? a : b            let rect = a.collision === 'rect' ? a : b            // this is a waaaaaay simplified collision that just works in this case (circle always comes from the bottom)            const topOfBallIsAboveBottomOfRect = circle.y - circle.radius <= rect.y + rect.height / 2            const bottomOfBallIsBelowTopOfRect = circle.y + circle.radius >= rect.y - rect.height / 2            const ballIsRightOfRectLeftSide = circle.x + circle.radius >= rect.x - rect.width / 2            const ballIsLeftOfRectRightSide = circle.x - circle.radius <= rect.x + rect.width / 2            return topOfBallIsAboveBottomOfRect && bottomOfBallIsBelowTopOfRect && ballIsRightOfRectLeftSide && ballIsLeftOfRectRightSide        }        console.warn(`there is no collision function defined for a ${a.collision} and a ${b.collision}`)        return undefined    }}现在有很多种 2D 碰撞，所以代码有点冗长，但要点是：这是我在这里做出的设计决定。我可以成为通才和未来证明这一点，但它看起来像上面......我必须.collision向我的所有游戏对象添加一个属性，以便它们知道它们是否应该在上述算法中被视为 a'circle'或 ' 。rect'class Ball extends Entity {    constructor(x, y) {        super(x, y)        this.collision = 'circle'    }    // ...}class Paddle extends Entity {    constructor() {        super(150, 50)        this.collision = 'rect'    }    // ...}或者我可以极简主义，只添加我需要的东西，在这种情况下，将代码实际放入实体中可能更有意义Paddle：class Paddle extends Entity {    testBallCollision(ball) {        const topOfBallIsAboveBottomOfRect = ball.y - ball.radius <= this.y + this.height / 2        const bottomOfBallIsBelowTopOfRect = ball.y + ball.radius >= this.y - this.height / 2        const ballIsRightOfRectLeftSide = ball.x + ball.radius >= this.x - this.width / 2        const ballIsLeftOfRectRightSide = ball.x - ball.radius <= this.x + this.width / 2        return topOfBallIsAboveBottomOfRect && bottomOfBallIsBelowTopOfRect && ballIsRightOfRectLeftSide && ballIsLeftOfRectRightSide    }}cleanup无论哪种方式，我现在都可以从循环函数Game（我选择放置删除死实体的逻辑的地方）访问碰撞信息。对于我的第一个通才解决方案，我会这样使用它：class Game {    cleanup() {        this.entities.forEach(entity => {            // I'm passing this.player so all entities can test for collision with the player            if(entity.isDead(this.player)) {                const index = this.entities.indexOf(entity)                this.entities.splice(index, 1)            }        })    }}class Ball extends Entity {    isDead(player) {        // this is the "out of bounds" test we already had        const outOfBounds = this.y < 0 - this.radius        // this is the new "collision with player paddle"        const collidesWithPlayer = Entity.testCollision(player, this)        return outOfBounds || collidesWithPlayer    }}使用第二种极简主义方法，我仍然需要通过播放器进行测试：class Game {    cleanup() {        this.entities.forEach(entity => {            // I'm passing this.player so all entities can test for collision with the player            if(entity.isDead(this.player)) {                const index = this.entities.indexOf(entity)                this.entities.splice(index, 1)            }        })    }}class Ball extends Entity {    isDead(player) {        // this is the "out of bounds" test we already had        const outOfBounds = this.y < 0 - this.radius        // this is the new "collision with player paddle"        const collidesWithPlayer = player.testBallCollision(this)        return outOfBounds || collidesWithPlayer    }}最后结果我希望你学到了一些东西。同时，这是这篇很长的回答帖子的最终结果：class Entity {    constructor(x, y) {        this.collision = 'none'        this.x = x        this.y = y    }    update() { console.warn(`${this.constructor.name} needs an update() function`) }    draw() { console.warn(`${this.constructor.name} needs a draw() function`) }    isDead() { console.warn(`${this.constructor.name} needs an isDead() function`) }    static testCollision(a, b) {        if(a.collision === 'none') {            console.warn(`${a.constructor.name} needs a collision type`)            return undefined        }        if(b.collision === 'none') {            console.warn(`${b.constructor.name} needs a collision type`)            return undefined        }        if(a.collision === 'circle' && b.collision === 'circle') {            return Math.sqrt((a.x - b.x)**2 + (a.y - b.y)**2) < a.radius + b.radius        }        if(a.collision === 'circle' && b.collision === 'rect' || a.collision === 'rect' && b.collision === 'circle') {            let circle = a.collision === 'circle' ? a : b            let rect = a.collision === 'rect' ? a : b            // this is a waaaaaay simplified collision that just works in this case (circle always comes from the bottom)            const topOfBallIsAboveBottomOfRect = circle.y - circle.radius <= rect.y + rect.height / 2            const bottomOfBallIsBelowTopOfRect = circle.y + circle.radius >= rect.y - rect.height / 2            const ballIsRightOfRectLeftSide = circle.x + circle.radius >= rect.x - rect.width / 2            const ballIsLeftOfRectRightSide = circle.x - circle.radius <= rect.x + rect.width / 2            return topOfBallIsAboveBottomOfRect && bottomOfBallIsBelowTopOfRect && ballIsRightOfRectLeftSide && ballIsLeftOfRectRightSide        }        console.warn(`there is no collision function defined for a ${a.collision} and a ${b.collision}`)        return undefined    }}class Ball extends Entity {    constructor(x, y) {        super(x, y)        this.collision = 'circle'        this.speed = 300 // px per second        this.radius = 10 // radius in px    }    update({deltaTime}) {        this.y -= this.speed * deltaTime / 1000 // deltaTime is ms so we divide by 1000    }    /** @param {CanvasRenderingContext2D} context */    draw(context) {        context.beginPath()        context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)        context.fill()    }    isDead(player) {        const outOfBounds = this.y < 0 - this.radius        const collidesWithPlayer = Entity.testCollision(player, this)        return outOfBounds || collidesWithPlayer    }}class Paddle extends Entity {    constructor() {        super(150, 50)        this.collision = 'rect'        this.speed = 200        this.width = 50        this.height = 10    }    update({deltaTime, inputs}) {        this.x += this.speed * deltaTime / 1000 * inputs.direction    }    /** @param {CanvasRenderingContext2D} context */    draw(context) {         context.beginPath()        context.rect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height)        context.fill()    }    isDead() { return false }}class InputsManager {    constructor() {        this.direction = 0        window.addEventListener('keydown', this.onKeydown.bind(this))        window.addEventListener('keyup', this.onKeyup.bind(this))    }    onKeydown(event) {        switch (event.key) {            case 'ArrowLeft':                this.direction = -1                break            case 'ArrowRight':                this.direction = 1                break        }    }    onKeyup(event) {        switch (event.key) {            case 'ArrowLeft':                if(this.direction === -1)                     this.direction = 0                break            case 'ArrowRight':                this.direction = 1                if(this.direction === 1)                    this.direction = 0                break        }    }}class Game {    /** @param {HTMLCanvasElement} canvas */    constructor(canvas) {        this.entities = [] // contains all game entities (Balls, Paddles, ...)        this.context = canvas.getContext('2d')        this.newBallInterval = 500 // ms between each ball        this.lastBallCreated = -Infinity // timestamp of last time a ball was launched    }    start() {        this.lastUpdate = performance.now()        this.player = new Paddle()        this.entities.push(this.player)        this.inputsManager = new InputsManager()        this.loop()    }    update() {        // calculate time elapsed        const newTime = performance.now()        const deltaTime = newTime - this.lastUpdate        // update every entity        const frameData = {            deltaTime,            inputs: this.inputsManager,        }        this.entities.forEach(entity => entity.update(frameData))        // other update logic (here, create new entities)        if(this.lastBallCreated + this.newBallInterval < newTime) {            const ball = new Ball(this.player.x, 300)            this.entities.push(ball)            this.lastBallCreated = newTime        }        // remember current time for next update        this.lastUpdate = newTime    }    draw() {        this.entities.forEach(entity => entity.draw(this.context))    }    cleanup() {        // to prevent memory leak, don't forget to cleanup dead entities        this.entities.forEach(entity => {            if(entity.isDead(this.player)) {                const index = this.entities.indexOf(entity)                this.entities.splice(index, 1)            }        })    }    loop() {        requestAnimationFrame(() => {            this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)            this.update()            this.draw()            this.cleanup()            this.loop()        })    }}const canvas = document.querySelector('canvas')const game = new Game(canvas)game.start()<canvas height="300" width="300"></canvas><script src="script.js"></script>单击“运行代码片段”后，您必须单击 iframe 以使其聚焦，以便它可以侦听键盘输入（左箭头，右箭头）。

运行多个 requestAnimation 循环来发射多个球？

1回答