Input Direction confusion in snake game javascript

JavaScript
1

Here’s the full code:

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?

2

Assuming it’s defined outside of this event handler, then you’re correct that it’s kind of pointless. I’d actually call it a bug because you could press H for example, or any other non-arrow key on your keyboard and cause the direction to change.

3

How far into the tutorial are you, because yes agree that this makes no sense, but I’m wondering whether it’s there as part of an explanation – something like “we can listen for any keypresses {tutorial just adds that inputDir change}, but we want to listen for specific ones {tutorial replaces it with the switch based in arrow keys}”

Also minor but slightly confusing is that I’m assuming inputDir is “Input Direction”, which is kinda badly named (it’s not the input direction, it’s the change to the to be applied to the position of the head of the snake after an arrow key is pressed).

4

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?

5

The code to do this isn’t in place afaics, but naïvely:

{ x: 13, y: 15 }
// press down arrow key
{ x: 13, y: 15 } + { x: 0, y: 1} = { x: 13, y: 16 }
// then press right arrow key
{ x: 13, y: 16 } + { x: 1, y: 0} = { x: 14, y: 16 }

And so on. Just add inputDir values to the values described by the current position

It’s in an array because you need to know the previous coordinate to get direction, and the snake increases in size the more it eats

6

They don’t have different meanings, they have the same meaning: { x, y } is point in 2d space, and having two allows you to apply vector maths, which in turn allows you to code the game

7

this kinda makes things clear. thank you.

8

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.