基本構造
index.html
<!DOCTYPE html> <html> <head> <!-- 文字コードをUTF-8を使う --> <meta charset="UTF-8"> <!-- IEでwebページが正しく表示されない場合利用できる中で互換性のモードを設定できる --> <meta http-equiv="x-ua-compatible" content="IE=Edge"> <!-- 幅をデバイスの画面サイズにし、ユーザーによるサイズ変更ができなくなるようにする。 --> <meta name="viewport" content="width=device-width, user-scalable=no"> <!-- ページを全画面に表示する。 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- enchant.jsを読み込む --> <script type="text/javascript" src="enchant.js"></script> <!-- main.js(ゲームプログラム)を読み込む --> <script type="text/javascript" src="main.js"></script> <!-- 「body」要素をmarginとpaddingを0にする。 --> <style type="text/css"> body { margin: 0; padding: 0; } </style> </head> <body> </body> </html>
main.js
// enchant.js本体やクラスをエクスポートする。 window.enchant(); // ページが読み込まれた時に実行する関数 window.onload = function() { // ゲームオブジェクトを作成する。 core = new(320,320); // ゲームの初期化処理 // fps(1秒当りの描画回数)を設定する(省略すると「30」) core.fps = 16; // ゲームで使用する画像ファイルの指定 core.preload('betty.png'); // ファイルのプリロードが完了した時実行される関数 core.onload = function(){ //ゲームのメイン処理 } //ゲームのスタート core.start() }
HTMLの内容
- <script>タグ −「enchant.js」やゲームプログラム本編(ここではmain.js)を読み込む
- <meta>タグ − 「viewport」はスマートフォンの画面設定し画面のサイズに合わせる
ゲームプログラムの手順
- 「enchant」メソッドで「enchant.js」本体やクラスをエクスポート。
- 「window.onload」イベントのリスナの中に実行する処理(3、4)を挿入
- 「core」オブジェクトを作成し、ゲーム初期化処理を記述
- 「core.onload」イベントのリスナの中にゲームのメイン処理を記述
- 「core.start」メソッドゲームを開始