input Direction confusion in snake game javascript

[shivajikobardan]

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?
 

 

[mariushm]

It's direction, which way the snake goes.  negative values means go LEFT or go UP  ,  positive values means go  RIGHT or go DOWN. 

 

Coordinates on screen (or play area, region)  are  0,0  for the top left corner, and x, y for the bottom corner (ex x =1919 , y =1080 if the play area is 1920x1080)  so a positive number means go right or down. 

 

So by saying 

inputDir = { x: 0, y: 1 };

you're giving the snake an initial direction : going towards the bottom of the screen, because y = +1  and x is 0.  It's not 0 row, 1 column, it's direction. 

 

The code above is very basic, and it does the job, but it doesn't really contain all the checks you would normally make. 

For example, if the snake's direction is towards the top of the screen, and user presses down, you normally don't allow that, because the snake would eat itself.

 

For example, say the snake is like this on screen :   (H=head, B = body)  

H

BBB

The snake above has direction x=0, y = -1 because head goes towards top of the screen.

Your code should not allow to switch to going DOWN (x=0, y=+1), because there's a part of snake's body under the head. The only allowed directions would be LEFT or RIGHT

 

So basically, you can simplify it further ... 

1. if the snake goes up or down, you should ignore any up/down keys and only accept left/right

2. if the snake goes left or right , you should ignore any left/right keys and only accept up/down

 

Let me know if it's still not clear, and I'll try to explain further or better.

[shivajikobardan]

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?

 

 

[mariushm]

Don't get hung on the names of variables, you can use almost any name for the variables. 

x and y are used because they're short and your mind goes right away to the x and y axis  - x means movement horizontally, y means movement vertically. 

In the case of snakeArr  , x refers to how many dots/pixels/squares/whatever from the left side of the "play area" is that segment of the snake located and y refers to how many from the top.

 

You could very well say 

let snakeArr = [  {   apple: 13,  banana: 15 } ]

and

 

inputDir = { leftright: 0, updown: 1 };

 

and if you want to update snake's position on the map you would say something like  

 

snakeArr[0].apple +=  inputDir.leftright

snakeArr[0].banana += inputDir.updown

 

It's confusing, it's not intuitive, this makes more sense:

 

SnakeArr[0].x += inputDir.x   // 0 = no change, -1 = value decreases, goes left , +1 = value increases, moves right 

SnakeArr[0].y += inputDir.y // same but with up or down directions instead of left and right 

 

When a snake moves, basically all elements that form the snake get the coordinates of the previous segment. For example, let's say you have a 3 x 3 game area and you snake is horizontal in the middle of the map :  H for head, A and B for body parts

[   ]  [   ]  [  ]

[ H ]  [ A ]  [ B]

[   ]  [   ]  [  ]

 

So H is at position x=0,y=1 ,  A is at position x=1,y=1  and B is at position x=2,y=1 

 

Let's say you hit UP so that H moves up.. You know A will take the place of H, and B will take the place of A so you can use a for that looks something like this 

 

// start from the 2nd element of the snake 
for (let i = 1; i < snakeArr.length; i++) {
  snakeArr[i].x = snakeArr[i-1].x
  snakeArr[i].y = snakeArr[i-1].y
}
// now update the head position
snakeArr[0].x += inputDir.x
snakeArr[0].y += inputDir.y

In the codepen example, they use unshift when snake eats a piece... unshift basically moves all elements of the array one position to the right and inserts and entry right at the start of the array. It's the opposite of shift which takes out the first element and moves all array elements to the left.

[shivajikobardan]

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.