▶ JavaScript

jQueryベース いまさらゲームエンジン

概要

jQuery 1.x ベースの Game Engine です。
Sprite Class と Label Class があります。

ブラウザ下位互換を考慮したエンジンになっており、IE6 でも動きます。
いまさらブラウザ(IE6)でも動く、いまさらゲームエンジン

デモ

下のURLをクリックするとデモに移動します。

http://tatenosystem.com/ie6game/index.html

  • 「くま」ボタンクリックでクマが増えます。増えたクマはクリックで消せます

  • 「FadeOut」ボタンクリックで白クマが消えます

  • スケボーのクマをクリックするとポップアップが出て消えます

  • 「Hello」を押すと文字と色が変化します

Game Class

メソッド

  • コンストラクタ
game = new Game(); // Gameオブジェクトの生成
  • fps()
Game.fps(8); // FPS = 8 を設定
  • preload()
Game.preload("hoge.png"); // hoge.png を事前読み込み(ブラウザにキャッシュ)
  • start()
Game.start(); // ゲームスタート(これ以降、*.enterframe() が定期実行されます)

Sprite Class

メソッド

  • コンストラクタ
bear = new Sprite(32, 32, "img/chara01.png", 5, 3); // スプライトサイズ 32 x 32、画像 "img/chara01.png"、画像のキャラデータ数 5 x 3
  • x()
Sprite.x(100); // x座標を100へ
var x = Sprite.x(); // x座標の取得
  • y()
Sprite.y(100); // y座標を100へ
var y = Sprite.y(); // y座標の取得
  • z()
Sprite.z(100); // CSS z-index 設定
var z = Sprite.z(); // CSS z-index 取得
  • pos()
Sprite.pos(100, 120); // 座標(100, 120)に設定
  • frame()
Sprite.frame(4); // 使用画像を４番目へ
var frameNum = Sprite.frame(); // 使用画像番号を取得
  • img()
Sprite.img("hoge.png"); // 使用画像を "hoge.png" に設定
Sprite.img("hoge.png", 5, 3); // 使用画像を "hoge.png" に設定。画像のキャラデータ数 5 x 3
  • enterframe() - プログラマ定義関数
Sprite.enterframe = function(){
         this.x(this.x() + 2);  // FPSごとに実行される。Spriteオブジェクトとして実行されるので this を使用
     };
  • onload() - プログラマ定義関数
Sprite.onload= function(){
         this.pos(200,200);  // 画像事前読み込み Game.preload が全て完了した時に1度だけコールされる
     };

オブジェクト

  • jq (jQuery DOM)
Sprite.jq.css("color", "red");             // jQuery で CSS 設定

Sprite.jq.click(function(){                 // jQuery クリックイベント設定
     $(this).fadeOut();                       // jQueryイベントなので $(this) を使用
});
  • id (jQueryでのDOM ID)
$(Sprite.id).css("color", "red");             // Sprite の DOM ID で jQuery DOM を操作

Label Class

メソッド

  • コンストラクタ
label = new Label("Hello", 160, 160);  // 文字"Hello"、オブジェクトサイズ 160 x 160
  • x()
Label.x(100); // x座標を100へ
var x = Label.x(); // x座標の取得
  • y()
Label.y(100); // y座標を100へ
var y = label.y(); // y座標の取得
  • z()
Label.z(100); // CSS z-index 設定
var z = Label.z(); // CSS z-index 取得
  • pos()
Label.pos(100, 120); // 座標(100, 120)に設定
  • label()
Label.label("World!"); // 文字を "World!" に設定
var text = Label.label(); // 設定文字を取得
  • size()
Label.size(20); // 文字サイズを 20px に設定
  • enterframe() - プログラマ定義関数
Label.enterframe = function(){
         this.x(this.x() + 2);  // FPSごとに実行される。Spriteオブジェクトとして実行されるので this を使用
     };
  • onload() - プログラマ定義関数
Label.onload= function(){
         this.label("Iamge Load End");  // 画像事前読み込み Game.preload が全て完了した時に1度だけコールされる
     };

オブジェクト

  • jq (jQuery DOM)
Label.jq.css("color", "red");             // jQuery で CSS 設定

Label.jq.click(function(){                 // jQuery クリックイベント設定
     $(this).css("font-size", "19px"); // jQueryイベントなので $(this) を使用
});
  • id (jQueryでのDOM ID)
$(Label.id).css("color", "red");             // Label の DOM ID で jQuery DOM を操作

サンプルプログラム

http://tatenosystem.com/ie6game/index_html.txt

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="tsiege000.min.js"></script>

<script type="text/javascript" charset="utf-8">

$(function()
{
    game = new Game();
    game.fps(5);
    
    game.preload("img/chara01.png");
    
    game.start();
    
    // ---- Bear Sprite Class ----
    var foo2 = new Sprite(32, 32, "img/chara01.png", 5, 3);
    foo2.pos(70,70);
    foo2.frame(4);
    foo2.enterframe = function(){
        this.x(this.x() + 2);
    };
    foo2.jq.click(function(){
        alert("KUMA CLICK");
        $(this).fadeOut("slow");
    });
    
    // ---- Hello Label Class ----
    var label1 = new Label("Hello", 160, 160);
    label1.size(80);
    label1.jq.click(function(){
        label1.pos(190,190);
        label1.label("World!");
        $(this).css("color", "red");
    });

    ……

});

</script>

</head>
<body style="margin:0px">
<p style="position:absolute;bottom:8px;left:8px">DEBUG: <span id="info">-</span></p>
</body>
</html>

今後の展開

  • enchant.js の Scene オブジェクトみたいな Class を追加

その他

enchant.js

  • 正しくは JavaScript はクラスをサポートしてないですが、本ドキュメントでは便宜上 Class と書いています