enchant.js を使ってゲームを作ろう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

9leap の開催と共に流行っている JavaScript のゲームライブラリ enchant.js . 面白そうだったのでさっそくダウンロードしてゲームをつくってみました.

使い方を学ぶためにざっくりとStepに分けてまとめてみましたのでよかったら参考にしてみてください. 全体的にコード多め, 解説少なめです.

※ 実装コードとドキュメントを見ながら勝手に作ったものなので 意図した使い方と違った場合はスイマセン.

SAMPLE and DATA

完成したものはこちらで遊ぶことができます. 30秒以内にどれだけ玉をタップできるかを競うゲームです. ゲーム性は皆無ですが, あくまで enchant.jsを学ぶために作ったものなのでその辺は触れないでください(っという言い訳)

データはここからダウンロードできます.Stepごとのコードが全て入っています.

enchant.js単体はこちらからダウンロードできます.

ゲームを作る流れ

  • Step0 – enchant.js の雛形を準備しよう!
  • Step1 – スプライトを表示してみよう!
  • Step2 – 表示したスプライトを動かしてみよう!
  • Step3 – タッチに反応させてみよう!
  • Step4 – 制限時間とスコアを表示してみよう!
  • Step5 – タッチした時にエフェクトを表示してみよう!
  • Step6 – 表示をオシャレにしてみよう!
  • Step7 – ツイートできるようにしてみよう!
  • Complete – タップ音を追加しております. iPhone だと挙動が重いです.

enchant.js を使ってみて

主に enchant.js の中身を見ながら作ったのですが, 基本的に canvas を使っていなかったのは意外でした.

divタグを生成し dom の機能をうまく流用しているので css による style の指定ができたり, タッチイベントやフレームイベントを 使えるようにしていたので初心者にとても優しい作りだなと思いました.

じゃあ canvas 使えないのかというとちゃんと Surface という context をメンバに もつクラスも用意されており至れり尽くせりな感じでした. 私は, ミニゲーム作るときは極力画像を使いたくないのでこの辺は助かりました.

また, クラスの定義, 継承は他の言語を使っていた人が使いやすい作りになっていたので 規模の大きめのゲームも作り易そうでした.

今回のサンプルではひと通りのクラスを使ってみたかったのでちょっと長くなってしまいしたが, ちょっとしたゲームだったら数十行で作れちゃうくらい基本的な機能は網羅されているので ぜひ使ってみてください.

アドバイスや質問, 間違いの指摘等ありましたら Tweet もしくは下にコメントしていただけると嬉しいです.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT