input Direction confusion in snake game javascript

[polaryeti]

 

 

Here's the full code:

https://codepen.io/pelko/pen/jOpBmPN

This is the code that I'm interested in:

window.addEventListener("keydown", e => {
  inputDir = { x: 0, y: 1 };
  moveSound.play();
  switch (e.key) {
    case "ArrowUp":
      inputDir.x = 0;
      inputDir.y = -1;
      break;
    case "ArrowDown":
      inputDir.x = 0;
      inputDir.y = 1;
      break;
    case "ArrowLeft":
      inputDir.x = -1;
      inputDir.y = 0;
      break;
    case "ArrowRight":
      inputDir.x = 1;
      inputDir.y = 0;
      break;


  }
})

What is inputDir variable? (I didn't write this code, I'm learning it from a tutorial, you know tutorials don't cover stuffs well).
What I'm not understanding is why are we setting inputDir at 0th row, 1st column? What does that mean? Can you provide some explanations with figures(if possible) about this issue?
 

[kicken]

inputDir holds the direction of movement in the x and y direction based on the key you pressed.

• -1 = move left or move up
• 0 = no movement in that direction
• 1 = move right or move down.

In the rest of the code you would apply that movement with code like this:

  snakeArr.forEach((e,idx)=>{
    e.x+=inputDir.x;
    e.y+=inputDir.y;
  });

 

[polaryeti]

let snakeArr = [
  {
    x: 13,
    y: 15
  }
]

But in this code, we mean x and y are grid co-ordinates. How can we now tell in this question case that x and y represents a vector? I am not getting it. Please help.

[polaryeti]

My confusion is cleared. 

arrSnake=[{x:0,y:1}]

inputDir={x:0,y:1} 

are 2 different object names. It doesn't matter if we use same key name for both of them.