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?

[polaryeti]

I must tell why my confusion came here:
Earlier in the code, we’ve done this:

//head of snake
let snakeArr = [
  {
    x: 13,
    y: 15
  }
]​

Here x,y means the grid row 13, grid column 15. That is why I’m confused. We’re using same variable names in 2 places with different meanings. In this question, we’re using x,y for direction(up,down etc).

How are we able to do this?

[VIPStephan]

x and y are not variable names but property names. And as such they are tied to their parent objects, one is snakeArr and one is inputDir. inputDir.x is totally independent from snakeArr.x. See https://developer.mozilla.org/en-US/...g_with_Objects

What is inputDir variable?

inputDir is probably the input direction, where “input” means what the user is inputting into the user interface (i. e. pressing the up, down, left or right keys).

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?

It’s not really setting rows or columns, it is resetting the direction in which the snake is moving. So, let’s say the snake moves to the right. It will add one to the “x” property with every “animation frame” (repaint), so the snake will continue to move to the right without any user input. As soon as the user presses an arrow key, let’s say “down”, the motion has to be reset to “zero”, and now it will continuously add 1 to the “y” property which makes the snake move down until the next keypress.

I don’t know why y is 1 by default, though.

[polaryeti]

thank you I got it.

[deathshadow]

Look at where they are both used:

snakeArr[0].x = snakeArr[0].x + inputDir.x;
snakeArr[0].y = snakeArr[0].y + inputDir.y;

you can start to see it. Though that's badly written. Should be:

snakeArr[0].x += inputDir.x;
snakeArr[0].y += inputDir.y;

As @VIPStephen said, they're properties. One of the first snakeArray's element, the other of an entirely separate object.