JavaScriptを使用してシンプルなWindows8ゲームを作成する：入力とサウンド

この一連の投稿では、HTML5、JavaScript、WINJS、およびCreateJSを使用して、シンプルなWindows8ゲームを作成する方法を示します。 。 ゲームは、XNAサンプルゲーム「Catapult Wars Lab」に基づいています。 Webテクノロジーに基づいたWindows 8の新しいバージョンを開発する際に、そのゲームの資産を再利用します。 この投稿では、ユーザーの入力に応答し、サウンドを追加することで物事をもう少し活気づけます。

キーテイクアウト

• チュートリアルでは、HTML5、JavaScript、Winjs、およびCreateJを使用してシンプルなWindows 8ゲームを作成する方法を示しています。ゲームはXNAサンプルゲーム「Catapult Wars Lab」に基づいています。
ゲームは、マウス、タッチ、ペン、さらにはジェスチャーなどのさまざまな形式のユーザー入力に応答するように設計されており、MSPointerシステムとmsgestureの実装を使用して、タップやダブルタップなどのジェスチャーを検出します。
• このゲームには、HTMLオーディオ要素とPreloAdjsを使用してサウンドエフェクトも組み込まれており、ゲームが開始されたときにサウンドファイルの準備が整っていることを確認し、ゲームエクスペリエンスを向上させます。

ユーザー入力の取り扱い

もちろん、ランダム、時間ベース、精密ベース（「今すぐクリック...今！」など）など、照準作業を撮影する方法はたくさんありますが、この場合、方向と速度の両方を示す線を描画させます。 まず、default.jsの上部近くに新しい変数を追加しましょう。

Windows 8は、マウス、タッチ、ペンなど、いくつかの描画方法をサポートしています。ゲームは、ユーザーが持っているものをサポートするのに十分な柔軟性が必要です。  幸いなことに、MSPointerシステムは、これらすべてのサポートを1つに組み合わせています。  MSPOINTERDOWN/UPを使用して照準を開始および終了し、MSPOINTERMOVEを使用してフィードバックを提供し、ユーザーがAIMを調整します。 ちなみに、TAP、ダブルタップなどのジェスチャーを検出するためのMSGESTUREを介した優れたサポートもあります。入力とジェスチャーを処理するための良い例は、MSDNの「Ballineight」サンプルです。 これらのイベントは、リスナー関数を指して、発射時に呼ばれることによって使用されます。  Initialize（）関数の上部を追加して、今すぐ世話をしましょう。 そして今、関数自体のために：あなたが好きな場所に追加しますが、私はupdate（）とfireshot（）の間に配置しました： メモはここに残されています。  簡単にするために、AdachAim（）関数中にAIM％を使用してテキストを表示したり、照準矢印を描画したりすることを省略しました。  先に進んで、それを追加してみてください - 以前の部分から、私たちはすでに必要なものとまったく同じテクニックを使用しています。 そして、私たちが目的を計算するのに役立つ機能： 繰り返しになりますが、シンプルさはその日を支配し、これはプレーヤー1のみですが、ここに何が起こっているのかがあります。

行239-241 - 最初からエンドポイントまでの距離から新しいポイントを作成します。  フレーム/アップデートごとに適用するために、良い速度にスケーリングしてください。
• 行242および244 - XとYが制限されていることを確認してください。
行243＆245 - ショットが敵に向かっていることを確認してください...多かれ少なかれ。

以前には、プレイヤー1が常にランダムに火をつけるように、（）update（）に一時的なコードを追加しました。  これで、新しいAIMVectorを使用するためにそれを置き換えることができます。 先に進んでゲームを実行してください… これで、マウス、ペン、またはタッチを使用してショットをコントロールできます！

「私は物事を聞いているに違いない！」 - サウンドの追加

ゲーム開発者としての私たちの仕事は、私たちがいくらかの音を立てるまで行われません。  パート2にサウンドファイルをすでに追加しているため、ロードして次のステップを踏んでみましょう。 まず、default.jsのいくつかの変数が物事を整頓します： パート2から、ゲームが開始されたときにリソースが準備されていることを確認するために、PreloAdjsをすでに配線していることを思い出してください。  同じアプローチをサウンドで使用できますので、マニフェストに追加しましょう。 これらのファイルを使用するには、HTMLオーディオ要素のインスタンスを作成します。  簡単に言えば、サウンドファイルごとに1つのオーディオインスタンスを作成するだけで、そのインスタンスが完了する前に1つのサウンドが再生できないため、おそらくクリッピングに遭遇するでしょう。  これに対処するためのいくつかのアプローチがあります（たとえば、「HTML5オーディオとJavaScriptコントロール」を参照してください。 ）、しかし、サウンドを再生するたびに、1つのインスタンスを使用するという単純な＆のことを行います。 この例では、soundjs（createjsの別の部分）を使用することはありませんが、もちろんスピンのために撮影することを歓迎します。 プレイサウンド（ファイル）ヘルパー関数を追加します： それでおしまい！  次に、正しいファイルを指す定数を指定して、それを呼び出します。  これをいくつかの場所で行います。 まず、FireShot（）に電話を追加します。 今、ProcessHit（）： コメントが言及しているように、カタパルトを破壊するために複数のヒットを取得したい場合は、「爆発」の代わりに「ヒット」サウンドを使用できます。 そして最後に、endgame（）でエンドウィンまたは負けサウンドをプレイします： 先に進んで、物事を試してみてください。

