1

Javascript ゲームを変更していて、ゲーム ボードの上部にカウントダウン タイマー (3:00 分から 0 秒まで) を追加する必要があります。ゲームとタイマーの両方を作成しました。ユーザーがゲームの「開始」ボタンをクリックすると、タイマーが開始されます。(つまり、ゲームは 3 分後に終了するように計時されます)

私の問題は、JavaScript がマルチスレッド化されていないため、ユーザーがゲームを同時にプレイしている間、ゲームのカウントダウン タイマーを実行 (ティック) できないことです。あれは正しいですか？

新しいマルチスレッド JavaScript ライブラリを使用する以外に、これを機能させる何らかの方法があるように思えました。

これが私のタイマーです：

<script type="text/javascript">
// set minutes
var mins = 3;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;

function countdown() {
    setTimeout('Decrement()',1000);
}

function Decrement() {
    if (document.getElementById) {
        minutes = document.getElementById("minutes");
        seconds = document.getElementById("seconds");
        // if less than a minute remaining
        if (seconds < 59) {
            seconds.value = secs;
        } else {
            minutes.value = getminutes();
            seconds.value = getseconds();
        }
        secs--;
        setTimeout('Decrement()',1000);
    }
}

function getminutes() {
    // minutes is seconds divided by 60, rounded down
    mins = Math.floor(secs / 60);
    return mins;
}

function getseconds() {
    // take mins remaining (as seconds) away from total seconds remaining
    return secs-Math.round(mins *60);
}
</script>

<script>
countdown();
</script>


<div id="timer">
    <input id="minutes" value="3" type="text" style="width: 14px; border: none; background-color:none; font-size: 16px; font-weight: bold;">:<input id="seconds" value="00" type="text" style="width: 26px; border: none; background-color:none; font-size: 16px; font-weight: bold;"> remaining
</div>

すべてを開始する私のゲームの部分は次のとおりです。

<script>
$(function(){
    $("#button-start").click(game.start);
});
</script>

メソッドとタイマーgame.startのメソッドを実行するにはどうすればよいですか? countdown()「開始」をクリックしたときに両方のメソッドを実行しようとするたびに、JavaScript がまったく実行されません。何も機能せず、フリーズします。一度に実行しようとしている2つのメソッドからだと思いますか?

4

5 に答える 5

2

を使用するだけsetTimeoutで、ブロックされません

var initialTime = new Date();
function updateTimer() {
    if (new Date() - initialTime > (1000 * 1000 * 60 * 3) ) {
         document.getElementById('clock').innerHTML = formatTime();
         setTimeout(updateTimer, 1000);    
    }
}
updateTimer();

ビジーループを使用しないでください

于 2013-02-28T21:20:38.340 に答える
1

ゲームがビジーループのようなものを使用していない限り、つまり次のようなものです。

while (1) {
    // process next event
}

…そうすれば、それについて心配する必要はありません。JavaScriptエンジンは、ユーザーイベントとタイマーイベントを自動的にインターリーブするため、タイマーが不足することはありません。

于 2013-02-28T21:17:35.610 に答える
1

一方通行：

var S_LEFT = 180;
function myTicker(){
  console.log('tick');
  S_LEFT -= 1;
  if(S_LEFT === 0) doSomething();
  $('#seconds').html(S_LEFT);
};

$('#start').on('click', function(){
  window.setInterval(myTicker, 1000);
});

setTimeout を使用し、Jquery を使用しない @Juan Mendes の方法:

var S_LEFT = 180;
function tick(){
  console.log('tick');
  S_LEFT -= 1;
  if(S_LEFT === 0){ 
    alert('Boom');
  } else {
    document.body.innerHTML = S_LEFT;
    window.setTimeout(tick, 1000);
  }
};
//document.addEventListener('DOMContentLoaded',tick,false);
tick();
于 2013-02-28T21:28:04.113 に答える
0

これらの答えはすべて、私には複雑すぎるようです。

を使用して最初にタイマーを開始したときに、単純にタイムスタンプを秒単位で取得しないのはなぜですか

var beginTimestamp = Math.floor(Date.now() / 1000)

その後、あなたの最後を作ります

var endTimestamp = beginTimestamp + (3*60)

次に、更新時に残りの秒数を取得します

var numSecondsRemaining = endTimestamp - Math.floor(Date.now()/1000)

そして最後に

if(numSecondsRemaining <= 0) { /* end game */ }

フォーマットするには、次のようにします

var date = new Date(numSecondsRemaining*1000);
var minutes = "0" + date.getMinutes();
var seconds = "0" + date.getSeconds();
var formattedTime = minutes.substr(-2) + ':' + seconds.substr(-2);

このアプローチは、setTimeout にありがちなファンキーさの影響を受けません。また、はるかに小さく、基本的に数学は必要ありません。

于 2015-09-17T22:47:38.303 に答える
0

使っていましたsetTimeout('Decrement()',1000);

いつ使うべきだったのかsetTimeout(Decrement,1000);

「デクリメント」の後に一重引用符と括弧を削除すると、問題が解決しました。

于 2013-03-05T17:46:29.647 に答える