HTML贪吃蛇游戏实现

发布于：2025-08-29 ⋅ 阅读:(17) ⋅ 点赞:(0)

HTML贪吃蛇游戏实现

创建一个完整的贪吃蛇游戏HTML页面，包含游戏功能、说明表格和相关技术链接。

思路分析

  1. 使用HTML5 Canvas绘制游戏区域
  2. 使用JavaScript实现游戏逻辑（蛇的移动、食物生成、碰撞检测）
  3. 添加游戏控制按键和功能说明表格
  4. 提供相关技术参考链接

最终实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f0f0f0;
            padding: 20px;
        }
        h1 {
            color: #2c3e50;
        }
        #gameCanvas {
            border: 3px solid #2c3e50;
            border-radius: 5px;
            background-color: #000;
            margin-bottom: 20px;
        }
        .score-container {
            font-size: 24px;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        .controls {
            margin-bottom: 25px;
            text-align: center;
        }
        table {
            border-collapse: collapse;
            margin: 15px 0;
            width: 80%;
            max-width: 600px;
        }
        th, td {
            border: 1px solid #2c3e50;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #2c3e50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .links {
            margin-top: 30px;
            text-align: center;
        }
        .links a {
            display: block;
            margin: 10px 0;
            color: #3498db;
            text-decoration: none;
        }
        .links a:hover {
            text-decoration: underline;
        }
        .game-over {
            display: none;
            color: #e74c3c;
            font-weight: bold;
            font-size: 24px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <h1>贪吃蛇游戏</h1>
    
    <div class="score-container">得分: <span id="score">0</span></div>
    
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <div id="gameOver" class="game-over">游戏结束! 按空格键重新开始</div>
    
    <div class="controls">
        <p>使用键盘方向键控制蛇的移动</p>
        <p>按空格键暂停/继续游戏</p>
    </div>
    
    <table>
        <tr>
            <th>按键</th>
            <th>功能</th>
        </tr>
        <tr>
            <td>↑</td>
            <td>向上移动</td>
        </tr>
        <tr>
            <td>↓</td>
            <td>向下移动</td>
        </tr>
        <tr>
            <td>←</td>
            <td>向左移动</td>
        </tr>
        <tr>
            <td>→</td>
            <td>向右移动</td>
        </tr>
        <tr>
            <td>空格键</td>
            <td>暂停/继续游戏</td>
        </tr>
    </table>
    
    <table>
        <tr>
            <th>游戏元素</th>
            <th>描述</th>
        </tr>
        <tr>
            <td>蛇</td>
            <td>玩家控制的角色，吃到食物后会变长</td>
        </tr>
        <tr>
            <td>食物</td>
            <td>蛇的目标，吃到后得分增加</td>
        </tr>
        <tr>
            <td>墙壁</td>
            <td>游戏边界，撞到后游戏结束</td>
        </tr>
        <tr>
            <td>自身</td>
            <td>蛇撞到自己的身体也会导致游戏结束</td>
        </tr>
    </table>
    
    <table>
        <tr>
            <th>功能</th>
            <th>实现方法</th>
        </tr>
        <tr>
            <td>移动控制</td>
            <td>键盘事件监听</td>
        </tr>
        <tr>
            <td>碰撞检测</td>
            <td>坐标比较</td>
        </tr>
        <tr>
            <td>食物生成</td>
            <td>随机位置生成</td>
        </tr>
        <tr>
            <td>得分系统</td>
            <td>计数器</td>
        </tr>
    </table>
    
    <div class="links">
        <h3>相关技术链接</h3>
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API" target="_blank">MDN Canvas文档</a>
        <a href="https://www.w3school.com.cn/html/html_links.asp" target="_blank">HTML链接教程</a>
        <a href="https://www.runoob.com/js/js-games.html" target="_blank">JavaScript游戏开发</a>
    </div>

    <script>
        // 获取Canvas和上下文
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const gameOverElement = document.getElementById('gameOver');
        
        // 游戏配置
        const gridSize = 20;
        const tileCount = canvas.width / gridSize;
        
        // 游戏状态
        let snake = [{ x: 10, y: 10 }];
        let food = { x: 15, y: 15 };
        let direction = { x: 0, y: 0 };
        let score = 0;
        let isPaused = false;
        let gameOver = false;
        let gameSpeed = 100; // 毫秒
        
        // 游戏主循环
        function gameLoop() {
            if (isPaused || gameOver) {
                setTimeout(gameLoop, gameSpeed);
                return;
            }
            
            update();
            draw();
            setTimeout(gameLoop, gameSpeed);
        }
        
        // 更新游戏状态
        function update() {
            // 移动蛇头
            const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
            
            // 检查游戏结束条件（撞墙或撞到自己）
            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount || 
                snake.some(segment => segment.x === head.x && segment.y === head.y)) {
                gameOver = true;
                gameOverElement.style.display = 'block';
                return;
            }
            
            // 添加新蛇头
            snake.unshift(head);
            
            // 检查是否吃到食物
            if (head.x === food.x && head.y === food.y) {
                // 增加分数
                score += 10;
                scoreElement.textContent = score;
                
                // 生成新食物
                food = {
                    x: Math.floor(Math.random() * tileCount),
                    y: Math.floor(Math.random() * tileCount)
                };
            } else {
                // 如果没吃到食物，移除蛇尾
                snake.pop();
            }
        }
        
        // 绘制游戏
        function draw() {
            // 清空画布
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制食物
            ctx.fillStyle = '#f00';
            ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
            
            // 绘制蛇
            ctx.fillStyle = '#0f0';
            snake.forEach(segment => {
                ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
            });
        }
        
        // 键盘控制
        window.addEventListener('keydown', e => {
            if (gameOver && e.key === ' ') {
                resetGame();
                return;
            }
            
            switch (e.key) {
                case 'ArrowUp':
                    if (direction.y === 0) direction = { x: 0, y: -1 };
                    break;
                case 'ArrowDown':
                    if (direction.y === 0) direction = { x: 0, y: 1 };
                    break;
                case 'ArrowLeft':
                    if (direction.x === 0) direction = { x: -1, y: 0 };
                    break;
                case 'ArrowRight':
                    if (direction.x === 0) direction = { x: 1, y: 0 };
                    break;
                case ' ':
                    isPaused = !isPaused;
                    break;
            }
        });
        
        // 重置游戏
        function resetGame() {
            snake = [{ x: 10, y: 10 }];
            direction = { x: 0, y: 0 };
            score = 0;
            scoreElement.textContent = score;
            food = {
                x: Math.floor(Math.random() * tileCount),
                y: Math.floor(Math.random() * tileCount)
            };
            gameOver = false;
            isPaused = false;
            gameOverElement.style.display = 'none';
        }
        
        // 开始游戏
        gameLoop();
    </script>
</body>
</html>

功能说明

这个贪吃蛇游戏实现了以下功能：

  1. 使用方向键控制蛇的移动
  2. 蛇吃到食物后会变长并增加分数
  3. 撞到墙壁或自身会导致游戏结束
  4. 空格键可以暂停/继续游戏
  5. 游戏结束后可以按空格键重新开始

表格说明

页面中包含三个表格：

  1. 游戏控制按键说明
  2. 游戏元素描述
  3. 功能实现方法参考

技术链接

页面底部提供了三个相关技术链接：

  1. MDN Canvas文档 - 了解Canvas API的详细信息
  2. HTML链接教程 - 学习HTML链接的创建方法
  3. JavaScript游戏开发 - 探索更多JavaScript游戏开发技术

您可以直接将这段代码复制到HTML文件中运行，享受经典的贪吃蛇游戏体验！

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布