Home| Questions|Q 86472
Next
In Process
korikital
Beginner
Asked: 2023-01-10T17:59:09+05:45 In:

Input Direction confusion in snake game JavaScript?

Here’s the full code:

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(ofc it’s input direction)? (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?

The reason for this confusion is we’re using this code earlier in same program:

 

let snakeArr = [
{
x: 13,
y: 15
}
]

Here x and y means grid row 13, grid column 15. (18*18 grid is used).

But in this question, we’re using x and y for different purposes, it confused me.

Share

    Related Questions

    You must login to add an answer.

    Need An Account,

    1 Answer

    1. Sensei https://www.youtube.com/@codernepall
      you can try this
      this is only the prototype
      you can use this or adjust us ur wish
      <!DOCTYPE html>
      <html>
        <head>
          <title>Snake Game</title>
          <style>
            canvas {
              background-color: #eee;
              display: block;
              margin: 0 auto;
              border: 1px solid #000;
            }
          </style>
        </head>
        <body>
          <div id=”score”></div>
          <canvas id=”game-canvas”></canvas>
          <script>
                    // game loop
            let game = setInterval(gameLoop, 300);
            function gameLoop() {
              // move snake
              const head = {x: snake[0].x + dx, y: snake[0].y + dy};
              snake.unshift(head);
              // check if snake ate food
              if (head.x === foodX && head.y === foodY) {
                // generate new food
                foodX = Math.floor(Math.random() * (canvas.width / snakeSize)) * snakeSize;
                foodY = Math.floor(Math.random() * (canvas.height / snakeSize)) * snakeSize;
                score++;
              } else {
                snake.pop();
              }
              // clear canvas
              ctx.clearRect(0, 0, canvas.width, canvas.height);
              // check if snake hit the wall
              if (head.x >= canvas.width || head.x < 0 || head.y >= canvas.height || head.y < 0) {
                  gameover();
              }
              // check if snake hit its body
              for(let i = 1; i < snake.length; i++) {
                  if(head.x === snake[i].x && head.y === snake[i].y) {
                      gameover();
                  }
              }
              // draw snake
              ctx.fillStyle = “green”;
              for (let i = 0; i < snake.length; i++) {
                ctx.fillRect(snake[i].x, snake[i].y, snakeSize, snakeSize);
              }
              // draw food
              ctx.fillStyle = “red”;
              ctx.fillRect(foodX, foodY, snakeSize, snakeSize);
              document.getElementById(“score”).innerHTML = “Score: ” + score;
            }
            // canvas setup
            const canvas = document.getElementById(“game-canvas”);
            const ctx = canvas.getContext(“2d”);
            canvas.width = 400;
            canvas.height = 400;
            // snake setup
            const snakeSize = 10;
            let snake = [{x: 150, y: 150}];
            let dx = snakeSize;
            let dy = 0;
            // food setup
            let foodX = 0;
            let foodY = 0;
            let score = 0;
            function gameover(){
              clearInterval(game);
              alert(“Game Over, Your Score is “+score);
              location.reload();
            }
            // game loop
            let games = setInterval(() => {
              requestAnimationFrame(gameLoop);
              // move snake
              const head = {x: snake[0].x + dx, y: snake[0].y + dy};
              snake.unshift(head);
              // check if snake ate food
              if (head.x === foodX && head.y === foodY) {
                // generate new food
                foodX = Math.floor(Math.random() * (canvas.width / snakeSize)) * snakeSize;
                foodY = Math.floor(Math.random() * (canvas.height / snakeSize)) * snakeSize;
                score++;
              } else {
                snake.pop();
              }
              // clear canvas
              ctx.clearRect(0, 0, canvas.width, canvas.height);
              // check if snake hit the wall
              if (head.x >= canvas.width || head.x < 0 || head.y >= canvas.height || head.y < 0) {
                  gameover();
              }
              // check if snake hit its body
              for(let i = 1; i < snake.length; i++) {
                  if(head.x === snake[i].x && head.y === snake[i].y) {
                      gameover();
                  }
              }
              // draw snake
              ctx.fillStyle = “green”;
              for (let i = 0; i < snake.length; i++) {
                ctx.fillRect(snake[i].x, snake[i].y, snakeSize, snakeSize);
              }
              // draw food
              ctx.fillStyle = “red”;
              ctx.fillRect(foodX, foodY, snakeSize, snakeSize);
              document.getElementById(“score”).innerHTML = “Score: ” + score;
            }, 100);
            // handle arrow keys
            document.addEventListener(“keydown”, function(e) {
              if (e.keyCode === 37 && dx === 0) {
                dx = -snakeSize;
                dy = 0;
              } else if (e.keyCode === 38 && dy === 0) {
                dx = 0;
                dy = -snakeSize;
              } else if (e.keyCode === 39 && dx === 0) {
                dx = snakeSize;
                dy = 0;
              } else if (e.keyCode === 40 && dy === 0) {
                dx = 0;
                dy = snakeSize;
              }
            });
            function gameover(){
              gameover = true;
              clearInterval(game);
              alert(“Game Over, Your Score is “+score);
              score = 0;
              snake = [{x: 150, y: 150}];
              foodX = 0;
              foodY = 0;
              dx = snakeSize;
              dy = 0;
              gameover = false;
          }
          </script>
        </body>
      </html>
      • 2