Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript でパックマン!第1回

1,722 views

Published on

JavaScript でパックマン!第1回 Morning Project Samurai Setagaya (MPSSD) 第4回資料。

Create pacman by using JavaScript. An article at Morning Project Samurai Setagaya 4th meeting.

---

MPSは東京で活動しているクリエイティブなキャリアをつくるための場の活動です。
Websiteはこちらです!
https://mpsamurai.org/

コミュニティ/イベント告知はDoorkeeperでおこなっています。
https://mpsamurai.doorkeeper.jp/events
興味がある方はぜひご参加ください〜!

Published in: Software

JavaScript でパックマン!第1回

  1. 1. MPS 世田谷 第4回(2015/08/23)資料 JavaScript でパックマン! 金子純也 Morning Project Samurai 代表 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  2. 2. 今日の目標 JavaScript (JS) で ブラウザの画面上に四角形を描く!! MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  3. 3. 要素 (エレメント) HTML のタグで表される HP の部品を 要素 (エレメント) と呼ぶ 例: <h1></h1>・・・h1エレメント <canvas></canvas> ・・・canvasエレメント
 <p id=“sample”>・・・id が sampleの p エレメント
 id が sampleのエレメント MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  4. 4. 要素 (エレメント) エレメントは道具箱 ! Canvas
 (道具箱) Context (道具箱) メソッド: • 円を描く機能 • 線を描く機能 • 絵を表示する機能 プロパティ: • 塗りつぶし色 • 枠線の形式 メソッド: • context を
 取り出す プロパティ: • 要素の幅 • 要素の高さ MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  5. 5. 実行結果 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  6. 6. 実行結果 <canvas>要素 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  7. 7. JS でブラウザ上に絵を描く仕組み JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  8. 8. JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 線や絵をブラウザ上で 表示するための箱 JS でブラウザ上に絵を描く仕組み MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  9. 9. JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 線や絵を描くための 紙と道具のセット JS でブラウザ上に絵を描く仕組み MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  10. 10. Context のお絵描きツール達 • 四角形を描くツール
 context.fillRect(left, top, width, height) • 円を描くツール
 context.arc(cx, cy, r, s_angle, e_angle, c_clockwise) • 図形の枠線の色を指定するツール
 context.strokeStyle = “rgb(255, 0, 0)”
 context.strokeStyle = “#FF0000” • 図形の塗りつぶし色を指定するツール
 context.fillStyle = “rgb(255, 0, 0)”
 context.fillStyle = “#FF0000” MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  11. 11. JSでCanvasからContextを取得 JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  12. 12. DOM Tree
 (HTML全体) JSでDOM TreeからCanvasを取得 JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 0-1. Canvas の要求 0-2. Canvas MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  13. 13. DOM Tree との対話の準備 <html> <head> <title>MPS世田谷パックマン</title> </head> <body> <canvas id=“pacman” width="300" height="150">
 canvas がサポートされてません。</canvas> </body> </html> ファイル名: mps_setagaya_4.html で保存 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  14. 14. DOM Treeとの対話の準備 <html> <head> <title>MPS世田谷パックマン</title> </head> <body> <canvas id="pacman" width="300" height="150">
 canvas がサポートされてません。</canvas> </body> </html> ファイル名: mps_setagaya_4.html で保存 キャンバスのサイズを指定 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  15. 15. DOM Tree との対話 <body> <canvas id="pacman" width="300" height="150">
 canvas がサポートされてません。</canvas> <script type="text/javascript"> var cv = document.getElementById("pacman"); </script> </body> MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  16. 16. DOM Tree から idがpackmanのcanvasを取得 document.getElementById("pacman"); プログラム中で DOM Tree をあらわす MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  17. 17. document.getElementById("pacman"); DOM Tree に命令を行う 合図
 (DOM Tree の持っている
 機能を使う合図) DOM Tree から idがpackmanのcanvasを取得 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  18. 18. document.getElementById("pacman"); pacman という id を持った要素を 取ってこい! (DOM Tree に
 実際にやって
 もらうこと) DOM Tree から idがpackmanのcanvasを取得 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  19. 19. document.getElementById("pacman"); プログラム中での DOM Tree DOM Tree に命令を行う (DOM Tree の持っている
 機能を使う) pacman という id を持った要素を 取ってこい! (DOM Tree に
 実際にやって
 もらうこと) DOM Tree から idがpackmanのcanvasを取得 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  20. 20. document.getElementById("pacman"); Canvas
 (HTML要素) Context DOM Tree から idがpackmanのcanvasを取得 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  21. 21. document.getElementById("pacman"); Canvas
 (HTML要素) Context こいつを どこかに保存して おく必要がある DOM Tree から idがpackmanのcanvasを取得 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  22. 22. <body> <canvas id="pacman" width="300" height="150">
 canvas がサポートされてません。</canvas> <script type="text/javascript"> var cv = document.getElementById("pacman"); cv という名前の入れ物を作って、 = の右側の実行結果 (今回は canvas要素) を保存 DOM Tree から idがpackmanのcanvasを取得 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  23. 23. DOM Tree
 (HTML全体) JSでDOM TreeからCanvasを取得 JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 0-1. Canvas の要求 0-2. Canvas MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  24. 24. Canvas との対話 <body> <canvas id="pacman" width="300" height="150">
 canvas がサポートされてません。</canvas> <script type="text/javascript"> var cv = document.getElementById(“pacman"); var ctx = cv.getContext("2d"); </script> </body> MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  25. 25. DOM Tree
 (HTML全体) JSでDOM TreeからCanvasを取得 JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 0-1. Canvas の要求 0-2. Canvas MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  26. 26. context との対話 <body> <canvas id="pacman" width="300" height="150">
 canvas がサポートされてません。</canvas> <script type="text/javascript"> var cv = document.getElementById(“pacman"); var ctx = cv.getContext(“2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(20, 20, 150, 100); </script> </body> MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  27. 27. Context の”紙”の構造 (0, 0) (12, 0) (12, 12) ピクセル
 (r, g, b) = (255, 0, 0) MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  28. 28. 実行結果 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  29. 29. なぜかうまく動かない? Developer Tools MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
  30. 30. 選択 エラーの数 エラーの場所選択 エラーの詳細 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko

×