enchant.jsの使い方

enchat.jsのメモ/////

基本構造

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を０にする。 -->
    <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」はスマートフォンの画面設定し画面のサイズに合わせる

ゲームプログラムの手順

  1. 「enchant」メソッドで「enchant.js」本体やクラスをエクスポート。
  2. 「window.onload」イベントのリスナの中に実行する処理（３、４）を挿入
  3. 「core」オブジェクトを作成し、ゲーム初期化処理を記述
  4. 「core.onload」イベントのリスナの中にゲームのメイン処理を記述
  5. 「core.start」メソッドゲームを開始