ゲーム…そしてオン…そしてオン…

おめでとう！  あなたはゲームを作りました！ 私たちはこれらの投稿で多くの根拠をカバーしましたが、何でもすると、他にもたくさんのが>たくさんあります。  それらのいくつかを刺してみませんか？

• 画面調整 - ポートレート/ランドスケープ、スナップ/塗りつぶし。  CSSメディアのクエリについて学ぶ絶好のチャンス！
タッチ/ジェスチャーのサポートの改善
スプライト/アニメーション - ショットヒット/ミス、カタパルトプルバック/火、カタパルトは破壊されました
• ゲームプレイダイナミクス - 風、新しいシーン、新しいカタパルト機能/アップグレード、弾薬の選択などの追加
山と移動雲を背景に追加します（資産はすでにそこにあります）
• インテリジェンスを現在非常に人工インテリジェンスに追加します ライブタイルの使用を検討してください - プレーヤーの最後/ハイスコアを表示するかもしれませんか？
• 楽しむ！  あなたが追加する素晴らしい新しいものについて聞くのを楽しみにしています！
JavaScriptを使用したシンプルなWindows8ゲームの作成についてよく尋ねる質問ゲームキャラクターにもっと複雑な動きを追加するにはどうすればよいですか？
ゲームキャラクターに複雑な動きを追加するには、「requestAnimationFrame」メソッドを使用できます。この方法では、ブラウザの次の塗り替えの前にアニメーション関数を呼び出すことにより、よりスムーズなアニメーションを作成できます。この方法を使用して、ユーザーの入力またはゲームロジックに基づいてゲームキャラクターの位置を更新できます。たとえば、ユーザーが特定のキーを押したときにキャラクターをジャンプさせるために使用できます。
ゲームにサウンドエフェクトを追加するにはどうすればよいですか？ゲーム体験。 JavaScriptの「オーディオ」オブジェクトを使用して、サウンドファイルを再生できます。サウンドを再生するには、新しいオーディオオブジェクトを作成し、「再生」メソッドを呼び出す必要があります。また、ボリュームを制御し、サウンドをループし、それぞれ「ボリューム」、「ループ」、「一時停止」メソッドを使用してサウンドを停止することもできます。
ゲームの応答性を高めるには、JavaScriptで「window.innerwidth」および「window.innerheight」プロパティを使用できます。これらのプロパティは、それぞれブラウザウィンドウの幅と高さを返します。これらのプロパティを使用して、ブラウザウィンドウのサイズに基づいてゲーム要素のサイズと位置を調整できます。あなたのゲームは非常に複雑になる可能性があります。プレイヤー間のリアルタイム通信を有効にするには、WebSocketを使用する必要があります。また、レイテンシや同期などの問題を処理する必要があります。
ゲームをより良いパフォーマンスのために最適化するにはどうすればよいですか？ 1つの方法は、アニメーションに「RequestAnimationFrame」メソッドを使用することです。この方法は、ユーザーが別のタブに切り替えるとアニメーションを一時停止するため、「setinterval」または「setimeout」よりも効率的です。もう1つの方法は、グローバル変数と閉鎖の使用を最小限に抑えることです。

ゲームにタッチコントロールを追加するにはどうすればよいですか？

ゲームにタッチコントロールを追加するには、JavaScriptで「TouchStart」、「TouchMove」、および「TouchEnd」イベントを使用できます。これらのイベントは、ユーザーが画面に触れ、指を動かし、それぞれ指を持ち上げると発射されます。これらのイベントを使用してゲームキャラクターの動きを制御できます。

Windowsストアでゲームを公開するにはどうすればよいですか？ Windowsストアの開発者アカウント。アカウントを取得したら、認定のためにゲームを送信できます。ゲームが認定プロセスに合格した場合、Windowsストアで公開されます。

ゲームにアプリ内購入を追加するにはどうすればよいですか？ 、windows.applicationmodel.store namespaceを使用する必要があります。この名前空間は、アプリ内購入を実装するために必要なクラスとメソッドを提供します。

ゲームに達成を追加するにはどうすればよいですか？ applicationModel.UserDataAcCounts名前空間。この名前空間は、成果を実装するために必要なクラスとメソッドを提供します。

さまざまなデバイスでゲームをテストするにはどうすればよいですか。 。このツールを使用すると、Windowsデバイスでゲームをリモートデバッグしてテストできます。

以上がJavaScriptを使用してシンプルなWindows8ゲームを作成する：入力とサウンドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。