HTML ボタンを使用したタイピング ゲームの JavaScript タイマー値を変更する方法

ボタンを使用したタイピング ゲームの動的タイマー調整

タイピング ゲームでは、魅力的なユーザー エクスペリエンスを確保するために、ゲームのペースを制御することが重要です。重要な要素の 1 つはタイマーです。タイマーは、ユーザーがゲームやタイピングの課題を完了するまでの時間を決定します。ユーザーが単純な HTML ボタンを使用してゲーム タイマーを調整できるようにすることで、ゲームプレイをより詳細に制御できるようになります。

この記事では、プレーヤーがボタンを使用してさまざまなタイマー設定を選択できるようにするソリューションを JavaScript で作成する方法を説明します。たとえば、「30 秒」ボタンを選択するとタイマーが 30 秒に調整され、「60 秒」ボタンをクリックするとタイマーが 60 秒に変更されます。

JavaScript 関数はクリックされたボタンから値を取得し、タイマーとゲームのタイトルの両方を動的に更新します。この種の柔軟性によりユーザー エクスペリエンスが向上し、ゲームをよりカスタマイズしやすくなり、さまざまなスキル レベルに合わせて楽しめるようになります。

このガイドを終えると、HTML と JavaScript を使用した完全に機能するタイマー調整機能が使えるようになります。ページのタイトルに表示されるタイマー値を更新して、選択したタイマー期間を反映する方法についても説明します。

指示	使用例
document.querySelector()	HTML
addEventListener()	特定のイベント (クリックなど) をボタン要素にバインドします。このコンテキストでは、ユーザーがボタンをクリックしたときに、changeTimer() 関数をトリガーするために使用され、タイマー設定との動的な対話が可能になります。
innerText	このプロパティを使用すると、HTML 要素内の表示テキストを変更できます。このソリューションでは、ボタンがクリックされたときにページのタイトルのタイマー値を更新するために使用されます。
onClick	ChangeTimer() 関数をボタンのクリック イベントに直接アタッチするための代替アプローチで使用されるインライン イベント ハンドラー属性。これにより、よりシンプルでモジュール化の少ない方法でタイマーを動的に更新できるようになります。
test()	このメソッドは、Jest による単体テストで使用されます。これは、テスト対象の関数 (changeTimer() など) が評価されてタイマーが正しく更新されることを確認するテスト ケースを定義します。これにより、コードがさまざまなシナリオで期待どおりに動作することが保証されます。
expect()	実際の値 (更新されたタイマーなど) が期待値と一致するかどうかを確認する Jest コマンド。これは、ボタンのクリック後に gameTime と document.title が正しく更新されることを確認する単体テストで使用されます。
toBe()	厳密な同等性をチェックする別の Jest コマンド。これにより、changeTimer() を呼び出した後のゲーム時間が期待どおりになることが保証されます (例: 30 秒で 30,000 ミリ秒)。
getElementById()	ID によって特定のボタンを選択するために使用されます (例: 「thirty」、「sixty」)。このメソッドは、イベント リスナーをボタンにアタッチし、ユーザー インタラクションに応じてタイマーの動的な変更をトリガーするために重要です。

JavaScript および HTML ボタンを使用した動的タイマーの作成

上記で提供されているスクリプトは、ユーザーが HTML ボタンをクリックすることでタイピング ゲームのゲーム タイマーを動的に調整できるように設計されています。最初に変数を宣言します 、時間をミリ秒単位で保持します (デフォルトでは 30 秒、ミリ秒に変換するには 1000 を掛けます)。重要な機能は次のとおりです。 クリックされたボタンに基づいてタイマー値を更新する関数。このメソッドはボタンの値 (例: 30、60、または 90) を受け取り、 ゲーム時間 それに応じて変化します。さらに、スクリプトは選択したタイマー期間を反映するようにページのタイトルを更新し、ユーザーに残り時間がどれだけあるかを明確にします。

動的な動作のために、イベント リスナー、特に 指示。これにより、ユーザーがいずれかのボタンをクリックしたときにスクリプトが反応できるようになります。各ボタンには ID が割り当てられており、クリックすると、 関数を使用して、それぞれの時間値を渡します。このアプローチは、HTML 構造内でインライン JavaScript を繰り返す必要がなく、複数のボタンを効率的に処理するのに役立ちます。このスクリプトには、次のようなインライン イベント ハンドラーを使用できるフォールバック オプションも含まれています。 モジュール性よりもシンプルさが優先される場合。

代替ソリューションでは、 ボタンにイベントを設定します。このメソッドは、 ボタンをクリックすると直接機能します。これは単純なアプローチですが、イベント リスナー メソッドの柔軟性に欠けています。この方法の単純さは、小規模でそれほど複雑ではないアプリケーションに役立ちます。ただし、よりスケーラブルなコードの場合、イベント リスナーは柔軟性が高く、HTML 構造を直接変更せずにスクリプトを簡単に更新できます。どちらの方法も、ユーザーの選択に基づいてタイマーを調整し、タイトルを動的に更新するという同じ問題を解決することを目的としています。

最後に、JavaScript テスト フレームワークである Jest を使用して単体テストを実装します。の 関数は、タイマーが適切に更新されることを検証するために重要です。これらの単体テストでは、タイマーが 30 秒、60 秒、90 秒のいずれに調整されるかなど、複数のシナリオをテストすることで、スクリプトの正確性を確認します。のようなコマンド そして 実際のタイマー値とページ タイトルが期待される結果と一致することを確認するために使用されます。このテスト フェーズでは、タイマー ロジックがさまざまなユースケースにわたって適切に機能していることを確認し、ソリューションの堅牢性に対する信頼を提供します。

