バニラJSとCSSを使用してブラウザベースのゲームを作成する - SitePoint

この記事では、バニラJavaScriptとCSSのみを使用してブラウザベースのフラグ推測ゲームを構築し、外部ライブラリやフレームワークなしで最新のWebテクノロジーの力を紹介します。この魅力的なゲームをステップバイステップで作成しましょう。

コンセプト：

このゲームには、フラッグ絵文字と複数選択オプションがあります。プレイヤーは国を選択し、フィードバックを受け取り、ラウンドで進行します。

ステップ1：基本構造

国とその旗のリストが必要です（絵文字を使用）。単純なインターフェイスには、フラグと5つの回答ボタンが表示されます。 CSSは、レスポンシブデザインにグリッドレイアウトを使用します。プロジェクト構造には、HTMLファイル、国データを含むdata.jsonファイル、およびJavaScript、ヘルパー関数、CSS、および画像用のフォルダーが含まれます。

ステップ2：単純なプロトタイプ

fetchを使用してdata.jsonをロードしてから、ゲームを開始します。 startGame関数は、国リストをランダム化し、回答を選択し、さらに4つの国を選択し、FlagとAnswerボタンでDOMを更新します。 checkAnswer関数は、プレイヤーの選択を評価し、フィードバックを提供します。フィッシャー - シャッフルアルゴリズムは、国の順序を無作為にします。

ステップ3：モジュラーコード

コード組織を改善するために、JavaScriptモジュールを使用します。 HTMLは、Helper機能（ loadCountries and shuffle ）を個別のファイルからインポートするstep3.jsインポートします。ゲームロジックはGameクラス内でカプセル化され、データの整合性と保守性が向上します。

ステップ4：得点とゲームオーバー

GameコンストラクターにはnumTurnsが含まれるようになりました。 DOMは更新され、スコアディスプレイ、リプレイボタン、ゲームオーバー画面が含まれています。 startメソッドはスコアとターンカウンターを初期化し、 nextTurnメソッドはラウンドの進行を処理し、スコアを更新し、すべてのターンが完了したときにゲームオーバー状態をトリガーします。 gameOverメソッドには、最終スコアが表示されます。

ステップ5：アニメーション

CSSアニメーションは、ユーザーエクスペリエンスを向上させます。 KeyFramesは、カントリーリストのスライドアニメーションを作成し、ターンの間にスムーズに表示され、消えます。 animationendイベントは、スムーズな移行を保証します。

ステップ6：最終的なタッチ

コンテキストを提供するためにタイトル画面が追加されます。プレーヤー評価システムは、最終スコアに基づいて実装されます。正しい答えを祝うためにアニメーションが追加されます。

さらなる機能強化：

この記事は、いくつかの改善を提案しています。

• 効果音の追加。
• Webワーカーを使用したオフラインプレイを有効にします。
• ゲーム統計をローカルストレージに保存します。
• ソーシャルメディア共有機能を追加します。

このチュートリアルは、バニラJavaScriptとCSSの機能を強調して、最小限のコードで機能的で魅力的なゲームを作成する方法を効果的に示しています。 CSSアニメーションのモジュール式アプローチと使用は、現代のWeb開発のためのベストプラクティスを紹介します。

以上がバニラJSとCSSを使用してブラウザベースのゲームを作成する - SitePointの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。