LoginSignup
0

More than 1 year has passed since last update.

対戦ゲームを作る。 その5

Last updated at Posted at 2021-07-14

概要

対戦ゲームを作る。
盤を描画して、クリックイベントを取るUIの実装。

考え方

ライブラリーは、jqueryとtatenoを使う。
盤は、8マス×8マス。
石は、画像から切り出す。
64個のスプライトに、クリックイベントリステナーを設置する。

画像

koma.png

サンプルコード

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);
    });
}


以上。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0