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); // 使用画像を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 を追加
その他
- 正しくは JavaScript はクラスをサポートしてないですが、本ドキュメントでは便宜上 Class と書いています