正文

从零开始：揭秘经典游戏贪吃蛇的jQuery源码实现

/0 浏览量
0701

在互联网上，贪吃蛇游戏几乎无人不知，无人不晓。它是一款简单又经典的益智游戏，自1980年代问世以来，吸引了无数玩家的目光。今天，我们将从零开始，通过jQuery这个强大的前端库，来揭秘并实现这个经典游戏。

了解游戏规则

在开始编写代码之前，我们需要先了解一下贪吃蛇的基本规则：

  1. 游戏界面：游戏界面是一个二维的网格，通常是横竖各分为20个格子。
  2. 贪吃蛇：贪吃蛇由一系列相连的格子组成，初始长度为3个格子。
  3. 食物：食物随机出现在网格上的某个格子中，贪吃蛇吃掉食物后，长度会增加。
  4. 移动：玩家可以通过键盘上的上下左右键来控制贪吃蛇的移动方向。
  5. 游戏结束：贪吃蛇撞到墙壁或自己时，游戏结束。

准备工作

首先，我们需要创建一个HTML文件，并引入jQuery库。以下是基本的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇游戏</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="game-container"></div>
    <script src="script.js"></script>
</body>
</html>

接下来，我们创建一个CSS文件（style.css），用于设置游戏界面和贪吃蛇的样式。

#game-container {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    position: relative;
}

.cell {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    position: absolute;
}

.snake {
    background-color: #f00;
}

.food {
    background-color: #0f0;
}

最后，我们创建一个JavaScript文件（script.js），用于编写贪吃蛇游戏的主要逻辑。

实现游戏逻辑

在script.js文件中，我们将按照以下步骤实现游戏：

  1. 初始化游戏：创建游戏界面，初始化贪吃蛇和食物的位置。
  2. 控制贪吃蛇移动：监听键盘事件，根据按键改变贪吃蛇的移动方向。
  3. 更新游戏状态：在每一帧中，更新贪吃蛇的位置，并判断是否吃到食物或撞墙。
  4. 结束游戏：当贪吃蛇撞到墙壁或自己时，结束游戏。

以下是游戏的主要代码实现：

$(document).ready(function() {
    var container = $('#game-container');
    var width = 20;
    var height = 20;
    var snake = [];
    var food = {};
    var direction = 'right';
    var gameInterval;

    // 初始化游戏
    function initGame() {
        container.empty();
        snake = [];
        food = {};
        direction = 'right';

        for (var i = 0; i < height; i++) {
            for (var j = 0; j < width; j++) {
                var cell = $('<div></div>')
                    .addClass('cell')
                    .css({
                        top: i * 20,
                        left: j * 20
                    })
                    .appendTo(container);
            }
        }

        // 初始化贪吃蛇
        for (var i = 0; i < 3; i++) {
            snake.push({
                x: 1 + i,
                y: 1
            });
            $(`.cell:nth-child(${i + 1})`).addClass('snake');
        }

        // 初始化食物
        generateFood();
    }

    // 生成食物
    function generateFood() {
        var x = Math.floor(Math.random() * width);
        var y = Math.floor(Math.random() * height);
        food = { x: x, y: y };

        $(`.cell:nth-child(${x + y * width + 1})`).addClass('food');
    }

    // 移动贪吃蛇
    function moveSnake() {
        var head = snake[0];
        var newX = head.x;
        var newY = head.y;

        if (direction === 'right') {
            newX++;
        } else if (direction === 'left') {
            newX--;
        } else if (direction === 'up') {
            newY--;
        } else if (direction === 'down') {
            newY++;
        }

        snake.unshift({ x: newX, y: newY });

        // 判断是否吃到食物
        if (newX === food.x && newY === food.y) {
            snake.push(snake.pop()); // 延长贪吃蛇
            generateFood();
        } else {
            var tail = snake.pop();
            $(`.cell:nth-child(${tail.x + tail.y * width + 1})`).removeClass('snake');
        }

        $(`.cell:nth-child(${newX + newY * width + 1})`).addClass('snake');

        // 判断是否撞墙或撞到自己
        if (newX < 0 || newX >= width || newY < 0 || newY >= height || snake.some(function(item) {
            return item.x === newX && item.y === newY;
        })) {
            clearInterval(gameInterval);
            alert('游戏结束！');
        }
    }

    // 监听键盘事件
    $(document).keydown(function(e) {
        var newDirection = '';
        switch (e.keyCode) {
            case 37:
                newDirection = 'left';
                break;
            case 38:
                newDirection = 'up';
                break;
            case 39:
                newDirection = 'right';
                break;
            case 40:
                newDirection = 'down';
                break;
        }

        if (newDirection && (newDirection === 'right' && direction !== 'left') &&
            (newDirection === 'left' && direction !== 'right') &&
            (newDirection === 'up' && direction !== 'down') &&
            (newDirection === 'down' && direction !== 'up')) {
            direction = newDirection;
        }
    });

    // 开始游戏
    gameInterval = setInterval(moveSnake, 100);

    // 初始化游戏
    initGame();
});

总结

通过以上步骤，我们使用jQuery成功实现了经典游戏贪吃蛇。这个例子展示了如何利用jQuery来处理DOM操作、事件监听和定时器等基本功能。当然，在实际开发中，我们还可以添加更多的功能，例如得分系统、暂停/继续游戏等。希望这个例子能帮助你更好地理解jQuery在游戏开发中的应用。

-- 展开阅读全文 --