在HTML5游戏中实现计时器

Question

I'm trying to build a small game on an HTML5 canvas, and I'm running into a bit of trouble when trying to set a 1 minute countdown timer in game.

The following code contains the timeKeeper function and the animate loop.

timeKeeper

function timeKeeper(width, font, posX, posY, text) {
    this.width = width;
    this.x = posX;
    this.y = posY;
    this.font = font;
    this.text = text;
    this.numSeconds = 0;
    this.time = 0;

    this.draw = () => {
        c.font = this.width + " " + this.font;
        c.fillStyle = "white";
        c.fillText(this.text, this.x, this.y);
    }

    this.update = () => {
        setInterval(() => {
            this.text -= 1;
        },1000)
        this.draw();
    }

}

animate

// Animation Loop
function animate() {
    requestAnimationFrame(animate)
    c.clearRect(0, 0, canvas.width, canvas.height)
    timeBoard.update()
    //Move enemies
    enemies.forEach((enemy) => {
        //update score and time
        scoreBoard.draw();

        //draw labels
        scoreLabel.draw();
        timeLabel.draw();

        //update enemies
        enemy.update();
        enemy.checkBoundary();
        if (enemy.isTrue == true) {
            enemies.splice(enemies.indexOf(enemy), 1);
            // console.log(enemies);
        }

        if (enemies.length == 0) {
            setTimeout(initEnemies(), 200)
        }

        //collision detection by checking color
        if (enemy.color == "#2185C5") {
            if (getDistance(enemy.x, enemy.y, ship[0].x, ship[0].y) < enemy.radius + ship[0].radius) {
                enemy.color = "#FF00FF"
                scoreBoard.update();
            }
        }
    });
    //create one particle
    ship[0].update();
}

What I think happens here is that the timeBoard.update() function gets called every frame, causing the countdown to be really fast.

Can anyone help me figure this out?

Thanks in advance.

Answer 1

You need to have the counter run outside the animate frame loop method. You could add some kind of timer within the function to compensate for the frame (60fps means animate() will run approximately every 16.667ms) time but, requestAnimationFrame() doesn't always run at 60fps. If the browser can't render at that pace, it will slow down the frame loop. Therefore, it isn't a good idea to make a timer that is at all related to requestAnimationFrame(); .

Instead, made a counter outside the function. Ideally, use setInterval() right before you start the animate loop. The interval might look something like this....

var counter = 0;
var timer = window.requestAnimationFrame(function(){
  timeBoard.update();
  if(counter+1 == 60){
    //a minute has passed, clear the interval:
    clearInterval(timer);
  }else{
    counter++;
  }
},1000);

If you include the code that starts the animate loop in your question details, I can help show exactly how you would implement it. Also, you don't mention if you need the counter to be reusable. These are all things to consider. If you need it to be reusable, you might consider using an object oriented solution.

Answer 2

The setInterval function stacks, meaning that it will keep on creating setInterval instances. By calling timeBoard.update() repeatedly, you are creating many instances of setInterval, making your timer run faster than it should. You could change your update method to something like init , and then call that once outside of the animation loop.

Answer 3

Called timeBoard.draw() within the animation loop in order to get the timer drawn. Then called the setInterval() function outside the animation loop.

Thank you all~ :)

function animate() {
    requestAnimationFrame(animate)
    c.clearRect(0, 0, canvas.width, canvas.height)
    timeBoard.draw()
    //Move enemies
    enemies.forEach((enemy) => {
        //update score and time
        scoreBoard.draw();

        //draw labels
        scoreLabel.draw();
        timeLabel.draw();

        //update enemies
        enemy.update();
        enemy.checkBoundary();
        if (enemy.isTrue == true) {
            enemies.splice(enemies.indexOf(enemy), 1);
            // console.log(enemies);
        }

        if (enemies.length == 0) {
            setTimeout(initEnemies(), 200)
        }

        //collision detection by checking color
        if (enemy.color == "#2185C5") {
            if (getDistance(enemy.x, enemy.y, ship[0].x, ship[0].y) < enemy.radius + ship[0].radius) {
                enemy.color = "#FF00FF"
                scoreBoard.update();
            }
        }
    });
    //create one particle
    ship[0].update();
}

//Run Timer
setInterval(() => {
    timeBoard.update()
}, 1000)