node.jsなんかでオンラインなゲームを作る(2) enchant.jsでまず画面作成

まずはクライアント側のゲーム画面から製作していきます。

今回作るゲームと言うのは、fabfibというカードゲームのオンライン版クローン。
【ゲーム紹介】FABFIB – 東大ボードゲームカフェブログ

元々、よくオンライン上でボードゲームをする友達とプレイするためというのが目的で作ってます。
画像なんかもちゃんと自作で用意。

カード画像を作成。このゲームは50枚も必要。
sample

そして、enchant.jsで殺風景なUIを作成。
enchant.jsをとui.enchant.jsを使用して表示しています。

enc
このような形になりました。

使ってる主要なコード説明。
enchant();
おまじない。初期化するために最初に書きます。

var game = new Game(900, 400);
ゲーム画面本体を作成。

game.preload('./image/0d1.png');
画像のプリロード(ゲームを始める前にあらかじめ読み込む)

var cardA = new Sprite(100, 160);
cardA.image = game.assets['./image/header.png'];
cardA.x = 60;
cardA.y = 120;
game.rootScene.addChild(cardA);
位置を指定して、Sprite オブジェクト(図や画像を表示するオブジェクト)として画像を表示。

var buttonp = new Button("参加");
buttonp.moveTo(210,350);
game.rootScene.addChild(buttonp);
ui.enchant.jsで定義されている、buttonオブジェクトを使ってボタンを表示。

var inputname = new Entity();
inputname.width = 100;
inputname.height = 20;
inputname.x=100;
inputname.y=350;
inputname._element = document.createElement('input');
inputname._element.setAttribute("name","name");
inputname._element.setAttribute("type","text");
inputname._element.setAttribute("maxlength","12");
game.rootScene.addChild(inputname);
入力のためのtextboxを表示

今回はアクションゲームでもないし、動いたりする必要もないため、ほぼこの繰り返しで画面は作ってます。
クリックしたなんかの判定は、addEventListener(Event.TOUCH_START, [callback])で取得します。
ゲーム部分は処理は殆どサーバ側で行うようにするため、クライアントは表示やサーバにデータを送るくらいの機能。
画面だけのハリボテなんでまあこのままじゃゲームとはいえないですね。処理側も作っていきましょう・・・

前:node.jsなんかでオンラインなゲームを作る(1)
次:node.jsなんかでオンラインなゲームを作る(3)

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)