[javascript] ブロックが横に移動しない誰か助けて

const FIELD_COL = 10;
const FIELD_ROW = 20;
let canvas = document.getElementById("can");
let ctx = canvas.getContext("2d");
const BLOCK_SIZE = 30;
const TETRO_SIZE = 4;
let tetro = [
  [0,0,0,0],
  [1,1,0,0],
  [0,1,1,0],
  [0,0,0,0]
]
let tetro_x = 0;
let tetro_y = 0;

function drawTetro(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  for (let y=0; y<TETRO_SIZE;y++){
    for (let x=0; x<TETRO_SIZE; x++){
      if(tetro[y][x]){
        let px = (tetro_x + x) * BLOCK_SIZE;
        let py = (tetro_y + y) * BLOCK_SIZE;
        ctx.fillStyle="red";
        ctx.fillRect(px,py,BLOCK_SIZE , BLOCK_SIZE);
        ctx.strokeStyle="black";
        ctx.strokeRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
      }
    }
  }
}



document.onkeydown = function(e){
  switch(e.key){
    case "ArrowLeft"://Left
      tetro_x--;
      break;
    case "ArrowUp"://Up
      tetro_y--;
      break;
    case "ArrowLight"://Light
      tetro_x++;
      break;
    case "ArrowDown"://Down
      tetro_y++;
      break;
    case "Space"://Space
      break;
  }
  drawTetro();
}
drawTetro();