ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptを使用したシンプルなWindows8ゲームの作成:Windows8アプリの基本

JavaScriptを使用したシンプルなWindows8ゲームの作成:Windows8アプリの基本

Joseph Gordon-Levitt
リリース: 2025-02-25 10:11:09
オリジナル
611 人が閲覧しました

このチュートリアルは、HTML5、JavaScript、Winjs、およびCreateJSライブラリを使用してシンプルなWindows 8ゲームを構築することをガイドし、XNAサンプル「Catapult Wars Lab」を適応させます。

カバーされている重要な概念:

Visual Studio2012でWindows8開発環境をセットアップします。

新しいプロジェクトを作成し、その構造を理解しています ゲームのインターフェイスにHTMLとCSSを使用しています ゲームロジック、世界管理、画像の読み込み、ヘルパー機能にJavaScriptを採用しています。
    状態の更新とコンテンツディスプレイ用のゲームループを実装します。
  • さまざまな画面サイズのCSSメディアクエリを使用してゲームレイアウトを調整します。 データの損失を防ぐために、アプリの停止の前にゲーム状態を保存します。
  • プロジェクトのセットアップと構造:
  • Windows 8とVisual Studio 2012をインストールすることから始めます。VisualStudioで新しいJavaScript「Blank App」プロジェクトを作成し、「catapultgame」という名前を作成します。 プロジェクトの主要なコンポーネントには、
  • が含まれます
  • (winjs):Windows 8アプリの開発にJavaScriptとCSSを提供します。
  • :レスポンシブデザインのメディアクエリを含むスターターCSS。

:初期JavaScriptロジックが含まれています。 これは、ゲームのコア機能が存在する場所です

:ゲームのメインHTMLページ。

    :プロジェクト設定(名前、説明など)。
  • References/Windows Library for JavaScript
  • フォルダー:デフォルトの画像が含まれています。これらをゲームアセットに置き換えます。
  • css/default.css
  • js/default.js
  • 空のプロジェクトを実行すると、「Content Goes here」テキストを備えた基本的なHTMLページが表示されます。このテキストは、
  • ファイルから発生します。default.html
  • html、css、およびjavascriptの役割:package.appxmanifest
  • images
  • html(
):

ゲームの構造とコンテンツを定義します。Creating a Simple Windows 8 Game with JavaScript: Windows 8 App Basics

css():は、ゲームの外観をスタイルし、さまざまな画面の向きとウィンドウサイズのメディアクエリを使用してレスポンシブレイアウトを処理します。 default.html

javascript():

ゲームロジックを管理し、ユーザー入力を処理し、ゲーム状態を更新し、資産をロードし、キャンバスでゲームをレンダリングします。 およびの関数は、それぞれの初期化とゲームの状態をそれぞれサスペンションの前に保存するために重要です。

  • default.html次のステップとさらなる学習:
  • 次の投稿では、ゲームの開発を詳述し、「Catapult Wars Lab」の資産を統合し、ゲームのコアメカニックを構築します。より高度な例については、MSDN JavaScriptとHTML5タッチゲームサンプルを参照してください。 チュートリアルは、シンプルさを強調しています。より包括的なゲーム開発技術は、提案されたさらなる読書で利用できます。

以上がJavaScriptを使用したシンプルなWindows8ゲームの作成:Windows8アプリの基本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート