4 ms·

Input Direction confusion in snake game JavaScript?

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?

throwaway0asd 4y ago
This code sets an event listener on the window object for the keydown event. That means when the window has focus (or any child thereof) and a keyboard key is pressed that handler will intercept the event. On keyboard events there is a key property which names the keyboard key pressed to result in the event execution. This handler is only looking for the 4 arrow keys and modifying an object assigned to variable inputDir. What’s interesting is that inputDir is reassigned to a baseline on each key press irrespective of the keyboard key. Objects in JavaScript are what other languages call a hash map, a key/value pair. Key names are always string data types and there is no type or value restriction on object values. This particular object has two keys assigned: x and y. Values are reassigned respectively to an arrow key press.
- red_Seashell_32 4y ago
  Further on this - inputDir is just vector, which says where to movement is happening. As initial is x=0, y=1, it means it will increase position Y by 1 - in other words it initially goes downwards.
- shivajikobardan 4y ago
  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?
theGeatZhopa 4y ago
It seems to be what's called a dictionary, where you have key:value pairs. So, if you show the key, you'll get back the value. E.g. socks = {red:3, blue:4, white:0} Print "how many red socks left? " & socks.red => how many red socks left? 3 In Javascript, you use an Object as dictionary. So, basically, the value for the key is set. Not "0th row, 1st column". After that, the case switching for the appropriate pressed key happens. X and Y directions of the screen are to be seen from the top Left corner (0/0). So when you want your snake to go up you have to reduce Y by step from the actual Y value (thus inputDir.y = -1;) InputDir is an key/value storage and get updated with the up/down/left/right step value (add 1 or minus 1 in x or y direction). This after, the InputDir will be checked constantly by the position setter or some drawing logic in a loop. Snake at 10/10 and needs to go to the right: 11/10 12/10 13/10 Then go down: 13/11 13/12 13/13 And back to the left: 12/13 11/13 10/13 Hacker News isn't the suitable place to ask thus kind of questions. I don't think you'll get another answer for your question. Please use the search engine of your choice to find appropriate places for question/answer. For example stack overflow. Or a tons of others:) Cheers,
- shivajikobardan 4y ago
  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?
shivajikobardan 4y ago
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.

throwaway0asd 4y ago

This code sets an event listener on the window object for the keydown event. That means when the window has focus (or any child thereof) and a keyboard key is pressed that handler will intercept the event. On keyboard events there is a key property which names the keyboard key pressed to result in the event execution. This handler is only looking for the 4 arrow keys and modifying an object assigned to variable inputDir. What’s interesting is that inputDir is reassigned to a baseline on each key press irrespective of the keyboard key. Objects in JavaScript are what other languages call a hash map, a key/value pair. Key names are always string data types and there is no type or value restriction on object values. This particular object has two keys assigned: x and y. Values are reassigned respectively to an arrow key press.

red_Seashell_32 4y ago
Further on this - inputDir is just vector, which says where to movement is happening. As initial is x=0, y=1, it means it will increase position Y by 1 - in other words it initially goes downwards.
shivajikobardan 4y ago
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?

theGeatZhopa 4y ago

It seems to be what's called a dictionary, where you have key:value pairs. So, if you show the key, you'll get back the value. E.g. socks = {red:3, blue:4, white:0} Print "how many red socks left? " & socks.red => how many red socks left? 3 In Javascript, you use an Object as dictionary. So, basically, the value for the key is set. Not "0th row, 1st column". After that, the case switching for the appropriate pressed key happens. X and Y directions of the screen are to be seen from the top Left corner (0/0). So when you want your snake to go up you have to reduce Y by step from the actual Y value (thus inputDir.y = -1;) InputDir is an key/value storage and get updated with the up/down/left/right step value (add 1 or minus 1 in x or y direction). This after, the InputDir will be checked constantly by the position setter or some drawing logic in a loop. Snake at 10/10 and needs to go to the right: 11/10 12/10 13/10 Then go down: 13/11 13/12 13/13 And back to the left: 12/13 11/13 10/13 Hacker News isn't the suitable place to ask thus kind of questions. I don't think you'll get another answer for your question. Please use the search engine of your choice to find appropriate places for question/answer. For example stack overflow. Or a tons of others:) Cheers,

shivajikobardan 4y ago
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?

shivajikobardan 4y ago

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.