SOURCE

/**
 * 取消 Promise 的思路：https://stackoverflow.com/a/41622024/3740458
 * https://juejin.cn/post/6844903533393772557
 */

levelData = {
    name: "探险家",
    ver: "1.0.0",
    speed: 2000,
    isPause: false
}

class Game {
    data = null
    delayCheckInterval = 200
    delayThreshold = 0
    delayCounter = 0

    constructor(data = {}) {
        this.data = Vue.reactive(data)
        this.setSpeed()
        console.log(this.delayThreshold)
        Vue.watchEffect(() => console.log(this.data))
    }

    checkBeforeExcute() {
        const that = this
        return new Promise((resolve, reject) => {
            console.log(that.delayCounter)
            that.delayCounter++
            setTimeout(function() {
                if (that.delayCounter > that.delayThreshold && !that.data.isPause) {
                    that.delayCounter = 0
                    resolve()
                } else {
                    reject()
                }
            }, this.delayCheckInterval)
        })
        .catch(err => {
            return that.checkBeforeExcute()
        })
    }

    pause() {
        this.data.isPause = true
    }

    resume() {
        this.data.isPause = false
    }

    setSpeed(speed) {
        if (speed) this.data.speed = speed
        this.delayThreshold = Math.floor(this.data.speed / this.delayCheckInterval)
    }

    async fun() {
        await this.checkBeforeExcute()
        console.log("great!")
    }
}

async function runGame() {
    const game = new Game(levelData)

    game.pause()

    setInterval(function() {
        game.resume()
    }, 10000)

    await game.fun()

    game.pause()

    await game.fun()

    await game.fun()

    await game.fun()

    game.setSpeed(5000)

    await game.fun()
}

runGame()

<canvas id="ok" width="375" height="625"></canvas>

canvas#ok {
    background: white;
}

ul {
    list-style-type: none;
    padding-left: 0;
}