JavaScriptでジャンプアクションゲームを作ってみた

ゴールデンウィークなので、JavaScript + canvasでよくあるジャンプゲームを試しに作ってみました。

■ Block Jump

ぼく自身、ゲームはもちろん、アニメーションも作ったことないので
これだけでも結構知らないことがありました。

毎フレーム描画する

ちょっと考えれば、当たり前なのですが、まずコレを知らなかったです。
絵を動かすために、フレームごとに関数を呼び出すことになります。

var FRAME_RATE = 60;  // 毎秒60フレーム
var intervalTime = 1000 / FRAME_RATE;
setInterval(drawDisplay, intervalTime);

オブジェクトを動かす

オブジェクトを動かすためには、フレームごとに描画するので、1フレームごとに前回の位置からどれだけ動かすかを設定する必要があります。

今回は2Dなので、(dx, dy)で動きは表せます。

当たり判定を決める

今回作ってみたゲームは、ブロック(■)とプレイヤー(○)がぶつかるとゲームオーバーになります。
そのため、この2つの当たり判定を検出する必要があります。ただ今回の場合は、見た目とまったく同じ当たり判定を検出する必要はなかったので、ブロック(■)の上辺の角2点に当たり判定を設定しています。

この場合、プレイヤー(○)の中心(a, b)と各ブロック(■)の頂点(x, y)の距離が、プレイヤー(○)の半径r以下の場合、ぶつかったとみなしています。

式にすると、下記が成立する場合、接触したと判定しています。

r^2 \le (x - a)^2 + (y - b)^2

画面の切り替え

今回は、タイトル画面、プレイ中、やられた時、ゲームオーバー時に、setIntervalで呼び出す関数を変えています。
少しでも、メニューが増えるならば、きちんと設計しないとダメですね。

その他、雑感

canvasとJavaScriptで結構それっぽいものが作れるようになってます。

これより少しでも複雑なものを作るなら、enchant.jsなどのライブラリを使っていったほうが良さそうです。

ただ、最近のカジュアルゲームでは、こういったリアルタイムで何かをする必要性は無いので、最初はゲームの一部効果で利用するのが良いのかなって思います。