// Solution 1: Using event listeners to change timer value dynamically
let gameTime = 30 * 1000; // Default timer set to 30 seconds
const titleElement = document.querySelector('title');
function changeTimer(value) {
    gameTime = value * 1000; // Update timer to selected value
    titleElement.innerText = value + 's'; // Update the title
}
// Attach event listeners to buttons
document.getElementById('thirty').addEventListener('click', () => changeTimer(30));
document.getElementById('sixty').addEventListener('click', () => changeTimer(60));
document.getElementById('ninety').addEventListener('click', () => changeTimer(90));
// HTML Buttons:
// <button id="thirty" type="button">30s</button>
// <button id="sixty" type="button">60s</button>
// <button id="ninety" type="button">90s</button>

<script>
let gameTime = 30 * 1000;
function changeTimer(value) {
    gameTime = value * 1000;
    document.title = value + 's';
}
</script>
<button onClick="changeTimer(30)">30s</button>
<button onClick="changeTimer(60)">60s</button>
<button onClick="changeTimer(90)">90s</button>

// Jest Test Cases
test('Timer should update to 30 seconds', () => {
    changeTimer(30);
    expect(gameTime).toBe(30000);
    expect(document.title).toBe('30s');
});
test('Timer should update to 60 seconds', () => {
    changeTimer(60);
    expect(gameTime).toBe(60000);
    expect(document.title).toBe('60s');
});
test('Timer should update to 90 seconds', () => {
    changeTimer(90);
    expect(gameTime).toBe(90000);
    expect(document.title).toBe('90s');
});

タイマーのカスタマイズによるゲームのインタラクションの強化

タイピング ゲームでタイマーを変更するときに考慮すべきもう 1 つの側面は、全体的なユーザー エクスペリエンスとインターフェイスです。ボタンを使用してゲーム タイマーを調整することに加えて、選択したタイマーについてプレーヤーに視覚的なフィードバックを提供することが重要です。これは、カウントダウン表示など、ページ上の他の要素を更新することで実現できます。ボタンをクリックしてタイマーを設定すると、カウントダウン タイマーがすぐに開始され、ユーザーにリアルタイムのフィードバックが提供されます。これにより、インタラクションがスムーズかつ直感的になり、ゲームがより魅力的なものになります。

これを実装するには、JavaScript の 関数。タイマーをセットしたら、 セット間隔 タイマー値を 1 秒ごとに減らすカウントダウンを作成するために使用できます。タイマーがゼロになると、この機能はゲームを停止するか、ユーザーに時間切れを警告します。この機能は、ボタンを使用してタイマーを動的に変更する機能と組み合わせることで、ゲームプレイのエクスペリエンスを大幅に向上させます。応答性の高いインターフェイスはプレーヤーの関心を維持するための鍵であり、リアルタイムのフィードバックはそれを達成する 1 つの方法です。

さらに、エラー処理も考慮する必要があります。たとえば、ユーザーがタイマーを設定せずにゲームを開始しようとした場合、有効な時間を選択するようにメッセージを表示することができます。検証メカニズムを組み込むことで、ゲームがスムーズに動作し、潜在的な問題が軽減されることが保証されます。このタイプの検証は、ユーザー エクスペリエンスを向上させるだけでなく、ゲームの信頼性にも貢献し、プレイヤーが不必要な混乱に直面しないようにします。

1. 使い方 カウントダウンを作成するには?
2. 使用できます 1000 ミリ秒 (1 秒) ごとに実行するように設定し、そのたびにタイマー値を減らします。値がゼロに達したら、次のコマンドを使用してカウントダウンを停止できます。 。
3. 目的は何ですか ?
4. によって開始されたカウントダウンやその他の繰り返しアクションを停止するために使用されます。 。カウントダウンがゼロになったときに確実に停止することが重要です。
5. HTML タイトルを動的に更新するにはどうすればよいですか?
6. 使用 ページタイトルのテキストを設定します。これは内で更新できます 選択した時間値に基づいて機能します。
7. タイマーを選択するときにユーザーエラーを処理できますか?
8. はい。カウントダウンを開始する前に、有効なタイマー オプションが選択されているかどうかを確認することで、検証を追加できます。有効な時間が選択されていない場合は、アラートまたはプロンプトを表示できます。
9. ボタンをクリックしたときに関数をトリガーするにはどうすればよいですか?
10. を使用してボタンに機能を割り当てることができます または直接使用して ボタンの HTML 要素内。

タイピング ゲームに動的なタイマー調整を組み込むと、プレーヤーのエクスペリエンスが大幅に向上します。ユーザーが単純な HTML ボタンを使用してタイマーを変更し、ゲームのインターフェイスをリアルタイムで更新できるようにすることで、開発者はゲームをよりインタラクティブかつ柔軟にすることができます。このタイプの制御は、さまざまなスキル レベルに対応するのに役立ちます。

イベント リスナー、エラー処理、単体テストなどのベスト プラクティスを使用すると、ゲームがスムーズに実行され、信頼性の高いユーザー エクスペリエンスが提供されます。これらの機能を実装すると、ゲームの機能が強化されるだけでなく、プレイヤーは応答性の高いユーザーフレンドリーなメカニズムにさらに関心を持ち続けることができます。