返回

HTML、JS、CSS 构建贪食蛇，程序员思考方式的体现

前端

好的，以下是关于“像程序员一样思考：如何只使用 JavaScript、HTML 和 CSS 开发贪食蛇游戏”的文章。

在本文中，我们将介绍如何使用 HTML、JavaScript 和 CSS 开发贪食蛇游戏。贪食蛇是一款经典游戏，玩法很简单：蛇在屏幕上移动，吃掉食物以增加长度，同时避免撞到墙壁或自身。

开发贪食蛇游戏是一个很好的练习机会，可以帮助你学习编程的基础知识，包括变量、函数、事件处理和循环。通过本教程，你将学习到编程的思维方式，并在过程中获得乐趣。

步骤 1：创建 HTML 文件

首先，我们需要创建一个 HTML 文件。HTML 是用来构建网页的语言，它将定义游戏的结构和布局。你可以使用任何文本编辑器来创建 HTML 文件，比如记事本或 Sublime Text。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="game-board"></canvas>
</body>
</html>

步骤 2：创建 JavaScript 文件

接下来，我们需要创建一个 JavaScript 文件。JavaScript 是用来为网页添加交互性的语言，它将定义游戏的逻辑和行为。你可以使用任何文本编辑器来创建 JavaScript 文件，比如记事本或 Sublime Text。

// 获取游戏画布元素
const canvas = document.getElementById('game-board');

// 获取画布的上下文
const ctx = canvas.getContext('2d');

// 定义蛇的身体
const snake = [
  { x: 200, y: 200 },
  { x: 190, y: 200 },
  { x: 180, y: 200 },
  { x: 170, y: 200 },
  { x: 160, y: 200 },
];

// 定义食物的位置
let food = {
  x: Math.floor(Math.random() * canvas.width),
  y: Math.floor(Math.random() * canvas.height),
};

// 定义游戏速度
let speed = 100;

// 定义游戏方向
let direction = 'right';

// 定义游戏得分
let score = 0;

// 绘制游戏画布
function drawGame() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制蛇的身体
  snake.forEach((part) => {
    ctx.fillStyle = 'green';
    ctx.fillRect(part.x, part.y, 10, 10);
  });

  // 绘制食物
  ctx.fillStyle = 'red';
  ctx.fillRect(food.x, food.y, 10, 10);

  // 绘制得分
  ctx.fillStyle = 'black';
  ctx.font = '18px Arial';
  ctx.fillText(`得分：${score}`, 10, 20);
}

// 更新游戏状态
function updateGame() {
  // 移动蛇的身体
  const head = {
    x: snake[0].x + (direction === 'right' ? 10 : direction === 'left' ? -10 : 0),
    y: snake[0].y + (direction === 'down' ? 10 : direction === 'up' ? -10 : 0),
  };

  // 判断蛇是否吃到食物
  if (head.x === food.x && head.y === food.y) {
    // 增加蛇的身体长度
    snake.unshift(head);

    // 增加游戏得分
    score += 10;

    // 生成新的食物
    food = {
      x: Math.floor(Math.random() * canvas.width),
      y: Math.floor(Math.random() * canvas.height),
    };
  } else {
    // 删除蛇的尾部
    snake.pop();

    // 将蛇的头添加到蛇的身体
    snake.unshift(head);
  }

  // 判断蛇是否撞到墙壁或自身
  if (head.x < 0 || head.x > canvas.width - 10 || head.y < 0 || head.y > canvas.height - 10 || snake.some((part) => part.x === head.x && part.y === head.y)) {
    // 游戏结束
    alert(`游戏结束！你的得分是：${score}`);

    // 重新开始游戏
    snake = [
      { x: 200, y: 200 },
      { x: 190, y: 200 },
      { x: 180, y: 200 },
      { x: 170, y: 200 },
      { x: 160, y: 200 },
    ];

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

    score = 0;
  }
}

// 处理键盘事件
function handleKeyDown(event) {
  switch (event.key) {
    case 'ArrowUp':
      direction = 'up';
      break;
    case 'ArrowDown':
      direction = 'down';
      break;
    case 'ArrowLeft':
      direction = 'left';
      break;
    case 'ArrowRight':
      direction = 'right';
      break;
  }
}

// 添加键盘事件监听器
document.addEventListener('keydown', handleKeyDown);

// 启动游戏循环
setInterval(function () {
  updateGame();
  drawGame();
}, speed);

步骤 3：连接 HTML 和 JavaScript 文件

现在，我们需要将 HTML 和 JavaScript 文件连接起来。可以在 HTML 文件的 <head> 标签中添加一个 <script> 标签，并指定 JavaScript 文件的路径。

<head>
  
  <script src="snake.js"></script>
</head>

步骤 4：运行游戏

最后，可以双击 HTML 文件来运行游戏。你应该会看到一个贪食蛇游戏，你可以使用方向键来控制蛇的移动。

贪食蛇游戏是一个非常经典的游戏，也是一个很好的编程练习项目。通过本教程，你已经学会了如何使用 HTML、JavaScript 和 CSS 来开发一个简单的游戏。如果你对游戏开发感兴趣，可以继续学习更高级的编程技术，比如 Phaser 和 Unity。