当前位置：首页 > 前端开发 > 正文

如何制作一个无需网络的单机版贪吃蛇游戏，仅使用HTML和基础编程知识？

admin
前端开发
2025-09-10
3

如何用HTML做单机版贪吃蛇：

贪吃蛇游戏是一款经典的单机游戏,通过HTML、CSS和JavaScript可以实现一个简单的单机版贪吃蛇游戏，以下是一个简单的实现步骤：

创建HTML结构

我们需要创建一个HTML文件,并添加一个用于显示游戏画面的容器，以下是HTML代码示例：

<!DOCTYPE html>
<html lang="zhCN">
<head>
    <meta charset="UTF8">单机版贪吃蛇</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="gamecontainer"></div>
    <script src="script.js"></script>
</body>
</html>

设计CSS样式

我们需要为游戏添加一些样式,以下是CSS代码示例：

#gamecontainer {
    width: 400px;
    height: 400px;
    backgroundcolor: #333;
    margin: 0 auto;
    position: relative;
}
.snake {
    position: absolute;
    backgroundcolor: #0f0;
    width: 10px;
    height: 10px;
}
.food {
    position: absolute;
    backgroundcolor: #f00;
    width: 10px;
    height: 10px;
}

编写JavaScript逻辑

我们需要编写JavaScript代码来实现游戏逻辑,以下是JavaScript代码示例：

// 游戏容器
const gameContainer = document.getElementById('gamecontainer');
// 蛇的初始位置
let snake = [{ x: 10, y: 10 }];
// 食物的初始位置
let food = { x: 20, y: 20 };
// 蛇的移动方向
let direction = 'Right';
// 游戏循环时间间隔
let gameInterval = setInterval(gameLoop, 200);
// 游戏循环函数
function gameLoop() {
    // 移动蛇
    moveSnake();
    // 检查蛇是否吃到食物
    checkFood();
    // 检查蛇是否撞到自己
    checkCollision();
    // 重新绘制蛇和食物
    render();
}
// 移动蛇的函数
function moveSnake() {
    let head = { x: snake[0].x, y: snake[0].y };
    if (direction === 'Right') {
        head.x++;
    } else if (direction === 'Left') {
        head.x;
    } else if (direction === 'Up') {
        head.y;
    } else if (direction === 'Down') {
        head.y++;
    }
    snake.unshift(head);
    if (head.x === food.x && head.y === food.y) {
        // 吃到食物，增加蛇的长度
        snake.push({ x: snake[snake.length  1].x, y: snake[snake.length  1].y });
        // 生成新的食物
        food = { x: Math.floor(Math.random() * 40) * 10, y: Math.floor(Math.random() * 40) * 10 };
    }
}
// 检查蛇是否吃到食物的函数
function checkFood() {
    // ...
}
// 检查蛇是否撞到自己的函数
function checkCollision() {
    // ...
}
// 渲染游戏的函数
function render() {
    // ...
}

完善游戏功能

代码实现了贪吃蛇游戏的基本功能,但还有一些功能需要完善，

控制蛇的移动方向
添加游戏结束提示
实现分数系统

以下是完善后的JavaScript代码示例：

// 控制蛇的移动方向
window.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowRight' && direction !== 'Left') {
        direction = 'Right';
    } else if (event.key === 'ArrowLeft' && direction !== 'Right') {
        direction = 'Left';
    } else if (event.key === 'ArrowUp' && direction !== 'Down') {
        direction = 'Up';
    } else if (event.key === 'ArrowDown' && direction !== 'Up') {
        direction = 'Down';
    }
});
// 游戏结束提示
function gameOver() {
    clearInterval(gameInterval);
    alert('游戏结束！');
}
// 实现分数系统
let score = 0;
function checkFood() {
    if (head.x === food.x && head.y === food.y) {
        score++;
        // ...
    }
}
// 渲染游戏的函数
function render() {
    gameContainer.innerHTML = '';
    snake.forEach(function(segment) {
        let snakeElement = document.createElement('div');
        snakeElement.classList.add('snake');
        snakeElement.style.left = segment.x + 'px';
        snakeElement.style.top = segment.y + 'px';
        gameContainer.appendChild(snakeElement);
    });
    let foodElement = document.createElement('div');
    foodElement.classList.add('food');
    foodElement.style.left = food.x + 'px';
    foodElement.style.top = food.y + 'px';
    gameContainer.appendChild(foodElement);
    document.getElementById('score').innerText = '得分：' + score;
}