用jquery实现吃豆人游戏

封面图 • 2025-10-14 • jQuery

用 jQuery 实现一个简单的“吃豆人”（Pac-Man）游戏是一个不错的练习项目，可以锻炼你对 DOM 操作、动画、事件处理和基本游戏逻辑的理解。

下面我将为你提供一个**简化版的吃豆人游戏**，使用 **jQuery** 和 HTML/CSS 实现。这个游戏包括：

- 吃豆人角色（圆形）
- 简单的迷宫
- 移动控制（方向键）
- 基本的“吃豆子”机制

---

## 🧩 1. HTML 结构

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简单吃豆人游戏</title>
  <style>
    body {
      margin: 0;
      background: #000;
    }
    #game {
      position: relative;
      width: 400px;
      height: 400px;
      margin: 20px auto;
      background: black;
      border: 2px solid white;
    }
    .dot {
      position: absolute;
      width: 10px;
      height: 10px;
      background: yellow;
      border-radius: 50%;
    }
    #pacman {
      position: absolute;
      width: 20px;
      height: 20px;
      background: yellow;
      border-radius: 50%;
      top: 100px;
      left: 100px;
    }
  </style>
</head>
<body>

</body>
</html>
```

---

## 🎮 2. JavaScript（jQuery 实现）

```javascript
$(document).ready(function () {
  const game = $('#game');
  const pacman = $('#pacman');
  const gridSize = 20; // 每个格子大小
  const rows = 20;
  const cols = 20;

// 创建迷宫（简单示例）
  function createMaze() {
    for (let row = 0; row < rows; row++) {
      for (let col = 0; col < cols; col++) {
        if ((row === 0 || row === rows - 1) || (col === 0 || col === cols - 1)) {
          $('<div>').css({
            position: 'absolute',
            width: gridSize,
            height: gridSize,
            backgroundColor: 'blue'
          }).attr('class', 'wall').css({
            top: row * gridSize,
            left: col * gridSize
          }).appendTo(game);
        } else {
          $('<div>').css({
            position: 'absolute',
            width: gridSize,
            height: gridSize,
            backgroundColor: 'black'
          }).attr('class', 'empty').css({
            top: row * gridSize,
            left: col * gridSize
          }).appendTo(game);
        }
      }
    }

// 添加豆子
    for (let row = 1; row < rows - 1; row++) {
      for (let col = 1; col < cols - 1; col++) {
        if (!(row === 10 && col === 10)) { // 避免在 pacman 初始位置放豆子
          $('<div>').addClass('dot').css({
            top: row * gridSize,
            left: col * gridSize
          }).appendTo(game);
        }
      }
    }
  }

createMaze();

let x = 100;
  let y = 100;
  let dx = 0;
  let dy = 0;

function movePacman() {
    x += dx;
    y += dy;
    pacman.css({ left: x, top: y });

// 检测是否吃到豆子
    $('.dot').each(function () {
      let dotX = parseInt($(this).css('left'));
      let dotY = parseInt($(this).css('top'));
      if (x === dotX && y === dotY) {
        $(this).remove();
      }
    });
  }

// 控制方向
  $(document).keydown(function (e) {
    switch (e.key) {
      case 'ArrowUp':
        dx = 0;
        dy = -gridSize;
        break;
      case 'ArrowDown':
        dx = 0;
        dy = gridSize;
        break;
      case 'ArrowLeft':
        dx = -gridSize;
        dy = 0;
        break;
      case 'ArrowRight':
        dx = gridSize;
        dy = 0;
        break;
    }
  });

// 动画循环
  setInterval(movePacman, 100);
});
```

---

## 🧠 功能说明

| 功能 | 说明 |
|------|------|
| 迷宫 | 用蓝色块表示墙壁，黑色为可走区域 |
| 豆子 | 黄色小圆点，被吃掉后消失 |
| 吃豆人 | 可以通过方向键移动 |
| 移动 | 使用 `setInterval` 实现定时移动 |

---

## 🚀 扩展建议（进阶功能）

你可以继续扩展这个游戏：

- 添加敌人（ghosts）
- 碰撞检测
- 计分系统
- 游戏结束逻辑
- 更复杂的迷宫结构
- 音效和动画效果

---

## ✅ 总结

这个示例是一个非常基础的吃豆人游戏，适合初学者学习 jQuery 的 DOM 操作、动画、事件绑定等技能。如果你想要更完整的游戏，建议使用 Canvas 或者游戏引擎（如 Phaser.js）来实现。

---

如果你需要更完整的版本（比如带有敌人、得分、关卡等），我可以继续帮你完善！需要吗？