DAY 27
0

## 第 27 天 迷宮 二

``````if(canvas.width/16.4 %2 == 0){
// 雙數列 - 起點在正中央左邊一列
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.arc(canvas.width/2 - 8.2, 9, 4, 0, 2*Math.PI);
ctx.fill();
// 終點
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.arc(canvas.width/2 + 8.2, canvas.height -9, 4, 0, 2*Math.PI);
ctx.fill();
}else{
// 單數列 - 起點在正中央
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.arc(canvas.width/2, 9, 4, 0, 2*Math.PI);
ctx.fill();
// 終點
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.arc(canvas.width/2, canvas.height - 9, 4, 0, 2*Math.PI);
ctx.fill();
}
``````

``````var circleStart = {
x: 0,
y: 9, // y = 0 時會被 canvas 的框裁切到，所以先向內移動 9px
r: 5
}
var circleEnd = {
x: 0,
y: 0, // 這裡先不設定，要在取得高度時再調整
r: 8
}
``````

``````if(canvas.width/16.4 %2 == 0){
circleStart.x = canvas.width/2 - 8.2;
circleStart.y = 9;
circlePoint(circleStart.x, circleStart.y, circleStart.r, 'red');

circleEnd.x = canvas.width/2 + 8.2;
circleEnd.y = canvas.height -9;
circlePoint(circleEnd.x, circleEnd.y, circleEnd.r, 'green');
}else{
// 太多, 省略
}
``````

``````ctx.beginPath();
ctx.fillStyle = 'red';
ctx.arc(canvas.width/2 - 8.2, 9, 4, 0, 2*Math.PI);
ctx.fill();
``````

``````var circlePoint = function(circleX, circleY, circleR, color){
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(circleX, circleY, circleR, 0, 2*Math.PI);
ctx.fill();
}
``````

``````circlePoint(circleStart.x, circleStart.y, circleStart.r, 'red');
``````

``````window.addEventListener('keydown',function(e){
if(e.code === 'KeyW' || e.code === 'ArrowUp'){
// 向上移動
circleStart.y -= 16.2;
circlePoint(circleStart.x, circleStart.y, circleStart.r, 'red');
}
// 向下左右, 省略
})
``````

``````var delPoint = function(circleX, circleY, circleR){
ctx.clearRect(circleX-circleR*1.1, circleY-circleR*1.1, circleR*2.2, circleR*2.2)
}
``````

``````window.addEventListener('keydown',function(e){
if(e.code === 'KeyW' || e.code === 'ArrowUp'){
delPoint(circleStart.x, circleStart.y, circleStart.r)
circleStart.y -= 16.2;
circlePoint(circleStart.x, circleStart.y, circleStart.r, 'red');
}
// 向下左右, 省略
})
``````