HTML5ゲームにタイミングを追加する方法 - ダミー

ビデオ: 動画のテロップをオシャレに編集する方法｜Filmora高度テキスト編集機能 2025

時間の経過は、HTML5ゲームの要素となることがよくあります。レーシングゲームはすべて速度に関するもので、何らかのタスクを実行するための時間制限がある場合があります。 simpleGameライブラリには、時間を簡単に管理できる非常に便利なタイマーオブジェクトが含まれています。 Timerオブジェクトは他のJavaScriptオブジェクトと同様に作成されます。それには3つのメソッドがあります：

reset（）：この関数はタイマーを初期化し、経過時間カウンターを開始します。
<！ - 1 - >
getCurrentTime（）：この関数は、呼び出された時点の現在のシステム時刻を返します。
getElapsedTime（）：タイマが作成されてからの経過秒数または最後にリセットされた秒数を返します（いずれか新しい方のどちらか早い方の時刻を返します）。 JavaScriptおよび他の多くの言語では、日付および時刻情報は一般に特殊な整数形式で格納される。時間は実際には1970年1月1日午前0時からのミリ秒数を示す巨大な整数としてカウントされます。

<！これは本当に複雑なスキームのように思えるかもしれませんが、本当に知りたいのは、2つのイベントの間にどれくらいの時間が経過したかによって、実際にはあなたの用途に最適です。人間が判読可能な形式で現在の日付と時刻を実際に取得したい場合は、JavaScript Dateオブジェクトを参照してください。

タイミングの例については、timerDemoを参照してください。 html：

timerDemo

varタイマー。

var出力; varゲーム;関数init（）{ゲーム=新しいシーン（）;出力=ドキュメント。 getElementById（ "output"）; timer = new Timer（）; タイマ。リセット（）; ゲーム。 start（）;} // init関数のupdate（）{ ゲームを終了します。隠す（）; currentTime = timer。 getElapsedTime（）; 出力。 innerHTML = currentTime; } // end update function reset（）{ タイマー。リセット（）; } // end reset 空リセットタイマー この例では簡単なタイマーを示します。ページが実行されている秒数が表示されます。タイマーは、（巧妙な名前の）Reset Timerボタンでリセットできます。 <！ - 3 - >

このプログラムは比較的シンプルですが、非常に強力なアイディアを示しています。このプロセスを使用して、独自の時間計測ゲームを構築します。

タイマーの変数を作成します。

これは慣れ親しんでいるはずです。興味深い要素はすべてオブジェクトであり、タイマーも例外ではありません。タイマー型のオブジェクトになるtimerという変数を作成します。

タイマーをリセットします。

タイマーがゼロから始まることを確認します。
各フレームの経過時間を取得します。

update（）関数で、タイマーのgetElapsedTime（）メソッドを呼び出して、経過した時間を調べ、この値を出力領域にコピーします。
ユーザーがボタンを押したときにタイマーをリセットします。

ユーザーがリセットボタンを押すと、タイマーのreset（）メソッドを呼び出して経過時間をゼロに戻します。
メインシーンを非表示にします。

このプログラムはsimpleGameのメインループを使用しますが、シーンを表示する必要はありません。このため、Sceneオブジェクトにはhide（）メソッドがあります。後でそのシーンをshow（）メソッドで表示することもできます。