MPS Setagaya 第7回ミーティング資料

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

2. 本日の目標
• パックマンに口パクさせる!
- Canvas 上でのアニメーションの実現
• キーボードでパックマンを動かす!
- ブラウザでのキーボードイベントの処理
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

3. window.requestAnimationFrame()
• ブラウザにアニメーションの描画を要求
- 描画のタイミングはブラウザが決定
(フレームレートをきっちり決めることはできない)
• 引数に指定した関数が実行される
例: function drawPackman(timestamp){ … }
window.requestAnimationFrame(drawPackman);
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

4. window.requestAnimationFrame()
によるアニメーション
function animation_loop() {
// 描画処理をここに書く
// …
window.requestAnimationFrame(animation_loop);
}
window.requestAnimationFrame(animation_loop);
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

5. window.requestAnimationFrame()
によるアニメーション
function animation_loop() {
// 描画処理をここに書く
// …
window.requestAnimationFrame(animation_loop);
}
window.requestAnimationFrame(animation_loop);
これから作るところ
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

6. 口パクまでの道のり
1. 手動でパクパクできるようにする
2. 自動でパクパクさせる
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

7. Step1. 手動で口パク!
var cv = document.getElementById(‘pac-man');
var ctx = cv.getContext("2d");
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();
}
drawPacman(ctx, 50, 50);
θ=30
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

8. Step1. 手動で口パク!
var cv = document.getElementById(‘pac-man');
var ctx = cv.getContext("2d");
function drawPacman(ctx ,cx, cy, theta){
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(cx, cy, 50, theta * Math.PI / 180,
(360 - theta) * Math.PI / 180);
ctx.lineTo(cx, cy);
ctx.lineTo(cx + 50 * Math.cos(theta * Math.PI / 180),
cy + 50 * Math.sin(theta * Math.PI / 180));
ctx.fill();
}
drawPacman(ctx, 50, 50, 30);
drawPacman(ctx, 150, 50, 10);
θ=theta
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

9. Step2. 自動でパクパクさせる
var cv = document.getElementById(‘pac-man');
var ctx = cv.getContext("2d");
var cx = 50, cy = 50, theta = 30, dTheta = -1;
function drawPacman(ctx ,cx, cy, theta){ … }
function animationLoop(timestamp) {
if (theta >= 30) dTheta = -1;
else if (theta <=0 ) dTheta = 1;
theta += dTheta;
ctx.clearRect(0, 0, cv.width, cv.height);
drawPacman(ctx, cx, cy, theta);
window.requestAnimationFrame(animationLoop);
}
window.requestAnimationFrame(animationLoop);MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

10. パックマン操作までの道のり
• キー押下イベント (onkeydown) に対応する
イベント処理関数を作り登録
• キーが離されたイベント (onkeyup) に
対応するイベント処理関数を作り登録
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

11. ユーザーの入力とイベント
• ブラウザはブラウザ上でのユーザーの操作をイベント
として取り扱う
- 例: マウスのクリック、キーの押下
• ブラウザは関連する要素へとイベントを通知
• プログラマは要素に対し、JavaScript を用いて
イベントへの対処方を事前登録 (イベントハンドラの登録)
• 要素はイベントを受け取ると対応する登録された
イベントハンドラを起動する
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

12. イベント処理の流れ
ブラウザキャンバス要素 cv
キーが
押下された!
フォーカスは
Canvas要素
キーを押下cv.onkydown に登録された
イベントハンドラで対処するぜ !
ユーザー
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

13. イベントの例
• onkeydown: キーの押下イベント
• onkeyup: キーが離されたイベント
• onmousedown: マウスのボタンが押下された
• onmouseup: マウスのボタンが離された
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

14. 要素へのイベントハンドラの登録
cv.tabIndex = 1;
cv.onkeydown = function(event) {
event.preventDefault();
switch(event.keyCode) {
case 37:
cx -= 1; break;
case 38:
cy -= 1; break;
case 39:
cx += 1; break;
case 40:
cy += 1; break;
}
};
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

15. なんだかカクカク動く・・・
ブラウザ
Canvas
cx, cy
キー押下発生!
位置更新!
イベントハンドラによる
cx, cy の更新に基づく描画
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

16. なんだかカクカク動く・・・
イベントハンドラによる
cx, cy の更新に基づく描画
ブラウザ
Canvas
cx, cy
キー押下発生!
位置更新!イベントハンドラが
終了するたびに
移動も終了してしまう!
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

17. 滑らかに動かす工夫
movingDirectionに基づき
cx, cy を更新して描画
ブラウザ
Canvas
movingDirection[0] = 1
movingDirection[1] = 0
キー押下発生!
移動量更新!一度移動量を決めれば、
新たに onkeydown イベントが
起こらなくてもパックマンが
移動し続ける!! MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

18. 改良版 onkeydown イベントハンドラ
var moveDirection = [0, 0] //x, y
cv.tabIndex = 1;
cv.onkeydown = function(event) {
event.preventDefault();
switch(event.keyCode) {
case 37:
moveDirection[0] = -1; break;
case 38:
moveDirection[1] = -1; break;
case 39:
moveDirection[0] = 1; break;
case 40:
moveDirection[1] = 1;
}
}; MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

19. 改良版 描画関数
function animationLoop(timestamp) {
if (theta >= 30) dTheta = -1;
else if (theta <=0 ) dTheta = 1;
theta += dTheta;
cx += moveDirection[0];
cy += moveDirection[1];
ctx.clearRect(0, 0, cv.width, cv.height);
drawPacman(ctx, cx, cy, theta);
window.requestAnimationFrame(animationLoop);
}
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

20. 滑らかに動くが止まらない !!
onkeyup イベントハンドラの中で
キーが離されたら対応する方向の移動量を0にする
MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko

21. cv.onkeyup = function(event) {
event.preventDefault();
switch(event.keyCode) {
case 37:
moveDirection[0] = 0;
break;
case 38:
moveDirection[1] = 0;
break;
case 39:
moveDirection[0] = 0;
break;
case 40:
moveDirection[1] = 0;
}
}; MPS Setagaya 第7回 (2015/10/11) ミーティング (c) Junya Kaneko