JavaScriptゲーム作ったよ『たぬきゃっち』
『たぬきゃっち』
左右から降ってくるタヌキを地面に落とさないように受け止めよう。
ちゃんと真上で受け止めないとミスになっちゃいます。
だんだん受け止めないといけない数が増えていくのでがんばって。
こちらでプレイできます→『たぬきゃっち』
■ というわけで
JavaScriptのゲームを作ってみました。
今回はゲーム用ライブラリっぽいものを作ったのでそれのテストをかねて。
なぜタヌキなのかというと、4/20に間に合わせる予定だったので（謎
（タヌキのイラストは「風と樹と空とフリー素材」のフリー素材を利用させていただいています）
■ ルール
左右からタヌキが放物線を描いてとんできますので、落とさないように受け止めてください。
受け止める際は、下のタヌキの上方左45度〜右45度以内で受け止めないとミスになります。中心で受け止めるほどスコアが高くなります(2〜10点)。
ステージできめられた数のタヌキをキャッチするとステージクリアです。
ステージ１は１匹キャッチでクリアですが、ステージ８では８匹キャッチする必要があります。キャッチしたタヌキは積み上がっていきます。
（ステージ８を超えると必要なタヌキは４匹にもどります）
ステージがすすむにつれて、タヌキの出現間隔が短くなります。
ゲームの難易度はかなりヌルメです。
■ 動作環境
PCのブラウザで動きます。(Firefox3.6 , Chrome , IE6.0で確認)
JavaScriptはONにしておいてください。
たいだいの環境で60fpsでると思います。
iPhone , iPodTouchでも動きます。
初代だとけっこう遅いかな・・・。60〜30fpsくらいで動くようです。
タッチパネルのついてるデバイスでも動くかも。一応入力パッドのようなものは用意してみました。
■ 操作方法
【PCブラウザ】
[Z]キー ：ゲームスタート、ゲームオーバー画面からタイトルへ戻る
[←][J]キー：自タヌキを左に移動
[→][L]キー：自タヌキを右に移動
[F]キー ：FPS表示ON/OFF
【iPhone/iPodTouch】
タッチ ：ゲームスタート、ゲームオーバー画面からタイトルへ戻る
タッチ＆ドラッグ ：タップした位置に向かってタヌキが移動します
※ タッチしたまま同じ位置から動かさないと、コピー範囲選択状態になってしまいます。うまく回避してください（ぉ
※ 画面は縦にしてもってください。横にすると画面からはみでます。またその後縦にもどすとなぜかゲーム画面が左にずれっぱなしになります・・・
３本指タッチ：FPS表示ON
【タッチパネルのついてるデバイス】
ゲーム画面のすぐ下の白い部分をクリックすると、仮想キーボードが表示されます。（[←][Z][→]）
これで操作できるかもしれません。
※ Xperiaではうごかなかったみたい・・・
ゲーム画面のすぐ右の白い部分をクリックするとFPS表示がONになります。
■ プログラムについて（ライブラリ）
JavaScript用にゲームライブラリぽいものを作ってみました。
ライブラリはftlib以下のネームスペース(もどき)の中に入っています。
・ftlib_uty.js (ftlib.uty.* ) 汎用ルーチン/クラス
・ftlib_actor.js (ftlib.actor.*) ゲームキャラクタ/画像/管理クラス
・ftlib_scene.js (ftlib.scene.*) ゲームシーン(画面)管理クラス
キャラクタの表示は、div要素をDOMで操作してます。
予め100個程度の要素を作成しておき、これを使いまわします。
これで、GCが発生しにくくなるといいんですけど(同時表示数が増えるとFirefoxでGCっぽいプチフリが発生する）。
画像は、BackGroudImageで背景として設定しています。backgroundPositionで表示位置をずらすことで１枚のイメージに複数のアニメーションパターンを格納できるようにしています。
普通に作るとこんな感じになるかなあ…
このゲーム程度のキャラ数なら大抵の環境で60FPS出るようです。
当たり判定は矩形同士のみでの判定なので今後は、ある程度形を指定したコリジョンを定義できるようにしたいところです。
ゲームの画面は320x320dotの領域です。
右や下にキャラがはみでるとかっこわるいので、白いdiv要素のパネルをはってごまかしています。
ホントはPOPUPウィンドウにしてサイズ指定したり、IFrameで埋め込むといいのでしょう。
■ プログラムについて（iPhone対応）
今回はiPodTouch8G(初代)で動作確認を行っています。
タイトル画面などでは、30fpsくらいになってしまいちょっと辛いですね。
iPhoneHDに期待することにします（ピコピコゲームに富豪すぎるな）。
【マウスイベント】
Safariでは、クリッカブル要素意外ではonMouseDownイベントなどのマウスイベントが発生しません。
タッチによる操作を行う場合は、以下のマルチタッチを取得します。
【マルチタッチ】
JavaScriptなら、Apple様に文句をいわれずiPhoneアプリを作れます（ぉ
マルチタッチもJavaScriptから取得できます。
以下の記事を参考にしました。
→90秒で理解するiPhone JavaScript（マルチタッチ編）
非常に簡単にタッチを取得できます。
ただし、iPhoneOSにコピペ機能が搭載されたことが裏目に出て、同じ場所をタッチしっぱなしにしているとコピー範囲選択モードになってしまいます。
タッチしてすぐ指をうごかせば回避できるのですが・・・
今回のゲームでは、全部の要素が絶対位置指定のためかコピー範囲の枠は画面の上端の一部にでるだけなので実害はないかな・・・
ただ、このモードになると一瞬操作が効かなくなったりします。
また、タッチ操作をしているだけでなぜかFPSが下がります。なにか回避できる方法があればいいのですが。
【コンテンツサイズ】
普通にHTMLでページを作成すると、画面に小さく表示されてしまいます。
またピンチ操作で拡大・縮小されてしまいます。
最適なサイズに表示し、拡大率を固定する方法は以下の記事を参考にしました。
→PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法
この記事では、横幅480pxとなっていまうので、iPhoneを横位置でもった場合にちょうどあう設定です。
縦位置で持った場合には、320pxにすればいいのか・・・とおもったのですが、maximum-scaleを調整しても、いまいちぴったりいきません。なのでこのゲームでは右側にすこし余白ができてしまっています。
またiPhoneの向きにより縦・横が自動できりかわりますが、一度横位置にしてから縦位置にもどすと画面が左にずれたままになってしまいます。うむむ。
まあ、いろいろありますが、とりあえずiPhoneでも動くゲームがつくれてよかったかな。
iPhone SDKが動く環境を入手したら、アプリ内に埋め込んだSafari内で動かせば上記の問題のうちいくつかは解決するでしょう。
SafariにHTML/JavaScript埋め込んだだけのゲームはダメってことにならなければ・・・ｇｋｂｒ
