JavaScript でパックマン！第3回

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

今日の目標
JS のパスについてさらに理解する!
JS でパックマンを動かす準備! 
(関数の理解)

前回描いたパックマン

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);

arc を使ったパックマンの描画
• ヒント1 
白い扇形を赤い丸に重ねてやればいい!!
• ヒント2 
扇形はどうやって作ればいい??
+

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();

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.ﬁll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.ﬁll();
赤い円を描画

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.ﬁll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.ﬁll();
口を描画

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.ﬁll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.ﬁll();
Pathってなに？

パスの例
1
2
3
4
5
6

ctx.beginPath()

パスの例
1
2
3
4
5
6
ctx.beginPath()
ctx.arc()

パスの例
1
2
3
4
5
6
ctx.beginPath()
ctx.arc()
ctx.linTo()

パスの例
1
2
3
4
5
6
ctx.beginPath()
ctx.arc()
ctx.linTo()
.
.
.
ctx.linTo()

stroke()
1
2
3
4
5
6
ctx.beginPath()
ctx.arc()
ctx.linTo()
.
.
.
ctx.linTo()
ctx.stroke()
実際に線が描かれる

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

Q. 囲まれてるから?

この場合は？

非ゼロワインディングルール
-1
1
1

0
1

パックマンを非ワインディング
ルールを考慮して書いてみよう!

var cv = document.getElementById('pacman');
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.ﬁll();

アニメーションに必要なこと

パックマンを何度も何度も描くこと!

パックマンを何度も何度も描くこと!
何度でも気軽にパックマンを
かけないと困る!

「パックマンを描く」というJSの命令を
新たにブラウザに教えてやる!
（関数を定義する）

関数
複数の命令をセットにして名前をつけたもの 
(必要があれば、入力と出力を持つ)
例: パックマンを描く関数
パックマンを描くのに必要な命令をまとめたもの

関数の例
function drawPacman(ctx) {
ctx.beginPath();
ctx.arc(100, 100, 50,  
30 * Math.PI / 180, 330 * Math.PI / 180);
100 + 50 * Math.sin(30 * Math.PI / 180));
ctx.ﬁll();
}

下記関数を<script>の直下に
書いて定義してみよう!
ctx.beginPath();
ctx.arc(100, 100, 50,  
30 * Math.PI / 180, 330 * Math.PI / 180);
100 + 50 * Math.sin(30 * Math.PI / 180));
ctx.ﬁll();
}

関数の例
ctx.beginPath();
ctx.arc(100, 100, 50,  
30 * Math.PI / 180, 330 * Math.PI / 180);
100 + 50 * Math.sin(30 * Math.PI / 180));
ctx.ﬁll();
}
関数の名前

関数の例
ctx.beginPath();
ctx.arc(100, 100, 50,  
30 * Math.PI / 180, 330 * Math.PI / 180);
100 + 50 * Math.sin(30 * Math.PI / 180));
ctx.ﬁll();
}
関数への入力

使い方
<script>
…
}
drawPacman(ctx);
</script>

関数を改良してみよう
function drawPacman(ctx, cx, cy) {
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.ﬁll();
}

改良した関数を使って
複数のPacman を描いてみよう!
drawPacman(ctx, 50, 50);
*注意) canvas の width を 500 に変更！

次回
• 今度こそ、パックマンを動かす！
• キーボードからの入力を処理する！

JavaScript でパックマン！第3回

More Related Content

What's hot (11)

More from Project Samurai (20)

JavaScript でパックマン！第3回