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);
#2

Can you describe in detail how to reproduce the error you are seeing?

#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.

#5

Also, it would be great if you could provide your full code on Codepen or some other site like it, so we can see exactly how it works (with html, css, and javascript).

#6

unbale to move player

#7

I click the Start button and then what is supposed to happen?

#8

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

#9

I do not see any images. If you want me to see images, you will need to make sure they are referenced to somewhere on the web instead of your local computer.

#10

It might be better for you to create a repo on GitHub and push your project there. It would include all of your local image files and I can clone it and pull it down to test.

#11

i want to move player on pressing arrow keys

#12

When a user clicks on an arrow key, you call the function direction which only assigns a value to the d variable. After that nothing else happens. If you want something else to happen, you will need to write the code inside the direction function or call another function which will use the value of d to do something.

#13

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

#14

You only call the draw function one time and that is when the Start button is clicked.

1 Like
#15

@RandellDawson bundles of thanks.

#16