ホームページ >ウェブフロントエンド >jsチュートリアル >バニラJSとCSSを使用してブラウザベースのゲームを作成する - SitePoint

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

William Shakespeare
William Shakespeareオリジナル
2025-03-15 08:23:08509ブラウズ

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

コンセプト:

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

ステップ1:基本構造

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

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

ステップ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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。