Input Direction confusion in snake game javascript

Click For Summary
SUMMARY

The discussion centers on the confusion surrounding the variable inputDir in a JavaScript snake game implementation. The variable is used to represent movement direction as a vector, with x and y properties indicating the change in position. The initial setting of inputDir to { x: 0, y: 1 } serves as a default for downward movement, which is clarified as a vector rather than grid coordinates. The conversation emphasizes the importance of distinguishing between movement vectors and position coordinates in game development.

PREREQUISITES
  • JavaScript fundamentals, including event listeners and object properties
  • Understanding of vector mathematics in game development
  • Basic knowledge of game loop mechanics and state management
  • Familiarity with coordinate systems in 2D graphics
NEXT STEPS
  • Explore JavaScript event handling with addEventListener for game controls
  • Learn about vector mathematics and its application in game movement
  • Investigate best practices for naming conventions in programming for clarity
  • Study the implementation of game state management in JavaScript
USEFUL FOR

Game developers, JavaScript programmers, and anyone interested in understanding movement mechanics in 2D games will benefit from this discussion.

shivajikobardan
Messages
637
Reaction score
54
TL;DR
javascript snake game
Here's the full code:



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?
 
Last edited by a moderator:
Technology news on Phys.org
shivajikobardan said:
What is inputDir variable?
What do you think it could be: inputDirectory? inputDirection?

shivajikobardan said:
What I'm not understanding is why are we setting inputDir at 0th row, 1st column?
You need to make a better guess if you think that inputDir represents row and column coordinates (rather than a vector). Anyway the code is terrible - among other things it makes no sense to set inputDir before you have worked out what key is pressed.
 
pbuk said:
You need to make a better guess if you think that inputDir represents row and column coordinates (rather than a vector). Anyway the code is terrible - among other things it makes no sense to set inputDir before you have worked out what key is pressed.
You might want to have a default value for inputdir, if a non-arrowkey is pressed. x=0, y=0 (for no movement) would probably make more sense.
 
pbuk said:
You need to make a better guess if you think that inputDir represents row and column coordinates (rather than a vector). Anyway the code is terrible - among other things it makes no sense to set inputDir before you have worked out what key is pressed.
But,
Code:
let snakeArr = [
  {
    x: 13,
    y: 15
  }
]
here, x and y represented the location of grid. So, should not here x,y mean the same? I am not getting it.
 
shivajikobardan said:
I am not getting it.
Really? Do you understand the difference between saying an item is at (5, 6) (coordinates) and an item moves by (0, -1) (a vector)?
 
pbuk said:
Really? Do you understand the difference between saying an item is at (5, 6) (coordinates) and an item moves by (0, -1) (a vector)?
but why are we using same variable names for 2 different things? is the question.
 
shivajikobardan said:
but why are we using same variable names for 2 different things? is the question.
I don't understand what you mean: what name are you referring to?
 
shivajikobardan said:
But,
Code:
let snakeArr = [
  {
    x: 13,
    y: 15
  }
]
here, x and y represented the location of grid. So, should not here x,y mean the same? I am not getting it.
this x,y and x,y of inputDir.
 
pbuk said:
Really? Do you understand the difference between saying an item is at (5, 6) (coordinates) and an item moves by (0, -1) (a vector)?
exactly that difference is what I'm talking about. Why are we able to use same variable name for 2 different things, one is (5,6) location, another is movement by (0,-1)..
 
  • #10
x and y are not variable names, they are object keys (aka property names). It would help if you used better labels and then it would be clear that
JavaScript:
directionVector.x; // is the x-component of the direction vector; and
snakeCoordinates[0].x // is the x-coordinate of the head of the snake.
 
  • #11
pbuk said:
x and y are not variable names, they are object keys (aka property names). It would help if you used better labels and then it would be clear that
JavaScript:
directionVector.x; // is the x-component of the direction vector; and
snakeCoordinates[0].x // is the x-coordinate of the head of the snake.
yeaah I now kinda get it.
 
  • #12
pbuk said:
x and y are not variable names, they are object keys (aka property names). It would help if you used better labels and then it would be clear that
JavaScript:
directionVector.x; // is the x-component of the direction vector; and
snakeCoordinates[0].x // is the x-coordinate of the head of the snake.
thanks for the info.
 

Similar threads

  • · Replies 1 ·
Replies
1
Views
2K
  • · Replies 12 ·
Replies
12
Views
2K
  • · Replies 12 ·
Replies
12
Views
4K
  • · Replies 1 ·
Replies
1
Views
2K
  • · Replies 2 ·
Replies
2
Views
2K
  • · Replies 3 ·
Replies
3
Views
2K
  • · Replies 6 ·
Replies
6
Views
4K
  • · Replies 5 ·
Replies
5
Views
3K
  • · Replies 3 ·
Replies
3
Views
2K
  • · Replies 9 ·
Replies
9
Views
2K