爲我的遊戲設置一個計時器

Question

我現在堅持讓計時器工作在我的迷宮遊戲上。我基本上希望計時器馬上開始，一旦你到達終點計時器停止。

這是我現在的代碼，我沒有包括任何代碼，因爲我正在抓我的頭髮。任何幫助都會非常有幫助！

var canvas; 
var ctx; 

var mazeWidth = 510; 
var mazeHeight = 510; 

var y = 300; 
var x = 120; 

var maze = new Image(); 

var collision = 0; 

var time = 0 

function init() 
{ 
canvas = document.getElementById('canvasMaze'); 
ctx = canvas.getContext("2d"); 
maze.src = "maze.png"; 
return setInterval(draw, 10); 
} 

function draw() 
{ 
clear(); 
ctx.fillStyle = "Red"; 
rect(x, y, 15,15); 

ctx.fillText(time + " seconds",10,50); 

if (x <= 15) 
{ 
    var restart = confirm("It took you " + time + " seconds to complete the maze!"); 
    if (restart == true) 
    { 
     x = 250; 
     y = 250; 
     time = 0;   
    } 
} 
} 

function clear() 
{ 
ctx.clearRect(0, 0, mazeWidth, mazeHeight); 
ctx.drawImage(maze, 1, 1); 
} 

function rect(x,y,w,h) 
{ 
ctx.beginPath(); 
ctx.rect(x,y,w,h); 
ctx.closePath(); 
ctx.fill(); 
} 

function doKeyDown(e) 
{ 
switch (e.keyCode) 
{ 
    case 38: 
    case 87: 
    if (y - 6 > 10) 
    { 
     y -= 6; 
     clear(); 
     collisionCheck(); 
     if (collision == 1) 
     { 
      y += 6; 
      collision = 0; 
     } 
    } 
    break; 
    case 40: 
    case 83: 
    if (y + 6 < 466) 
    { 
     y += 6; 
     clear(); 
     collisionCheck(); 
     if (collision == 1) 
     { 
      y -= 6; 
      collision = 0; 
     } 
    } 
    break; 
    case 37: 
    case 65: 
    if (x - 6 > 0) 
    { 
     x -= 6; 
     clear(); 
     collisionCheck(); 
     if (collision == 1) 
     { 
      x += 6; 
      collision = 0; 
     } 
    } 
    break; 
    case 39: 
    case 68: 
    if (x + 6 < 468) 
    { 
     x += 6; 
     clear(); 
     collisionCheck(); 
     if (collision == 1) 
     { 
      x -= 6; 
      collision = 0; 
     } 
    } 
    break; 
} 
} 

function collisionCheck() 
{ 
var imageData = ctx.getImageData(x, y, 18, 18); 
var pix = imageData.data; 
for (var i = 0; n = pix.length, i < n; i += 4) 
{ 
    if (pix[i] == 0) 
    { 
     collision = 1; 
    } 
} 
} 

init(); 
window.addEventListener('keydown',doKeyDown,true); 

Answer 1

你會想在頁面加載或初始化時獲得當前時間，並且可能將其存儲在全局變量中。然後每次調用繪圖函數時，都可以確定從初始時間減去當前時間所用的時間。

var initialTime = new Date(); 
var lastUpdate = new Date(); 
var minTime = 100; 
function draw() 
{ 
    ... 
    var currentTime = new Date(); 

    //Don't update if enough time has not passed 
    if(currentTime - lastUpdate < minTime) 
    { 
     //Don't update the timer 
    } 
    else 
    { 
     //Update the timer 
    } 

    var timeTaken = currentTime - initialTime; 



    if(x <= 15) 
    { 
     var restart = confirm("It took you " + timeTaken + " seconds to complete the maze!"); 
    } 
    ... 
    lastUpdate = Date.Now(); 
} 

}