# input Direction confusion in snake game javascript

**URL:** <https://forum.kirupa.com/t/input-direction-confusion-in-snake-game-javascript/656182>\
**Category:** Uncategorized\
**Created:** [January 10, 2023, 7:45am UTC](https://forum.kirupa.com/t/input-direction-confusion-in-snake-game-javascript/656182 "2023-01-10T07:45:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [January 10, 2023, 7:45am UTC](https://forum.kirupa.com/t/input-direction-confusion-in-snake-game-javascript/656182/1 "2023-01-10T07:45:08Z")

</div>

Here’s the full code:  
https://codepen.io/pelko/embed/preview/jOpBmPN?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=jOpBmPN

This is the code that I’m interested in:

```auto
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?

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [January 10, 2023, 12:22pm UTC](https://forum.kirupa.com/t/input-direction-confusion-in-snake-game-javascript/656182/2 "2023-01-10T12:22:26Z")

</div>

I must tell why my confusion came here:  
Earlier in the code, we’ve done this:

```auto
//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?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 11, 2023, 12:00am UTC](https://forum.kirupa.com/t/input-direction-confusion-in-snake-game-javascript/656182/3 "2023-01-11T00:00:32Z")

</div>

`inputDir` and `snakeArr` are two different things. The `snakeArr` stores the current position of our snake (and all of its segments). The `inputDir` variable seems to be an object that specifies what direction the snake is always moving in. They look similar but are unrelated.

Were you able to get the game to work? It didn’t actually work when I tried to run it. My hunch is that the `main` function has the `requestAnimationFrame` call at the front as opposed to towards the end.

I haven’t watched this video, but I have heard others say it was a good one as they tried to learn how to code the snake game 🙂

[![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/0/e/0ec8ec018eb3e52140c142954b795e73ca4b58ea.jpeg "JavaScript Snake Game Tutorial Using Functional Programming") ](https://www.youtube.com/watch?v=bRlvGoWz6Ig)

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [January 11, 2023, 1:55am UTC](https://forum.kirupa.com/t/input-direction-confusion-in-snake-game-javascript/656182/4 "2023-01-11T01:55:47Z")

</div>

moving the snake part isn’t done yet,that’s why it doesn’t work atm.

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [January 11, 2023, 2:03am UTC](https://forum.kirupa.com/t/input-direction-confusion-in-snake-game-javascript/656182/5 "2023-01-11T02:03:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 11, 2023, 2:14am UTC](https://forum.kirupa.com/t/input-direction-confusion-in-snake-game-javascript/656182/6 "2023-01-11T02:14:04Z")

</div>

Correct! 🙂