可以移動後再來就是要作到達終點的動作
當移動遇到黑線以外的顏色就會結束

if(pixels[i+1] === 128 && pixels[i+3] === 239){
    // 當遇到綠色的值 [0, 128, 0, 239] 時
    circleStart.y += parseInt(distance); 
    game_start('到達終點再玩一次?')
    // 再來再放結束的畫面
    
}

移動時不一定是向下也有可能是左右
所以在按按鍵時都要加入執行的話
作成 function 就不怕要改一、兩行時會忘了改其他方向的

function game_start(text){
  var imgData= ctx.getImageData(0, 0, canvas.width, canvas.height);
  ctx.putImageData(imgData,0,0);
  // 把到達時拍照下來貼在原地
  
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fill()
  
  ctx.font = '700 20px 微軟正黑體'; 
  ctx.fillStyle = "red";
  ctx.lineWidth = 10;
  
  if(text.length < 5){
    ctx.fillText(text, canvas.width/4, canvas.height/2 -20); 
  }
  
  // 當字太多塞不下時就可以用 slice 分成兩行
  if(text.length > 4){ 
    ctx.fillText(text.slice(0, 4), canvas.width/4, canvas.height/2 -20); 
    ctx.fillText(text.slice(4, 9), canvas.width/4 -5 , canvas.height/2 + 10); 
  }
}