1. HTML5 の通信対戦ゲームを
テスト駆動開発で作ってみた
竹内 佑介
プログラム生放送@愛媛

2. 自己紹介
• 竹内 佑介
• プログラマーです
• 趣味で通信対戦ゲーム
作ってます

3. こんなゲーム作ってます
機動倶楽部Gブレイバー
https://www.youtube.com/watch?v=fpJk5z8XEzo

4. テストの話をする前に、
簡単にアーキテクチャを説明します

5. クライアント!
(HTML5)
ゲームサーバ
通信(socket.io)
主要処理は全て
サーバで実行する
クライアントは結果表示、
コマンド送信だけ
ゲームのアーキテクチャ

6. サーバ側、クライアント側で
テストコードの説明をします

7. サーバ側のテストコード

8. サーバの
モジュール
socket.io-client
参考文献
http://dev.classmethod.jp/server-side/socket-io-client/
localhost接続
テストコード
サーバを立てて自分自身に接続

9. サーバ側テストコード例
//自作したsockt.ioゲームサーバクラスの生成
var app = require('http').createServer().listen(3000); !
var server = require('../server.js');!
var gameServer = server({!
httpServer : app!
});!
!
//socket.ioクライアント生成してlocalhostに接続!
var io = require('socket.io-client');!
var client = io(‘http://localhost:3000’,{!
'forceNew' : true!
});!
client.on('connect',function(){!
});

10. クライアント側の
テストコード

11. 通信入出力は楽ですが
クライアント!
(HTML5)
サーバからの入力
サーバへの送信
モックをつかう
アサーションかける

12. 画面制御は苦労しました
クライアント!
(HTML5)
③ボタンを押す
②30フレーム待つ
①メッセージ受信
④メッセージ送信
ここが大変！！

13. しかし、
TIMELINEとDISPATCHEVENTで
画面の自動操作ができるのです

14. ・・・・
30フレーム後に ボタンを押す
TimeLine dispatchEvent

15. TIMELINE
• enchant.jsの機能でアニメーションのフレーム補完機能
• 本来は最初の30フレームは点滅、次の30フレームは回
転というような使い方をする
• 参考文献
http://www.slideshare.net/sidestepism/5-tlenchantjs?
ref=http://wise9.jp/archives/7418

16. DISPATCHEVENT
• enchatjsでイベントを発火させる仕組み
• 応用してボタン押下イベントを自発的に発火
させる

17. 画面自動操作コード例
//20フレーム後に実行するコールバック関数を設定する
core.currentScene.tl.delay(20).then(function() {
//okButtonにボタン押下イベントを発火させる
okButton.dispatchEvent(new Event(Event.TOUCH_START));
});

18. テストコードの詳細はここ
• https://github.com/kaidouji85/gbraver
• unitTest -> サーバ側テストコード
• publicForTest ->クライアント側テストコード

19. その他Gブレイバー関連サイト
• Gブレイバーα版
http://gbraver.herokuapp.com
• 中の人のブログ
http://blog.livedoor.jp/kaidouji85/

20. ご清聴ありがとう
ございました