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

前回

まずはクライアント側のゲーム画面から製作していきます。 今回作るゲームと言うのは、fabfibというカードゲームのオンライン版クローン。 【ゲーム紹介】FABFIB - 東大ボードゲームカフェブログ

元々、よくオンライン上でボードゲームをする友達とプレイするためというのが目的で作ってます。

画像なんかもちゃんと自作で用意。 カード画像を作成。このゲームは50枚も必要。 (

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

このような形になりました。 使ってる主要なコード説明。

• 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])で取得します。

ゲーム部分は処理は殆どサーバ側で行うようにするため、クライアントは表示やサーバにデータを送るくらいの機能。

画面だけのハリボテなんでまあこのままじゃゲームとはいえないですね。処理側も作っていきましょう・・・