似乎無法讓這個計數器工作

嗨我試圖建立一個簡單的網絡瀏覽器遊戲，它會讓你點擊一個鍵盤按鍵的速度有多快，以達到極限（例如50,75,100）。我有這樣的代碼在這裏：似乎無法讓這個計數器工作

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <p id="dt"></p> 
    <script src="game.js"></script> 
</body> 
</html>

的Javascript：

var count = 0; 
var IsGameAlive = 1; 
window.onload = function() { 
    myFunction() 
} 
document.onkeydown = function(e){ 
    if (IsGameAlive==1) { 
     e = e || window.event; 
     var key = e.which || e.keyCode; 
     if(key==32){ 
      add(); 
     } 
    } 
} 
function myFunction() { 
    setInterval (stopwatch,1) 
} 
function stopwatch() { 
    document.getElementById('dt').innerHTML = count; 
} 
function add() { 
    count = count + 1; 
} 
if (count==50) { 
    gamefinished(); 
} 
function gamefinished() { 
    window.alert("You Won!"); 
    IsGameAlive = 0; 
    console.log("test"); 
}

我不能似乎得到if語句來執行功能將禁用控制，並顯示警告。任何幫助或建議將不勝感激。

來源

2016-02-26 exile_au

你能給我們一個JSFiddle嗎？ –

每毫秒從DOM中抓取元素可能不是一個好主意。 – Andy

你如果陳述將被調用一次，最有可能之前，你的dom甚至準備好 –

你的if語句應該是你的函數中。因此，而不是：

function add() { 
    count = count + 1; 
} 
if (count==50) { 
    gamefinished(); 
}

應該是：

function add() { 
    count = count + 1; 
    if (count==50) { 
    gamefinished(); 
    } 
}

來源

2016-02-26 22:34:49 GreenGiant

謝謝你，它的工作原理，你能給我一個簡單的解釋它爲什麼不起作用嗎？我只開始使用Javascript。謝謝:) –

您以前的方式，if語句不在任何函數內。當頁面初始加載時，不在函數內的任何代碼只會執行一次。您希望它在每次計數更改時執行*，因此您需要將其放入add（）函數中。希望有所幫助！ – GreenGiant

非常感謝！ –

我想你想要的是你的keydown函數中的'if'，否則它將在js執行時運行一次。

window.onload = function() { 
    myFunction() 
    document.onkeydown = function(e){ 
     if (IsGameAlive==1) { 
      e = e || window.event; 
      var key = e.which || e.keyCode; 
      if(key==32){ 
       add(); 
      } 
     } 
    } 
}

此外，安迪在評論中提到的，你可能會想你的計時器更改爲1秒，而不是1/1000秒

function myFunction() { 
    setInterval (stopwatch,1000) 
}

來源

2016-02-26 22:27:49

我編輯它，仍然不工作，建議？ –

把'document.onkeydown'部分扔到'window.onload'裏面＃ –

從你當前的代碼來看，似乎也有一些簡單的常規錯誤，所以繼承人清理版本：

var count = 0; 
var IsGameAlive = true; //use booleans 
var interval; //store interval 
window.onload = function() { 
    myFunction(); //missing semi-colons 
    if (IsGameAlive) { //if statement should be contained inside window.onload 
     document.onkeydown = function(e){ 
      if (IsGameAlive){ //prevent detection when game ended 
       e = e || window.event; 
       var key = e.which || e.keyCode; 
       if(key==32){ 
        add(); 
       } 
      } 
     } 
    } 
}; //missing semi-colons 

function myFunction() { 
    interval = setInterval(stopwatch,1000); //missing semi-colons, and run every 1000 = 1 second 
} 
function stopwatch() { 
    document.getElementById('dt').innerHTML = count; 
} 
function add() { 
    count = count + 1; 
    if (count>=50) { 
     gamefinished(); 
    } 
    return; 
} 
function gamefinished() { 
    window.alert("You Won!"); 
    IsGameAlive = false; 
    clearInterval(interval); //remove interval 
    return; 
}

編輯爲了更好地保持時間，也許設置計時器返回運行說每10毫秒，但隨後使用函數蘇如下所示，以獲得更準確的時間。（與使用設置爲1毫秒的計時器相比，這也是較少資源密集型的，同時保持非常精確）。

var initialTime = Date.now(); //global variable 

function getSecondsPassed(){ 
    return Math.floor((Date.now()-initialTime)/1000); 
}

來源

2016-02-26 22:43:48 TheMintyMate

似乎無法讓這個計數器工作

回答

相關問題