enchant.js を使ってゲームを作ろう!!
9leap の開催と共に流行っている JavaScript のゲームライブラリ enchant.js . 面白そうだったのでさっそくダウンロードしてゲームをつくってみました.
使い方を学ぶためにざっくりとStepに分けてまとめてみましたのでよかったら参考にしてみてください. 全体的にコード多め, 解説少なめです.
※ 実装コードとドキュメントを見ながら勝手に作ったものなので 意図した使い方と違った場合はスイマセン.
SAMPLE and DATA
完成したものはこちらで遊ぶことができます. 30秒以内にどれだけ玉をタップできるかを競うゲームです. ゲーム性は皆無ですが, あくまで enchant.jsを学ぶために作ったものなのでその辺は触れないでください(っという言い訳)
データはここからダウンロードできます.Stepごとのコードが全て入っています.
enchant.js単体はこちらからダウンロードできます.
ゲームを作る流れ
enchant.js を使ってみて
主に enchant.js の中身を見ながら作ったのですが, 基本的に canvas を使っていなかったのは意外でした.
divタグを生成し dom の機能をうまく流用しているので css による style の指定ができたり, タッチイベントやフレームイベントを 使えるようにしていたので初心者にとても優しい作りだなと思いました.
じゃあ canvas 使えないのかというとちゃんと Surface という context をメンバに もつクラスも用意されており至れり尽くせりな感じでした. 私は, ミニゲーム作るときは極力画像を使いたくないのでこの辺は助かりました.
また, クラスの定義, 継承は他の言語を使っていた人が使いやすい作りになっていたので 規模の大きめのゲームも作り易そうでした.
今回のサンプルではひと通りのクラスを使ってみたかったのでちょっと長くなってしまいしたが, ちょっとしたゲームだったら数十行で作れちゃうくらい基本的な機能は網羅されているので ぜひ使ってみてください.
アドバイスや質問, 間違いの指摘等ありましたら Tweet もしくは下にコメントしていただけると嬉しいです.
enchant.js を使ってゲームを作ってみました.
作っていく流れもざっくりとまとめてみたのでよかったら遊んでみてください.
#html5 #javascript #enchantjs
http://ow.ly/4Pj8V
RT @phi_jp: enchant.js を使ってゲームを作ってみました.
作っていく流れもざっくりとまとめてみたのでよかったら遊んでみてください.
#html5 #javascript #enchantjs
http://ow.ly/4Pj8V
RT @phi_jp: enchant.js を使ってゲームを作ってみました.
作っていく流れもざっくりとまとめてみたのでよかったら遊んでみてください.
#html5 #javascript #enchantjs
http://ow.ly/4Pj8V
これは大変解りやすくて良いenchant.jsのチュートリアルですね! @phi_jpさん、ありがとうございます! http://ht.ly/4PjzV
これは大変解りやすくて良いenchant.jsのチュートリアルですね! @phi_jpさん、ありがとうございます! http://ht.ly/4PjzP
これは大変解りやすくて良いenchant.jsのチュートリアルですね! @phi_jpさん、ありがとうございます!
RT @shi3z: これは大変解りやすくて良いenchant.jsのチュートリアルですね! @phi_jpさん、ありがとうございます! http://ht.ly/4PjzP
RT @shi3z: これは大変解りやすくて良いenchant.jsのチュートリアルですね! @phi_jpさん、ありがとうございます! http://ht.ly/4PjzP
RT @shi3z: RT @phi_jp: enchant.js を使ってゲームを作ってみました.
作っていく流れもざっくりとまとめてみたのでよかったら遊んでみてください.
#html5 #javascript #enchantjs
http://ow.ly/4Pj8V
RT @shi3z: RT @phi_jp: enchant.js を使ってゲームを作ってみました.
作っていく流れもざっくりとまとめてみたのでよかったら遊んでみてください.
#html5 #javascript #enchantjs
http://ow.ly/4Pj8V
RT @shi3z: RT @phi_jp: enchant.js を使ってゲームを作ってみました.
作っていく流れもざっくりとまとめてみたのでよかったら遊んでみてください.
#html5 #javascript #enchantjs
http://ow.ly/4Pj8V
TM Life TM Life!!(ティーエム ライフ) 「Time is money」をモットーとしたサイトです。主にプログラミングについて描いています。 ※ このサイトはChrome, Safari もしくはFirefoxを推…http://bit.ly/mSoips
TM Life http://dlvr.it/Qxt2G
TM Life http://dlvr.it/QxtVd
TM Life http://dlvr.it/Qxthm
TM Life http://bit.ly/isbkoe http://bit.ly/eXq5Bl
[…] 昨日もまた、現役のゲームプログラマであるphi_jpさんによるTM Life:enchant.js を使ってゲームを作ろう!!がアップロードされた。これは非常にチュートリアルとして良くまとまっている。 […]
http://tmlife.net/programming/javascript/enchant-js-game-create.html enchant.js を使ってゲームを作ろう!!
あなたのスコアは 5600 point です. 遊んでくれてありがとう:-)
http://tmlife.net/?p=1278
#taptaptap
enchant.jsでゲームつくり
あなたのスコアは 6700 point です. 遊んでくれてありがとう:-)
http://t.co/qBLcG46
#taptaptap
TM Life http://bit.ly/iKAvH7
TM Life http://bit.ly/kAd6fK
[…] 「enchant.js を使ってゲームを作ろう!!」 […]
http://tinyurl.com/3uyx4tj
TM Life
TM Life: http://bit.ly/isbkoe
enchant.js を使ってゲームを作ろう!! http://t.co/UCLXeSF via @phi_jp
ごちゃごちゃ考えるよりか、実践してみるか。 このサイトを参考に何かゲームを作ってみるか http://tmlife.net/programming/javascript/enchant-js-game-create.html
TM Life: TM LifeTM Life!!(ティーエム ライフ) 「Time is money」をモットーとしたサイトです。主にプログラミングについて描いています。 ※ このサイトはChrome, Safari もし… http://t.co/wbI11L0k
“TM Life” http://t.co/KQcKjCXE
@code_J_ http://t.co/rI2xtee2
これは大変解りやすくて良いenchant.jsのチュートリアルですね! @phi_jpさん、ありがとうございます! / “TM Life” http://t.co/UPpIRaMe
[…] 昨日もまた、現役のゲームプログラマであるphi_jpさんによるTM Life:enchant.js を使ってゲームを作ろう!!がアップロードされた。これは非常にチュートリアルとして良くまとまっている。 […]
[…] みて, ついでに簡単なプログラムを作る流れをまとめてみました. 以前書いてたくさんの方に見ていただいた『enchant.js を使ってゲームを作ろう!!』同様, step 形式で細かく区切っています. […]
enchant.js を使ってゲームを作ろう!! http://t.co/VPLS5F03 @phi_jpさんから
あなたのスコアは 4500 point です. 遊んでくれてありがとう:-)
http://t.co/NiSLNjhG
#taptaptap
[…] こんなに早く動くんだ!!? ってビックリしたものです.(この頃) […]
[…] そもそも enchant.js って何？って方はこちらをどうぞ. 簡単に言うと JavaScript で作られたゲームエンジンです. […]
enchant.jsの入門に良かったです
“TM Life” http://t.co/S0etxfZO
あなたのスコアは 2200 point です. 遊んでくれてありがとう:-)
http://t.co/2vRhLlnW
#taptaptap
あなたのスコアは 4600 point です. 遊んでくれてありがとう:-)
http://t.co/d5hZNcKO
#taptaptap
http://t.co/Ee3gvzSp%E3%80%80%E3%81%93%E3%82%8C%E3%81%A4%E3%81%8B%E3%81%88%E3%81%B0%E3%81%A1%E3%82%87%E3%82%8D%E3%81%9D%E3%81%86%E3%80%82
“TM Life” http://t.co/pbPsWX93
虫退治 クリア！！！ スコア：１２０００点
http://t.co/N11uKrVm
#taptaptap
http://t.co/YpeKZjfx%C3%A3%C2%82%C2%92%C3%A5%C2%8F%C2%82%C3%A8%C2%80%C2%83%C3%A3%C2%81%C2%ABenchant.js%C3%A3%C2%82%C2%92%C3%A4%C2%BD%C2%BF%C3%A3%C2%81%C2%A3%C3%A3%C2%81%C2%A6%C3%A3%C2%80%C2%81%C3%A9%C2%95%C2%B7%C3%A5%C2%A5%C2%B3%C3%A7%C2%94%C2%A8%C3%A3%C2%81%C2%AE%C3%A8%C2%A8%C2%88%C3%A7%C2%AE%C2%97%C3%A3%C2%82%C2%B2%C3%A3%C2%83%C2%BC%C3%A3%C2%83%C2%A0%C3%A3%C2%82%C2%92%C3%A4%C2%BD%C2%9C%C3%A3%C2%81%C2%A3%C3%A3%C2%81%C2%A6%C3%A3%C2%81%C2%BF%C3%A3%C2%81%C2%9F%C3%A3%C2%80%C2%82%C3%A6%C2%AD%C2%B4%C3%A5%C2%8F%C2%B2%C3%A3%C2%81%C2%AF%C3%A7%C2%B9%C2%B0%C3%A3%C2%82%C2%8A%C3%A8%C2%BF%C2%94%C3%A3%C2%81%C2%99%C3%A5%C2%A4%C2%A7%C3%A5%C2%AD%C2%A6%C3%A6%C2%99%C2%82%C3%A4%C2%BB%C2%A3%C3%A3%C2%81%C2%AE%C3%A3%C2%82%C2%B5%C3%A3%C2%83%C2%BC%C3%A3%C2%83%C2%90%C3%A3%C2%81%C2%ABUp%C3%A3%C2%81%C2%97%C3%A3%C2%82%C2%88%C3%A3%C2%81%C2%86%C3%A3%C2%81%C2%A8%C3%A6%C2%80%C2%9D%C3%A3%C2%81%C2%A3%C3%A3%C2%81%C2%9F%C3%A3%C2%82%C2%89%C3%A3%C2%80%C2%82%C3%A3%C2%83%C2%91%C3%A3%C2%82%C2%B9%C3%A3%C2%83%C2%AF%C3%A3%C2%83%C2%BC%C3%A3%C2%83%C2%89%C3%A3%C2%82%C2%92%C3%A5%C2%A4%C2%B1%C3%A5%C2%BF%C2%B5orz
http://t.co/YpeKZjfx%C3%A3%C2%82%C2%92%C3%A5%C2%8F%C2%82%C3%A8%C2%80%C2%83%C3%A3%C2%81%C2%ABenchant.js%C3%A3%C2%82%C2%92%C3%A4%C2%BD%C2%BF%C3%A3%C2%81%C2%A3%C3%A3%C2%81%C2%A6%C3%A3%C2%80%C2%81%C3%A9%C2%95%C2%B7%C3%A5%C2%A5%C2%B3%C3%A7%C2%94%C2%A8%C3%A3%C2%81%C2%AE%C3%A8%C2%A8%C2%88%C3%A7%C2%AE%C2%97%C3%A3%C2%82%C2%B2%C3%A3%C2%83%C2%BC%C3%A3%C2%83%C2%A0%C3%A3%C2%82%C2%92%C3%A4%C2%BD%C2%9C%C3%A3%C2%81%C2%A3%C3%A3%C2%81%C2%A6%C3%A3%C2%81%C2%BF%C3%A3%C2%81%C2%9F%C3%A3%C2%80%C2%82%C3%A6%C2%AD%C2%B4%C3%A5%C2%8F%C2%B2%C3%A3%C2%81%C2%AF%C3%A7%C2%B9%C2%B0%C3%A3%C2%82%C2%8A%C3%A8%C2%BF%C2%94%C3%A3%C2%81%C2%99%C3%A5%C2%A4%C2%A7%C3%A5%C2%AD%C2%A6%C3%A6%C2%99%C2%82%C3%A4%C2%BB%C2%A3%C3%A3%C2%81%C2%AE%C3%A3%C2%82%C2%B5%C3%A3%C2%83%C2%BC%C3%A3%C2%83%C2%90%C3%A3%C2%81%C2%ABUp%C3%A3%C2%81%C2%97%C3%A3%C2%82%C2%88%C3%A3%C2%81%C2%86%C3%A3%C2%81%C2%A8%C3%A6%C2%80%C2%9D%C3%A3%C2%81%C2%A3%C3%A3%C2%81%C2%9F%C3%A3%C2%82%C2%89%C3%A3%C2%80%C2%82%C3%A3%C2%83%C2%91%C3%A3%C2%82%C2%B9%C3%A3%C2%83%C2%AF%C3%A3%C2%83%C2%BC%C3%A3%C2%83%C2%89%C3%A3%C2%82%C2%92%C3%A5%C2%A4%C2%B1%C3%A5%C2%BF%C2%B5orz
あなたのスコアは 11300 point です. 遊んでくれてありがとう:-)
http://t.co/iJwfYv9o
#taptaptap
あなたのスコアは 3200 point です. 遊んでくれてありがとう:-)
http://t.co/MgDtZxlP
#taptaptap
あなたのスコアは 3200 point です. 遊んでくれてありがとう:-)
http://t.co/YU5RuFr8
#taptaptap
enchant.js を使ってゲームを作ろう!! http://t.co/VEeFXgDB @phi_jpさんから
enchant.js を使ってゲームを作ろう!! http://t.co/ecbfvrhB @phi_jpさんから