NEXUS ARCADE

一个赛博朋克风格的网页街机游戏平台，包含贪吃蛇和坦克大战两款经典游戏。纯前端实现，零依赖，打开浏览器即可畅玩。

预览

平台采用霓虹灯 + 赛博朋克视觉风格，以深色背景搭配青色（#00e5ff）和品红色（#ff2d7b）为主色调，营造沉浸式未来街机氛围。

项目结构

├── index.html              # 游戏平台主页（门户入口）
├── snake.html              # 贪吃蛇游戏（独立单文件）
├── tank.html               # 坦克大战游戏（独立单文件）
├── assets/
│   ├── css/
│   │   └── style.css       # 平台全局样式（赛博朋克主题）
│   ├── js/
│   │   └── app.js          # 平台交互逻辑（认证、弹窗、滚动动画）
│   └── images/             # 图片资源目录
├── docs/                   # 文档目录
├── AGENTS.md               # 项目说明
└── opencode.json           # OpenCode 配置

游戏介绍

贪吃蛇（snake.html）

经典贪吃蛇游戏，霓虹风格视觉呈现。

玩法说明：

• 控制蛇吃掉食物（粉色发光圆点），每吃一个得 10 分
• 每吃 5 个食物会在地图上生成一个障碍物（红色方块）
• 撞墙、撞到自己或障碍物则游戏结束
• 速度会随分数逐渐加快（最快间隔 60ms）
• 每 50 分自动升一级，显示当前关卡

操作方式：

按键	功能
↑ / W	向上移动
↓ / S	向下移动
← / A	向左移动
→ / D	向右移动
空格	开始 / 暂停 / 重新开始

视觉特效：

• 蛇身颜色从青色渐变到红色（头部到尾部）
• 食物带有脉冲发光动画
• 网格背景 + 扫描线效果
• 四角装饰边框

数据存储：

• 最高分通过 localStorage 持久化存储（key: snakeHighScore）

---

坦克大战（tank.html）

支持双人合作和双人对战的坦克战斗游戏，20 张随机生成的合作地图 + 5 张精心设计的 PvP 地图。

游戏模式：

模式	说明
双人合作	两名玩家协同防守基地，消灭所有敌方坦克过关，共 20 关
双人对战	两名玩家互相对抗，三局两胜制

坦克类型：

类型	名称	速度	装甲	射速	颜色
⚡	轻型坦克	3.2	2	4	青色
◆	中型坦克	2.4	3	2	黄色
■	重型坦克	1.6	5	1	红色

地图元素：

元素	说明	可破坏	可通行
砖墙	棕色砖块，可被子弹摧毁	✅	❌
钢墙	灰色金属，2级以上子弹可摧毁	✅（需升级）	❌
草地	绿色植被，坦克可隐藏其下	❌	✅
水域	蓝色水面，带波浪动画	❌	❌
基地	金色标志，被摧毁则游戏失败	❌	❌

道具系统：

道具	效果
⭐ 星级提升	提升坦克等级（最高3级），增加子弹速度和威力
🛡️ 能量护盾	持续 5 秒的无敌护盾
❄️ 冰冻结界	冻结所有敌方坦克 3 秒（PvP 模式冻结对手）
💣 电磁脉冲	对周围大范围敌人造成伤害

操作方式：

玩家	移动	射击
玩家 1	W A S D	空格
玩家 2	↑ ← ↓ →	回车
通用	P 暂停 / 继续

游戏特色：

• 粒子爆炸特效 + 屏幕震动反馈
• 60 FPS 流畅运行
• 坦克血条显示
• 合作模式支持死亡复活机制（每局 3 次）
• 基地周围自动生成清理通道，避免死局
• 自适应画布缩放，适配不同屏幕

---

平台功能

用户系统

平台内置基于 localStorage 的本地用户认证系统：

• 注册：用户名 + 邮箱 + 密码，密码最少 6 位
• 登录：邮箱 + 密码登录，会话持久化
• 登出：清除会话状态
• Toast 通知：操作反馈弹窗（成功/错误/信息）

注意：用户数据仅存储在浏览器本地，不会发送到任何服务器。

页面特性

• 响应式设计：适配桌面（1280px+）、平板（768px~1024px）、手机（<768px）
• 滚动动画：元素进入视口时触发淡入上移动画（IntersectionObserver）
• 毛玻璃导航栏：滚动后增加阴影和不透明度
• 移动端菜单：汉堡按钮展开折叠导航
• 平滑滚动：锚点链接平滑跳转
• 自定义滚动条：青色半透明滚动条样式

视觉设计

• 背景：网格线 + 浮动光晕动画
• 字体：Orbitron（标题/数字）+ Inter（正文）
• 卡片：毛玻璃效果 + 霓虹边框发光
• Hero 区域：脉冲环 + 轨道点动画
• 游戏宣传图：纯 CSS 绘制的贪吃蛇和坦克插画

运行方式

无需安装任何依赖，无需构建步骤，无需启动服务器。

方式一：直接打开

• 双击 index.html 打开平台主页
• 双击 snake.html 或 tank.html 直接进入游戏

方式二：本地服务器（可选）

# 使用 Python
python -m http.server 8080

# 使用 Node.js
npx serve .

# 使用 VS Code Live Server 扩展
# 右键 index.html → Open with Live Server

然后访问 http://localhost:8080

技术栈

技术	用途
HTML5 Canvas	游戏画面渲染
CSS3	平台 UI 样式、动画、响应式布局
Vanilla JavaScript	游戏逻辑、平台交互、用户认证
localStorage	用户数据和最高分持久化
Google Fonts	Orbitron + Inter 字体加载

浏览器兼容

支持所有现代浏览器：

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

许可证

© 2026 NEXUS ARCADE. All rights reserved.