js handwritten snake game

Front-end handwritten snake game

The snake game scene uses js and html/css to complete a small snake game

technical analysis

Several technical points mainly used:

• clientWidth : the width of the element, including padding
• clientHeight : the height of the element, including padding
• setInterval: start the timer
• clearInterval: turn off the timer
• keydown: keyboard event
• createElement: create a node

First of all, you need a background board. The snake and the food must not exceed the specified content.
The next step is the movement of the snake. Use a fixed time to move one grid per second.
The food is randomly generated according to the calculation.
When the positions of the snake and the food overlap, it can be considered that the snake has eaten it. Food
When the x and y of the snake are greater than the width/height of the element, it is considered to have hit the wall and directly ov

The above is the direct source code of key technical points可以点个赞收藏一下谢谢

source code

HTML

<div id="game-board"></div> 

JS

<script>
  const gameBoard = document.getElementById("game-board");
  let snake = [{
    
     x: 0, y: 0 }];
  let food = {
    
     x: 0, y: 0 };
  let direction = "right";

  function createSnake() {
    
    
    for (let segment of snake) {
    
    
      const snakeSegment = document.createElement("div");
      snakeSegment.className = "snake";
      snakeSegment.style.left = segment.x + "px";
      snakeSegment.style.top = segment.y + "px";
      gameBoard.appendChild(snakeSegment);
    }
  }

  function createFood() {
    
    
    const maxX = gameBoard.clientWidth - 20;
    const maxY = gameBoard.clientHeight - 20;
    food.x = Math.floor(Math.random() * maxX);
    food.y = Math.floor(Math.random() * maxY);

    const foodElement = document.createElement("div");
    foodElement.className = "food";
    foodElement.style.left = food.x + "px";
    foodElement.style.top = food.y + "px";
    gameBoard.appendChild(foodElement);
  }

  function updateGame() {
    
    
    const snakeHead = {
    
     x: snake[0].x, y: snake[0].y };

    // Move the snake
    if (direction === "right") snakeHead.x += 20;
    else if (direction === "left") snakeHead.x -= 20;
    else if (direction === "up") snakeHead.y -= 20;
    else if (direction === "down") snakeHead.y += 20;

    // Check for collision with food
    if (snakeHead.x === food.x && snakeHead.y === food.y) {
    
    
      snake.push({
    
     x: snakeHead.x, y: snakeHead.y });
      const foodElement = document.querySelector(".food");
      foodElement.remove();
      createFood();
    }

    // Remove the tail segment
    snake.pop();

    // Check for collision with walls or itself
    if (
      snakeHead.x < 0 ||
      snakeHead.x >= gameBoard.clientWidth ||
      snakeHead.y < 0 ||
      snakeHead.y >= gameBoard.clientHeight
    ) {
    
    
      clearInterval(gameInterval);
      alert("Game Over!");
      return;
    }

    for (let segment of snake) {
    
    
      if (segment.x === snakeHead.x && segment.y === snakeHead.y) {
    
    
        clearInterval(gameInterval);
        alert("Game Over!");
        return;
      }
    }

    // Update the snake on the game board
    snake.unshift({
    
     x: snakeHead.x, y: snakeHead.y });
    const snakeSegments = document.querySelectorAll(".snake");
    for (let i = 0; i < snakeSegments.length; i++) {
    
    
      snakeSegments[i].style.left = snake[i].x + "px";
      snakeSegments[i].style.top = snake[i].y + "px";
    }
  }

  createSnake();
  createFood();
  const gameInterval = setInterval(updateGame, 150);

  document.addEventListener("keydown", (event) => {
    
    
    if (event.key === "ArrowRight" && direction !== "left") direction = "right";
    else if (event.key === "ArrowLeft" && direction !== "right") direction = "left";
    else if (event.key === "ArrowUp" && direction !== "down") direction = "up";
    else if (event.key === "ArrowDown" && direction !== "up") direction = "down";
  });
</script>

CSS

<style>
  #game-board {
    
    
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
  }

  .snake {
    
    
    width: 20px;
    height: 20px;
    background-color: green;
    position: absolute;
  }

  .food {
    
    
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
  }
</style>

The simple Snake function has been realized above.

The above is the simple tutorial of the js handwritten Snake game. Thank you for reading. If you
encounter other problems, you can discuss
and study with me in private 点赞.
Pay attention to favorite bloggers and will continue to update...