原生js贪吃蛇游戏实战开发- 贪吃蛇游戏结束判断

# 1. 介绍贪吃蛇游戏的基本原理和规则

## 1.1 贪吃蛇游戏简介
贪吃蛇是经典的街机游戏，玩家通过操纵一个由连续方块组成的“蛇”来获取食物，蛇每吃到一个食物会变长一截。游戏的目标是尽可能多地吃食物，同时避免蛇头碰到游戏界面的边界或碰到自身身体。

## 1.2 贪吃蛇游戏的基本操作
玩家可以通过键盘上的方向键控制蛇的移动方向，蛇会不断地向当前方向移动，直到玩家改变方向或游戏结束。

## 1.3 贪吃蛇游戏的胜利条件和失败条件
胜利条件：在游戏界面上填满食物并且没有发生碰撞的情况下获胜。
失败条件：蛇头碰到游戏界面的边界或者碰到自身身体时游戏失败。

# 2. 原生js实现贪吃蛇游戏的基本框架

贪吃蛇游戏是一款经典的小游戏，通过操纵蛇头的移动来吃食物，不断增长身体长度，直到触碰到墙壁或者自己的身体而结束游戏。接下来我们将使用原生js来实现贪吃蛇游戏的基本框架。

### 2.1 创建游戏画布和蛇的初始位置

首先，我们需要在HTML中创建游戏画布，用于展示游戏内容。同时，初始化蛇的位置、长度和方向，并在画布上绘制蛇的初始状态。

// 创建游戏画布
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");

// 初始化蛇的位置、长度和方向
var snake = [
    { x: 150, y: 150 },
    { x: 140, y: 150 },
    { x: 130, y: 150 },
];
var dx = 10; // 蛇头在x轴上的移动距离
var dy = 0;  // 蛇头在y轴上的移动距离

// 绘制蛇的初始状态
function drawSnake() {
    snake.forEach(drawSnakePart);
}

