爲javascript遊戲創建計時器會產生不良結果

我正在用Canvas/JavaScript設計HTML5遊戲。我的目標是創建一個計時器，在您需要拍攝儘可能多的敵人時，將從一定的分鐘數倒數至零。我一直在忙着搜索有效的定時器，但是一些實現導致了瀏覽器崩潰（可能是無限循環）或（timeInSeconds）倒計時的問題。爲javascript遊戲創建計時器會產生不良結果

這是代碼我最近實施的，試圖得到它的工作

function setTimerCountdown(){ 
timeInSeconds = timeInSeconds - 1; 
    ctx.fillText(timeInSeconds, 200,180); 
}

我已經得到了它是用來更新遊戲這裏的setInterval是該代碼，這段代碼的謊言在JS的底部文件

var main = function() { 

var now = Date.now(); 
var delta = now - then; 
update(delta/1000); 
render(); 
then = now; 
}; 

// Let's play this game! 
reset(); 
var then = Date.now(); 
var fps = 60; 
setInterval(main, 1000/fps); // Execute as fast as possible

我再有額外的代碼，如渲染功能，這使得畫面到屏幕和文本，這裏是這個

代碼

var render = function() { 

returnKillsNeeded(stageNum); 
      ctx.drawImage(startGameImg, 0,0); 
      ctx.font = "24px Helvetica"; 
      ctx.textAlign = 'center'; 
      ctx.textBaseline = "top"; 
      ctx.fillText("press Enter to start", 250, 300); 
      ctx.fill(); 
    if(gameStart){ 
if (bgReady) { 
ctx.drawImage(bgImage, 0, 0); 


} 
setInterval(setTimerCountdown, 1000); 
setTimeOut(setTimerCountdown, 1000); 
ctx.fillStyle="#522900"; 
ctx.fillRect(0,480,500,120);

想法是從120倒計時（我知道沒有可用的停止時間進入負值，以及不必要的代碼，即currentTime和時間。正如前面提到的幾次嘗試的實現已被證明不成功，

我的問題是，我應該有setInterval或setTimeOut或定時器的任何方面的渲染方法嗎？是上面提到的代碼引用上面我應該使用相同的代碼創建計時器？我知道這裏有很多例子，但是我似乎無法打破如何將這些代碼應用到我的程序中，而沒有搞砸我迄今爲止所做的所有工作。我有鏈接附加，我願意用來向你展示我的研究，但由於令人沮喪（修復你的代碼結構）在這個網站上的彈出窗口，我已經排除了來自youtube頻道的視頻鏈接，名爲goTreeHouse - 在javascript和多個堆棧中創建計時器已經提出的問題。

要進一步添加可能的相關信息。我沒有使用任何API（JQuery等）。只是HTML5，CSS，JavaScript（使用notepad ++）。

表示讚賞，同時指出您目前看到的代碼中的任何錯誤。此外，我想另一件事div標籤，只有1使用的是一個div標籤的畫布，所有的文字，圖像和音樂是通過js，再次沒有額外的API的

編輯：下面是與編輯，還要注意渲染函數中的if語句塊，這是爲了阻止負數顯示在屏幕上（但它並沒有考慮到在後臺函數仍然在更新，負值越來越大，我將研究解決這一問題。

//Thanks to GameAlchemist 
function createCountDown(timeRemaining) { 
    var startTime = Date.now(); 
    return function() { 
    return timeRemaining - (Date.now() - startTime); 
    } 
} 
var currentCountDown = createCountDown(30000); 

// Draw everything 
var render = function() { 



var countDownValue = currentCountDown(); 

returnKillsNeeded(stageNum); 
      ctx.drawImage(startGameImg, 0,0); 
      ctx.font = "24px Helvetica"; 
      ctx.textAlign = 'center'; 
      ctx.textBaseline = "top"; 
      ctx.fillStyle="#FF0000"; 
      ctx.fillText("press Enter to play", 250, 450); 
      ctx.fill(); 
    if(gameStart){ 
if (bgReady) { 
ctx.drawImage(bgImage, 0, 0); 


} 

ctx.fillStyle="#522900"; 
ctx.fillRect(0,480,500,120); 
ctx.drawImage(scoreImg, 22,522); 
ctx.drawImage(livesImg, 360,522); 

ctx.drawImage(progressImg, 200,492); 
createProgressBar(); 
createProgressPercent(); 
ctx.fillText("progress", 170,492); 
setEnemyHealthText(); 
drawPlayer(); 
if(countDownValue <=0){ 
    countDownValue = 0; 
    }else{ 
ctx.fillText(countDownValue, 200,190); 
}

來源

2013-10-08 tommy knocker

獲取日期。now（）開始，然後在更新中從新的Date.now（）中取出開始日期。這會讓你從開始就有所進步，如果你將這個值從你想要的時間中拿走，比如1分鐘（60000），那麼當這個值低於0時，時間到了！ – rorypicko

如果你要寫很多JavaScript看http://shichuan.github.io/javascript-patterns/。還請看Douglas Crockford的談話。這些類型的資源將幫助您防止大量問題。 – JBeagle

Beagle，這是很有用的，我承認我一直在努力理解爲什麼var data = function被用作函數名稱，因爲我最近才從學習java開始學習js。當你說開始得到Date.now（）時，Rory會開始劇本，開始遊戲循環還是函數？ –

使用閉包，你可以在代碼的幾行有一個倒計時。
因爲我猜你需要不止一個倒計時（每個階段）以上，這裏是一個返回倒計時功能的函數：

function createCountDown(timeRemaining) { 
    var startTime = Date.now(); 
    return function() { 
     return timeRemaining - (Date.now() - startTime); 
    } 
}

這就是它！

現在使用它，這樣做：

// creating a coundown, at stage start 
var currentCountDown = createCountDown(30000); // 30 seconds countdown 

//... during the game, just use with : 
var countDownValue = currentCountDown();  // in ms

來源

2013-10-09 00:47:18 GameAlchemist

爲javascript遊戲創建計時器會產生不良結果

回答

相關問題