JavaScript でパックマン！第4回

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

本日の目標
• パックマンに口パクさせる! 
- Canvas 上でのアニメーションの実現
• キーボードでパックマンを動かす! 
- ブラウザでのキーボードイベントの処理

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

window.requestAnimationFrame()  
によるアニメーション
function animation_loop() {
// 描画処理をここに書く
// …
window.requestAnimationFrame(animation_loop);
}

window.requestAnimationFrame()  
によるアニメーション
function animation_loop() {
// 描画処理をここに書く
// …
}
これから作るところ

口パクまでの道のり
1. 手動でパクパクできるようにする
2. 自動でパクパクさせる

Step1. 手動で口パク!
var cv = document.getElementById(‘pac-man');
var ctx = cv.getContext("2d");
function drawPacman(ctx ,cx, cy){
ctx.strokeStyle="#FF0000";
ctx.ﬁllStyle="#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.ﬁll();
}
drawPacman(ctx, 50, 50);
θ=30

Step1. 手動で口パク!
function drawPacman(ctx ,cx, cy, theta){
ctx.strokeStyle="#FF0000";
ctx.ﬁllStyle="#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.ﬁll();
}
drawPacman(ctx, 50, 50, 30);
drawPacman(ctx, 150, 50, 10);
θ=theta

Step2. 自動でパクパクさせる
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

パックマン操作までの道のり
• キー押下イベント (onkeydown) に対応する 
イベント処理関数を作り登録
• キーが離されたイベント (onkeyup) に 
対応するイベント処理関数を作り登録

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

イベント処理の流れ
ブラウザキャンバス要素 cv
キーが
押下された!
フォーカスは 
Canvas要素
キーを押下cv.onkydown に登録された
イベントハンドラで対処するぜ !
ユーザー

イベントの例
• onkeydown: キーの押下イベント
• onkeyup: キーが離されたイベント
• onmousedown: マウスのボタンが押下された
• onmouseup: マウスのボタンが離された

要素へのイベントハンドラの登録
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;
}
};

なんだかカクカク動く・・・
ブラウザ
Canvas
cx, cy
キー押下発生!
位置更新!
イベントハンドラによる
cx, cy の更新に基づく描画

なんだかカクカク動く・・・
イベントハンドラによる
cx, cy の更新に基づく描画
ブラウザ
Canvas
cx, cy
キー押下発生!
位置更新!イベントハンドラが 
終了するたびに
移動も終了してしまう!

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

改良版 onkeydown イベントハンドラ
var moveDirection = [0, 0] //x, y
cv.tabIndex = 1;
cv.onkeydown = function(event) {
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

改良版描画関数
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);
}

滑らかに動くが止まらない !!
onkeyup イベントハンドラの中で
キーが離されたら対応する方向の移動量を0にする

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

JavaScript でパックマン！第4回

More Related Content

More from Project Samurai (20)

JavaScript でパックマン！第4回