JavaScript でパックマン！第1回
•
3 j'aime•3,063 vues
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 興味がある方はぜひご参加ください〜！
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (8)
Similaire à JavaScript でパックマン！第1回
Plus de Project Samurai
Plus de Project Samurai (19)
JavaScript でパックマン！第1回
- 1. MPS 世田谷 第4回(2015/08/23)資料 JavaScript でパックマン！ 金子純也 Morning Project Samurai 代表 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 2. 今日の目標 JavaScript (JS) で ブラウザの画面上に四角形を描く!! MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 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. 要素 (エレメント) エレメントは道具箱 ! Canvas (道具箱) Context (道具箱) メソッド: • 円を描く機能 • 線を描く機能 • 絵を表示する機能 プロパティ: • 塗りつぶし色 • 枠線の形式 メソッド: • context を 取り出す プロパティ: • 要素の幅 • 要素の高さ MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 5. 実行結果 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 6. 実行結果 <canvas>要素 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 7. JS でブラウザ上に絵を描く仕組み JavaScript Canvas (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 8. JavaScript Canvas (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 線や絵をブラウザ上で 表示するための箱 JS でブラウザ上に絵を描く仕組み MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 9. JavaScript Canvas (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 線や絵を描くための 紙と道具のセット JS でブラウザ上に絵を描く仕組み MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 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. JSでCanvasからContextを取得 JavaScript Canvas (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 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. 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. 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. 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. DOM Tree から idがpackmanのcanvasを取得 document.getElementById("pacman"); プログラム中で DOM Tree をあらわす MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 17. document.getElementById("pacman"); DOM Tree に命令を行う 合図 (DOM Tree の持っている 機能を使う合図) DOM Tree から idがpackmanのcanvasを取得 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 18. document.getElementById("pacman"); pacman という id を持った要素を 取ってこい！ (DOM Tree に 実際にやって もらうこと) DOM Tree から idがpackmanのcanvasを取得 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 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. document.getElementById("pacman"); Canvas (HTML要素) Context DOM Tree から idがpackmanのcanvasを取得 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 21. document.getElementById("pacman"); Canvas (HTML要素) Context こいつを どこかに保存して おく必要がある DOM Tree から idがpackmanのcanvasを取得 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 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. 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. 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. 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. 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. Context の”紙”の構造 (0, 0) (12, 0) (12, 12) ピクセル (r, g, b) = (255, 0, 0) MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 28. 実行結果 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 29. なぜかうまく動かない? Developer Tools MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko
- 30. 選択 エラーの数 エラーの場所選択 エラーの詳細 MPS 世田谷 第4回(2015/08/23)資料 (c) Junya Kaneko