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.
MPS Setagaya 第6回 (2015/09/27) ミーティング
JavaScript でパックマン! 第3回
金子純也
Morning Project Samurai 代表
MPS Setagaya 第6回 (2015/09/27) ...
今日の目標
JS のパスについてさらに理解する!
JS でパックマンを動かす準備!

(関数の理解)
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
前回描いたパックマン
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
arc()
arc(中心x, 中心y, 半径, 開始角度, 終了角度, 反時計回り)
* 開始角度、終了角度はラジアンで指定

(360度 = 2 * Math.PI ラジアン)
ctx.arc(100, 100, 50, 0, 1/2 * M...
arc を使ったパックマンの描画
• ヒント1

白い扇形を赤い丸に重ねてやればいい!!
• ヒント2

扇形はどうやって作ればいい??
+
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kane...
var cv = document.getElementById(‘pac-man');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF00...
var cv = document.getElementById(‘pac-man');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF00...
var cv = document.getElementById(‘pac-man');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF00...
var cv = document.getElementById(‘pac-man');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF00...
パスの例
1
2
3
4
5
6
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
ctx.beginPath()
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
パスの例
1
2
3
4
5
6
ctx.beginPath()
ctx.arc()
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
パスの例
1
2
3
4
5
6
ctx.beginPath()
ctx.arc()
ctx.linTo()
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
パスの例
1
2
3
4
5
6
ctx.beginPath()
ctx.arc()
ctx.linTo()
.
.
.
ctx.linTo()
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Ka...
stroke()
1
2
3
4
5
6
ctx.beginPath()
ctx.arc()
ctx.linTo()
.
.
.
ctx.linTo()
ctx.stroke()
実際に線が描かれる
MPS Setagaya 第6回 (2015...
パスと色塗りの関係
ctx.beginPath()
ctx.arc()
ctx.linTo()
.
.
.
ctx.linTo()
ctx.fill()
パスに囲まれた部分が

塗りつぶされる MPS Setagaya 第6回 (2015/09/...
パスと色塗りの関係
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
パスと色塗りの関係
Q. 囲まれてるから?
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
この場合は?
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
非ゼロワインディングルール
-1
1
1
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
0
1
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
パックマンを非ワインディング
ルールを考慮して書いてみよう!
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF000...
アニメーションに必要なこと
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
アニメーションに必要なこと
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
アニメーションに必要なこと
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
アニメーションに必要なこと
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
アニメーションに必要なこと
パックマンを何度も何度も描くこと!
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
アニメーションに必要なこと
パックマンを何度も何度も描くこと!
何度でも気軽にパックマンを
かけないと困る!
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
「パックマンを描く」というJSの命令を
新たにブラウザに教えてやる!
(関数を定義する)
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
関数
複数の命令をセットにして名前をつけたもの

(必要があれば、入力と出力を持つ)
例: パックマンを描く関数
パックマンを描くのに必要な命令をまとめたもの
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) J...
関数の例
function drawPacman(ctx) {
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(100, 100, 50, ...
下記関数を<script>の直下に
書いて定義してみよう!
function drawPacman(ctx) {
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF0000";
ctx.beginPath(...
関数の例
function drawPacman(ctx) {
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(100, 100, 50, ...
関数の例
function drawPacman(ctx) {
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(100, 100, 50, ...
使い方
<script>
function drawPacman(ctx) {
…
}
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
dra...
関数を改良してみよう
function drawPacman(ctx, cx, cy) {
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(...
改良した関数を使って
複数のPacman を描いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
drawPacman(ctx, 5...
次回
• 今度こそ、パックマンを動かす!
• キーボードからの入力を処理する!
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
Upcoming SlideShare
Loading in …5
×

JavaScript でパックマン!第3回

458 views

Published on

JavaScript と HTML5 で新たに導入された Canvas を用いてパックマンを作ります。MPS Setagaya 第6回(2015/09/27) ミーティング資料です。

Published in: Software
  • Be the first to comment

  • Be the first to like this

JavaScript でパックマン!第3回

  1. 1. MPS Setagaya 第6回 (2015/09/27) ミーティング JavaScript でパックマン! 第3回 金子純也 Morning Project Samurai 代表 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  2. 2. 今日の目標 JS のパスについてさらに理解する! JS でパックマンを動かす準備!
 (関数の理解) MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  3. 3. 前回描いたパックマン MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  4. 4. arc() arc(中心x, 中心y, 半径, 開始角度, 終了角度, 反時計回り) * 開始角度、終了角度はラジアンで指定
 (360度 = 2 * Math.PI ラジアン) ctx.arc(100, 100, 50, 0, 1/2 * Math.PI, true); ctx.arc(100, 100, 50, 0, 1/2 * Math.PI, false); MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  5. 5. arc を使ったパックマンの描画 • ヒント1
 白い扇形を赤い丸に重ねてやればいい!! • ヒント2
 扇形はどうやって作ればいい?? + MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  6. 6. var cv = document.getElementById(‘pac-man'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  7. 7. var cv = document.getElementById(‘pac-man'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); 赤い円を描画 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  8. 8. var cv = document.getElementById(‘pac-man'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); 口を描画 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  9. 9. var cv = document.getElementById(‘pac-man'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); Pathってなに? MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  10. 10. パスの例 1 2 3 4 5 6 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  11. 11. ctx.beginPath() MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  12. 12. パスの例 1 2 3 4 5 6 ctx.beginPath() ctx.arc() MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  13. 13. パスの例 1 2 3 4 5 6 ctx.beginPath() ctx.arc() ctx.linTo() MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  14. 14. パスの例 1 2 3 4 5 6 ctx.beginPath() ctx.arc() ctx.linTo() . . . ctx.linTo() MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  15. 15. stroke() 1 2 3 4 5 6 ctx.beginPath() ctx.arc() ctx.linTo() . . . ctx.linTo() ctx.stroke() 実際に線が描かれる MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  16. 16. パスと色塗りの関係 ctx.beginPath() ctx.arc() ctx.linTo() . . . ctx.linTo() ctx.fill() パスに囲まれた部分が
 塗りつぶされる MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  17. 17. パスと色塗りの関係 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  18. 18. パスと色塗りの関係 Q. 囲まれてるから? MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  19. 19. この場合は? MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  20. 20. 非ゼロワインディングルール -1 1 1 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  21. 21. 0 1 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  22. 22. MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  23. 23. パックマンを非ワインディング ルールを考慮して書いてみよう! MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  24. 24. var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 30 * 
 Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI / 180), 
 100 + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  25. 25. アニメーションに必要なこと MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  26. 26. アニメーションに必要なこと MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  27. 27. アニメーションに必要なこと MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  28. 28. アニメーションに必要なこと MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  29. 29. アニメーションに必要なこと パックマンを何度も何度も描くこと! MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  30. 30. アニメーションに必要なこと パックマンを何度も何度も描くこと! 何度でも気軽にパックマンを かけないと困る! MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  31. 31. 「パックマンを描く」というJSの命令を 新たにブラウザに教えてやる! (関数を定義する) MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  32. 32. 関数 複数の命令をセットにして名前をつけたもの
 (必要があれば、入力と出力を持つ) 例: パックマンを描く関数 パックマンを描くのに必要な命令をまとめたもの MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  33. 33. 関数の例 function drawPacman(ctx) { ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 
 30 * Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI / 180), 
 100 + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); } MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  34. 34. 下記関数を<script>の直下に 書いて定義してみよう! function drawPacman(ctx) { ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 
 30 * Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI / 180), 
 100 + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); } MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  35. 35. 関数の例 function drawPacman(ctx) { ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 
 30 * Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI / 180), 
 100 + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); } 関数の名前 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  36. 36. 関数の例 function drawPacman(ctx) { ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 
 30 * Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI / 180), 
 100 + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); } 関数への入力 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  37. 37. 使い方 <script> function drawPacman(ctx) { … } var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); drawPacman(ctx); </script> MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  38. 38. 関数を改良してみよう function drawPacman(ctx, cx, cy) { ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(cx, cy, 50, 
 30 * Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(cx, cy); ctx.lineTo(cx + 50 * Math.cos(30 * Math.PI / 180), 
 cy + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); } MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  39. 39. 改良した関数を使って 複数のPacman を描いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); drawPacman(ctx, 50, 50); drawPacman(ctx, 240, 50); drawPacman(ctx, 400, 50); *注意) canvas の width を 500 に変更! MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
  40. 40. 次回 • 今度こそ、パックマンを動かす! • キーボードからの入力を処理する! MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

×