分享贪吃蛇小游戏 - 毕业设计完整资源包

🎮 分享贪吃蛇小游戏 - 完整资源包 🐍

文章目录

[🎮 分享贪吃蛇小游戏 - 完整资源包 🐍](#🎮 分享贪吃蛇小游戏 - 完整资源包 🐍)
[一、游戏规则说明与整体功能设计文档 📋](#一、游戏规则说明与整体功能设计文档 📋)
- [1.1 项目概述](#1.1 项目概述)
- - [1.1.1 项目背景](#1.1.1 项目背景)
  - [1.1.2 开发环境](#1.1.2 开发环境)
- [1.2 游戏规则说明 🎲](#1.2 游戏规则说明 🎲)
- - [1.2.1 基本规则](#1.2.1 基本规则)
  - [1.2.2 计分规则](#1.2.2 计分规则)
- [1.3 整体功能设计 🏗️](#1.3 整体功能设计 🏗️)
- - [1.3.1 功能模块图](#1.3.1 功能模块图)
  - [1.3.2 核心数据结构设计](#1.3.2 核心数据结构设计)
  - [1.3.3 游戏流程图](#1.3.3 游戏流程图)
  - [1.3.4 坐标系统设计](#1.3.4 坐标系统设计)
- [1.4 接口设计 🔌](#1.4 接口设计 🔌)
- - [1.4.1 核心函数接口](#1.4.1 核心函数接口)
[二、核心游戏逻辑代码实现 💻](#二、核心游戏逻辑代码实现 💻)
- [2.1 完整代码](#2.1 完整代码)
[三、游戏界面展示与运行演示说明 🖼️](#三、游戏界面展示与运行演示说明 🖼️)
- [3.1 游戏界面整体布局 📐](#3.1 游戏界面整体布局 📐)
- - [3.1.1 界面结构图](#3.1.1 界面结构图)
  - [3.1.2 界面模块说明](#3.1.2 界面模块说明)
- [3.2 游戏元素视觉设计 🎨](#3.2 游戏元素视觉设计 🎨)
- - [3.2.1 配色方案](#3.2.1 配色方案)
  - [3.2.2 游戏元素示意图](#3.2.2 游戏元素示意图)
  - [3.3.2 状态二：游戏进行中](#3.3.2 状态二：游戏进行中)
  - [3.3.3 状态三：游戏结束](#3.3.3 状态三：游戏结束)
- [3.4 交互操作说明 🎮](#3.4 交互操作说明 🎮)
- - [3.4.1 键盘控制映射](#3.4.1 键盘控制映射)
  - [3.4.2 按钮交互说明](#3.4.2 按钮交互说明)
- [3.5 运行演示流程 🎬](#3.5 运行演示流程 🎬)
- - [3.5.1 完整游戏流程演示](#3.5.1 完整游戏流程演示)
- [3.6 运行环境与部署说明 🚀](#3.6 运行环境与部署说明 🚀)
- - [3.6.1 运行环境要求](#3.6.1 运行环境要求)
  - [3.6.2 部署方式](#3.6.2 部署方式)
  - [3.6.3 文件结构](#3.6.3 文件结构)
- [3.7 功能演示截图说明 📸](#3.7 功能演示截图说明 📸)
- - [3.7.1 各状态界面描述](#3.7.1 各状态界面描述)
  - [3.7.2 视觉效果特点](#3.7.2 视觉效果特点)

一、游戏规则说明与整体功能设计文档 📋

1.1 项目概述

1.1.1 项目背景

贪吃蛇是一款经典的休闲益智游戏，玩家通过控制蛇的移动方向，吃掉随机出现的食物来增加蛇身长度和得分。本项目采用 HTML5 Canvas + JavaScript 技术实现，具有跨平台、无需安装、即开即玩的特点。🎯

1.1.2 开发环境

项目说明

开发语言 JavaScript (ES6+)

渲染技术 HTML5 Canvas 2D

运行环境现代浏览器（Chrome/Firefox/Edge/Safari）

开发工具 VS Code / 任意文本编辑器

1.1.3 项目目标

✅ 实现经典贪吃蛇核心玩法

✅ 流畅的游戏体验

✅ 简洁美观的界面设计

✅ 完善的游戏状态管理

1.2 游戏规则说明 🎲

1.2.1 基本规则

规则项详细说明

🎮 操作方式使用键盘方向键（↑↓←→）控制蛇的移动方向

🍎 食物机制蛇头碰到食物后，食物消失，蛇身增长一节，得分增加

💀 死亡条件蛇头撞到墙壁或撞到自己的身体

🏆 胜利条件无固定胜利条件，以获取最高分为目标

1.2.2 计分规则

每吃一个食物 = +10 分

1.2.3 游戏状态

┌─────────────┐ 开始游戏 ┌─────────────┐

│ 等待中 │ ───────────────→ │ 游戏中 │

│ (WAITING) │ │ (PLAYING) │

└─────────────┘ └──────┬──────┘

↑ │

│ 重新开始 │ 碰撞检测

└─────────────────────────────────┤

↓

┌─────────────┐

│ 游戏结束 │

│ (GAME OVER) │

└─────────────┘

1.3 整体功能设计 🏗️

1.3.1 功能模块图

复制代码

                ┌─────────────────────────────────┐
                │         贪吃蛇游戏系统          │
                └─────────────────────────────────┘
                                │
    ┌───────────────┬───────────┼───────────┬───────────────┐
    ↓               ↓           ↓           ↓               ↓

┌───────────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐

│ 游戏初始化 │ │ 蛇控制 │ │ 食物系统 │ │ 碰撞检测 │ │ 界面渲染 │

│ 模块 │ │ 模块 │ │ 模块 │ │ 模块 │ │ 模块 │

└───────────────┘ └───────────┘ └───────────┘ └───────────┘ └───────────┘

│ │ │ │ │

↓ ↓ ↓ ↓ ↓

• 画布初始化 • 方向控制 • 随机生成 • 墙壁碰撞 • 绘制蛇身

• 参数配置 • 移动逻辑 • 位置验证 • 自身碰撞 • 绘制食物

• 状态初始化 • 身体增长 • 食物刷新 • 食物碰撞 • 绘制分数

• 绘制提示

1.3.2 核心数据结构设计

html 复制代码

🐍 蛇（Snake）数据结构
Snake = {
    body: [                    // 蛇身数组，每个元素代表一节身体
        {x: 5, y: 10},        // 蛇头（数组第一个元素）
        {x: 4, y: 10},        // 身体
        {x: 3, y: 10}         // 蛇尾（数组最后一个元素）
    ],
    direction: 'RIGHT',        // 当前移动方向
    nextDirection: 'RIGHT'     // 下一帧的移动方向（防止快速反向）
}

🍎 食物（Food）数据结构
Food = {
    x: 15,    // 食物的 X 坐标（网格坐标）
    y: 10     // 食物的 Y 坐标（网格坐标）
}

🎮 游戏状态（Game State）数据结构
GameState = {
    score: 0,              // 当前得分
    isGameOver: false,     // 游戏是否结束
    isPlaying: false,      // 游戏是否正在进行
    speed: 150             // 游戏速度（毫秒/帧）
}

1.3.3 游戏流程图

复制代码

                ┌─────────────┐
                │   开始游戏   │
                └──────┬──────┘
                       ↓
                ┌─────────────┐
                │  初始化游戏  │
                │  • 创建蛇    │
                │  • 生成食物  │
                │  • 重置分数  │
                └──────┬──────┘
                       ↓
          ┌───────────────────────┐
          │      游戏主循环        │←─────────────┐
          └───────────┬───────────┘              │
                      ↓                          │
               ┌─────────────┐                   │
               │  获取用户输入 │                   │
               │  更新方向    │                   │
               └──────┬──────┘                   │
                      ↓                          │
               ┌─────────────┐                   │
               │   蛇移动    │                   │
               │  计算新头部  │                   │
               └──────┬──────┘                   │
                      ↓                          │
               ┌─────────────┐                   │
               │   碰撞检测   │                   │
               └──────┬──────┘                   │
                      ↓                          │
            ┌────────────────────┐               │
            │  是否撞墙或撞自己？ │               │
            └─────────┬──────────┘               │
                是 ↓      ↓ 否                   │
        ┌─────────────┐   │                      │
        │  游戏结束   │   │                      │
        │  显示分数   │   ↓                      │
        └─────────────┘ ┌─────────────┐          │
                        │ 是否吃到食物？│          │
                        └──────┬──────┘          │
                          是 ↓    ↓ 否           │
                    ┌──────────┐  │              │
                    │ 增加分数  │  │              │
                    │ 蛇身增长  │  │              │
                    │ 生成新食物│  │              │
                    └─────┬────┘  │              │
                          ↓       ↓              │
                     ┌─────────────┐             │
                     │   渲染画面   │             │
                     └──────┬──────┘             │
                            │                    │
                            └────────────────────┘

1.3.4 坐标系统设计

复制代码

0   1   2   3   4   5   6   ...  19  (X轴 - 列)

┌───┬───┬───┬───┬───┬───┬───┬───┬───┐

0 │ │ │ │ │ │ │ │ │ │

├───┼───┼───┼───┼───┼───┼───┼───┼───┤

1 │ │ │ │ │ │ │ │ │ │

├───┼───┼───┼───┼───┼───┼───┼───┼───┤

2 │ │ │ │ 🍎│ │ │ │ │ │ ← 食物位置 (3, 2)

├───┼───┼───┼───┼───┼───┼───┼───┼───┤

3 │ │ │ │ │ │ │ │ │ │

├───┼───┼───┼───┼───┼───┼───┼───┼───┤

4 │ │ ██│ ██│ ██│ ██│ │ │ │ │ ← 蛇身位置

├───┼───┼───┼───┼───┼───┼───┼───┼───┤ 蛇头(4,4) 蛇尾(1,4)

│...│ │ │ │ │ │ │ │ │

├───┼───┼───┼───┼───┼───┼───┼───┼───┤

19│ │ │ │ │ │ │ │ │ │

└───┴───┴───┴───┴───┴───┴───┴───┴───┘

(Y轴 - 行)

网格参数：

• 网格大小：20 × 20

• 单元格尺寸：20px × 20px

• 画布尺寸：400px × 400px

1.4 接口设计 🔌

1.4.1 核心函数接口

函数名	返回值	功能描述
initGame()	无	void 初始化游戏状态
gameLoop()	无	void 游戏主循环
moveSnake()	无	void 移动蛇
changeDirection(newDir)	string	void 改变蛇的方向
checkCollision()	无	boolean 检测碰撞
checkFoodCollision()	无	boolean 检测是否吃到食物
generateFood()	无	object 生成新食物
draw()	无	void 渲染游戏画面
drawSnake()	无	void 绘制蛇
drawFood()	无	void 绘制食物
drawScore()	无	void 绘制分数
gameOver()	无	void 处理游戏结束
restartGame()	无	void 重新开始游戏

二、核心游戏逻辑代码实现 💻

2.1 完整代码

以下是完整的、可直接运行的贪吃蛇游戏代码：

📄 index.html

html 复制代码

<script>
    // ==================== 游戏配置 ====================
    const CONFIG = {
        CANVAS_SIZE: 400,
        GRID_SIZE: 20,
        CELL_SIZE: 20,
        GAME_SPEED: 150,
        INITIAL_SNAKE_LENGTH: 3,
        SCORE_PER_FOOD: 10
    };

    // ==================== 方向定义 ====================
    const DIRECTION = {
        UP: { x: 0, y: -1 },
        DOWN: { x: 0, y: 1 },
        LEFT: { x: -1, y: 0 },
        RIGHT: { x: 1, y: 0 }
    };

    // ==================== 游戏变量 ====================
    let canvas, ctx;
    let snake = [];
    let food = { x: 0, y: 0 };
    let direction = DIRECTION.RIGHT;
    let nextDirection = DIRECTION.RIGHT;
    let score = 0;
    let highScore = 0;
    let gameLoopId = null;
    let isPlaying = false;
    let isGameOver = false;

    // ==================== 初始化 ====================
    window.onload = function() {
        canvas = document.getElementById('gameCanvas');
        ctx = canvas.getContext('2d');
        
        // 读取最高分
        highScore = parseInt(localStorage.getItem('snakeHighScore')) || 0;
        document.getElementById('highScore').textContent = highScore;
        
        // 绑定事件
        document.getElementById('startBtn').addEventListener('click', startGame);
        document.getElementById('restartBtn').addEventListener('click', restartGame);
        document.addEventListener('keydown', handleKeyPress);
        
        // 绘制欢迎界面
        drawWelcomeScreen();
    };

    // ==================== 欢迎界面 ====================
    function drawWelcomeScreen() {
        ctx.fillStyle = '#0a0a0a';
        ctx.fillRect(0, 0, CONFIG.CANVAS_SIZE, CONFIG.CANVAS_SIZE);
        
        ctx.fillStyle = '#00ff88';
        ctx.font = 'bold 24px Microsoft YaHei';
        ctx.textAlign = 'center';
        ctx.fillText('🐍 贪吃蛇游戏', CONFIG.CANVAS_SIZE / 2, CONFIG.CANVAS_SIZE / 2 - 20);
        
        ctx.fillStyle = '#888';
        ctx.font = '16px Microsoft YaHei';
        ctx.fillText('点击"开始游戏"按钮开始', CONFIG.CANVAS_SIZE / 2, CONFIG.CANVAS_SIZE / 2 + 20);
    }

    // ==================== 游戏控制 ====================
    function startGame() {
        initGame();
        document.getElementById('startBtn').style.display = 'none';
        document.getElementById('restartBtn').style.display = 'inline-block';
        isPlaying = true;
        isGameOver = false;
        gameLoopId = setInterval(gameLoop, CONFIG.GAME_SPEED);
    }

    function restartGame() {
        if (gameLoopId) {
            clearInterval(gameLoopId);
            gameLoopId = null;
        }
        startGame();
    }

    function initGame() {
        // 初始化蛇
        snake = [];
        const startX = Math.floor(CONFIG.GRID_SIZE / 2);
        const startY = Math.floor(CONFIG.GRID_SIZE / 2);
        
        for (let i = 0; i < CONFIG.INITIAL_SNAKE_LENGTH; i++) {
            snake.push({ x: startX - i, y: startY });
        }
        
        // 初始化方向
        direction = DIRECTION.RIGHT;
        nextDirection = DIRECTION.RIGHT;
        
        // 初始化分数
        score = 0;
        document.getElementById('currentScore').textContent = score;
        
        // 生成食物
        generateFood();
    }

    // ==================== 游戏主循环 ====================
    function gameLoop() {
        if (isGameOver) return;
        
        // 更新方向
        direction = nextDirection;
        
        // 计算新蛇头位置
        const head = snake[0];
        const newHead = {
            x: head.x + direction.x,
            y: head.y + direction.y
        };
        
        // 检测墙壁碰撞
        if (newHead.x < 0 || newHead.x >= CONFIG.GRID_SIZE ||
            newHead.y < 0 || newHead.y >= CONFIG.GRID_SIZE) {
            gameOver();
            return;
        }
        
        // 检测自身碰撞
        for (let i = 0; i < snake.length; i++) {
            if (newHead.x === snake[i].x && newHead.y === snake[i].y) {
                gameOver();
                return;
            }
        }
        
        // 添加新蛇头
        snake.unshift(newHead);
        
        // 检测是否吃到食物
        if (newHead.x === food.x && newHead.y === food.y) {
            // 吃到食物，增加分数
            score += CONFIG.SCORE_PER_FOOD;
            document.getElementById('currentScore').textContent = score;
            
            // 更新最高分
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('snakeHighScore', highScore);
                document.getElementById('highScore').textContent = highScore;
            }
            
            // 生成新食物
            generateFood();
        } else {
            // 没吃到食物，移除蛇尾
            snake.pop();
        }
        
        // 渲染
        draw();
    }

    // ==================== 食物生成 ====================
    function generateFood() {
        let newFood;
        let isValid = false;
        
        while (!isValid) {
            newFood = {
                x: Math.floor(Math.random() * CONFIG.GRID_SIZE),
                y: Math.floor(Math.random() * CONFIG.GRID_SIZE)
            };
            
            isValid = true;
            for (let i = 0; i < snake.length; i++) {
                if (snake[i].x === newFood.x && snake[i].y === newFood.y) {
                    isValid = false;
                    break;
                }
            }
        }
        
        food = newFood;
    }

    // ==================== 键盘控制 ====================
    function handleKeyPress(event) {
        if (!isPlaying || isGameOver) return;
        
        const key = event.key;
        
        switch (key) {
            case 'ArrowUp':
            case 'w':
            case 'W':
                if (direction !== DIRECTION.DOWN) {
                    nextDirection = DIRECTION.UP;
                }
                break;
            case 'ArrowDown':
            case 's':
            case 'S':
                if (direction !== DIRECTION.UP) {
                    nextDirection = DIRECTION.DOWN;
                }
                break;
            case 'ArrowLeft':
            case 'a':
            case 'A':
                if (direction !== DIRECTION.RIGHT) {
                    nextDirection = DIRECTION.LEFT;
                }
                break;
            case 'ArrowRight':
            case 'd':
            case 'D':
                if (direction !== DIRECTION.LEFT) {
                    nextDirection = DIRECTION.RIGHT;
                }
                break;
        }
        
        // 阻止方向键滚动页面
        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
            event.preventDefault();
        }
    }

    // ==================== 渲染函数 ====================
    function draw() {
        // 清空画布
        ctx.fillStyle = '#0a0a0a';
        ctx.fillRect(0, 0, CONFIG.CANVAS_SIZE, CONFIG.CANVAS_SIZE);
        
        // 绘制网格
        ctx.strokeStyle = '#1a1a1a';
        ctx.lineWidth = 0.5;
        for (let i = 0; i <= CONFIG.GRID_SIZE; i++) {
            ctx.beginPath();
            ctx.moveTo(i * CONFIG.CELL_SIZE, 0);
            ctx.lineTo(i * CONFIG.CELL_SIZE, CONFIG.CANVAS_SIZE);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(0, i * CONFIG.CELL_SIZE);
            ctx.lineTo(CONFIG.CANVAS_SIZE, i * CONFIG.CELL_SIZE);
            ctx.stroke();
        }
        
        // 绘制食物
        ctx.fillStyle = '#ff6b6b';
        ctx.beginPath();
        ctx.arc(
            food.x * CONFIG.CELL_SIZE + CONFIG.CELL_SIZE / 2,
            food.y * CONFIG.CELL_SIZE + CONFIG.CELL_SIZE / 2,
            CONFIG.CELL_SIZE / 2 - 2,
            0,
            Math.PI * 2
        );
        ctx.fill();
        
        // 绘制食物光晕
        ctx.fillStyle = 'rgba(255, 107, 107, 0.3)';
        ctx.beginPath();
        ctx.arc(
            food.x * CONFIG.CELL_SIZE + CONFIG.CELL_SIZE / 2,
            food.y * CONFIG.CELL_SIZE + CONFIG.CELL_SIZE / 2,
            CONFIG.CELL_SIZE / 2 + 3,
            0,
            Math.PI * 2
        );
        ctx.fill();
        
        // 绘制蛇
        for (let i = 0; i < snake.length; i++) {
            const segment = snake[i];
            
            if (i === 0) {
                // 蛇头 - 深绿色
                ctx.fillStyle = '#00ff88';
            } else {
                // 蛇身 - 渐变绿色
                const alpha = 1 - (i / snake.length) * 0.5;
                ctx.fillStyle = `rgba(0, 200, 100, ${alpha})`;
            }
            
            // 绘制圆角矩形
            const x = segment.x * CONFIG.CELL_SIZE + 1;
            const y = segment.y * CONFIG.CELL_SIZE + 1;
            const size = CONFIG.CELL_SIZE - 2;
            const radius = 4;
            
            ctx.beginPath();
            ctx.roundRect(x, y, size, size, radius);
            ctx.fill();
        }
        
        // 绘制蛇眼睛
        if (snake.length > 0) {
            const head = snake[0];
            ctx.fillStyle = '#000';
            
            let eye1X, eye1Y, eye2X, eye2Y;
            const eyeOffset = 5;
            const eyeSize = 3;
            
            const centerX = head.x * CONFIG.CELL_SIZE + CONFIG.CELL_SIZE / 2;
            const centerY = head.y * CONFIG.CELL_SIZE + CONFIG.CELL_SIZE / 2;
            
            if (direction === DIRECTION.RIGHT) {
                eye1X = centerX + 3; eye1Y = centerY - eyeOffset;
                eye2X = centerX + 3; eye2Y = centerY + eyeOffset;
            } else if (direction === DIRECTION.LEFT) {
                eye1X = centerX - 3; eye1Y = centerY - eyeOffset;
                eye2X = centerX - 3; eye2Y = centerY + eyeOffset;
            } else if (direction === DIRECTION.UP) {
                eye1X = centerX - eyeOffset; eye1Y = centerY - 3;
                eye2X = centerX + eyeOffset; eye2Y = centerY - 3;
            } else {
                eye1X = centerX - eyeOffset; eye1Y = centerY + 3;
                eye2X = centerX + eyeOffset; eye2Y = centerY + 3;
            }
            
            ctx.beginPath();
            ctx.arc(eye1X, eye1Y, eyeSize, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(eye2X, eye2Y, eyeSize, 0, Math.PI * 2);
            ctx.fill();
        }
    }

    // ==================== 游戏结束 ====================
    function gameOver() {
        isGameOver = true;
        isPlaying = false;
        
        if (gameLoopId) {
            clearInterval(gameLoopId);
            gameLoopId = null;
        }
        
        // 绘制游戏结束界面
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(0, 0, CONFIG.CANVAS_SIZE, CONFIG.CANVAS_SIZE);
        
        ctx.fillStyle = '#ff6b6b';
        ctx.font = 'bold 36px Microsoft YaHei';
        ctx.textAlign = 'center';
        ctx.fillText('游戏结束!', CONFIG.CANVAS_SIZE / 2, CONFIG.CANVAS_SIZE / 2 - 30);
        
        ctx.fillStyle = '#00ff88';
        ctx.font = '24px Microsoft YaHei';
        ctx.fillText('得分: ' + score, CONFIG.CANVAS_SIZE / 2, CONFIG.CANVAS_SIZE / 2 + 20);
        
        ctx.fillStyle = '#888';
        ctx.font = '16px Microsoft YaHei';
        ctx.fillText('点击"重新开始"再来一局', CONFIG.CANVAS_SIZE / 2, CONFIG.CANVAS_SIZE / 2 + 60);
    }
</script>

三、游戏界面展示与运行演示说明 🖼️

太棒了！现在让我为你详细编写界面展示与运行演示说明部分！✨

3.1 游戏界面整体布局 📐

3.1.1 界面结构图

bash 复制代码

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│                    🐍 贪吃蛇                                │
│              Snake Game - Classic Edition                   │
│                                                             │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│      ┌─────────────────┐    ┌─────────────────┐            │
│      │    当前分数      │    │    最高分数      │            │
│      │       0         │    │       0         │            │
│      └─────────────────┘    └─────────────────┘            │
│                                                             │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│      ┌─────────────────────────────────────────┐           │
│      │                                         │           │
│      │                                         │           │
│      │                                         │           │
│      │              游戏画布区域                │           │
│      │             (400 × 400px)               │           │
│      │                                         │           │
│      │                                         │           │
│      │                                         │           │
│      └─────────────────────────────────────────┘           │
│                                                             │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│              [ 开始游戏 ]    [ 重新开始 ]                    │
│                                                             │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│              使用方向键控制蛇的移动方向                       │
│              [↑] [↓] [←] [→] 或 [W] [S] [A] [D]            │
│                                                             │
└─────────────────────────────────────────────────────────────┘

3.1.2 界面模块说明

模块名称位置功能描述

🎯 标题区顶部显示游戏名称和副标题

📊 分数区标题下方实时显示当前分数和历史最高分

🎮 游戏区中央核心 400×400像素的Canvas画布，游戏主要交互区域

🎛️ 控制区画布下方开始/重新开始按钮

📖 说明区底部操作按键提示

3.2 游戏元素视觉设计 🎨

3.2.1 配色方案

bash 复制代码

┌─────────────────────────────────────────────────────────────┐
│                       游戏配色方案                           │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   背景渐变色:                                                │
│   ┌──────────────────────────────────────────┐             │
│   │  #1a1a2e  →  #16213e  →  #0f3460        │             │
│   │  深紫蓝      深蓝        深海蓝           │             │
│   └──────────────────────────────────────────┘             │
│                                                             │
│   游戏画布背景:  #0a0a0a (纯黑)                              │
│   网格线颜色:    #1a1a1a (深灰)                              │
│                                                             │
│   蛇头颜色:      #00ff88 (荧光绿) ████                       │
│   蛇身颜色:      #00c864 (渐变绿) ████ → 透明度递减           │
│   蛇眼睛:        #000000 (黑色)   ●●                        │
│                                                             │
│   食物颜色:      #ff6b6b (珊瑚红) ●                          │
│   食物光晕:      rgba(255,107,107,0.3) (半透明红)            │
│                                                             │
│   主题强调色:    #00ff88 (荧光绿) - 用于边框、按钮、文字      │
│   警告/结束色:   #ff6b6b (珊瑚红) - 用于游戏结束、重启按钮    │
│                                                             │
└─────────────────────────────────────────────────────────────┘

3.2.2 游戏元素示意图

bash 复制代码

┌─────────────────────────────────────────────────────────────┐
│                      游戏元素展示                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   🐍 蛇的外观:                                               │
│                                                             │
│      ┌────┬────┬────┬────┬────┐                            │
│      │●● │    │    │    │    │  ← 蛇头 (带眼睛)            │
│      │亮绿│渐变│渐变│渐变│淡绿│  ← 颜色从头到尾渐变          │
│      └────┴────┴────┴────┴────┘                            │
│       蛇头   ←───── 蛇身 ─────→  蛇尾                       │
│                                                             │
│   🍎 食物外观:                                               │
│                                                             │
│         ╭─────╮                                             │
│        ╱ ░░░░░ ╲   ← 外层光晕 (半透明红)                     │
│       │  ●●●●●  │  ← 内层实心 (珊瑚红)                       │
│        ╲ ░░░░░ ╱                                            │
│         ╰─────╯                                             │
│                                                             │
│    网格系统:                                               │
│                                                             │
│      ┌───┬───┬───┬───┬───┐                                 │
│      │   │   │   │   │   │  每个格子: 20×20 像素            │
│      ├───┼───┼───┼───┼───┤  网格总数: 20│   │   │   │  网格线:   深灰色 (#1a1a1a)      │
│      ├───┼───┼───┼───┼───┤                                 │
│      │   │   │   │   │   │                                 │
│      └───┴───┴───┴───┴───┘                                 │
│                                                             │
└─────────────────────────────────────────────────────────────┘

3.3 游戏状态界面展示 🎬

3.3.1 状态一：欢迎界面（游戏启动时）

┌─────────────────────────────────────────┐

│█████████████████████████████████████████│

│████████ █████████│

│████████ 🐍 贪吃蛇游戏 █████████│

│████████ █████████│

│████████ 点击"开始游戏"按钮开始 █████████│

│████████ █████████│

│█████████████████████████████████████████│

└─────────────────────────────────────────┘

$开始游戏$ (按钮高亮)

界面特点：

• 画布显示纯黑背景

• 中央显示游戏标题（荧光绿色）

• 下方显示操作提示（灰色）

• "开始游戏"按钮可点击

• "重新开始"按钮隐藏

3.3.2 状态二：游戏进行中

bash 复制代码

┌─────────────────────────────────────────┐
│ · · · · · · · · · · · · · · · · · · · · │
│ · · · · · · · · · · · · · · · · · · · · │
│ · · · · · · · · · · · · · · · · · · · · │
│ · · · · · · · ● · · · · · · · · · · · · │  ← 食物 (红色圆形)
│ · · · · · · · · · · · · · · · · · · · · │
│ · · · · · · · · · · · · · · · · · · · · │
│ · · · · ■ ■ ■ ■ ■ · · · · · · · · · · · │  ← 蛇 (绿色方块)
│ · · · · · · · · · · · · · · · · · · · · │     ●● = 蛇头带眼睛
│ · · · · · · · · · · · · · · · · · · · · │
│ · · · · · · · · · · · · · · · · · · · · │
│ · · · · · · · · · · · · · · · · · · · · │
│ · · · · · · · · · · · · · · · · · · · · │
└─────────────────────────────────────────┘

复制代码

    当前分数: 50    最高分数: 120

          [ 重新开始 ]

界面特点：

• 网格背景清晰可见

• 蛇身实时移动，颜色渐变

• 蛇头带有眼睛，朝向移动方向

• 食物带有光晕效果

• 分数实时更新

• "开始游戏"按钮隐藏

• "重新开始"按钮显示

3.3.3 状态三：游戏结束

bash 复制代码

┌─────────────────────────────────────────┐
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░░░░░                      ░░░░░░░░░░│
│░░░░░░░░░    游戏结束!         ░░░░░░░░░░│  ← 红色大字
│░░░░░░░░░                      ░░░░░░░░░░│
│░░░░░░░░░    得分: 80          ░░░░░░░░░░│  ← 绿色显示
│░░░░░░░░░                      ░░░░░░░░░░│
│░░░░░░░░░  点击"重新开始"再来一局░░░░░░░░░│  ← 灰色提示
│░░░░░░░░░                      ░░░░░░░░░░│
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
└─────────────────────────────────────────┘

░░░ = 半透明黑色遮罩层 (rgba(0,0,0,0.7))

复制代码

          [ 重新开始 ]  (按钮高亮)

界面特点：

• 游戏画面被半透明黑色遮罩覆盖

• 中央显示"游戏结束!"（红色）

• 显示本局得分（绿色）

• 提示点击重新开始

• 背景保留最后的游戏画面（蛇和食物位置）

3.4 交互操作说明 🎮

3.4.1 键盘控制映射

bash 复制代码

┌─────────────────────────────────────────────────────────────┐
│                       键盘控制说明                           │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   方向键控制:                    WASD 控制:                  │
│                                                             │
│           ┌───┐                      ┌───┐                  │
│           │ ↑ │                      │ W │                  │
│           └───┘                      └───┘                  │
│       ┌───┬───┬───┐              ┌───┬───┬───┐              │
│       │ ← │ ↓ │ → │              │ A │ S │ D │              │
│       └───┴───┴───┘              └───┴───┴───┘              │
│                                                             │
│   按键对应:                                                  │
│   ┌──────────┬──────────┬──────────────────────────────┐    │
│   │   按键   │   方向   │           说明               │    │
│   ├──────────┼──────────┼──────────────────────────────┤    │
│   │  ↑ / W   │   上     │  蛇向上移动（当前非向下时）   │    │
│   │  ↓ / S   │   下     │  蛇向下移动（当前非向上时）   │    │
│   │  ← / A   │   左     │  蛇向左移动（当前非向右时）   │    │
│   │  → / D   │   右     │  蛇向右移动（当前非向左时）   │    │
│   └──────────┴──────────┴──────────────────────────────┘    │
│                                                             │
│   ⚠️ 注意: 蛇不能180度掉头（如向右时不能直接向左）           │
│                                                             │
└─────────────────────────────────────────────────────────────┘

3.4.2 按钮交互说明

bash 复制代码

┌─────────────────────────────────────────────────────────────┐
│                       按钮交互说明                           │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   ┌─────────────────────────────────────────────────────┐   │
│   │  按钮名称  │  显示时机  │  点击效果  │  视觉反馈    │   │
│   ├───────────┼───────────┼───────────┼──────────────┤   │
│   │           │ • 游戏启动 │ • 初始化   │ • 悬停放大   │   │
│   │ 开始游戏  │ • 游戏未   │ • 开始循环 │ • 绿色光晕   │   │
│   │           │   开始时   │ • 隐藏自身 │ • 1.05倍缩放 │   │
│   ├───────────┼───────────┼───────────┼──────────────┤   │
│   │           │ • 游戏中   │ • 停止循环 │ • 悬停放大   │   │
│   │ 重新开始  │ • 游戏结   │ • 重新初始 │ • 红色光晕   │   │
│   │           │   束后     │ • 重启循环 │ • 1.05倍缩放 │   │
│   └───────────┴───────────┴───────────┴──────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

3.5 运行演示流程 🎬

3.5.1 完整游戏流程演示

bash 复制代码

┌─────────────────────────────────────────────────────────────┐
│                    游戏运行流程演示                          │
└─────────────────────────────────────────────────────────────┘

步骤 1️⃣ : 打开游戏

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

操作: 双击 snake_game.html 文件，用浏览器打开

结果: 显示欢迎界面，"开始游戏"按钮可用

bash 复制代码

  ┌──────────────────┐
  │  🐍 贪吃蛇游戏   │
  │                  │
  │ [  开始游戏  ]   │
  └──────────────────┘

步骤 2️⃣ : 开始游戏

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

操作: 点击"开始游戏"按钮

结果: • 蛇出现在画布中央，初始长度3节

• 食物随机出现在画布某位置

• 蛇自动向右移动

• 分数显示为 0

┌──────────────────┐

│ ● │ ← 食物

│ │

│ ■■■→ │ ← 蛇（向右移动）

│ │

│ 分数: 0 │

└──────────────────┘

步骤 3️⃣ : 控制蛇移动

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

操作: 按下 ↑ 键（或 W 键）

结果: 蛇改变方向，向上移动

┌──────────────────┐

│ ● │

│ ↑ │

│ ■■■┘ │ ← 蛇转向

│ │

│ 分数: 0 │

└──────────────────┘

步骤 4️⃣ : 吃到食物

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

操作: 控制蛇头碰到食物

结果: • 食物消失

• 蛇身增长一节

• 分数 +10

• 新食物在随机位置生成

┌──────────────────┐

│ ● │ ← 新食物位置

│ ■ │

│ ■■■┘ │ ← 蛇变长了

│ │

│ 分数: 10 ✨ │

└──────────────────┘

步骤 5️⃣ : 持续游戏

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

操作: 继续控制蛇吃食物

结果: • 蛇越来越长

• 分数持续增加

• 游戏难度逐渐提升（蛇身变长，活动空间减少）

┌──────────────────┐

│ ● ■ │

│ ■■■┘ │

│ ■ │

│ ■■■┘ │ ← 蛇变得很长

│ 分数: 80 │

└──────────────────┘

步骤 6️⃣ : 游戏结束

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

触发: 蛇头撞墙或蛇头撞到自己身体

结果: • 游戏停止

• 显示游戏结束界面

• 显示最终得分

• 如果破纪录，更新最高分

┌──────────────────┐

│░░░░░░░░░░░░░░░░░░│

│░░ 游戏结束! ░░│

│░░ ░░│

│░░ 得分: 80 ░░│

│░░ ░░│

│░░ $重新开始$ ░░│

└──────────────────┘

步骤 7️⃣ : 重新开始

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

操作: 点击"重新开始"按钮

结果: • 游戏重置

• 蛇回到初始状态

• 分数归零

• 重新开始游戏

→ 返回步骤 2️⃣

3.6 运行环境与部署说明 🚀

3.6.1 运行环境要求

bash 复制代码

┌─────────────────────────────────────────────────────────────┐
│                      运行环境要求                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   ✅ 支持的浏览器:                                           │
│   ┌─────────────┬─────────────┬─────────────────────────┐   │
│   │   浏览器    │  最低版本   │         备注            │   │
│   ├─────────────┼─────────────┼─────────────────────────┤   │
│   │   Chrome    │    60+      │  推荐使用，性能最佳     │   │
│   │   Firefox   │    55+      │  完全支持               │   │
│   │   Edge      │    79+      │  完全支持               │   │
│   │   Safari    │    11+      │  完全支持               │   │
│   │   Opera     │    47+      │  完全支持               │   │
│   └─────────────┴─────────────┴─────────────────────────┘   │
│                                                             │
│   ❌ 不支持:                                                 │
│   • Internet Explorer (所有版本)                            │
│   • 过旧的移动端浏览器                                       │
│                                                             │
│   💻 硬件要求:                                               │
│   • 无特殊要求，任何能运行现代浏览器的设备均可               │
│                                                             │
│   📱 移动端支持:                                             │
│   • 当前版本仅支持键盘操作                                   │
│   • 移动端需外接键盘或后续添加触屏控制                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

3.6.2 部署方式

bash 复制代码

┌─────────────────────────────────────────────────────────────┐
│                        部署方式                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   方式一: 本地运行 (最简单) ⭐                               │
│   ─────────────────────────────────────                     │
│   1. 将代码保存为 snake_game.html                           │
│   2. 双击文件，用浏览器打开                                  │
│   3. 即可开始游戏                                           │
│                                                             │
│   方式二: 本地服务器运行                                     │
│   ─────────────────────────────────────                     │
│   # 使用 Python 启动简易服务器                               │
│   $ cd 游戏文件所在目录                                      │
│   $ python -m http.server 8080                              │
│   # 浏览器访问 http://localhost:8080/snake_game.html        │
│                                                             │
│   方式三: 部署到 Web 服务器                                  │
│   ─────────────────────────────────────                     │
│   • 上传 snake_game.html 到任意 Web 服务器                  │
│   • 支持: Apache, Nginx, IIS, GitHub Pages 等               │
│   • 无需后端支持，纯静态文件                                 │
│                                                             │
│   方式四: GitHub Pages 免费托管                              │
│   ─────────────────────────────────────                     │
│   1. 创建 GitHub 仓库                                       │
│   2. 上传 index.html (将文件重命名)                         │
│   3. 开启 GitHub Pages                                      │
│   4. 获得免费在线访问地址                                    │
│                                                             │
└─────────────────────────────────────────────────────────────┘

3.6.3 文件结构

📁 snake-game/

│

├── 📄 snake_game.html # 游戏主文件（HTML + CSS + JS 合一）

│

└── 📄 README.md # 项目说明文档（可选）

说明：本项目采用单文件结构，所有代码（HTML/CSS/JavaScript）

集成在一个文件中，便于分发和部署。

3.7 功能演示截图说明 📸

3.7.1 各状态界面描述

序号界面状态界面描述

1 欢迎界面深色背景，中央显示游戏标题"🐍 贪吃蛇游戏"，下方提示"点击开始游戏按钮开始"，底部显示绿色"开始游戏"按钮

2 游戏进行中黑色网格背景，绿色蛇身在画布中移动，蛇头带有黑色眼睛，红色圆形食物带有光晕效果，顶部实时显示当前分数

3 吃到食物蛇头与食物重叠瞬间，食物消失，蛇身长度+1，分数+10，新食物在随机位置生成

4 游戏结束半透明黑色遮罩覆盖画面，中央红色大字"游戏结束!"，下方绿色显示本局得分，提示点击重新开始

3.7.2 视觉效果特点

bash 复制代码

┌─────────────────────────────────────────────────────────────┐
│                      视觉效果特点                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   🎨 整体风格: 赛博朋克 / 霓虹风格                           │
│                                                             │
│   ✨ 特效列表:                                               │
│   ├── 🌈 背景渐变: 深紫蓝到深海蓝的平滑过渡                  │
│   ├── 💫 毛玻璃效果: 游戏容器带有模糊背景                    │
│   ├── 🔮 发光边框: 画布边框带有荧光绿光

ChatGPT 也可能会犯错。请核查重要信息。查看 Cookie 首选项。

分享 贪吃蛇小游戏 - 毕业设计完整资源包

🎮 分享 贪吃蛇小游戏 - 完整资源包 🐍

文章目录

一、游戏规则说明与整体功能设计文档 📋

1.1 项目概述

1.1.1 项目背景

1.1.2 开发环境

1.2 游戏规则说明 🎲

1.2.1 基本规则

1.2.2 计分规则

1.3 整体功能设计 🏗️

1.3.1 功能模块图

1.3.2 核心数据结构设计

1.3.3 游戏流程图

1.3.4 坐标系统设计

1.4 接口设计 🔌

1.4.1 核心函数接口

二、核心游戏逻辑代码实现 💻

2.1 完整代码

三、游戏界面展示与运行演示说明 🖼️

3.1 游戏界面整体布局 📐

3.1.1 界面结构图

3.1.2 界面模块说明

3.2 游戏元素视觉设计 🎨

3.2.1 配色方案

3.2.2 游戏元素示意图

3.3.2 状态二：游戏进行中

3.3.3 状态三：游戏结束

3.4 交互操作说明 🎮

3.4.1 键盘控制映射

3.4.2 按钮交互说明

3.5 运行演示流程 🎬

3.5.1 完整游戏流程演示

3.6 运行环境与部署说明 🚀

3.6.1 运行环境要求

3.6.2 部署方式

3.6.3 文件结构

3.7 功能演示截图说明 📸

3.7.1 各状态界面描述

3.7.2 视觉效果特点

分享贪吃蛇小游戏 - 毕业设计完整资源包

🎮 分享贪吃蛇小游戏 - 完整资源包 🐍