計時器計數太快

Question

我正在創建一個瀏覽器游戲，它會在游戲開始時有一個計時器。 我的東西運行良好，但我對 Javascript 相對較新，因此非常感謝有關程序結構的提示。

我的問題是我的計時器在應該計算秒的地方計算毫秒，在應該計算分鍾的地方計算秒。

計時器.js

class Timer {           //timer works in s
    
    constructor() {
        this.curr = 0;
        this.initial_time = 0;
        this.t_status = false;
        this.curr_str;          //string for the current time
        this.old_timeStamp = 0;
        this.new_timeStamp = 0;
    }
    
    convert_to_str(s){  //converts time in secs to a mm:ss format
    
        console.log(s);
    
        let minutes = Math.trunc(s / 60);
        let secs = s % 60;
        let min_str;
        let secs_str;
        
        if (minutes < 10) {
            min_str = "0" + Math.trunc(minutes);
        } 
        else {
            min_str = Math.trunc(minutes).toString();
        }
        
        if (secs < 10) {
            secs_str = "0" + Math.trunc(secs);
        }
        else {
            secs_str = Math.trunc(secs).toString();
        }
        
        return min_str + ":" + secs_str;
        
    }
    
    set(s){         //sets time to sex seconds
        this.initial_time = s;
        this.curr = s;
        this.curr_str = this.convert_to_str(this.curr);
    }
    
    decrement(amount) {         //decrements the seconds timer
        this.curr = this.curr - amount;
        this.curr_str = this.convert_to_str(this.curr);
    }
    
    increment() {           //increments the seconds timer
        this.curr = this.curr + 1;
        this.curr_str = convert_to_str(this.curr);
    }
    
    clear() {
        this.curr = 0;
        this.curr_string = "";
        this.initial_time = 0;
    }
    
    get_time() {
        return this.curr_str;
    }   
    
    get_curr() {
        return this.curr;
    }   
}

main.js

function update(timeStamp) {
// Calculate the number of seconds passed since the last frame
timer.new_timeStamp = Date.now();
secondsPassed = (timer.new_timeStamp - timer.old_timeStamp) / 1000;

if (timer.t_status){
    console.log(secondsPassed);
    
    if (timer.get_curr() <= 0) {
        console.log("timer hit 0 stopping");
        timer.t_status = false;
    }
    else if ( secondsPassed >= 1 ){
        oldTimeStamp = Date.now();
        timer.decrement(1);
        
        console.log("changing timer to " + timer.get_time());
        
        $("#timer").html(timer.get_time());     //display current time string
    }
    
    console.log(timer.get_curr());
}

// Calculate fps
fps = Math.round(1 / secondsPassed);

// The loop function has reached it's end. Keep requesting new frames
window.requestAnimationFrame(update);
}

在整個更新function 中，我對 integer 文字進行了各種更改，但無論我更改什么數字，計數器的計數都相同嗎？ 例如，起初我有if (secondsPassed >= 1)但程序具有相同的行為。

請幫忙：）

Answer 1

在 function convert_to_str中，您可以更改let minutes並let secs賦值為以下（注意，毫秒是您傳遞給convert_to_str函數的參數）： let minutes = milliseconds / 60000; 讓秒 = 毫秒 / 1000 - 60 * 分鍾；

Answer 2

代碼有一些問題。 一方面，代碼試圖在不了解它是什么的情況下使用時間戳參數。 它與 Date.now() object 不同。

這個問題最簡單的解決方案是在我的計時器 class 中制作我自己的時間戳。 在那之后。 我的代碼運行良好。

計時器.js

class Timer {           //timer works in ms
    
    constructor() {
        this.curr = 0;
        this.initial_time = 0;
        this.t_status = false;
        this.curr_str;          //string for the current time
        this.old_timeStamp = 0;
        this.new_timeStamp = 0;
    }
    
    convert_to_str(s){  //converts time in secs to a mm:ss format
    
        console.log(s);
    
        let minutes = Math.trunc(s / 60);
        let secs = s % 60;
        let min_str;
        let secs_str;
        
        if (minutes < 10) {
            min_str = "0" + Math.trunc(minutes);
        } 
        else {
            min_str = Math.trunc(minutes).toString();
        }
        
        if (secs < 10) {
            secs_str = "0" + Math.trunc(secs);
        }
        else {
            secs_str = Math.trunc(secs).toString();
        }
        
        return min_str + ":" + secs_str;
        
    }
    
    set(s){         //sets time to sex seconds
        this.initial_time = s;
        this.curr = s;
        this.curr_str = this.convert_to_str(this.curr);
    }
    
    decrement(amount) {         //decrements the seconds timer
        this.curr = this.curr - amount;
        this.curr_str = this.convert_to_str(this.curr);
    }
    
    increment() {           //increments the seconds timer
        this.curr = this.curr + 1;
        this.curr_str = convert_to_str(this.curr);
    }
    
    clear() {
        this.curr = 0;
        this.curr_string = "";
        this.initial_time = 0;
    }
    
    get_time() {
        return this.curr_str;
    }   
    
    get_curr() {
        return this.curr;
    }   
}

main.js

function update(timeStamp) {

// Calculate the number of seconds passed since the last frame
timer.new_timeStamp = Date.now();
secondsPassed = (timer.new_timeStamp - timer.old_timeStamp) / 1000;

if (timer.t_status){
    console.log(secondsPassed);
    
    if (timer.get_curr() <= 0) {
        console.log("timer hit 0 stopping");
        timer.t_status = false;
    }
    else if ( secondsPassed >= 1 ){
        timer.old_timeStamp = Date.now();
        timer.decrement(1);
        
        console.log("changing timer to " + timer.get_time());
        
        $("#timer").html(timer.get_time());     //display current time string
    }
    
    console.log(timer.get_curr());
}

// Calculate fps
fps = Math.round(1 / secondsPassed);

// The loop function has reached it's end. Keep requesting new frames
window.requestAnimationFrame(update);
}