用jquery实现Snake贪吃蛇游戏

封面图 • 2025-11-21 • jQuery

下面是一个使用 **jQuery** 实现的简单 **贪吃蛇（Snake）游戏** 的示例代码。这个游戏包含基本功能：控制方向、蛇的移动、食物生成和碰撞检测。

---

## 🐍 贪吃蛇游戏（jQuery实现）

### ✅ 功能说明：
- 使用键盘控制蛇的方向（↑ ↓ ← →）
- 蛇吃到食物后变长
- 碰到边界或自身则游戏结束

---

## 🧩 HTML + CSS + jQuery 代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>贪吃蛇游戏 - jQuery</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f0f0f0;
    }
    canvas {
      border: 2px solid #333;
      background-color: #fff;
      display: block;
      margin: 20px auto;
    }
    #score {
      font-size: 1.5em;
      margin-top: 10px;
    }
  </style>
</head>
<body>

<canvas id="game" width="400" height="400"></canvas>
<div id="score">Score: 0</div>

let snake = [{ x: 10, y: 10 }];
  let direction = { x: 0, y: 0 };
  let food = { x: 15, y: 15 };
  let score = 0;
  let gameInterval;

function draw() {
    // 清空画布
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

// 画蛇
    ctx.fillStyle = 'green';
    for (let segment of snake) {
      ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
    }

// 画食物
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
  }

function update() {
    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

// 碰撞检测：边界或自身
    if (
      head.x < 0 || head.x >= tileCount ||
      head.y < 0 || head.y >= tileCount ||
      snake.some(segment => segment.x === head.x && segment.y === head.y)
    ) {
      clearInterval(gameInterval);
      alert("Game Over! Your score: " + score);
      return;
    }

snake.unshift(head);

// 吃到食物
    if (head.x === food.x && head.y === food.y) {
      score++;
      $('#score').text('Score: ' + score);
      placeFood();
    } else {
      snake.pop(); // 移除尾部
    }
  }

function placeFood() {
    food = {
      x: Math.floor(Math.random() * tileCount),
      y: Math.floor(Math.random() * tileCount)
    };
    // 食物不能在蛇身上
    while (snake.some(segment => segment.x === food.x && segment.y === food.y)) {
      food = {
        x: Math.floor(Math.random() * tileCount),
        y: Math.floor(Math.random() * tileCount)
      };
    }
  }

$(document).keydown(function (e) {
    switch (e.key) {
      case 'ArrowUp':
        if (direction.y === 0) direction = { x: 0, y: -1 };
        break;
      case 'ArrowDown':
        if (direction.y === 0) direction = { x: 0, y: 1 };
        break;
      case 'ArrowLeft':
        if (direction.x === 0) direction = { x: -1, y: 0 };
        break;
      case 'ArrowRight':
        if (direction.x === 0) direction = { x: 1, y: 0 };
        break;
    }
  });

function gameLoop() {
    update();
    draw();
  }

// 初始化
  placeFood();
  gameInterval = setInterval(gameLoop, 100);
</script>

</body>
</html>
```

---

## 📌 说明：

- `canvas` 用于绘制游戏界面。
- `snake` 是一个数组，存储蛇的各个身体部分。
- `direction` 控制蛇的移动方向。
- `food` 是随机生成的食物位置。
- 使用 `setInterval` 控制游戏循环。
- 使用 `keydown` 监听键盘事件控制蛇的方向。

---

## 🚀 扩展建议（可选）：

- 增加“开始/暂停”按钮
- 添加音效
- 改进 UI 和动画效果
- 使用 `requestAnimationFrame` 替代 `setInterval`

---

如果你需要更高级版本（比如多级难度、关卡系统等），也可以告诉我！