返回

在浏览器中打造属于你的贪吃蛇游戏：HTML+CSS+JS实现

前端

贪吃蛇游戏简介

贪吃蛇是一款经典的街机游戏，玩家控制一条贪吃蛇在游戏世界中吃食物，同时避免撞到墙或自身。每当贪吃蛇吃到一个食物，它就会变长一点。随着游戏进行，游戏速度会逐渐加快，难度也会增加。贪吃蛇是一款非常容易上手但很难精通的游戏，它考验玩家的反应速度和手眼协调能力。

创建游戏画布

首先，我们需要创建一个游戏画布。游戏画布是一个HTML元素，它将用作游戏的显示区域。我们可以使用<canvas>元素来创建游戏画布。<canvas>元素是一个非常强大的HTML元素，它允许我们使用JavaScript来绘制图形。

<canvas id="game-canvas" width="400" height="400"></canvas>

在上面的代码中，我们创建了一个<canvas>元素，并为其设置了宽和高。<canvas>元素的ID是“game-canvas”，我们将在JavaScript中使用这个ID来获取画布元素。

绘制贪吃蛇

接下来，我们需要绘制贪吃蛇。贪吃蛇的身体由多个方块组成，每个方块都是一个10像素乘10像素的正方形。我们可以使用JavaScript中的fillRect()方法来绘制这些方块。

function drawSnake() {
  for (var i = 0; i < snake.length; i++) {
    context.fillStyle = "green";
    context.fillRect(snake[i].x, snake[i].y, 10, 10);
  }
}

在上面的代码中，我们首先定义了一个drawSnake()函数。这个函数将负责绘制贪吃蛇。在函数中，我们使用一个for循环来遍历贪吃蛇的身体。对于身体的每个方块，我们使用context.fillStyle属性来设置方块的颜色，然后使用context.fillRect()方法来绘制方块。

生成食物

接下来，我们需要生成食物。食物是一个10像素乘10像素的正方形，它可以出现在游戏画布的任何位置。我们可以使用JavaScript中的Math.random()函数来随机生成食物的位置。

function generateFood() {
  food = {
    x: Math.floor(Math.random() * 40) * 10,
    y: Math.floor(Math.random() * 40) * 10
  };
}

在上面的代码中，我们首先定义了一个generateFood()函数。这个函数将负责生成食物。在函数中，我们使用Math.random()函数来随机生成食物的x坐标和y坐标。我们使用Math.floor()函数来确保食物的坐标是整数。

处理用户输入

接下来，我们需要处理用户输入。贪吃蛇可以使用方向键来控制。我们可以使用JavaScript中的addEventListener()方法来监听方向键的按下事件。

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

在上面的代码中，我们使用document.addEventListener()方法来监听方向键的按下事件。当方向键被按下时，我们使用event.keyCode属性来获取方向键的键码。然后，我们根据键码来设置贪吃蛇的方向。

检测游戏结束条件

接下来，我们需要检测游戏结束条件。贪吃蛇有两种情况会游戏结束：撞到墙或撞到自身。我们可以使用JavaScript中的if语句来检测这两种情况。

function checkGameOver() {
  if (snake[0].x < 0 || snake[0].x > 390 || snake[0].y < 0 || snake[0].y > 390) {
    gameover = true;
  }
  for (var i = 4; i < snake.length; i++) {
    if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
      gameover = true;
    }
  }
}

在上面的代码中，我们首先定义了一个checkGameOver()函数。这个函数将负责检测游戏结束条件。在函数中，我们使用if语句来检测贪吃蛇是否撞到了墙。如果贪吃蛇撞到了墙，我们把gameover变量设置为true。然后，我们使用一个for循环来遍历贪吃蛇的身体。对于身体的每个方块，我们检查它是否与贪吃蛇的头部的坐标相同。如果相同，我们把gameover变量设置为true。

完整游戏源码

现在，我们已经完成了贪吃蛇游戏的全部代码。你可以将以下代码复制到一个HTML文件中，然后在浏览器中运行它。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="game-canvas" width="400" height="400"></canvas>
  <script>
    var canvas = document.getElementById("game-canvas");
    var context = canvas.getContext("2d");

    var snake = [
      {x: 200, y: 200},
      {x: 190, y: 200},
      {x: 180, y: 200},
      {x: 170, y: 200},
      {x: 160, y: 200}
    ];

    var food = {x: 100, y: 100};
    var snakeDirection = "right";
    var gameover = false;

    function drawSnake() {
      for (var i = 0; i < snake.length; i++) {
        context.fillStyle = "green";
        context.fillRect(snake[i].x, snake[i].y, 10, 10);
      }
    }

    function generateFood() {
      food = {
        x: Math.floor(Math.random() * 40) * 10,
        y: Math.floor(Math.random() * 40) * 10
      };
    }

    function moveSnake() {
      var head = {
        x: snake[0].x + 10 * (snakeDirection === "right" ? 1 : snakeDirection === "left" ? -1 : 0),
        y: snake[0].y + 10 * (snakeDirection === "down" ? 1 : snakeDirection === "up" ? -1 : 0)
      };
      snake.unshift(head);
      if (head.x === food.x && head.y === food.y) {
        generateFood();
      } else {
        snake.pop();
      }
    }

    function drawFood() {
      context.fillStyle = "red";
      context.fillRect(food.x, food.y, 10, 10);
    }

    function checkGameOver() {
      if (snake[0].x < 0 || snake[0].x > 390 || snake[0].y < 0 || snake[0].y > 390) {
        gameover = true;
      }
      for (var i = 4; i < snake.length; i++) {
        if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
          gameover = true;
        }
      }
    }

    function draw() {
      context.clearRect(0, 0, 400, 400);
      drawSnake();
      drawFood();
      if (!gameover) {
        moveSnake();
        checkGameOver();
        setTimeout(draw, 100);
      }
    }

    draw();

    document.addEventListener("keydown", function(event) {
      if (event.keyCode