Unable to move player getting error undefined property of x

JavaScript
1 

const cvs = document.getElementById("game");
const ctx = cvs.getContext("2d");
const ROW = 15;
const COL =15;
const VACANT = "WHITE"
const SQ =40;
function drawSquare(x,y,color){
  ctx.fillStyle = color;
  ctx.fillRect(x*SQ,y*SQ,SQ,SQ);
  ctx.strokeStyle = "Black";
  ctx.strokeRect(x*SQ,y*SQ,SQ,SQ);
}
//create board 
let board= [];
for(r =0;r<ROW; r++){
   board[r] = [];
   for(c=0;c<COL;c++){
       board[r][c]=VACANT;
   }
}
//Draw the Board
function drawBoard(){
  for(r =0;r<ROW; r++){
   for(c=0;c<COL;c++){
       drawSquare(c,r,board[r][c]);
   }
  }
}

drawBoard();



const foodImg = new Image();
foodImg.src = "images/food.png" ;
const playerImg1 = new Image();
playerImg1.src = "images/player1.jpg" ;
const playerImg2 = new Image();
playerImg2.src = "images/player2.jpg" ;
//Block image
const blockImg = new Image();
blockImg.src = "images/block.jpg" ;
//let  blockImg = document.getElementById('block1');
let food = {
x: Math.floor(Math.random()*8 + 12) * SQ,
y: Math.floor(Math.random()*13 + 1) * SQ
}
let player1 ={
x: Math.floor(Math.random()*0 + 2) * SQ,
y: Math.floor(Math.random()*4+ 0) * SQ

}
let player2 ={
x: Math.floor(Math.random()*3 + 12) * SQ,
y: Math.floor(Math.random()*13 + 6) * SQ

}
//control Player
let d;
document.addEventListener("keydown",direction)
function direction(event){
  if(event.keyCode == 37){
     d = "LEFT";
  }else if(event.keyCode == 38){
    d = "UP";
  }else if(event.keyCode == 39){
    d = "RIGHT";
  }else if(event.keyCode == 40){
    d = "DOWN";
  }
}
function draw(){
	ctx.drawImage(foodImg,food.x,food.y);
	ctx.drawImage(playerImg1,player1.x,player1.y);
	ctx.drawImage(playerImg2,player2.x,player2.y);
    for(let i = 0 ; i<=10; i++ ){
    	let block ={
x: Math.floor(Math.random()*8 + 3) * SQ,
y: Math.floor(Math.random()*13 + 2) * SQ

}    

let j = ctx.drawImage(blockImg,block.x,block.y) ;
      
      j
      
	}

  let player1X = player1[0].x;
  let player1Y= player1[0].y;
  if(d = "LEFT") player1Y-= SQ;
  if(d = "UP") player1X-= SQ;
  if(d = "RIGT") player1Y+= SQ;
  if(d = "DOWN") player1Y+= SQ;
}

 var button = document.getElementById("button");
button.addEventListener("click", draw);
3 
const cvs = document.getElementById("game");
const ctx = cvs.getContext("2d");
const ROW = 15;
const COL =15;
const VACANT = "WHITE"
const SQ =40;
function drawSquare(x,y,color){
  ctx.fillStyle = color;
  ctx.fillRect(x*SQ,y*SQ,SQ,SQ);
  ctx.strokeStyle = "Black";
  ctx.strokeRect(x*SQ,y*SQ,SQ,SQ);
}
//create board 
let board= [];
for(r =0;r<ROW; r++){
   board[r] = [];
   for(c=0;c<COL;c++){
       board[r][c]=VACANT;
   }
}
//Draw the Board
function drawBoard(){
  for(r =0;r<ROW; r++){
   for(c=0;c<COL;c++){
       drawSquare(c,r,board[r][c]);
   }
  }
}

drawBoard();



let foodImg = new Image();
foodImg.src = "images/food.png" ;
let playerImg1 = new Image();
playerImg1.src = "images/player1.jpg" ;
let playerImg2 = new Image();
playerImg2.src = "images/player2.jpg" ;
//Block image
let blockImg = new Image();
blockImg.src = "images/block.jpg" ;
//let  blockImg = document.getElementById('block1');
let food = {
x: Math.floor(Math.random()*8 + 12) * SQ,
y: Math.floor(Math.random()*13 + 1) * SQ
}
let player1 ={
x: Math.floor(Math.random()*0 + 2) * SQ,
y: Math.floor(Math.random()*4+ 0) * SQ

}
let player2 ={
x: Math.floor(Math.random()*3 + 12) * SQ,
y: Math.floor(Math.random()*13 + 6) * SQ

}
//control Player
let d;
document.addEventListener("keydown",direction)
function direction(event){

  if(event.keyCode == 37){
     d = "LEFT";
  }else if(event.keyCode == 38){
    d = "UP";
  }else if(event.keyCode == 39){
    d = "RIGHT";
  }else if(event.keyCode == 40){
    d = "DOWN";
  }
}
function draw(){
	ctx.drawImage(foodImg,food.x,food.y);
	ctx.drawImage(playerImg1,player1.x,player1.y);
	ctx.drawImage(playerImg2,player2.x,player2.y);
    for(let i = 0 ; i<=10; i++ ){
    	let block ={
x: Math.floor(Math.random()*8 + 3) * SQ,
y: Math.floor(Math.random()*13 + 2) * SQ

}    

let j = ctx.drawImage(blockImg,block.x,block.y) ;
      
      j
      
	}


  let player1X = player1.x;
  let player1Y= player1.y;
  if(d == "LEFT") player1X -= SQ;
  if(d == "UP") player1X -= SQ;
  if(d == "RIGT") player1Y += SQ;
  if(d == "DOWN") player1Y += SQ;
}
var button = document.getElementById("button");
button.addEventListener("click", draw);
4

I have removed the error but i am unable to move player.

6

unbale to move player

8

for player 1 you can use any image
i want move player with arrows keys.

11

i want to move player on pressing arrow keys

13

below direction there is a draw function where i have assigned the values.

15

@camperextraordinaire bundles of thanks.