2

我正在用 Canvas/JavaScript 设计一个 HTML5 游戏。我的目标是创建一个计时器，在您需要射击尽可能多的敌人期间，从一定的分钟数倒计时到零。我一直在忙于寻找有效的计时器，但一些实现导致了浏览器崩溃（可能是无限循环）或 (timeInSeconds ) 的倒计时快速下降的问题。

这是我最近实现的代码，试图让它工作

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 开始倒计时（我知道没有可用的 catch 来阻止时间进入负值，以及不必要的代码，即 currentTime 和 time。如前所述，实施的几次尝试已被证明是不成功的，

我的问题是，我应该在渲染方法中有 setInterval 或 setTimeOut 还是计时器的任何方面？，上面引用的代码是否与我应该用来创建计时器的代码相同？我知道那里有很多例子，但我似乎无法在不搞砸我迄今为止所做的所有工作的情况下将代码应用到我的代码中。我附上了链接，我愿意用它来向您展示我的研究，但由于此站点上令人沮丧的（修复您的代码结构）弹出窗口，我排除了指向名为 goTreeHouse 的 youtube 频道的视频的链接 - 在 javascript 和几个堆栈中创建一个计时器已经问过的问题。

添加更多可能相关的信息。我没有使用任何 API（JQuery 等）。只是 HTML5、CSS、JavaScript（使用记事本++）。

感谢您提供帮助，同时指出您当前看到的代码中的任何错误。另外我想另一件事是 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);
}
4

1 回答 1

6

使用闭包，您可以在几行代码中进行倒计时。
因为我猜你需要不止一个倒计时（每个阶段一个），这里有一个返回倒计时函数的函数：

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-09T00:47:18.240 回答