如何在 HTML CSS JS 中创建蛇游戏

蛇游戏是一款经典的游戏，在网页上实现它需要使用 HTML、CSS 和 JavaScript 技术。

创建 HTML 结构

首先，需要创建一个 HTML 页面，包含游戏主体的容器和一些必要的标签。

<div class="game-container">
  <canvas id="canvas"></canvas>
  <div class="score-board">Score: <span id="score"></span></div>
  <button id="start-button">Start Game</button>
</div>

上面的代码中，我们创建了一个 div 元素作为游戏容器，其中包含一个 canvas 元素，用于绘制蛇和食物，一个 div 元素显示玩家得分，还有一个 button 元素用于开始游戏。

使用 CSS 设计样式

接下来，使用 CSS 设计游戏的样式。可以自己设计或使用现成的样式库。

.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f9f9f9;
}

canvas {
  border: 1px solid #ddd;
}

.score-board {
  margin: 1rem 0;
  font-size: 1.5rem;
}

#start-button {
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

上面的代码中，我们设置了容器为垂直居中，并设置了页面背景色、边框、字体和颜色等样式。

实现游戏逻辑

最重要的部分是实现游戏逻辑。下面是一些常见的游戏逻辑和功能。

初始化蛇和食物

const snake = [{ x: 10, y: 10 }];
let food = { x: 5, y: 5 };

上面的代码中，我们初始化一个蛇数组和一个食物对象，用于存储游戏的状态。

绘制蛇和食物

function drawSnake() {
  snake.forEach((segment) => {
    context.fillStyle = "green";
    context.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
  });
}

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

上面的代码中，我们定义了 drawSnake 和 drawFood 函数，用于在 canvas 上绘制蛇和食物。

移动蛇和检测碰撞

function moveSnake() {
  const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
  snake.unshift(head);
  if (head.x === food.x && head.y === food.y) {
    food = { x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize) };
    score++;
    updateScore();
  } else {
    snake.pop();
  }
}

function checkCollision() {
  const head = snake[0];
  if (
    head.x < 0 ||
    head.x >= gridSize ||
    head.y < 0 ||
    head.y >= gridSize ||
    snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
  ) {
    gameOver();
  }
}

上面的代码中，我们定义了 moveSnake 和 checkCollision 函数，用于移动蛇并检测碰撞。

处理用户输入

function handleKeydown(event) {
  const directionMap = {
    ArrowUp: { x: 0, y: -1 },
    ArrowDown: { x: 0, y: 1 },
    ArrowLeft: { x: -1, y: 0 },
    ArrowRight: { x: 1, y: 0 },
  };
  const newDirection = directionMap[event.key];
  if (newDirection && (direction.x !== -newDirection.x || direction.y !== -newDirection.y)) {
    direction = newDirection;
  }
}

上面的代码中，我们定义了 handleKeydown 函数，用于处理用户按键事件，并根据按键设置蛇的移动方向。

处理游戏结束

function gameOver() {
  clearInterval(interval);
  alert("Game Over!");
}

上面的代码中，我们定义了 gameOver 函数，用于处理游戏结束时的逻辑。

启动游戏

最终，我们需要编写代码来启动游戏，并添加事件监听器。

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const gridSize = 20;
const fps = 10;
let direction = { x: 1, y: 0 };
let score = 0;
let interval;

function startGame() {
  snake.length = 1;
  snake[0] = { x: 10, y: 10 };
  food = { x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize) };
  score = 0;
  updateScore();

  clearInterval(interval);
  interval = setInterval(() => {
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawSnake();
    drawFood();
    moveSnake();
    checkCollision();
  }, 1000 / fps);
}

function updateScore() {
  document.getElementById("score").textContent = score;
}

document.addEventListener("keydown", handleKeydown);
document.getElementById("start-button").addEventListener("click", startGame);

startGame();

上面的代码中，我们获取 canvas 元素并创建 context 对象，定义了一些常量和全局变量，以及启动游戏、更新得分和添加事件监听器的函数。最后，我们调用 startGame 函数启动游戏。

以上就是在 HTML、CSS 和 JavaScript 中创建蛇游戏的完整过程，希望对你有所帮助！