端端舝

MPS Setagaya 菴7隙 (2015/10/11) 立奈氾奴件弘
JavaScript 匹由永弁穴件! 菴4隙
踢赽�珩
Morning Project Samurai 測桶
MPS Setagaya 菴7隙 (2015/10/11) 立奈氾奴件弘 (c) Junya Kaneko

掛゜及醴㻢
? 由永弁穴件卞諳由弁今六月!?
- Canvas 奻匹及失瓦丟奈扑亦件及灍政
? 平奈示奈玉匹由永弁穴件毛�井允!?
- 皮仿它扒匹及平奈示奈玉奶矛件玄及�I燴

window.requestAnimationFrame()
? 皮仿它扒卞失瓦丟奈扑亦件及鏡賒毛猁А?
- 鏡賒及正奶立件弘反皮仿它扒互𢜪隅?
(白伊奈丞伊奈玄毛五勻切曰𢜪戶月仇午反匹五卅中)
? 竘杅卞硌隅仄凶憝杅互灍俴今木月?
瞰: function drawPackman(timestamp){ ＃ }?
window.requestAnimationFrame(drawPackman);

window.requestAnimationFrame() ?
卞方月失瓦丟奈扑亦件
function animation_loop() {
// 鏡賒�I燴毛仇仇卞𤩸仁
// ＃
window.requestAnimationFrame(animation_loop);
}

window.requestAnimationFrame() ?
卞方月失瓦丟奈扑亦件
function animation_loop() {
// 鏡賒�I燴毛仇仇卞𤩸仁
// ＃
}
仇木井日釬月午仇欠

諳由弁引匹及耋及曰
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) 卞�𡛟允月?
奶矛件玄�I燴憝杅毛釬曰腎嶕
? 平奈互褩今木凶奶矛件玄 (onkeyup) 卞?
�𡛟允月奶矛件玄�I燴憝杅毛釬曰腎嶕

交奈扒奈及⻌薯午奶矛件玄
? 皮仿它扒反皮仿它扒奻匹及交奈扒奈及紱釬毛奶矛件玄?
午仄化龰曰㜳丹?
- 瞰: 穴它旦及弁伉永弁﹜平奈及挹狟
? 皮仿它扒反憝窣允月猁匼尺午奶矛件玄毛籵眭
? 皿伕弘仿穴反猁匼卞�仄﹜JavaScript 毛蚚中化?
奶矛件玄尺及��I源毛岈ゴ腎嶕 (奶矛件玄甩件玉仿及腎嶕)
? 猁匼反奶矛件玄毛忳仃龰月午�𡛟允月腎嶕今木凶?
奶矛件玄甩件玉仿毛お�允月

奶矛件玄�I燴及霜木
皮仿它扒平乓件田旦猁匼 cv
平奈互
挹狟今木凶!
白巧奈市旦反?
Canvas猁匼
平奈毛挹狟cv.onkydown 卞腎嶕今木凶
奶矛件玄甩件玉仿匹��I允月兮 !
交奈扒奈

奶矛件玄及瞰
? 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

JavaScript 匹由永弁穴件ㄐ菴4隙