この記事は、MicrosoftのWeb開発シリーズの一部です。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。 この記事で説明しています
基本的なゲーム開発哲学ゲーム開発にWebテクノロジーを使用
- ゲームコントロールの追加とai
- 議論されたテクノロジー:
- Visual Studio 2013 Pro、Visual Studio 2013 Community、ASP.NET
コードダウンロード(.zip)
- ゲームを開発するためにまったく新しいスキルセットは必要ありません。実際、HTML、JavaScript、CSSなどの現在のWeb開発スキルは、幅広いゲームでは問題ありません。 Webテクノロジーを使用してゲームを構築すると、ブラウザを使用してほとんどすべてのデバイスで実行されます。 これを証明するために、Webテクノロジーと2つの外部ライブラリのみを使用して、ゼロからゲームを構築することを実証します。1時間も経たないうちに行います。基本的なデザインとレイアウト、コントロールとスプライトから、シンプルな相手の人工知能(AI)まで、さまざまなゲーム開発トピックを取り上げます。ゲームを開発して、PC、タブレット、スマートフォンで動作します。 Web開発者または別の開発ドメインとしてのプログラミングの経験があるが、ゲームを書いた経験がない場合、この記事はあなたを開始します。あなたが私に1時間を与えたら、私はあなたにロープを見せることを約束します。 キーテイクアウト
ゲームデザインの簡素化:基本的なゲームデザインの原則と「Ping」(Pongバリアント)のようなシンプルなゲームから始めて、レイアウトと必須ゲームメカニックに焦点を当てています。
インタラクティブな要素:動的ゲームプレイにJavaScriptとCSSを使用してインタラクティブなゲームコントロールを組み込み、ボールやプレイヤーなどの要素がユーザー入力に効果的に応答するようにします。AI統合:ゲームの対戦相手に基本的な人工知能を実装し、より魅力的なシングルプレイヤーエクスペリエンスを可能にします。
クロスプラットフォームの互換性:包括的なテストのためにBrowserStackなどのツールを利用して、さまざまなブラウザやデバイスでゲームがうまく機能することをテストして確認してください。立ち上がって実行してください
- Visual Studioですべての開発を行います。これにより、変更を加えるにつれてWebアプリを迅速に実行できます。フォローできるように、Visual Studioの最新バージョンを必ず用意してください。 Visual Studio 2013 Proを使用しましたが、Visual Studio 2013 Communityでコードを更新しました。また、MacまたはLinuxをお持ちの場合は、最近ではVisual Studioコードがクロスプラットフォームを利用できます。
このアプリにはサーバーコードが不要なため、Visual Studioで新しい空のWebページプロジェクトを作成することから始めます。ファイルを選択した後、Visual C#オプションを選択して、Webサイトに空のC#テンプレートを使用します|新規| ASP.NET空のWebサイト。
インデックスHTMLファイルには、jQuery、メインスタイルシート、メインJavaScriptファイルの3つのリソースのみが必要です。 Style.cssと呼ばれる空のCSSファイルをプロジェクトに追加し、Ping.jsと呼ばれる空のJavaScriptファイルを追加して、ページを読み込むときにエラーを回避します。
また、ブラウザとデバイスを介してこの問題についてこのアプリ(またはその他)をテストすることを忘れないでください。私が書いたコードは、Chrome、Firefox、Microsoft Edgeなどの最新のブラウザと相互運用可能ですが、再確認するのは常にベストプラクティスです。これで、無料の仮想マシンやhttp://www.browserstack.comなどの他のツールでそれを行うことができます。<span><span> </span><span><span><span>></span> </span><span><span><span>></span> </span> <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span> </span> <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span> </span> <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span>></span> </span><span><span><span></span>></span> </span><span><span><span></span>></span> </span></span></span></span></span></span>
基本設計このページをロードする場合、スタイルが適用されていないため、何も表示されません。 HTMLのmain.cssファイルへのリンクをすでに設定しているため、すべてのCSSをその名前の新しいファイルに配置します。私が最初にすることは、画面上にすべてを配置することです。ページの本体は画面全体を取り上げる必要があるので、最初にそれを設定します:
<span><span><span><div> id<span>="arena"</span>> <span><span><span><div> id<span>="score"</span>> <span><span><span><h1 id="gt">></h1></span> </span> <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span> </span> <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span> </span> <span><span><span></span>></span> </span> <span><span><span></span></span></span></span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="player"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="controls-left"</span>> <span><span><span><div> id<span>="up"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="down"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="controls-right"</span>> <span><span><span><div> id<span>="left"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="right"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span><span><span><span></span></span></span> </div></span>></span> </span>
第二に、アリーナ全体にアリーナの背景画像(下の画像を参照)を適用する必要があります。次に、スコアボードを配置します。これは、他の要素の上に、これが上部と中央に表示されたいと考えています。コマンドの位置:絶対に、私が望む場所に置いて左に置くことができます:50%は窓の上部に途中でそれを置きますが、スコアボード要素の左側から始まります。完全に中央にあることを確認するために、Transformプロパティを使用し、Z-Indexプロパティは常に最上部にあることを保証します。
また、テキストフォントをレトロテーマにしたいです。ほとんどの最新のブラウザで、自分のフォントを含めることができます。 Codeman38(Zone38.net)から適切なプレススタート2Pフォントが見つかりました。フォントをスコアボードに追加するには、新しいフォントフェイスを作成する必要があります:<span>body { </span> <span>margin: 0px; </span> <span>height: 100%; </span><span>} </span>
<span><span> </span><span><span><span>></span> </span><span><span><span>></span> </span> <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span> </span> <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span> </span> <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span>></span> </span><span><span><span></span>></span> </span><span><span><span></span>></span> </span></span></span></span></span></span>
今、スコアはH1タグにあるため、すべてのH1タグのフォントを設定できます。フォントが欠落している場合に備えて、バックアップオプションをいくつか提供します。
<span><span><span><div> id<span>="arena"</span>> <span><span><span><div> id<span>="score"</span>> <span><span><span><h1 id="gt">></h1></span> </span> <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span> </span> <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span> </span> <span><span><span></span>></span> </span> <span><span><span></span></span></span></span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="player"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="controls-left"</span>> <span><span><span><div> id<span>="up"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="down"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="controls-right"</span>> <span><span><span><div> id<span>="left"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="right"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span><span><span><span></span></span></span> </div></span>></span> </span>
他の要素については、画像のスプライトシートを使用します。スプライトシートには、ゲームに必要なすべての画像が1つのファイルに含まれています(下の画像を参照)。このシートに画像がある要素には、スプライトクラスが割り当てられます。次に、各要素について、バックグラウンドポジションを使用して、表示したいスプライトシートのどの部分を定義します。
次に、スプライトシートを使用するすべての要素にスプライトクラスを追加します。これを行うには、簡単にHTMLに戻る必要があります:
<span>body { </span> <span>margin: 0px; </span> <span>height: 100%; </span><span>} </span>
次に、各要素のシート上の各スプライトの位置を示す必要があります。繰り返しになりますが、バックグラウンドポジションを使用してこれを行います:<span><span>#arena</span> { </span> <span>background-image: <span>url(arena.png)</span>; </span> <span>background-size: 100% 100%; </span> <span>margin: 0px; </span> <span>width: 100%; </span> <span>height: 100%; </span> <span>overflow: hidden; </span><span>} </span>
ポジション:プレーヤー、対戦相手、ボールの絶対プロパティは、JavaScriptを使用してそれらを動かしてくれます。今ページを見ると、コントロールが表示され、ボールには不要なピースが付いています。これは、スプライトサイズがデフォルトの128ピクセルよりも小さいため、これらを適切なサイズに調整します。ボールが1つしかないので、そのサイズを直接設定します。<span><span>#score</span> { </span> <span>position: absolute; </span> <span>z-index: 1000; </span> <span>left: 50%; </span> <span>top: 5%; </span> <span>transform: translate(-50%, 0%); </span><span>} </span>
このクラスを追加した後、ゲームははるかに良く見えるコントロールを持っています:<span><span>@font-face</span> { </span> <span>font-family: 'PressStart2P'; </span> <span>src: <span>url('PressStart2P.woff')</span>; </span><span>} </span>
私がする必要がある最後のことは、ページがモバイルデバイスで実行されているときにユーザーの親指であるようにコントロールを配置することです。底の角に貼り付けます:<span>h1 { </span> <span>font-family: 'PressStart2P', 'Georgia', serif; </span><span>} </span>
バウンスボールに従ってください<span><span>.sprite</span> { </span> <span>background-image: <span>url("sprites.png")</span>; </span> <span>width: 128px; </span> <span>height: 128px; </span><span>} </span>
これは単純な概念です。ボール機能は、それを呼ぶときに新しいボールを作成します。新しいキーワードを使用する必要はありません。このパターンは、利用可能なオブジェクトプロパティを明確にすることにより、この変数の周りの混乱の一部を減らします。そして、私はこのゲームを作るのに1時間しかないので、混乱する概念を最小限に抑える必要があります。このパターンの構造、シンプルなボールクラスを作成します:
<span><span><span><div> id<span>="player"</span> class<span>="sprite"</span>><span><span></span></span> </div></span>></span> </span><span><span><span><div> id<span>="opponent"</span> class<span>="sprite"</span>><span><span></span></span> </div></span>></span> </span><span><span><span><div> id<span>="ball"</span> class<span>="sprite"</span>><span><span></span></span> </div></span>></span> </span><span><span><span><div> id<span>="controls-left"</span>> <span><span><span><div> id<span>="up"</span> class<span>="sprite"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="down"</span> class<span>="sprite"</span>><span><span></span></span> </div></span>></span> </span><span><span><span></span></span></span> </div></span>></span> </span><span><span><span><div> id<span>="controls-right"</span>> <span><span><span><div> id<span>="left"</span> class<span>="sprite"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="right"</span> class<span>="sprite"</span>><span><span></span></span> </div></span>></span> </span><span><span><span></span></span></span> </div></span>></span> </span>
新しいボールを作成するには、この関数を定義しただけと呼びます。
<span><span> </span><span><span><span>></span> </span><span><span><span>></span> </span> <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span> </span> <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span> </span> <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span>></span> </span><span><span><span></span>></span> </span><span><span><span></span>></span> </span></span></span></span></span></span>
今、私はボールを動かして画面の周りを跳ね返したいです。まず、ボールのアニメーションを作成するには、ある程度の間隔で更新関数を呼び出す必要があります。最新のブラウザは、RequestAnimationFrameと呼ばれるこの目的のための機能を提供します。これは引数として関数を取り、次にアニメーションサイクルを実行したときにパスイン関数を呼び出します。これにより、ブラウザの更新の準備ができたら、ボールがスムーズなステップで動き回ることができます。パスイン関数を呼び出すと、ページが読み込まれてから数秒で時間が与えられます。これは、アニメーションが時間の経過とともに一貫していることを保証するために重要です。ゲームでは、RequestAnimationFrameの使用が次のように表示されます。
<span><span><span><div> id<span>="arena"</span>> <span><span><span><div> id<span>="score"</span>> <span><span><span><h1 id="gt">></h1></span> </span> <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span> </span> <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span> </span> <span><span><span></span>></span> </span> <span><span><span></span></span></span></span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="player"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="controls-left"</span>> <span><span><span><div> id<span>="up"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="down"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="controls-right"</span>> <span><span><span><div> id<span>="left"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="right"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span><span><span><span></span></span></span> </div></span>></span> </span>
ボールが更新が終了したため、requestAnimationFrameが関数で再び呼び出されることに注意してください。これにより、継続的なアニメーションが保証されます。<span>body { </span> <span>margin: 0px; </span> <span>height: 100%; </span><span>} </span>
ボールの速度(速度)と最後の更新以来の時間を知っているので、ボールを前方に動かすためにいくつかの簡単な物理学を行うことができます:<span><span>#arena</span> { </span> <span>background-image: <span>url(arena.png)</span>; </span> <span>background-size: 100% 100%; </span> <span>margin: 0px; </span> <span>width: 100%; </span> <span>height: 100%; </span> <span>overflow: hidden; </span><span>} </span>
コードを実行してみると、ボールが角度で画面から外れて移動するのがわかります。これは一瞬楽しいですが、ボールが画面の端から外れると、楽しいことが止まります。したがって、次のステップは、図7に実装されているように、画面の端からボールを跳ね返すことです。このコードを追加し、アプリを実行すると、継続的にバウンスするボールが表示されます。可動プレーヤー
今度は、プレイヤーオブジェクトを作成する時が来ました。プレーヤークラスを肉付けする最初のステップは、移動関数をプレイヤーの位置を変更させることです。サイド変数は、プレーヤーが居住する裁判所のどの側面を示し、プレーヤーを水平に配置する方法を指示します。移動関数に渡されたy値は、プレーヤーがどれだけ上または下に移動するかです:
その後、プレイヤーの動きをレイアウトでき、プレーヤーのスプライトがウィンドウの上部または下部に到達した場合、動きを止めることができます。
<span><span>#score</span> { </span> <span>position: absolute; </span> <span>z-index: 1000; </span> <span>left: 50%; </span> <span>top: 5%; </span> <span>transform: translate(-50%, 0%); </span><span>} </span>
2人のプレイヤーを作成し、画面の適切な側面に移動できるようにすることができます。<span><span>@font-face</span> { </span> <span>font-family: 'PressStart2P'; </span> <span>src: <span>url('PressStart2P.woff')</span>; </span><span>} </span>
理論的には、プレーヤーを動かすことができますが、指示なしでは動きません。左側のプレーヤーにいくつかのコントロールを追加します。そのプレーヤーを制御する2つの方法が必要です。キーボード(PCS)を使用して、コントロール(タブレットと電話)をタップします。
><span>h1 { </span> <span>font-family: 'PressStart2P', 'Georgia', serif; </span><span>} </span>
さまざまなプラットフォームでのタッチ入力とマウス入力間の一貫性を確保するために、優れた統合フレームワークHand.js(handjs.codeplex.com)を使用します。まず、ヘッドセクションのHTMLにスクリプトを追加します:<span><span> </span><span><span><span>></span> </span><span><span><span>></span> </span> <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span> </span> <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span> </span> <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span>></span> </span><span><span><span></span>></span> </span><span><span><span></span>></span> </span></span></span></span></span></span>
ボールをキャッチ
ボールが跳ね返ると、プレイヤーにそれをキャッチさせたいと思います。それが捕まると、ボールには所有者がいて、その所有者の動きに従います。ボールの移動方法に機能を追加し、ボールが続く所有者を可能にします。
<span><span><span><div> id<span>="arena"</span>> <span><span><span><div> id<span>="score"</span>> <span><span><span><h1 id="gt">></h1></span> </span> <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span> </span> <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span> </span> <span><span><span></span>></span> </span> <span><span><span></span></span></span></span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="player"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="controls-left"</span>> <span><span><span><div> id<span>="up"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="down"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="controls-right"</span>> <span><span><span><div> id<span>="left"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="right"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span><span><span><span></span></span></span> </div></span>></span> </span>
現在、プレーヤーオブジェクトの位置を取得する方法はないので、プレイヤーオブジェクトにgetpositionとgetsideアクセサを追加します:<span>body { </span> <span>margin: 0px; </span> <span>height: 100%; </span><span>} </span>
さて、ボールに所有者がいる場合、その所有者に続きます。しかし、どうすれば所有者を決定できますか?誰かがボールをキャッチしなければなりません。プレーヤーのスプライトの1つがボールに触れる時期を判断しましょう。それが起こったら、私はそのプレーヤーにボールの所有者を設定します。<span><span>#arena</span> { </span> <span>background-image: <span>url(arena.png)</span>; </span> <span>background-size: 100% 100%; </span> <span>margin: 0px; </span> <span>width: 100%; </span> <span>height: 100%; </span> <span>overflow: hidden; </span><span>} </span>
<span><span>#score</span> { </span> <span>position: absolute; </span> <span>z-index: 1000; </span> <span>left: 50%; </span> <span>top: 5%; </span> <span>transform: translate(-50%, 0%); </span><span>} </span>
最後の追加は、すべてのコントロールのタッチサポートです。適切な変更をプレーヤーの目的に変更します。また、画面上のどこにでも触れるとボールが発射されます。
<span><span>@font-face</span> { </span> <span>font-family: 'PressStart2P'; </span> <span>src: <span>url('PressStart2P.woff')</span>; </span><span>} </span>
keep score以下のコードは、これらのイベントに反応して、スコアを更新してボールを引き渡します。このコードをJavaScriptドキュメントの下部に追加します。
ボールが相手を通り過ぎたとき(相手が動かないので、それほど難しくありません)、スコアが上がり、ボールが相手に手渡されます。ただし、対戦相手はボールを保持するだけです。
<span><span>.sprite</span> { </span> <span>background-image: <span>url("sprites.png")</span>; </span> <span>width: 128px; </span> <span>height: 128px; </span><span>} </span>
スマートを取得この種のシステムを設計するとき、州で考えるのは良いことです。対戦相手AIには、次の3つの状態があります。私は、より人間の要素を追加するための次のアクションの間の状態になります。 AIオブジェクトのまさにそれから始めてください:
<span><span> </span><span><span><span>></span> </span><span><span><span>></span> </span> <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span> </span> <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span> </span> <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span>></span> </span><span><span><span></span>></span> </span><span><span><span></span>></span> </span></span></span></span></span></span>
AIの状態によっては、別のアクションを実行する必要があります。ボールと同じように、私はRequestAnimationFrameで呼び出すことができるアップデート機能を作成して、その状態に従ってAI法を持つことができます。
<span><span><span><div> id<span>="arena"</span>> <span><span><span><div> id<span>="score"</span>> <span><span><span><h1 id="gt">></h1></span> </span> <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span> </span> <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span> </span> <span><span><span></span>></span> </span> <span><span><span></span></span></span></span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="player"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="controls-left"</span>> <span><span><span><div> id<span>="up"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="down"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="controls-right"</span>> <span><span><span><div> id<span>="left"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span><div> id<span>="right"</span>><span><span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span><span><span><span></span></span></span> </div></span>></span> </span>
次の状態は簡単です。対戦相手はボールの垂直方向に移動し、AIは待機状態に移行して、いくつかの反応時間の遅い時間を注入します。以下のコードは、これらの2つの状態を示しています:<span>body { </span> <span>margin: 0px; </span> <span>height: 100%; </span><span>} </span>
AIは、ボールをたどり、一瞬待たなければならないことを交互にします。次に、ゲーム全体の更新関数にコードを追加します:<span><span>#arena</span> { </span> <span>background-image: <span>url(arena.png)</span>; </span> <span>background-size: 100% 100%; </span> <span>margin: 0px; </span> <span>width: 100%; </span> <span>height: 100%; </span> <span>overflow: hidden; </span><span>} </span>
ゲームを実行すると、対戦相手がボールの動きに従っているのがわかります。30行未満のコードで悪いAIはありません。もちろん、相手がボールをキャッチした場合、何もしません。したがって、時間の最後のトリックについては、照準状態のアクションを処理する時が来ました。AIにランダムに数回動かせてから、ランダムな方向にボールを発射してほしい。まさにそれを行うプライベート関数を追加しましょう。 AimandFire関数をAiming Case Statementに追加すると、完全に機能的なAIが再生されるようになります。
ラッピング
<span><span>#score</span> { </span> <span>position: absolute; </span> <span>z-index: 1000; </span> <span>left: 50%; </span> <span>top: 5%; </span> <span>transform: translate(-50%, 0%); </span><span>} </span>
今では、PC、スマートフォン、タブレットで機能する本格的なWebゲームがあります。このゲームには多くの改善があります。たとえば、スマートフォンではポートレートモードでは少し厄介に見えます。そのため、適切に動作するために、携帯電話をランドスケープで保持していることを確認する必要があります。これは、Webおよびそれ以降のゲーム開発の可能性のほんの少しのデモンストレーションです。 この記事をレビューしてくれた技術専門家のMohamed Ameen Ibrahimに感謝します。JavaScriptを使用したより実践的な
この記事は、Microsoft Edge Browserや新しいEdgeHTMLレンダリングエンジンなどの実用的なJavaScript学習、オープンソースプロジェクト、および相互運用性のベストプラクティスに関するMicrosoft Tech EvangelistsのWeb開発シリーズの一部です。dev.modern.ieの無料ツールを備えたMicrosoft Edge(Windows 10用のデフォルトのブラウザ)を含むブラウザやデバイス全体でテストすることをお勧めします。
時代遅れのライブラリ、レイアウトの問題、アクセシビリティをスキャンしてください Mac、Linux、およびWindows
に仮想マシンを使用します独自のデバイスでMicrosoft Edgeをリモートテスト
Githubのコーディングラボ:クロスブラウザーテストとベストプラクティス
マイクロソフトエッジとエンジニアおよびエバンジェリストのWebプラットフォームでの詳細な技術学習:
- Microsoft Edge Web Summit 2015(新しいブラウザ、新しいサポートされているWebプラットフォーム標準、およびJavaScriptコミュニティのゲストスピーカーに期待すること) woah、Mac&Linuxでエッジとieをテストできます! (レイ・バンゴから)
- webを壊さずにjavascriptを前進させます(クリスチャンハイルマンから)
- ウェブを機能させるエッジレンダリングエンジン(ジェイコブロッシから)
- Webglを使用した3Dレンダリング(Vorlon.jsおよびBabylonjsプロジェクトを含むDavid Catuheから)
- ホストされたWebアプリとWebプラットフォームのイノベーション(Manifold.jsプロジェクトを含むKevin HillとKiril Seksenovから)
- のビジュアルスタジオコード
Node.jsとAzure
- の無料トライアルを使用した コード
-
Visual StudioとASP.NETでWebゲームの構築に関するよくある質問(FAQ)
Visual StudioとASP.NETを使用してマルチプレイヤーゲームを作成するにはどうすればよいですか?
Visual Studioでのゲームのパフォーマンスを最適化するにはどうすればよいですか?
Visual Studioでゲームのパフォーマンスを最適化する方法はいくつかあります。まず、ビルトインプロファイリングツールを使用して、コード内のボトルネックを識別する必要があります。次に、コードの最適化、データ構造の最適化、アルゴリズムの最適化などの手法を使用して、コードのパフォーマンスを改善できます。さらに、最新のグラフィックカードのハードウェアアクセラレーション機能を使用して、ゲームのレンダリングパフォーマンスを向上させる必要があります。 Visual Studioのゲームのサウンドエフェクトと音楽には、System.media namespaceでSoundPlayerクラスを使用することが含まれます。 Playメソッドを使用して、サウンドエフェクトや音楽トラックを再生し、STOPメソッドを使用してサウンドの再生を停止できます。また、PlayLoopingメソッドを使用して、継続的にサウンドを再生することもできます。 SoundPlayerクラスはWAVファイルをサポートするため、Sound EffectsとMusicトラックをこの形式に変換する必要があります。 Visual Studioで開発されるには、いくつかのステップが含まれます。まず、実行可能ファイルを作成するには、リリースモードでゲームを構築する必要があります。次に、InstallShieldなどのツールを使用してゲーム用のインストーラーを作成する必要があります。最後に、自分のウェブサイト、オンラインゲームストア、アプリストアなど、さまざまなチャネルを通じてゲームを配布できます。 > Visual StudioとASP.NETを使用して3Dゲームを開発することは可能ですが、これらのツールで最も一般的なユースケースではありません。 ASP.NETは主にWeb開発フレームワークであり、Visual Studioは汎用開発環境です。 3Dゲームの開発に興味がある場合は、3Dゲーム開発に向けてより高度なツールと機能を提供するUnityやUnreal Engineなどの専用ゲーム開発エンジンの使用を検討することをお勧めします。 -Visual Studioでの私のゲームへの言語サポート?
Visual Studioでゲームに多言語サポートを追加するには、ASP.NETのローカリゼーション機能を使用することが含まれます。リソースファイルを使用して各言語のテキストを保存し、ResourceManagerクラスを使用して、ユーザーの言語設定に基づいて適切なテキストを取得できます。 CultureInfoクラスを使用して、数値形式、日付形式、その他のロケール固有の設定の違いを処理することもできます。 Visual Studioには、組み込みのテストツールの使用が含まれます。ユニットテストを使用して、ゲームの個々のコンポーネント、統合テストをテストしてこれらのコンポーネントがどのように連携するか、UIテストでユーザーインターフェイスをテストできます。 Visual Studioのデバッグツールを使用して、コードのバグを識別および修正することもできます。
以上がVisual StudioとASP.NETで1時間以内にWebゲームを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1)解析段階で抽象的構文ツリー(AST)を生成します。 2)ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3)実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

はい、JavaScriptのエンジンコアはCで記述されています。1)C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2)V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3)JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ホットトピック









