前端编写贪吃蛇游戏-附详细代码

news2025/1/18 10:58:38

当我们在前端编写贪吃蛇游戏时，可以按照以下步骤进行：

先看截图：
在这里插入图片描述

设置游戏板：创建一个HTML元素作为游戏板，可以使用<div>元素，并为其设置合适的样式。
绘制蛇和食物：使用JavaScript代码在游戏板上绘制蛇和食物。可以使用CSS样式设置蛇和食物的样式。
移动蛇：编写函数来移动蛇的身体和头部。可以使用数组来表示蛇的身体，数组中的每个元素表示蛇的一个部分，如头部、身体和尾部。
监听键盘事件：使用JavaScript代码监听键盘事件，根据按键来改变蛇的移动方向。
检查碰撞：编写函数来检查蛇是否碰到边界或自身。如果蛇碰到边界或自身，则游戏结束。
重新绘制游戏板：在每次移动蛇后，重新绘制游戏板，以显示蛇和食物的新位置。
开始游戏：使用定时器来定期移动蛇，从而开始游戏。可以使用setInterval函数来设置定时器。

下面是一个简单的示例代码，演示了如何在前端编写贪吃蛇游戏：

<!DOCTYPE html>
<html>
<head>
  <style>
    #game-board {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
    
    .snake {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: green;
    }
    
    .food {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

  <script>
    var gameBoard = document.getElementById('game-board');
    var snake = [
      { top: 0, left: 0 },
      { top: 0, left: 20 },
      { top: 0, left: 40 }
    ];
    var food = { top: 100, left: 100 };
    var direction = 'right';

    function draw() {
      gameBoard.innerHTML = '';

      snake.forEach(function(segment) {
        var snakeElement = document.createElement('div');
        snakeElement.className = 'snake';
        snakeElement.style.top = segment.top + 'px';
        snakeElement.style.left = segment.left + 'px';
        gameBoard.appendChild(snakeElement);
      });

      var foodElement = document.createElement('div');
      foodElement.className = 'food';
      foodElement.style.top = food.top + 'px';
      foodElement.style.left = food.left + 'px';
      gameBoard.appendChild(foodElement);
    }

    function move() {
      for (var i = snake.length - 1; i > 0; i--) {
        snake[i].top = snake[i-1].top;
        snake[i].left = snake[i-1].left;
      }

      if (direction === 'up') {
        snake[0].top -= 20;
      } else if (direction === 'down') {
        snake[0].top += 20;
      } else if (direction === 'left') {
        snake[0].left -= 20;
      } else if (direction === 'right') {
        snake[0].left += 20;
      }

      if (snake[0].top === food.top && snake[0].left === food.left) {
        food.top = Math.floor(Math.random() * 20) * 20;
        food.left = Math.floor(Math.random() * 20) * 20;

        var tail = {
          top: snake[snake.length - 1].top,
          left: snake[snake.length - 1].left
        };
        snake.push(tail);
      }

      if (snake[0].top < 0 || snake[0].top >= 400 ||
          snake[0].left < 0 || snake[0].left >= 400 ||
          checkCollision()) {
        clearInterval(gameInterval);
        alert('Game Over');
      }

      draw();
    }

    function checkCollision() {
      for (var i = 1; i < snake.length; i++) {
        if (snake[i].top === snake[0].top && snake[i].left === snake[0].left) {
          return true;
        }
      }
      return false;
    }

    document.addEventListener('keydown', function(event) {
      if (event.keyCode === 37 && direction !== 'right') {
        direction = 'left';
      } else if (event.keyCode === 38 && direction !== 'down') {
        direction = 'up';
      } else if (event.keyCode === 39 && direction !== 'left') {
        direction = 'right';
      } else if (event.keyCode === 40 && direction !== 'up') {
        direction = 'down';
      }
    });

    var gameInterval = setInterval(move, 200);
  </script>
</body>
</html>