<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snake Game Application</title>
</head>

<body>
  <div class="body">
    <div id="scoreBox"></div>
    <div id="hiscoreBox"></div>
    <div id="board"></div>
  </div>

</body>
<script src="js/index.js"></script>

</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.body {
  background-image: url("../img/bg.jpg");
  min-height: 100vh;
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

#board {
  background: linear-gradient(rgb(170, 236, 170), rgb(236, 236, 167));
  width: 90vmin;
  height: 92vmin;
  border: 2px solid black;
  display: grid;
  grid-template-rows: repeat(18, 1fr);
  grid-template-columns: repeat(18, 1fr);
}

.head {
  background: linear-gradient(rgb(240, 124, 124), rgb(228, 228, 129));
  border: 2px solid rgb(34, 4, 34);
  transform: scale(1.02);
  border-radius: 9px;
}


.food {
  background: linear-gradient(red, purple);
  border: 0.25vmin solid black;
  border-radius: 8px;

}

.snake {
  background: linear-gradient(red, purple);
  border: 0.25vmin solid black;
  border-radius: 8px;

}
let inputDir = { x: 0, y: 0 };
const foodSound = new Audio("music/food.mp3");
const gameOverSound = new Audio("music/gameover.mp3");
const moveSound = new Audio("music/move.mp3");
const musicSound = new Audio("music/music.mp3");
let speed = 2;
let lastPaintTime = 0;
let score;
//head of snake
let snakeArr = [
  {
    x: 13,
    y: 15
  }
]
//food remains stationary that's why object, it won't grow in size.
food = { x: 6, y: 7 };

//Game functions
function main(ctime) {
  window.requestAnimationFrame(main);
  if ((ctime - lastPaintTime) / 1000 < 1 / speed) {
    return;
  }
  //paint now
  lastPaintTime = ctime;
  gameEngine();
}
function isCollide(sarr) {

  return false;
}


function gameEngine() {
  //part 1: updating the snake array and food
  if (isCollide(snakeArr)) {
    gameOverSound.play();
    inputDir = { x: 0, y: 0 };
    alert("Game over, press any key to play again");
    snakeArr = [
      {
        x: 13,
        y: 15
      }
    ]
    score = 0;
  }

  //if snake has eaten the food, increment the score and regenerate the food
  if (snakeArr[0].y === food.y && snakeArr[0].x === food.x) {
    foodSound.play();
    snakeArr.unshift({ x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y })
    //change food location
    let a = 2; b = 16;
    food = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }
  }

  //Moving the snake
  for (let i = snakeArr.length - 2; i >= 0; i--) {
    snakeArr[i + 1] = { ...snakeArr[i] };
  }
  snakeArr[0].x = snakeArr[0].x + inputDir.x;
  snakeArr[0].y = snakeArr[0].y + inputDir.y;






  //part 2: display the snake and food 

  //display snake
  board.innerHTML = "";
  snakeArr.forEach((e, index) => {
    snakeElement = document.createElement("div");
    snakeElement.style.gridRowStart = e.y;
    snakeElement.style.gridColumnStart = e.x;

    if (index == 0) {
      snakeElement.classList.add("head");//adding class to display food

    }
    else {
      snakeElement.classList.add("snake");//adding class to display food
    }

    board.appendChild(snakeElement);
  })
  foodElement = document.createElement("div");
  foodElement.style.gridRowStart = food.y;
  foodElement.style.gridColumnStart = food.x;
  foodElement.classList.add("food");//adding class to display food
  board.appendChild(foodElement);



}


//Main logic starts here
window.requestAnimationFrame(main);

window.addEventListener("keydown", e => {
  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;


  }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.