function drawSnakePart(snakePart) {
    ctx.fillStyle = 'lightgreen';
    ctx.strokestyle = 'darkgreen';
    ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
    ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

通过以上代码，我们成功创建了游戏画布并初始化了蛇的位置、长度和方向，并在画布上绘制了蛇的初始状态。

### 2.2 监听键盘事件实现贪吃蛇的移动

接下来，我们需要监听键盘事件，根据按键改变蛇头的移动方向，从而实现贪吃蛇的移动。

// 监听键盘事件
document.addEventListener("keydown", changeDirection);

function changeDirection(event) {
    const LEFT_KEY = 37;
    const RIGHT_KEY = 39;
    const UP_KEY = 38;
    const DOWN_KEY = 40;
    const keyPressed = event.keyCode;
    const goingUp = dy === -10;
    const goingDown = dy === 10;
    const goingRight = dx === 10;
    const goingLeft = dx === -10;

    if (keyPressed === LEFT_KEY && !goingRight) {
      dx = -10;
      dy = 0;
    }

    if (keyPressed === UP_KEY && !goingDown) {
      dx = 0;
      dy = -10;
    }

    if (keyPressed === RIGHT_KEY && !goingLeft) {
      dx = 10;
      dy = 0;
    }

    if (keyPressed === DOWN_KEY && !goingUp) {
      dx = 0;
      dy = 10;
    }
}

在以上代码中，我们通过监听键盘事件实现了改变蛇头移动方向的功能，从而控制贪吃蛇的移动。

### 2.3 生成食物并实现吃食物的功能

最后，我们需要生成食物并实现吃食物的功能，使得游戏具备基本的玩法。

// 生成食物的位置
function getRandomFood(min, max) {
    return Math.round((Math.random() * (max-min) + min) / 10) * 10;
}

let foodX = getRandomFood(0, canvas.width - 10);
let foodY = getRandomFood(0, canvas.height - 10);

// 绘制食物
function drawFood() {
    ctx.fillStyle = 'red';
    ctx.strokestyle = 'darkred';
    ctx.fillRect(foodX, foodY, 10, 10);
    ctx.strokeRect(foodX, foodY, 10, 10);
}

// 吃食物的功能
function eatFood() {
    if (snake[0].x === foodX && snake[0].y === foodY) {
        // 吃到食物后增加蛇的长度并重新生成食物位置
        let newHead = { x: snake[0].x + dx, y: snake[0].y + dy };
        snake.unshift(newHead);
        foodX = getRandomFood(0, canvas.width - 10);
        foodY = getRandomFood(0, canvas.height - 10);
    }
}

通过以上代码，我们成功生成了食物的位置，并实现了吃食物的功能，使得贪吃蛇游戏具备基本的玩法。

至此，我们已经完成了贪吃蛇游戏的基本框架，包括创建游戏画布、初始化蛇的位置和方向、监听键盘事件实现移动、生成食物并实现吃食物的功能。在接下来的章节中，我们将继续完善游戏功能，实现碰撞检测和游戏结束判断。

# 3. 贪吃蛇碰撞检测的实现

在贪吃蛇游戏中，碰撞检测是至关重要的一环，它决定了游戏的进行和结束。在本章节中，我们将详细讨论如何实现贪吃蛇的碰撞检测。

#### 3.1 监听碰撞事件及其处理

在游戏中，我们需要不断地检查贪吃蛇头部与墙体、身体、食物等其他元素之间的碰撞情况。为了实现这一点，我们可以通过以下代码段来监听碰撞事件并做相应处理：

function checkCollision() {
    // 检测是否撞墙
    if (headX < 0 || headX >= canvas.width || headY < 0 || headY >= canvas.height) {
        gameOver();
    }
    // 检测是否撞到身体
    for (let i = 1; i < snake.length; i++) {
        if (headX === snake[i].x && headY === snake[i].y) {
            gameOver();
        }
    }
}

function gameOver() {
    // 游戏结束逻辑，例如停止游戏循环、显示游戏结束提示等
}

#### 3.2 碰撞检测的优化及避免穿墙问题

为了优化碰撞检测的性能，我们可以考虑一些技巧，例如：

- 在移动时，先判断下一个位置是否与蛇身体重叠，避免每次都遍历整个蛇身体。
- 可以考虑将游戏区域设置为环形，即当蛇头移出边界时，从相对应的边界重新进入，避免了穿墙的问题。

#### 3.3 处理贪吃蛇头部碰撞身体的情况

当贪吃蛇头部与自身身体相撞时，游戏应该立即结束，这是因为在贪吃蛇游戏中，头部撞到身体代表着失败。我们需要在碰撞检测中加入对此情况的处理，保证游戏的公平性和正确性。

经过以上的处理，我们就能有效地实现贪吃蛇游戏中的碰撞检测，确保游戏的流畅性和玩家体验。在后续章节中，我们将继续完善游戏的功能和细节，让贪吃蛇游戏变得更加有趣和挑战。

# 4. 实现贪吃蛇游戏的结束判断

在贪吃蛇游戏中，游戏的结束判断是至关重要的，只有正确地判断游戏是否结束，才能给予玩家准确的反馈，并提供重新开始游戏的机会。本章将详细介绍如何实现贪吃蛇游戏的结束判断。

#### 4.1 判断贪吃蛇是否碰到墙壁或者身体

首先，在每次贪吃蛇移动时，需要判断贪吃蛇是否碰到了墙壁或者自己的身体。可以通过蛇头的坐标位置和游戏边界的坐标位置进行比较，以及判断蛇头是否与身体坐标重合来实现这一功能。

function checkCollision() {
    let headX = snake[0].x;
    let headY = snake[0].y;

    // 判断是否撞墙
    if (headX < 0 || headX >= canvas.width / snakeSize || headY < 0 || headY >= canvas.height / snakeSize) {
        gameOver();
    }

    // 判断蛇头是否撞到身体
    for (let i = 1; i < snake.length; i++) {
        if (headX === snake[i].x && headY === snake[i].y) {
            gameOver();
        }
    }
}

#### 4.2 贪吃蛇长度为零的情况

另外，当贪吃蛇的长度减为零时，也应该视为游戏失败，需要进行结束处理。

function checkSnakeLength() {
    if (snake.length === 0) {
        gameOver();
    }
}

#### 4.3 游戏结束的提示及重新开始游戏

游戏结束时，需要给出相应的提示，并提供重新开始游戏的机会。可以在页面中弹出提示框或者展示相关信息，同时添加重新开始游戏的按钮，让玩家可以方便地重新开始游戏。

function gameOver() {
    // 游戏结束的处理逻辑，例如弹出提示框、展示得分等
    // ...

    // 添加重新开始游戏的按钮，点击按钮重新开始游戏
    restartButton.addEventListener('click', function() {
        // 重新初始化相关变量，重新开始游戏
        // ...
    });
}

实现了以上功能后，贪吃蛇游戏就能够在碰到墙壁、身体或者长度减为零时正确地结束，给玩家提供良好的游戏体验和交互界面。

以上是关于贪吃蛇游戏结束判断的实现方法，通过合理的游戏结束判断，可以使游戏更加完善和具有挑战性。

# 5. 游戏结束判断的优化和完善

在贪吃蛇游戏中，游戏结束的判断非常关键，因为它直接影响到玩家是否能够继续游戏或者重新开始游戏。下面我们将对游戏结束判断进行优化和完善，提升游戏的体验和可玩性。

#### 5.1 增加游戏得分机制

为了增加游戏的趣味性，我们可以引入游戏得分机制。每当贪吃蛇吃到一个食物时，得分会加一，并在界面上显示当前得分，玩家可以通过得分来衡量游戏的进程和自己的表现。当游戏结束时，可以将最终得分与最高分进行比较，并更新最高分。

// 定义得分变量
let score = 0;
// 在吃食物的逻辑中增加得分
function eatFood() {
    // 贪吃蛇吃到食物时执行的操作
    score++;
    // 更新得分显示
    document.getElementById('score').innerText = 'Score: ' + score;
}

#### 5.2 存储最高分及展示

为了让游戏更具挑战性和竞争性，我们可以在本地存储中保存最高分，并在游戏界面上展示最高分，让玩家不断挑战自己的最高记录。

// 保存最高分到本地存储
function saveHighScore() {
    if (score > localStorage.getItem('highScore')) {
        localStorage.setItem('highScore', score);
    }
}

// 在游戏结束时更新最高分
function updateHighScore() {
    document.getElementById('highScore').innerText = 'High Score: ' + localStorage.getItem('highScore');
}

#### 5.3 优化游戏结束界面的展示和交互

在游戏结束时，除了简单的提示游戏结束外，我们可以优化结束界面的展示，比如显示玩家得分、最高分、重新开始游戏按钮等，让玩家有更多交互的机会，提升游戏体验。

// 游戏结束时的弹窗显示
function showGameOverModal() {
    document.getElementById('gameOverModal').style.display = 'block';
}

// 重新开始游戏按钮点击事件
document.getElementById('restartBtn').addEventListener('click', () => {
    restartGame();
});

通过以上优化和完善，我们提升了游戏的趣味性和可玩性，让玩家在贪吃蛇游戏中获得更加丰富的游戏体验。

# 6. 总结与展望

在本文中，我们通过原生js实现了贪吃蛇游戏的基本框架，并重点介绍了贪吃蛇游戏的结束判断机制。通过学习本文，你应该掌握了以下内容：

- 贪吃蛇游戏的基本原理和规则
- 原生js实现贪吃蛇游戏的基本框架
- 贪吃蛇碰撞检测的实现
- 贪吃蛇游戏的结束判断及优化
- 游戏结束判断的完善和优化

总的来说，贪吃蛇游戏是一款经典的小游戏，通过本文的学习，希望读者能够对游戏开发有更深入的理解，同时也能够应用所学知识开发更多有趣的小游戏。

未来，我们可以进一步优化贪吃蛇游戏的体验和功能，比如增加不同难度级别、多样化的食物效果、多人游戏模式等，使游戏更具挑战性和趣味性。

希望本文对你有所帮助，也欢迎大家继续探索游戏开发的乐趣，不断提升自己的技术水平。