Click here to Skip to main content
15,850,103 members
Please Sign up or sign in to vote.
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
Updated 10-Jan-23 16:03pm
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.

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.
 
Share this answer
 
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.
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.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900