js做贪吃蛇怎么撞墙

在JavaScript中实现贪吃蛇游戏并让蛇撞墙时结束游戏，需要遵循几个核心步骤：碰撞检测、边界定义、游戏循环。 其中，碰撞检测 是最关键的环节，通过检测蛇头的位置是否超出了游戏区域来判断是否撞墙。

一、初始化游戏

在开始编写贪吃蛇游戏之前，我们需要设置游戏的基本结构和初始化变量。

1.1 创建游戏画布

首先，我们需要一个HTML画布元素来绘制游戏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="snake.js"></script>
</body>
</html>

1.2 设置游戏变量

在snake.js文件中，我们将定义一些基本的变量和设置。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 20;
let snake = [{ x: 200, y: 200 }];
let direction = { x: 0, y: 0 };
let food = { x: 0, y: 0 };
let gameInterval;
function initGame() {
    placeFood();
    direction = { x: gridSize, y: 0 };
    gameInterval = setInterval(gameLoop, 100);
}
function placeFood() {
    food.x = Math.floor(Math.random() * canvas.width / gridSize) * gridSize;
    food.y = Math.floor(Math.random() * canvas.height / gridSize) * gridSize;
}
initGame();

二、游戏循环和绘制

游戏的核心在于不断更新画布和蛇的位置，这需要一个游戏循环。

2.1 更新和绘制

function gameLoop() {
    update();
    draw();
}
function update() {
    // 更新蛇的位置
    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
    snake.unshift(head);
    // 检查是否吃到食物
    if (head.x === food.x && head.y === food.y) {
        placeFood();
    } else {
        snake.pop();
    }
    // 检查是否撞墙
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
        clearInterval(gameInterval);
        alert('Game Over');
    }
}
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 画食物
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, gridSize, gridSize);
    // 画蛇
    ctx.fillStyle = 'green';
    snake.forEach(segment => {
        ctx.fillRect(segment.x, segment.y, gridSize, gridSize);
    });
}

三、控制蛇的方向

为了让蛇移动，我们需要监听键盘事件。

3.1 添加事件监听器

document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
    const key = event.keyCode;
    const goingUp = direction.y === -gridSize;
    const goingDown = direction.y === gridSize;
    const goingRight = direction.x === gridSize;
    const goingLeft = direction.x === -gridSize;
    if (key === 37 && !goingRight) {
        direction = { x: -gridSize, y: 0 };
    } else if (key === 38 && !goingDown) {
        direction = { x: 0, y: -gridSize };
    } else if (key === 39 && !goingLeft) {
        direction = { x: gridSize, y: 0 };
    } else if (key === 40 && !goingUp) {
        direction = { x: 0, y: gridSize };
    }
}

四、碰撞检测和游戏结束

在游戏中，碰撞检测是关键部分，包括蛇撞墙和蛇撞到自己。

4.1 撞墙检测

已经在update函数中实现，当蛇头的位置超出画布边界时，游戏结束。

if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
    clearInterval(gameInterval);
    alert('Game Over');
}

4.2 撞到自己

另外，还需要检查蛇是否撞到了自己。

for (let i = 4; i < snake.length; i++) {
    if (head.x === snake[i].x && head.y === snake[i].y) {
        clearInterval(gameInterval);
        alert('Game Over');
    }
}

五、提高用户体验

5.1 添加得分系统

let score = 0;
function update() {
    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
    snake.unshift(head);
    if (head.x === food.x && head.y === food.y) {
        placeFood();
        score++;
    } else {
        snake.pop();
    }
    // 碰撞检测
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
        clearInterval(gameInterval);
        alert('Game Over. Score: ' + score);
    }
    for (let i = 4; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
            clearInterval(gameInterval);
            alert('Game Over. Score: ' + score);
        }
    }
}
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 画食物
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, gridSize, gridSize);
    // 画蛇
    ctx.fillStyle = 'green';
    snake.forEach(segment => {
        ctx.fillRect(segment.x, segment.y, gridSize, gridSize);
    });
    // 画分数
    ctx.fillStyle = 'black';
    ctx.font = '20px Arial';
    ctx.fillText('Score: ' + score, 10, 20);
}

六、总结

通过上述步骤，我们已经实现了一个基础的贪吃蛇游戏。主要的关键点在于初始化游戏、更新和绘制游戏元素、碰撞检测、以及用户交互。在这个过程中，我们学会了如何使用JavaScript操作画布、监听键盘事件、以及进行简单的游戏逻辑处理。这些都是前端开发中非常重要的技能。

要进一步提升游戏体验，可以考虑增加更多的功能，例如不同的难度级别、声音效果、以及更复杂的地图等。希望这篇文章能帮助你更好地理解和实现贪吃蛇游戏的基本原理和实现方法。