月曜日までに考えておきます

ITネタとゲームネタ中心に興味のあること色々書きます。

enchant.jsでくまを動かしてみました

javascriptのゲーム作成に特化したライブラリ、「enchant.js」の話題をよく聞くので、調べてみました。 まずはネットで調べてみようと、ここの資料を参考に進めてみました。 Osakijs #01 「enchant.jsハンズオン資料」 で、ちょうどいいタイミングで図書館で予約していた、 「ゼロからはじめるenchant.js入門」が借りれることになったので、さっそく借りて読みつつ調べています。 この本で、javascriptの開発/実行環境として「jsdo.it」というサイトが紹介されていました。 jsdo.it - Share JavaScript, HTML5 and CSS このサイトは結構便利で、Twitterアカウントでユーザー登録できる上に、enchant.jsを読み込むのとかも数クリックでやってくれます。わざわざjs読み込み用のHTMLとか作らなくてもいいですね。 しかも作ったjsの公開用のURLも作られるので、すぐに誰かに見てもらうことができます。 しかもブログに埋め込むことも出来ます。 私も本を読みつつ、こんなところまで作ってみました。

<

p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"> くまの接触判定 - jsdo.it - share JavaScript, HTML5 and CSS 5匹のくまはタッチ/クリックで動かせます。ぶつかったら反転するように作っています。 実装方法としては基本的にはJavaでゲーム作るときと同じように、フレーム単位に画像のx座標、y座標を変化させるような処理を書けばいいのですが、ゲームに特化している分、より簡単にかけるような気がしました。 (実際、ゲーム系のプログラミングはほとんどやったことがないです。) よく使いそうな処理はこんな感じでまとまっててわかり易かったです。 ■毎フレームごとの処理


Sprite.addEventListener(Event.ENTER_FRAME, function(){
// ここに処理を書く
});

■タッチされたときの処理


Sprite.addEventListener(Event.TOUCH_START, function(){
// ここに処理を書く
});

関連する処理として TOUCH_MOVE,TOUCH_ENDもあり。 ■キャラクター(Spriteのインスタンス)がぶつかったときの処理


if([Spriteのインスタンス1].within([Spriteのインスタンス2], [当たり判定の大きさ(数字)])){
//当たり判定の処理。振り返るなり、吹き飛ばすなり、死ぬなり。ゲームの内容によりますね。
}

この処理をフレームごとの処理に入れれば作れました。 まだ作りこみが甘い部分がありますし、そもそもゲームになっていないのでもうちょい調べつつ、ゲーム的に遊べるものを一本作ってみたいと思います。