Forif Hackathon for            Students JavaScriptで作るスマートフォンブラウザゲーム株式会社フォリフエンジニア大橋巧2012/05/18
自己紹介• 大橋 巧• 2011年4月入社• 主にクライアントサイド担当• Corollin’ Planetなど開発
今日は
HTML5
What’s HTML5?• Flashのかわりになるらしい• 最近のWebサービスはみんなHTML5• とにかくすごいらしい
HTML5とは•   HTML5 (エイチティーエムエル・ファイブ)とは HTML の 5 回目に    当たる大幅な改定版である。表記は HTML と 5 の間にスペースを含ま    ない。XML の文法で記述する場合、XHTML5 と呼ばれ...
?
HTML5とは(ざっくり)• 文章の構造を明確化• 画像描画、動画や音声の再生• 位置情報、双方向通信etc...• HTML5 + JavaScript + CSS3  →リッチなWebアプリも作成可能に
Canvas
Canvas• JavaScriptを使って動的に図を描く   HTML5の要素HTML:    <canvas width= 100 height= 100 ></canvas>js:    var canvas = document.get...
実際にCanvasで図形を描いてみる
Canvas下準備 • コンテキストを取得するvar canvas = document.getElementById( canvas );var ctx = canvas.getContext( 2d );
円を描く// パスを開くctx.beginPath();// X: 100, Y: 100の座標に半径50pxの円を描くctx.arc(100, 100, 50, 0, Math.PI*2, false);// 塗りつぶす色を設定するctx.fi...
長方形を描く// パスを開くctx.beginPath();// X: 80, Y: 160の座標に幅200px, 高さ100pxの長方形を描くctx.rect(80, 160, 200, 100);// 枠線の色を設定するctx.stroke...
書いたものを消す// X: 100, Y: 80の座標から幅100px, 高さ120pxの範囲を消すctx.clearRect(100, 80, 100, 120);
Canvasでアニメーション
JavaScriptのループsetInterval(function(){   // 1秒に1回、この中身が実行される}, 1000);// ↑「1000ミリ秒」1ミリ秒 = 1/1000秒なので、1秒
ループの中でCanvasに描画
// ボールのX座標var ball_x = 0;// ボールのY座標var ball_y = 0;// ループ// 50ミリ秒( 1/20秒 )に一回描画setInterval(function(){     // 1秒に1回、この中身が実行...
何かおかしい?• Canvasに描いたものはいつまでも消え ない• アニメーションさせる場合、描画→消 す→描画のサイクルが必要
// ループ// 50ミリ秒( 1/20秒 )に一回描画setInterval(function(){     // 前回描画したものを消す     ctx.clearRect(0, 0, canvas.width, canvas.height...
アニメーションまとめ• setIntervalの中でCanvasに描画• 描画→消す→描画のサイクル
Hackathon
スカッシュゲーム
STEP1:ボール運動
パラメータ設定// ボールのX座標var ball_x = 10;// ボールのY座標var ball_y = 100;// ボールのX方向速度var ball_dir_x = 5;// ボールのY方向速度var ball_dir_y = 5;...
// 50ミリ秒( 1/20秒 )に一度描画setInterval(function(){     // 前回描画したものを消す    ctx.clearRect(0, 0, canvas.width, canvas.height);    /...
壁の当たり判定// ボールと壁の当たり判定 当たれば反転// 左右の壁if (ball_x < 0 ¦¦ ball_x > canvas.width) {     ball_dir_x *= -1;}// 画面の上if (ball_y < 0 ...
STEP2:バー操作
パラメータ設定// バーのX座標var bar_x = 160;// バーのY座標var bar_y = 280;// バーの幅var bar_width = 80;// バーの高さvar bar_height = 16;
バーを描画// ループの中に描く// バーを描画ctx.beginPath();ctx.rect(bar_x, bar_y, bar_width, bar_height);ctx.fillStyle = "blue";ctx.fill();ctx....
マウスの動きを取得// PC用document.getElementById("canvas").addEventListener(mousemove, function(){     // マウスが動く度にこの中が呼ばれる     // バー...
スマートフォンの場合// スマートフォン用document.getElementById("canvas").addEventListener(touchmove, function(){     // 画面上で指を動かす度にこの中が呼ばれる ...
STEP3:バーとボールの   当たり判定
バーとボールの当たり判定// バーに当たっているか// ball_yがbar_yより大きい、かつ// ball_xがbar_xより大きく、bar_x + bar_widthyり小さいif (ball_y > bar_y && ball_x > ...
+α• 得点表示• ブロック崩しゲームにする• オリジナル機能
参考サイト• Corollin’ Planet    http://corollin.com/• JOYNT    http://joynt.in/•   jsdo.it    http://jsdo.it/•   9leap    http:...
ありがとうございました。
Upcoming SlideShare
Loading in …5
×

JavaScript Hackathon for Students

989 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JavaScript Hackathon for Students

  1. 1. Forif Hackathon for Students JavaScriptで作るスマートフォンブラウザゲーム株式会社フォリフエンジニア大橋巧2012/05/18
  2. 2. 自己紹介• 大橋 巧• 2011年4月入社• 主にクライアントサイド担当• Corollin’ Planetなど開発
  3. 3. 今日は
  4. 4. HTML5
  5. 5. What’s HTML5?• Flashのかわりになるらしい• 最近のWebサービスはみんなHTML5• とにかくすごいらしい
  6. 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だけでなくXHTML1やDOM2HTML(特にJavaScript)も加え 参考URL : http://ja.wikipedia.org/wiki/HTML5
  7. 7.
  8. 8. HTML5とは(ざっくり)• 文章の構造を明確化• 画像描画、動画や音声の再生• 位置情報、双方向通信etc...• HTML5 + JavaScript + CSS3 →リッチなWebアプリも作成可能に
  9. 9. Canvas
  10. 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. 11. 実際にCanvasで図形を描いてみる
  12. 12. Canvas下準備 • コンテキストを取得するvar canvas = document.getElementById( canvas );var ctx = canvas.getContext( 2d );
  13. 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. 14. 長方形を描く// パスを開くctx.beginPath();// X: 80, Y: 160の座標に幅200px, 高さ100pxの長方形を描くctx.rect(80, 160, 200, 100);// 枠線の色を設定するctx.strokeStyle = blue ;// 長方形の枠線を描くctx.stroke();// パスを閉じるctx.closePath();
  15. 15. 書いたものを消す// X: 100, Y: 80の座標から幅100px, 高さ120pxの範囲を消すctx.clearRect(100, 80, 100, 120);
  16. 16. Canvasでアニメーション
  17. 17. JavaScriptのループsetInterval(function(){ // 1秒に1回、この中身が実行される}, 1000);// ↑「1000ミリ秒」1ミリ秒 = 1/1000秒なので、1秒
  18. 18. ループの中でCanvasに描画
  19. 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. 20. 何かおかしい?• Canvasに描いたものはいつまでも消え ない• アニメーションさせる場合、描画→消 す→描画のサイクルが必要
  21. 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. 22. アニメーションまとめ• setIntervalの中でCanvasに描画• 描画→消す→描画のサイクル
  23. 23. Hackathon
  24. 24. スカッシュゲーム
  25. 25. STEP1:ボール運動
  26. 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. 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. 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. 29. STEP2:バー操作
  30. 30. パラメータ設定// バーのX座標var bar_x = 160;// バーのY座標var bar_y = 280;// バーの幅var bar_width = 80;// バーの高さvar bar_height = 16;
  31. 31. バーを描画// ループの中に描く// バーを描画ctx.beginPath();ctx.rect(bar_x, bar_y, bar_width, bar_height);ctx.fillStyle = "blue";ctx.fill();ctx.closePath();
  32. 32. マウスの動きを取得// PC用document.getElementById("canvas").addEventListener(mousemove, function(){ // マウスが動く度にこの中が呼ばれる // バーのX座標をマウスに合わせる bar_x = event.pageX - bar_width / 2;}, false);
  33. 33. スマートフォンの場合// スマートフォン用document.getElementById("canvas").addEventListener(touchmove, function(){ // 画面上で指を動かす度にこの中が呼ばれる // 画面がスクロールされるのを防ぐ event.preventDefault(); // バーのX座標を指に合わせる bar_x = event.touches[0].pageX - bar_width / 2;}, false); (とりあえず今日はPCのみで)
  34. 34. STEP3:バーとボールの 当たり判定
  35. 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. 36. +α• 得点表示• ブロック崩しゲームにする• オリジナル機能
  37. 37. 参考サイト• Corollin’ Planet http://corollin.com/• JOYNT http://joynt.in/• jsdo.it http://jsdo.it/• 9leap http://9leap.net/
  38. 38. ありがとうございました。

×