以前、Donnet の DEMO でオナニー ゲームを見て、その写真と音声を書き留めました。 。 。 。趣味で書き直しました。娯楽のためだけに。 。 。 。 。 。フレームワークは使用せず、すべての js を自分で書きます。 。 。 。 。 。これは、Canvas を初めてプレイする人にとっては役立つかもしれない簡単なチュートリアルです。ご容赦ください。
早速、デモ: 飛行機ゲームから始めましょう。元の投稿者はこれをただ楽しむために書いたもので、本格的なゲームに書き込むつもりはありませんでした。
本題に入りましょう: オナニー ゲーム ファイルには、index.html エントリ ファイル、allSprite.js スプライトのロジック処理ファイル、loading.js 読み込み処理ファイル、および data.js (一部の初期化データ) が含まれています。
まず、通常のゲームは基本的にロードが必要です。ロード ページは、スプライト シートの画像、オーディオなどを含むデータを事前にロードするために使用されます。これは小規模なゲームであるため、一部のオーディオと画像のみをロードする必要があります。内部の読み込みコードは主に次のとおりです。その他は読み込みアニメーションを作成するためのものです。興味がある場合は、デモのコンソールをご覧ください。 >
まず、配列を使用してファイルへのリンクを data.js に保存し、次にこれらのリンクが画像であるかオーディオであるかを判断します。画像の場合は、preLoadImg を使用して画像をロードします。非常に簡単で、新しい画像を作成し、それにリンクを割り当て、ロード後にコールバックするだけです。オーディオは、HTML5 オーディオ dom オブジェクトを生成し、それにリンクを割り当てることによってロードされます。オーディオには「canplaythrough」イベントがあり、ブラウザーがバッファリングのために停止せずに指定されたオーディオ/ビデオの再生を継続できると予想される場合、canplaythrough イベントが発生します。これは、canplaythrough が呼び出された時点でオーディオがほぼロードされており、次のオーディオをロードできることを意味します。このように、すべてがロードされた後、コールバックが行われ、ゲームが開始されます。
ゲームが始まりました。ゲームには多くのオブジェクトが必要になるため、異なるオブジェクト間の各フレームの動きをビヘイビアーを使用して個別に記述することができます。
寫出精靈類別後,就可以透過寫每個的painter以及behavior來產生不同的物件了。接下來就是寫painter了,painter分成兩種,一種是普通的painter,一種就是精靈表painter,因為像爆炸動畫,飛機開槍動畫,都不是一張圖片就能搞定的,所以就需要用到精靈表了:
而繪製這些就要為他們定制一個精靈表繪製器,下面這個是最簡單的精靈表繪製器,針對遊戲的複雜性可以相對的修改精靈表寫法,直到合適,不過原理都大同小異,就是小修小改而已: