設定當碰到線或終點就不能再移動
建立一個 function 放在移動前

if(e.code === 'KeyW' || e.code === 'ArrowUp'){
    delPoint(circleStart.x, circleStart.y, circleStart.r);
    checkForMove(circleStart.x, circleStart.y, 'y', '-16'); 
    // 建立一個 判斷前進方向有沒有線的 function
    
    // circleStart.y -= 16; 
    // 放在 function 內後就可以刪除
    
    circlePoint(circleStart.x, circleStart.y, circleStart.r, 'red');
}

參數是還沒移動前的位置 (X, Y)、水平/垂直，移動的距離

var checkForMove = function(circleX, circleY, direction, distance){ ... }

分別判斷四邊的方向是否可以移動
先水平 x 或是垂直 y 再來是移動的距離

if(direction === 'x'){
	if(parseInt(distance) < 0){ ... } // 左邊
	if(parseInt(distance) > 0){ ... } // 右邊
}
if(direction === 'y'){
	if(parseInt(distance) < 0){ ... } // 上
	if(parseInt(distance) > 0){ ... } // 下
}

再取出上下或是左右方向一部分區域
以向上為例子

if(parseInt(distance) < 0){
    // distance 是字串, 所以用 parseInt() 轉成數值
    var imageData = ctx.getImageData(circleX, circleY + parseInt(distance)*0.5, 3, 1);
    // 取得 3px * 1px 部分的資訊
}

再判斷是不是線時是用 第 11 天 負片效果 的方式取得一部分的區域內的顏色資訊

var pixels = imageData.data;
    for (var i = 0, len = pixels.length; i < len; i++) {
      if (pixels[i] === 0 && pixels[i+1] === 0 && pixels[i+2] === 0 && pixels[i+3] === 0){
        return circleStart.y += parseInt(distance); 
        // 回傳移動的值
      }
    }

就可以作出判斷移動的方向有沒有線
迷宮的起點和終點的開口也要擋著才不會出界了

ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = '3';
ctx.strokeRect(0, 0, canvas.width, canvas.height);

var checkForMove = function(circleX, circleY, direction, distance){
  if(direction === 'x'){
    if(parseInt(distance) < 0){
      var imageData = ctx.getImageData(circleX + parseInt(distance)*0.5, circleY, 1, 3);
    }
    if(parseInt(distance) > 0){
      var imageData = ctx.getImageData(circleX + parseInt(distance)*0.5, circleY, 1, 3);
    }
    var pixels = imageData.data;
    for (var i = 0, len = pixels.length; i < len; i++) {
      if (pixels[i] === 0 && pixels[i+1] === 0 && pixels[i+2] === 0 && pixels[i+3] === 0){
        return circleStart.x += parseInt(distance); 
      }
    }
  }
  if(direction === 'y'){
    if(parseInt(distance) < 0){
      var imageData = ctx.getImageData(circleX, circleY + parseInt(distance)*0.5, 3, 1);
    }
    if(parseInt(distance) > 0){
      var imageData = ctx.getImageData(circleX, circleY + parseInt(distance)*0.5, 3, 1);
    }
    var pixels = imageData.data;
    for (var i = 0, len = pixels.length; i < len; i++) {
      if (pixels[i] === 0 && pixels[i+1] === 0 && pixels[i+2] === 0 && pixels[i+3] === 0){
        return circleStart.y += parseInt(distance); 
      }
    }
  }
}