タイミングが勝負 Canvasのクリックゲーム
2010/09/19
モバイルゲームによくあるタイミング系のクリックゲームを作りました。左右に動きまわる敵をクリックして攻撃します。敵の動きは単純で、画面の端まで移動すると向きを反対に変えるというもので、時間が経つにつれて前面へ移動します。
⇒クリックだけで遊べるゲーム
このゲームはCanvasとJavaScriptを利用しています。そのため、ブラウザやPC環境によってはゲーム進行スピードが変化します。ただし、IE対策にGoogleのExplorerCanvasを使用しているため、IEでも何とかプレイできます。
また、ソースを見てもらえれば分かりますが、このページはHTMLドキュメントに始めからCanvasタグを書いてません。JavaScriptで後からCanvas要素を追加しています。ここで問題となるのがIEで、Canvas要素を後から追加するとスクリプトを書くとIEの場合ちゃんと認識されません。解決法としては、ExplorerCanvasのG_vmlCanvasManager.initElement()メソッドで初期化する方法があり、このゲームでもそのようにしています。ちなみに同メソッドには生のDOM要素（$などを介さない）を渡す必要があります。
内部的にはJavaScriptのsetIntervalメソッドでグラフィックを更新している一方、敵の出現時間はsetTimeoutメソッドで管理しています。本当は背景もCanvasで処理したかったんですが、全体が非常に重くなるのでやめました。
また、敵の動きが単純すぎるので、今後は簡単なパターンを作ったり、敵の数や魔法などの選択肢を増やしていく予定です。