enchant.jsでキャラクタを動かそう! (3/5)

では、enchant.jsのスクリプトの基本コードを説明しましょう。下のリスト欄に、基本的なコードを整理して挙げておきました。これを見ながら、コードの内容を説明していきましょう。

enchant();

まず行うのは、enchant.jsのセットアップです。この「enchant」という関数を呼び出すことで、enchant.jsの下準備が整います。これを呼び出さないと動かないので、一番最初に必ず実行して下さい。

window.onload = function(){……};

enchant.jsのスクリプトは、ドキュメントの読み込みが完了したところで実行されるようにしておかなければいけません。そこで、windowsのonloadイベントを利用して必要な処理を組み込んでおきます。これを忘れ、直接、実行する処理を書いてもうまくごかないので注意！

var 《Game》= new Game( 横幅 , 高さ );

ゲーム全体を統括するのが「Game」オブジェクトです。enchant.jsでゲームを作るには、まずこのGameオブジェクトを用意します。引数には、ゲーム領域の大きさを指定します。

《Game》.onload = function(){……};

Gameオブジェクトを作成したら、ゲームで利用するさまざまなキャラクタに関するオブジェクトや諸設定などゲーム関連のものを作成し組み込んでいきます。これらの作業は、Gameオブジェクトの準備が整った段階で実行しなければいけないので、Gameの「onload」イベントに設定した関数内で行います。

《Game》.start();

一通りの準備が整ったら、ゲームをスタートします。これが「start」メソッドです。これを呼び出すことでゲームが開始されます。enchant.jsのゲームは、リアルタイムに変化していくものです。つまり、静止した状態で何か操作したら動く、というようなものとは違うのです。

startでGameをスタートすると、映画のフィルムが上映されるように一定間隔で表示が更新されていきます。更新時のイベントも用意されており、そのイベントを使って表示されているキャラクタなどの状態を変更するよりを用意することで、一定時間ごとにキャラクタが変化していくような動きが作れるようになっているのです。

とりあえず、ゲームの基本的なスクリプトはこれでわかりました。が、まだ何も具体的なキャラクタなどの説明はありません。基本がわかったところで、これに簡単なキャラクタを組み込んで表示する処理を作ってみましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※スクリプトの基本コード

enchant();

window.onload = function(){
	var 《Game》= new Game( 横幅 , 高さ );
	《Game》.onload = function(){
		……ゲームの下準備を行う……
	};

	《Game》.start(); // 開始!
};