复古像素风个人主页 —— 基于 CRT 显示器美学、8-bit 游戏卡带交互的创意作品集网站。
🌐 在线预览: https://lan0o0.github.io/Page/
| # | 问题 | 原因 | 修复方案 |
|---|---|---|---|
| 1 | 卡带拖动坐标偏移 | 使用 position: fixed 导致拖动时坐标计算错误，卡带位置与鼠标位置不一致 |
改用 transform: translate() 实现拖动，基于初始位置计算偏移量 |
| 2 | 插槽位置移动 bug | 页面滚动或缩放后，getBoundingClientRect() 返回值变化，但插入判断仍使用旧坐标 |
每次拖拽移动时实时调用 getBoundingClientRect() 计算当前位置 |
| 3 | 卡带插入后位置错位 | 插入动画结束后卡带位置与插槽不重合 | 计算相对于 cartridge-wrapper 的精确偏移量，使用 CSS transition 平滑插入 |
| # | 功能 | 实现方式 |
|---|---|---|
| 4 | 插槽位置指示器 | 当卡带靠近插槽（距离<100px）时，显示黄色箭头动画 + "INSERT HERE" 文字提示，插槽边框发绿光高亮 |
| 5 | 8-bit 插入音效 | Web Audio API 合成：滑入音 200→800Hz 方波扫频 + 确认咔嗒音 1200Hz；同时包含开始游戏音效（C5-E5-G5-C6 琶音）、吃食物音效、游戏结束音效 |
| 6 | 触摸设备支持 | 同时支持 mouse 和 touch 事件；移动端手势控制游戏（滑动方向 = 蛇移动方向） |
| # | 优化 | 说明 |
|---|---|---|
| 7 | 卡带回弹动画 | 未插入时平滑回弹到原始位置，0.3s ease-out transition |
| 8 | 游戏机屏幕状态反馈 | 未插卡 → "INSERT CARTRIDGE"（绿色）/ 已插卡 → "SNAKE READY!"（黄色）/ 未插卡按 START → "NO CARTRIDGE!"（红色，1秒后恢复） |
- 新增经典插卡游戏机区域（Retro Game Station）
- 可拖拽的 8-bit 游戏卡带（SNAKE 8-BIT）
- 红白机风格游戏机模型
- 初始版本：复古像素风个人主页
- CRT 显示器外壳 + 扫描线效果
- 开机引导序列动画
- 像素化头像 + 故障风标题
- 技能条 / 时间线 / 项目卡片等模块
- 像素风设计: 8-bit/16-bit 位图艺术、低保真、CRT 显示器质感、电子故障风
- 复古计算美学: 点阵字体（Press Start 2P / VT323）、扫描线、屏幕曲率
- Y2K 千禧风配色: 荧光绿
#00ff41/ 青色#00ffff/ 洋红#ff00ff - 交互式游戏: 拖拽卡带插入游戏机，真实可玩的贪吃蛇游戏
- 响应式布局: 适配桌面端和移动端
| 方式 | 链接 |
|---|---|
| chenyu@example.com | |
chenyu_wiki |
|
| 🐙 GitHub | https://github.com/lan0o0 |
| https://linkedin.com/in/chenyu |
注：以上为示例链接，请根据实际情况修改
index.html中的联系方式。
GitHub 支持两种 Pages 站点类型：
访问地址：https://用户名.github.io/仓库名/
- 每个仓库都可以有一个项目站点
- 适合展示单个项目
设置方法:
- 进入仓库 Settings → Pages
- Source 选择
Deploy from a branch - Branch 选择
main→/ (root) - 点击 Save
- 等待 5-10 分钟后访问
https://lan0o0.github.io/Page/
访问地址：https://用户名.github.io/
- 每个账户只能有一个个人站点
- 适合作为个人主页/作品集
设置方法:
- 访问 https://github.com/new
- 仓库名必须严格为
lan0o0.github.io（格式：用户名.github.io） - 选择 Public
- 勾选 Add a README file
- 点击 Create repository
将本项目的 index.html 推送到 lan0o0.github.io 仓库：
# 克隆新仓库
git clone https://github.com/lan0o0/lan0o0.github.io.git
cd lan0o0.github.io
# 复制本项目的 index.html 到该目录
cp /path/to/Page/index.html .
# 提交并推送
git add index.html
git commit -m "feat: init personal homepage with retro pixel style"
git push origin main- 进入
lan0o0.github.io仓库 → Settings → Pages - Source 选择
Deploy from a branch - Branch 选择
main→/ (root) - 点击 Save
等待 5-10 分钟后访问：
Page/
├── index.html # 主页面（单文件完整应用）
└── README.md # 本文件
本项目为单文件 HTML 应用，所有 CSS 和 JavaScript 均内联在
index.html中，无需额外依赖。
- HTML5 + CSS3（无框架）
- 原生 JavaScript（无库依赖）
- Web Audio API（8-bit 音效合成）
- Canvas API（贪吃蛇游戏渲染）
- Google Fonts: Press Start 2P, VT323
MIT License