Simplegameでアニメーションを構築する方法。 jsあなたのHTML5ゲーム - ダミー

さまざまなHTML5ゲームエンジンの機能をすべて単純化するライブラリを構築することは可能です。ライブラリ：simpleGameの使用を検討してください。 js。このライブラリは使いやすく、洗練されたゲーム開発が可能です。

シーン： このオブジェクトは、HTMLキャンバスオブジェクトで始まり、メインループを追加します。シーンは、ゲームを制御する統一オブジェクトです。
<！ - 1 - >
スプライト： これらのオブジェクトは画面上を移動する要素です。ゲーム要素のほとんどはスプライトです。各スプライトは1つのシーンに属している必要がありますが、必要な数のスプライトを持つことができます。スプライトはイメージに基づいています。

実際には、このコードは見た目よりも洗練されています。それは何ですか？

ページにキャンバスを追加します。 灰色の四角形は、実際にページに自動的に追加されたキャンバスタグです。
ゲームのループを開始します。 このプログラムのゲームループはすでに20フレーム/秒で実行されています。
スプライトを含んでいます。 ボールイメージはスプライトであり、任意の方向に任意の速度で移動する機能と、衝突検出などの他の興味深い機能を内蔵しています。
<！ - 3 - >
ボールが動いています。 片面から出たときに画面の反対側に自動的に折り返します。

ここにコードリスト全体があります：

redBall。 html //単一の動いているボールを持つ単純なゲームvarシーン; varボール;関数init（）{シーン=新しいシーン（）;ボール=新しいスプライト（シーン、 "redBall。png"、50、50）;玉。 setMoveAngle（180）;玉。 setSpeed（3）;シーン。 start（）;} //終了するinit関数update（）{シーン。 clear（）;玉。 update（）;} // end update

基本的なHTML5ページから始まり、いくつかの機能を追加してゲーム環境にします。

ゲームページを構築する方法

基本ページを作成することから始めます。

HTML5ページから始めます。

他のWeb開発で使用していたのと同じツールを使用できます。他のHTML5ドキュメントと同様に、基本的なHTML5テンプレートを作成します。
simpleGameをインポートします。 jsライブラリ。

この図書館はウェブサイトから無料で入手できます。タグを使用してライブラリをインポートします。 srcプロパティをライブラリの名前（simpleGame.js）に設定します。
HTMLをシンプルにします。

あなたはあまり必要ありません。ゲームエンジンはシーンを含むキャンバスを作成します。タイトル、手順、またはスコアボードのようなツールをページに置くこともできますが、ゲームエンジンがほとんどの作業を行います。
本体のロード時にinit（）を呼び出します。

ボディがロードされるときに呼び出される関数を持つことは非常に一般的です。 bodyタグにonload = "init（）"を追加して、init（）メソッドを呼び出します。
コードを格納する2番目のスクリプトタグを作成します。

カスタムコード用の2番目のスクリプトタグが必要です。ライブラリをインポートするタグの後ろに置きます。
スクリプトに2つの関数を配置します。

すべてのsimpleGameプログラムには少なくとも2つの関数があります。init（）は起動時に起こり、update（）はフレームごとに1回発生します。

ゲームを初期化する方法

ゲームの初期化部分は、ページの読み込み時に発生します。主にスプライトやその他のリソースを設定することで取り上げられています。コードは次のとおりです：

var scene; varボール;関数init（）{シーン=新しいシーン（）;ボール=新しいスプライト（シーン、 "redBall。png"、50、50）;玉。 setMoveAngle（180）;玉。 setSpeed（3）;} // end init

ほとんどのゲームは、同様のスタイルの初期化を使用します。ゲームを設定する方法は次のとおりです。

シーンを含む変数を定義します。

すべてのsimpleGameゲームには少なくとも1つのシーンオブジェクトがあります。任意の関数の外にシーンを定義し、すべてのシーンで使用できるようにします。実際には、init（）関数内でシーンを作成します。
各スプライトの変数を定義します。

ゲーム内のすべてのスプライトは、グローバル変数にも属している必要があります。 init（）関数でスプライトを作成しますが、変数をすべての関数で使用できるようにする必要があります。
init（）関数をビルドします。

この関数はbody onloadによって呼び出されます。ページがメモリにロードされた後に実行されます。
シーンを作成します。

シーンを構築するには、シーンクラスのインスタンスを作成します。あなたが本当に言っていることは、「私にシーンオブジェクトを作ってこの特定のインスタンスを呼び出す」シーンです。 '"シーンにはパラメータは必要ありません。
ボールスプライトを作成します。

ボールはスプライトのインスタンスです。スプライトを作成するには、さらに情報が必要です。シーン、画像ファイル名、幅、高さが必要です。
ボールの移動角度を設定します。

ボールが動く角度を変更できます。角度は地図上のように度で測定されます。
ボールの移動速度を設定します。

ボールの速度も決めることができます。
シーンを開始します。

すべての設定を終えたら、シーンを開始するように指示します。

ゲームアニメーションを更新する

シーンを開始すると、タイマーが開始されます。毎秒20回、あなたのページでupdate（）という関数を呼び出します。だから、あなたはそのような機能を持つ必要があり、あなたのゲームを実行するためのいくつかのコードが必要です。

update（）関数もあまり難しくありません。

function update（）{シーン。 clear（）;玉。

前の画面をクリアします。

最初の処理は、最後の画面が原因で発生した混乱を取り除くことです。 Sceneオブジェクトはまさにこの目的のためにclear（）関数を持っています。 イベントのチェック：
通常、ユーザー入力、スプライト同士の衝突、画面からのスプライトなど、イベントをチェックします。このシンプルなアニメーションでは、唯一のイベントは画面から離れたスプライトであり、このアクションに関連する動作は自動化されています。各スプライトを更新する：
画面更新の最後の部分は、スプライトを更新することです。スプライトを更新すると、新しい位置に描画されます。 画面を消去しないとどうなりますか？すべてのスプライトの動きはキャンバスに描画され、移動するボールではなく大きなスミアのように見えます。