書籍転載：JavaScriptライブラリ実践活用［厳選111］
HTML5＋JavaScriptベースでゲームを作る［enchant.js］
書籍転載の17本目（書籍内の番号は「65」）。HTML5＋JavaScriptで作られたゲーム・エンジン「enchant.js」の基礎と、基本的な使い方を解説する。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
enchant.jsは、HTML5 + JavaScript で作られたゲームエンジンです。ゲームでよく使われるイベントや動きなどがライブラリ化されており、ゲームが作りやすいように最適化されています。
- 名称： enchant.js
- 分類： 小ネタ
- URL： http://enchantjs.com/
- 関連ファイル： enchant.js
enchant.jsは、ゲームが作りやすいように最適化されています。最適化のポイントは次の4点です。
- オブジェクト指向
- イベントドリブンで、イベントは非同期処理
- プラグインによる拡張が可能
- サンプルだけでなく画像素材も提供されている
オブジェクト指向で記述が可能なため、各キャラクターなどをオブジェクトとして扱うことができ、コードが整理しやすくなっています。また、イベントも使いやすくライブラリ化されており、オブジェクト指向と組み合わせることで、イベントを管理しやすいよう工夫されています。
enchant.jsが持っているクラス群
enchant.jsには、ゲームを制御するためにいろいろな機能が用意されています（表065-01）。描画オブジェクト関連は継承関係で成り立っています。
| ライブラリ名 | 概要 |
|---|---|
| EventTarget | 対象のオブジェクトに対して、イベントを制御する |
| Game | ゲームの基本的制御を行う |
| Node | 各表示オブジェクトの基底クラス |
| Surface | 画像や図形の情報を持つクラス |
| Group | 複数のNodeを子に持つことができるクラス |
| Scene | 各表示オブジェクトを貼り付けることができる画面の単位を持つクラス |
| Entity | オブジェクトの拡大率や回転などの実態を扱う。たとえば、衝突判定などを行うことができる |
| Sprite | 画像表示機能を持ったクラス |
| Label | ラベルをオブジェクトとして扱うクラス |
| Map | たとえばRPGのマップを扱うことができるクラス |
| CanvasGroup | Canvasを用いた描画を行うクラス。子にSpriteなどの要素を追加していき、Canvasで描画する |
| Class | オブジェクト指向としてクラスを扱うためのベースクラス |
| Event | マウスやキーボード、フレームなどのイベントを扱う |
| Sound | Audioを使用できるクラス。HTML5のAudio要素をラップしている |
ゲーム作成手順
本書サポートサイトからダウンロードできるミサイルを打つサンプルを例に、ゲームの作成手順を追ってみましょう。まずは、画面ロード時（onload）に初期処理として各ゲームの要素を準備します。
1.ゲームの画面サイズを指定し、領域を確保する
1のように、まずは画面の領域を確保します。サンプルでは、320×320の領域を確保しています。また、1秒間に起こるフレームの数を指定しています。ここでは1秒間に24コマ発生します。enterframeイベントは、1回のフレームごとに発生するイベントです。
2.キャラクターを準備する
2-1.自機の画像と表示場所を指定する
2では、Spriteクラスをnewして、新しい画像オブジェクトを作成しています。初期表示の座標を指定し、どの画像を表示するかを指定します。
2-2.ミサイルをクラス化（Missileクラス）し、画像とサイズなどを指定する
3でミサイルをクラス化しています。クラス化している理由は、ミサイルは複数打たれるため、ミサイル1つに付き1つのミサイルオブジェクトを生成するためです。
4でミサイルの画像と座標を指定しています。
3.自機の動きを記述する。ここでは、マウスを動かすと同じように動くように座標を指定する
5で、マウスの動きに準じて自機を動かすように記述しています。スマートフォンでのタッチ時（マウスクリックでも動作）のイベントであるtouchstartイベント、指（マウス）を動かす際に発生するtouchmoveイベントそれぞれが発生した時に、x座標のみ自機に反映しています。つまり、横の動きのみ自機が反応するということです。
4.フレーム処理ごとにミサイルを出力する
6では、ミサイルを打つ処理、つまりミサイルオブジェクトを生成する処理を行なっています。4つのフレームごとに、1個ミサイルを出力しています。
5.ミサイルを表示したらフレームごとに前に進むよう表示座標を変更するように制御
7では、フレームごとにミサイルが前に進む処理を行なっています。また、ミサイルが画面の外に出たら、ミサイルオブジェクト自身を削除しています。
このように、オブジェクト（キャラクター）を準備し、それらにイベントが発生する度にどのような処理や動きを行わせるかという制御を記述していきます。このあと、敵のクラスを作り、ミサイルとの判定ロジックやポイントの加算などの処理を入れていくと、シューティングゲームの完成です。
※以下では、本稿の前後を合わせて5回分（第14回～第18回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
14. オブジェクト指向でコードを記述する［CoffeeScript］
書籍転載の14本目（書籍内の番号は「63」）。CoffeeScriptを使用すると、クラスベースのオブジェクト指向で記述できる。その内容を説明する。
15. 処理を短く記述する［CoffeeScript］
書籍転載の15本目（書籍内の番号は「64」）。CoffeeScriptの基本構文のうち、数値や文字列表現、配列、for～in、unless/untilの記述方法を説明する。
16. JavaScriptでクッキーを簡単に操作する［jquery.cookie］
書籍転載の16本目（書籍内の番号は「61」）。JavaScriptでのクッキー操作をごくシンプルなコードで実装できる「jquery.cookieプラグイン」の基本的な使い方を説明する。
17. 【現在、表示中】≫ HTML5＋JavaScriptベースでゲームを作る［enchant.js］
書籍転載の17本目（書籍内の番号は「65」）。HTML5＋JavaScriptで作られたゲーム・エンジン「enchant.js」の基礎と、基本的な使い方を解説する。
18. JavaScriptベースのデータベース［TaffyDB］
書籍転載の18本目（書籍内の番号は「69」）。JavaScriptのJSON形式のデータに対して、データベースのような感覚でアクセスするためのライブラリ「TaffyDB」の基礎と、基本的な使い方を解説する。
