|
1 | | -# Native-Snake-AI |
2 | | -一个基于 HTML5 + JavaScript 实现的全自动贪吃蛇AI游戏,无需人工操作,AI可自主寻路吃食物、规避碰撞 |
| 1 | +# 贪吃蛇AI (Snake-AI) |
| 2 | +一个基于 HTML5 + JavaScript 实现的全自动贪吃蛇AI游戏,无需人工操作,AI可自主寻路吃食物、规避碰撞,核心采用贪心算法+曼哈顿距离寻路策略。 |
| 3 | + |
| 4 | +## 🎮 功能特点 |
| 5 | +- ✨ 全自动AI寻路:无需手动操控,AI自主决策移动方向 |
| 6 | +- 🚨 碰撞检测:精准检测边界碰撞、蛇身自碰撞 |
| 7 | +- 📊 实时计分:动态显示游戏状态和得分 |
| 8 | +- 🎛️ 控制按钮:支持AI启动/停止、游戏重置 |
| 9 | +- 🎨 简洁UI:网格布局+高对比度配色,视觉清晰 |
| 10 | + |
| 11 | +## 🚀 快速开始 |
| 12 | +### 运行方式 |
| 13 | +1. 将项目代码保存为 `snake-ai.html` 文件 |
| 14 | +2. 直接用浏览器打开该文件(Chrome/Firefox/Edge 均可) |
| 15 | +3. 点击「启动AI」按钮,即可看到贪吃蛇自动寻路吃食物 |
| 16 | + |
| 17 | +### 核心操作 |
| 18 | +| 按钮 | 功能 | |
| 19 | +|------------|--------------------------| |
| 20 | +| 启动AI | 启动自动寻路逻辑 | |
| 21 | +| 停止AI | 暂停AI移动(保留当前状态)| |
| 22 | +| 重置 | 重置游戏到初始状态 | |
| 23 | + |
| 24 | +## 🧠 AI核心原理 |
| 25 | +### 决策流程 |
| 26 | +1. **有效方向筛选**:先排除撞墙、撞自身的无效方向,保证蛇的基础生存 |
| 27 | +2. **贪心寻路计算**:对所有有效方向,计算蛇头到食物的「曼哈顿距离」(`|x1-x2| + |y1-y2|`) |
| 28 | +3. **最优方向选择**:选择距离食物最近的方向,同时禁止180°掉头(如向右时不能直接向左) |
| 29 | +4. **动态更新方向**:每帧更新移动方向,确保持续向食物靠近 |
| 30 | + |
| 31 | +### 关键参数 |
| 32 | +| 参数名 | 作用 | 默认值 | 可调整建议 | |
| 33 | +|-----------------|--------------------------|--------|------------------| |
| 34 | +| GRID_SIZE | 游戏网格大小(行列数)| 20 | 10-30 均可 | |
| 35 | +| MOVE_INTERVAL | AI移动间隔(毫秒)| 150 | 数值越小速度越快 | |
| 36 | + |
| 37 | +## 📈 扩展方向 |
| 38 | +### 进阶优化 |
| 39 | +1. 升级寻路算法:将贪心算法替换为 A* 路径搜索,支持绕路吃食物 |
| 40 | +2. 难度调节:添加速度滑块,动态调整AI移动速度 |
| 41 | +3. 障碍物系统:随机生成障碍物,增加AI寻路难度 |
| 42 | +4. 历史记录:记录最高得分,本地存储(localStorage) |
| 43 | +5. 视觉优化:添加蛇头/蛇身区分、食物动画、碰撞特效 |
| 44 | + |
| 45 | +### 技术升级 |
| 46 | +- 改用 Canvas 渲染:提升大网格下的渲染性能 |
| 47 | +- 加入 Web Worker:将AI计算逻辑移至后台,避免UI阻塞 |
| 48 | +- 响应式布局:适配手机/平板等不同设备屏幕 |
| 49 | + |
| 50 | +## 📋 技术栈 |
| 51 | +- HTML5:页面结构 |
| 52 | +- CSS3:Flex/Grid 布局 + 样式美化 |
| 53 | +- JavaScript:游戏逻辑 + AI 算法 |
| 54 | +- 无第三方依赖,纯原生实现 |
| 55 | + |
| 56 | +## 🎯 注意事项 |
| 57 | +- 当蛇身占满整个网格时,游戏自动结束 |
| 58 | +- AI基于贪心算法,极端情况下可能陷入死胡同(可通过A*算法优化) |
| 59 | +- 兼容主流现代浏览器,不支持IE低版本 |
0 commit comments