1. Forif Hackathon for
Students
JavaScriptで作るスマートフォンブラウザゲーム
株式会社フォリフ
エンジニア
大橋巧
2012/05/18

2. 自己紹介
• 大橋 巧
• 2011年4月入社
• 主にクライアントサイド担当
• Corollin’ Planetなど開発

3. 今日は

4. HTML5

5. What’s HTML5?
• Flashのかわりになるらしい
• 最近のWebサービスはみんなHTML5
• とにかくすごいらしい

6. HTML5とは
• HTML5 （エイチティーエムエル・ファイブ）とは HTML の 5 回目に
当たる大幅な改定版である。表記は HTML と 5 の間にスペースを含ま
ない。XML の文法で記述する場合、XHTML5 と呼ばれる。HTML5 は
WHATWG によって2004年に定められた Web Applications 1.0 に Web
Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3C
より2008年1月22日にドラフト（草案）が発表された。現在、2014年
までの正式勧告を目指して策定が行われている。改訂の主要目的のひ
とつとして人間にも読解可能でコンピューターやディバイス（ウェブ
ブラウザ、構文解析器など）にも矛盾せず読解されるとともに最新の
マルチメディアをサポートする言語に向上することである。HTML5で
はHTML 4だけでなくXHTML１やDOM2HTML（特にJavaScript)も加え
参考URL : http://ja.wikipedia.org/wiki/HTML5

7. ？

8. HTML5とは（ざっくり）
• 文章の構造を明確化
• 画像描画、動画や音声の再生
• 位置情報、双方向通信etc...
• HTML5 + JavaScript + CSS3
→リッチなWebアプリも作成可能に

9. Canvas

10. Canvas
• JavaScriptを使って動的に図を描く
HTML5の要素
HTML:
<canvas width= 100 height= 100 ></canvas>
js:
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.Rect(0, 0, 50, 100);
ctx.fill();

11. 実際にCanvasで
図形を描いてみる

12. Canvas下準備
• コンテキストを取得する
var canvas = document.getElementById( canvas );
var ctx = canvas.getContext( 2d );

13. 円を描く
// パスを開く
ctx.beginPath();
// X: 100, Y: 100の座標に半径50pxの円を描く
ctx.arc(100, 100, 50, 0, Math.PI*2, false);
// 塗りつぶす色を設定する
ctx.fillStyle = red ;
// 円を塗りつぶす
ctx.fill();
// パスを閉じる
ctx.closePath();

14. 長方形を描く
// パスを開く
ctx.beginPath();
// X: 80, Y: 160の座標に幅200px, 高さ100pxの長方形を描く
ctx.rect(80, 160, 200, 100);
// 枠線の色を設定する
ctx.strokeStyle = blue ;
// 長方形の枠線を描く
ctx.stroke();
// パスを閉じる
ctx.closePath();

15. 書いたものを消す
// X: 100, Y: 80の座標から幅100px, 高さ120pxの範囲を消す
ctx.clearRect(100, 80, 100, 120);

16. Canvasで
アニメーション

17. JavaScriptのループ
setInterval(function(){
// 1秒に1回、この中身が実行される
}, 1000);
// ↑「1000ミリ秒」1ミリ秒 = 1/1000秒なので、1秒

18. ループの中で
Canvasに描画

19. // ボールのX座標
var ball_x = 0;
// ボールのY座標
var ball_y = 0;
// ループ
// 50ミリ秒( 1/20秒 )に一回描画
setInterval(function(){
// 1秒に1回、この中身が実行される
ctx.beginPath();
// X: ball_x, Y: ball_yの座標に円を描画
ctx.arc(ball_x, ball_y, 10, 0, Math.PI*2, false);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
// ball_xに1を足す
ball_x++;
// ball_yに1を足す
ball_y++;
}, 50);

20. 何かおかしい？
• Canvasに描いたものはいつまでも消え
ない
• アニメーションさせる場合、描画→消
す→描画のサイクルが必要

21. // ループ
// 50ミリ秒( 1/20秒 )に一回描画
setInterval(function(){
// 前回描画したものを消す
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 1秒に1回、この中身が実行される
ctx.beginPath();
// X: ball_x, Y: ball_yの座標に円を描画
ctx.arc(ball_x, ball_y, 10, 0, Math.PI*2, false);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
// ball_xに1を足す
ball_x++;
// ball_yに1を足す
ball_y++;
}, 50);

22. アニメーションまとめ
• setIntervalの中でCanvasに描画
• 描画→消す→描画のサイクル

23. Hackathon

24. スカッシュゲーム

25. STEP1:ボール運動

26. パラメータ設定
// ボールのX座標
var ball_x = 10;
// ボールのY座標
var ball_y = 100;
// ボールのX方向速度
var ball_dir_x = 5;
// ボールのY方向速度
var ball_dir_y = 5;
// ボールの半径
var ball_radius = 10;

27. // 50ミリ秒( 1/20秒 )に一度描画
setInterval(function(){
// 前回描画したものを消す
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ボールを描画
ctx.beginPath();
// X: ball_x, Y: ball_yの座標に円を描画
ctx.arc(Math.floor(ball_x), Math.floor(ball_y), ball_radius, 0, Math.PI*2, false);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
// ball_xにball_dir_xを足す
ball_x += ball_dir_x;
// ball_yにball_dir_yを足す
ball_y += ball_dir_y;
}, 50);

28. 壁の当たり判定
// ボールと壁の当たり判定 当たれば反転
// 左右の壁
if (ball_x < 0 ¦¦ ball_x > canvas.width) {
ball_dir_x *= -1;
}
// 画面の上
if (ball_y < 0 ¦¦ ball_y > canvas.height) {
ball_dir_y *= -1;
}

29. STEP2:バー操作

30. パラメータ設定
// バーのX座標
var bar_x = 160;
// バーのY座標
var bar_y = 280;
// バーの幅
var bar_width = 80;
// バーの高さ
var bar_height = 16;

31. バーを描画
// ループの中に描く
// バーを描画
ctx.beginPath();
ctx.rect(bar_x, bar_y, bar_width, bar_height);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();

32. マウスの動きを取得
// PC用
document.getElementById("canvas").addEventListener('mousemove', function(){
// マウスが動く度にこの中が呼ばれる
// バーのX座標をマウスに合わせる
bar_x = event.pageX - bar_width / 2;
}, false);

33. スマートフォンの場合
// スマートフォン用
document.getElementById("canvas").addEventListener('touchmove', function(){
// 画面上で指を動かす度にこの中が呼ばれる
// 画面がスクロールされるのを防ぐ
event.preventDefault();
// バーのX座標を指に合わせる
bar_x = event.touches[0].pageX - bar_width / 2;
}, false);
（とりあえず今日はPCのみで）

34. STEP3:バーとボールの
当たり判定

35. バーとボールの当たり判定
// バーに当たっているか
// ball_yがbar_yより大きい、かつ
// ball_xがbar_xより大きく、bar_x + bar_widthyり小さい
if (ball_y > bar_y && ball_x > bar_x && ball_x < bar_x + bar_width) {
ball_dir_y *= -1;
}

36. +α
• 得点表示
• ブロック崩しゲームにする
• オリジナル機能

37. 参考サイト
• Corollin’ Planet
http://corollin.com/
• JOYNT
http://joynt.in/
• jsdo.it
http://jsdo.it/
• 9leap
http://9leap.net/

38. ありがとうございました。