ホームページ >ウェブフロントエンド >jsチュートリアル >バニラ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:最終的なタッチ
コンテキストを提供するためにタイトル画面が追加されます。プレーヤー評価システムは、最終スコアに基づいて実装されます。正しい答えを祝うためにアニメーションが追加されます。
さらなる機能強化:
この記事は、いくつかの改善を提案しています。
このチュートリアルは、バニラJavaScriptとCSSの機能を強調して、最小限のコードで機能的で魅力的なゲームを作成する方法を効果的に示しています。 CSSアニメーションのモジュール式アプローチと使用は、現代のWeb開発のためのベストプラクティスを紹介します。
以上がバニラJSとCSSを使用してブラウザベースのゲームを作成する - SitePointの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。