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

1. MPS Setagaya 第6回 (2015/09/27) ミーティング
JavaScript でパックマン! 第3回
金子純也
Morning Project Samurai 代表
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

2. 今日の目標
JS のパスについてさらに理解する!
JS でパックマンを動かす準備!
(関数の理解)
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

3. 前回描いたパックマン
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

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. arc を使ったパックマンの描画
• ヒント1
白い扇形を赤い丸に重ねてやればいい!!
• ヒント2
扇形はどうやって作ればいい??
+
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

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. 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. 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. 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. パスの例
1
2
3
4
5
6
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

11. ctx.beginPath()
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

12. パスの例
1
2
3
4
5
6
ctx.beginPath()
ctx.arc()
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

13. パスの例
1
2
3
4
5
6
ctx.beginPath()
ctx.arc()
ctx.linTo()
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

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. 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. パスと色塗りの関係
ctx.beginPath()
ctx.arc()
ctx.linTo()
.
.
.
ctx.linTo()
ctx.fill()
パスに囲まれた部分が
塗りつぶされる MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

17. パスと色塗りの関係
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

18. パスと色塗りの関係
Q. 囲まれてるから?
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

19. この場合は？
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

20. 非ゼロワインディングルール
-1
1
1
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

21. 0
1
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

22. MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

23. パックマンを非ワインディング
ルールを考慮して書いてみよう!
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

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. アニメーションに必要なこと
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

26. アニメーションに必要なこと
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

27. アニメーションに必要なこと
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

28. アニメーションに必要なこと
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

29. アニメーションに必要なこと
パックマンを何度も何度も描くこと!
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

30. アニメーションに必要なこと
パックマンを何度も何度も描くこと!
何度でも気軽にパックマンを
かけないと困る!
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

31. 「パックマンを描く」というJSの命令を
新たにブラウザに教えてやる!
（関数を定義する）
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

32. 関数
複数の命令をセットにして名前をつけたもの
(必要があれば、入力と出力を持つ)
例: パックマンを描く関数
パックマンを描くのに必要な命令をまとめたもの
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko

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. 下記関数を<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. 関数の例
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. 関数の例
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. 使い方
<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. 関数を改良してみよう
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. 改良した関数を使って
複数の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. 次回
• 今度こそ、パックマンを動かす！
• キーボードからの入力を処理する！
MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko