Input direction confusion in snake game javascript

Question

1.00/5 (1 vote)

See more:

Here's the full code:

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

This is the code that I'm interested in:

JavaScript

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?

What I have tried:

I've tried understanding the code but didn't understand.

Posted 9-Jan-23 20:44pm

bhaskar977

Updated 10-Jan-23 15:03pm

Add a Solution

Comments

0x01AA 10-Jan-23 2:50am

Quote:"What I'm not understanding is why are we setting inputDir at 0th row, 1st column?"
inputDir is the direction. And therefor it is not set to the 0th row, 1st column. It holds _the direction_ of the next movement.

bhaskar977 10-Jan-23 7:23am

pls read my comment to first solution.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CPallini · Answer 1 · 2023-01-09T20:56:00

Solution 1

inputDir is (probably), the direction of the movement, that is (assuming speed = 1)

JavaScript

posNext.x = inputDir.x  + posCur.x;
posNext.y = inputDir.y  + posCur.y;

The actual code is

Quote:
snakeArr.unshift({ x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y })

JavaScript

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

is just an initialization: the object starts moving downward.

Posted 9-Jan-23 20:56pm

CPallini

Comments

bhaskar977 10-Jan-23 7:23am

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?

CPallini 10-Jan-23 7:31am

Well, they are properties (having the same name) of different types of objects.
You may also say that inputDir.x it is the x component of the direction, while snakeArr[0].x it is the x component of the snake position (actually the x component of the position of the first item of the snake).

bhaskar977 10-Jan-23 7:40am

it's not clear to me at all. could you clarify in detailed way?

CPallini 10-Jan-23 7:51am

x (and, likewise y) are just properties of objects having unrelated types.
Namely:
The inputDir object has x,y properties that establish the direction of the movement of the snake (e.g. if x=1, y=0 then the snake moves to the right).
On the other hand, the snakeArr is an array of elements ('tiles'?). Such elements 'builds up the snake' (that is, drawing such elements, you are drawing the snake). Every element has tw two properties x,y. They establish the position of the element on the screen.

bhaskar977 · Answer 2 · 2023-01-10T15:03:00

Solution 2

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.

Posted 10-Jan-23 15:03pm

bhaskar977