用原生JS，写一个贪吃蛇小游戏

贪吃蛇游戏介绍

贪吃蛇是一款经典的休闲小游戏，游戏目标是控制一条不断成长的蛇，吃掉游戏中的食物，同时避免撞到自己或游戏边界。游戏以回合制的方式进行，玩家在每个回合中可以控制蛇向上下左右四个方向移动一格。当蛇吃掉一个食物时，它的身体就会增长一格，同时游戏难度也会逐渐增加。

创建游戏画布

首先，我们需要创建一个游戏画布，作为游戏的主要区域。我们可以使用HTML5的<canvas>元素来创建画布。

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

然后，我们需要获取画布的上下文，以便我们可以使用它来绘制游戏中的元素。

const canvas = document.getElementById("game-canvas");
const ctx = canvas.getContext("2d");

初始化游戏变量

接下来，我们需要初始化一些游戏变量，包括蛇的身体、食物的位置、游戏分数等。

const snake = [
  { x: 20, y: 20 },
  { x: 19, y: 20 },
  { x: 18, y: 20 },
  { x: 17, y: 20 },
  { x: 16, y: 20 },
];

let food = { x: 10, y: 10 };
let score = 0;

绘制游戏元素

现在，我们需要绘制游戏中的元素，包括蛇的身体、食物和游戏分数。

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

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

function drawScore() {
  ctx.fillStyle = "black";
  ctx.font = "16px Arial";
  ctx.fillText("Score: " + score, 8, 20);
}

更新游戏状态

接下来，我们需要更新游戏状态，包括蛇的移动、食物的生成和游戏的结束条件等。

function updateSnake() {
  const head = {
    x: snake[0].x + dx,
    y: snake[0].y + dy,
  };

  snake.unshift(head);

  if (snake[0].x == food.x && snake[0].y == food.y) {
    score++;
    generateFood();
  } else {
    snake.pop();
  }
}

function generateFood() {
  food = {
    x: Math.floor(Math.random() * canvas.width / 1),
    y: Math.floor(Math.random() * canvas.height / 1),
  };
}

function checkGameOver() {
  for (let i = 4; i < snake.length; i++) {
    if (snake[i].x == snake[0].x && snake[i].y == snake[0].y) {
      return true;
    }
  }

  if (snake[0].x < 0 || snake[0].x >= canvas.width / 1 || snake[0].y < 0 || snake[0].y >= canvas.height / 1) {
    return true;
  }

  return false;
}

控制蛇的移动

现在，我们需要控制蛇的移动。我们可以使用键盘事件来实现这一点。

document.addEventListener("keydown", (e) => {
  switch (e.keyCode) {
    case 37: // left
      dx = -1;
      dy = 0;
      break;
    case 38: // up
      dx = 0;
      dy = -1;
      break;
    case 39: // right
      dx = 1;
      dy = 0;
      break;
    case 40: // down
      dx = 0;
      dy = 1;
      break;
  }
});

游戏循环

最后，我们需要创建一个游戏循环来不断更新游戏状态和绘制游戏元素。

function gameLoop() {
  if (checkGameOver()) {
    alert("Game Over!");
    return;
  }

  updateSnake();
  drawSnake();
  drawFood();
  drawScore();

  setTimeout(gameLoop, 100);
}

gameLoop();

至此，我们的贪吃蛇游戏就完成了。通过使用原生JS，我们创建了一个经典的休闲游戏。希望这篇文章能帮助您了解如何使用原生JS开发游戏。