第９回山口県WEB勉強会で発表した資料です。

1. HTML5+Javascriptでゲーム開発

2. 自己紹介 gunsouといいます。 山口県の某大学の大学院生です。 研究したり、趣味でゲーム作ったりなんだり。

3. HTML5+Javascript HTML5になって、canvas要素が導入され、かなり簡単に、２次元画像が表示可能になりました。 Javascriptと組み合わせることで、動的に画像を表示させることができます。

4. しかも canvas要素に対応しているブラウザなら何でもOK!!iPhone(Safari)などの スマートフォンでも動作可能!! ブラウザで動くのでOSを問わない。 WindowsだろーがMacだろーが LinuxだろーがiPhoneだろーが Androidだろーがどんとこい。

5. これって… もしかして ゲーム作れるんじゃね？

6. ということで Javascriptでオブジェクト指向のクラス的な書き方できないかなーとWebを徘徊… すんなり発見（笑）

7. クラス(コンストラクタ)の作り方 var Class名=function(コンストラクタの引数){ this.メンバ変数=初期値 } (ex:) var Position=funcution(x,y){ this.x=x; this.y=y; }

8. メンバ関数の作り方 Class名.prototype.関数名=function(引数){ 関数の中身 } (ex:) Position.prototype.get_x=function(){ return this.x; }

9. インスタンスの作り方 変数=new クラス名(コンストラクタの引数); (ex:) var pos=new Position(100,20); pos.get_x(); //100が返される。

10. クラスの使い方がわかったので 弾幕シューティングゲーム(っぽい何か)作成してみた。 描画性能のベンチマークや、Javascriptにおけるオブジェクト指向の使い方の確認のために作っただけなんだからね！ …嘘です弾幕シューティングゲーム好きだから作ったんです完全に趣味なんですごめんなさい。

11. こんなん http://nekotoast.sakura.ne.jp/webgame/stg/

12. わかったこと 遅い。

13. わかったこと 500個ぐらいのオブジェクト描画でお話にならないぐらいの処理落ちがかかる。 FPSが若干不安定。(ブラウザ：firefox) スマートフォンでやると＊お察しください＊

16. じゃあ、何のゲームが向いてそう？ 描画数が少なくて、アクション要素が そこそこなゲームが向いてるかも。 ボードゲームとか、パズルゲームとか。

17. ある日の会話 友「金魚すくいつくってよ」 軍「金魚すくいのゲームとかｗｗ おもしろくならんだろｗｗｗ」 友「でもタップとかスライドとか金魚すくいのポイのすくう動きに似てね？」 軍「なん…だと…？」

18. ビビっときた 金魚すくいゲームを作ってみました。 コンセプトは 「老若男女どなたでも」 タップで簡単に金魚がすくえる！！ 制限時間など、 ゲームを急かすような ファクターは極力なくしています。

19. んで 投稿しました!! http://9leap.net/

20. んでんで 人気のゲーム1位になってます。＊6月7日現在＊

21. 終わりに HTML5+Javascriptを使い、オブジェクト指向でゲームプログラミングしてみました。 enchant.jsという、ゲームプログラミング用ライブラリが公開されているみたいです。 Javascriptということもあって、敷居が低いと思いますので、是非挑戦してみてはいかがでしょうか？ いつか使いたいと思っていたあくあフォントが使えて大満足です。はい。

22. 終わり