概要
対戦ゲームを作る。
盤を描画して、クリックイベントを取るUIの実装。
考え方
ライブラリーは、jqueryとtatenoを使う。
盤は、8マス×8マス。
石は、画像から切り出す。
64個のスプライトに、クリックイベントリステナーを設置する。
画像
サンプルコード
var coma = 'koma.png';
var pl0 = 'anta';
var pl1 = 'ore';
var ban = [];
var flg = 1;
var game = new Game();
game.fps(5);
game.preload([coma]);
game.start();
var aLabel = new Label("a", 50, 330);
aLabel.size(20);
aLabel.label('白: ' + pl0 + '<br>黒: ' + pl1);
ban = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 2, 1, 1, 1, 1, 1, 1, 2, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var field = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 0; i < 64; i++)
{
field[i] = new Sprite(40, 40, coma, 4, 1);
field[i].frame(ban[i]);
field[i].x((i % 8) * 40);
field[i].y(Math.floor(i / 8) * 40);
field[i].jq.click(function() {
var n = this.id;
n = n.replace("tsGameNode", "");
n = n - 2;
test(n);
});
}
以上。