2025年｜hut小场景改版01

hut毕业设计

最近在重构这个项目，之前的代码库里的代码太臃肿了，可读性也比较差，也没有什么可玩性。上学的时候老田要我做第二版我一直拖着没做，最近有时间才开始做。

Day1

重构成nodejs+react
refactor: 重构老项目

• 后端php架构修改成nodejs采用express框架-> 没有实现功能，目前只是api输出结果，且不报错。
• 前端修改成react框架，目前less转css那块还需要大改，另外App.js里的html代码太多了，需要抽离成组件。
• 浏览器上点击事件被我删掉了，目前最小范围修改
• 隐藏parallax.js插件，有点消耗新能，便于调试
• 注释掉浏览器事件鼠标和拖拽事件，目前有bug
• 这个版本的代码还有很多问题，只是大概能跑而已

Day2

删减代码+抽子组件
删减代码

• 重构的时候手动改了一遍ul和li的布局，ai在读写的时候生成了极具迷惑性的错误静态资源。
• 抽子组件的时候又改了一遍ul和li的布局，我写了一个子组件，让ling参考我的代码和注释抽子组件，它倒是大致完成了，就是又要让我重新检查一遍并并改写。

这样就花了两天！

Day3

搭建pixi.js框架，我跟chatgpt互动了几波，让它帮我生成了一个可跨平台，可做离线和pwa，前端用react，node层用express的脚手架的文件结构。

pixi-hiking/
├─ pnpm-workspace.yaml
├─ package.json
├─ README.md
├─ packages/
│   ├─ client/                     # React + Pixi 前端
│   │   ├─ package.json
│   │   ├─ vite.config.ts
│   │   ├─ public/                 
│   │   │   ├─ assets/             # PNG/GIF/占位图
│   │   │   └─ sw.js               # Service Worker
│   │   └─ src/
│   │       ├─ app/
│   │       │   └─ Main.ts
│   │       ├─ game/
│   │       ├─ engine/
│   │       ├─ ui/
│   │       └─ main.tsx
│   ├─ shared/                     
│   └─ server/                     
└─ platforms/
    ├─ web/                        # Web(PWA) 特殊入口
    │   ├─ index.html
    │   └─ manifest.json
    ├─ chrome-extension/           
    └─ mobile/

接着我用copilot生成了代码，但是copilot生成的代码有bug，所以只能自己手动改了，还好错误提示很准确。

• 修改vite的静态文件引用路径。
• 修复typescript的依赖包。
• 接着可以运行了，页面又出现404，然后又改了一些html文件的放置地址。
• 运行成功后开始用lingma继续写代码。
• 网页终于可以运行了，场景放上去了，我想想该怎么做。
• 布局全乱了真是头疼，不会要改第三遍吧，准备先睡了，又到零点。

Day4

丢失了一些psd文件，到时候就有点麻烦！脚手架搭好了，场景可以动了，gif取了三帧用三张png代替
GIF转PNG,明天解决一下定位问题，我实在是不想改第三次了，这不是技术活这是体力活。

一觉醒来感觉没干啥就十一点，今天先把我和chatgpt对线的上下文整理下，然后把对话框删掉，那对话框感觉都快卡死了，最近总感觉chatgpt把单对话框的限制放开了。

分析 Matthew Wagerfield 的 parallax.js 项目 -> 发现还有中实现主要用在电影里，叫做2.5D，我也找了个有意思的案例2.5D徒步示例，我觉得和我想做的方向完全契合。

本来我还想做孤岛，每个岛上嵌一个场景，后面觉得互动性和观赏性不算好。接着我有点往超级马里奥方向思考。直接用自然语言和chatgpt对话

我改变我的想法了，我想做一个2.5D的parallax小游戏，路线非常简单，有点像是超级马里奥的简单版本。我现在用我的png多层实现了一个很长的web页面，然后再实现成一个小游戏即可，对了我改了一下框架，把后端改成了express，前端用react框架完成的，你有什么好的建议吗？先不要写代码。

同时我还联想到chrom没有网时的恐龙小游戏。Dino Runner。

此时chatgpt有些走偏，即使调整。

你记错了，我已经舍弃岛屿这个概念了，直接把我的多层png拼成一个长卷轴，开始时人物不动，然后后面的多层png场景移动。给我一些构思吧，先不要写代码。

如果做成爬山小游戏呢？先帮我构思一下，不要写代码，提供一些参考和想法即可。

再构思一下徒步小游戏，非常短距离的徒步。

我还想加入离线的功能，然后用service worker来进行画面和其他数据存储。继续构思，不写代码。

在我的这个长卷轴画布中可以加入gif图片，让画卷更有动态感吗？会不会影响性能？

你有点想岔了，我的长卷轴是由多层png构成的，大概每一小段会出现一张gif图片，我还想做黑夜与白天两个模式，来模拟日光。未来可能还会加上下雨

多段卷轴如何做“段落过渡动画”

此时根据chatgpt的提示语，分析它提供的解决方案。

深度渐变式，黑白光影过渡我都很喜欢的，你给我分别讲讲吧，不要写代码。

同时更换一些方案。

https://matthew.wagerfield.com/parallax/ 我还需要用这个项目来实现吗？

阶段性总结。

我来总结一下： 1. 目前我写了个demo我的多层png图片前后拼接可以构成一个大概29500px长的网页。 2. 我想用来做一个徒步小游戏，在徒步的过程中会有一些小小的GIF，点击或者触碰到GIF形成一个小彩蛋，这个彩蛋目前我还没想好。 3. 这个徒步小游戏有黑夜和白天的视觉效果，同时场景之间切换比较丝滑。 4. 我想做成可离线的网页和webapp，或者打包成chrome插件。 5. 游戏角色只有一个人。 6. 我想实现一个可扩展的MVP版本，尽量不要影响后期迭代。 7. 替换parallax.js, 我还没想好用什么替代。 8. 我还没想好具体的架构。 你可以帮我构思一下这个项目的架构，并且帮我看看我的这个想法的可行性，先给我想一下方案，不要写代码。

先帮我想一下排期和架构吧，不要写代码！

你有什么相关的开源项目可以推荐给我，让我了解一下吗？

行，再帮我找找吧

就这样最终定下了pixi，然后刚好看到pixi的示例案件中有个类似的项目。

Pixi.js的官网案例有推荐给我一个叫做right runner的app，可以在ios上下载，请问有类似的开源游戏可以学习吗？

同时还在github上找到一个比较简单的实现，这个仓库也是chatgpt推荐给我的。

pranjalgram/InfiniteRunner 你提供的这个方案学习思路非常好，我要结合这个来做我的功能，我现在开始思考我的项目排期和架构了，怎么样才能更好的迭代呢？

接着最重要的是拿到脚手架设计

my-hiking-game/
├── backend/                     # Express 后端
│   ├── server.js                # Express 主入口
│   ├── routes/                  # API 路由
│   │   └── resources.js
│   ├── public/                  # 静态资源托管（PNG/GIF）
│   └── package.json
│
├── frontend/                    # React 前端
│   ├── public/
│   │   ├── index.html
│   │   └── manifest.json        # PWA
│   ├── src/
│   │   ├── assets/              # PNG/GIF/音效
│   │   ├── components/          # React UI组件
│   │   │   ├── ScoreBar.jsx
│   │   │   ├── ProgressBar.jsx
│   │   │   └── DayNightToggle.jsx
│   │   ├── game/                # Pixi 游戏逻辑
│   │   │   ├── engine.js        # Pixi 主循环
│   │   │   ├── resourceManager.js
│   │   │   ├── parallaxManager.js
│   │   │   ├── playerController.js
│   │   │   └── interactionManager.js
│   │   ├── redux/               # Redux 状态管理
│   │   │   ├── store.js
│   │   │   ├── actions.js
│   │   │   └── reducers.js
│   │   ├── serviceWorker.js     # 离线缓存
│   │   ├── App.jsx
│   │   └── index.jsx
│   ├── package.json
│   └── webpack.config.js / vite.config.js
│
├── .gitignore
└── README.md

你觉得我昨天发你那个开源的案例如何，我可以直接拿来改吗？pranjalgram/InfiniteRunner和SamuelAsherRivello/pixi-project-template

资源加载 / 段落数据结构 / 视差配置格式

完整的目录结构（非常实用）

后续迭代节奏：Roadmap（1 周 / 2 周版本）

🚀 🎯 总目标（2 周）
打造一个可以“完整徒步一小段路”的、可离线访问、拥有事件彩蛋的 可玩 Demo。
📅 Week 1（核心引擎 + 卷轴 + 资源加载）
Day 1 — 架构落地 (核心基础)
完成：
项目目录搭建（按我给你的结构）
React + Pixi.js 初始化
Pixi.Application 单例架构
Redux store 架起来
Express 后端跑起来（静态资源 + 日志端点）
Why： 为后续任何逻辑提供稳定地基。

Day 2 — 资源系统（最重要）
完成：
ResourceManager（加载 / 缓存 / 分段分类）
manifest.json（第一段资源）
PNG + GIF 支持测试
大资源文件夹结构完善（forest / river / …）
Why： 所有段落滚动都建立在资源系统之上。

Day 3 — 视差层系统（Parallax Engine）
完成：
ParallaxManager
背景层 / 中景层 / 近景层的基本逻辑
让一段 3000px 的卷轴可以左右滚动
速度差：BG 0.1 / MG 0.5 / FG 1.0
Why： 游戏最核心视觉基础。
Day 4 — 段落（Segment）系统
完成：
SegmentScroller（决定何时加载下一段）
段落 JSON 的格式确定（图片列表 / 视差深度 / GIF 点）
forest.json 示例段落可滚动
下一段自动加载（预加载 + 切换）
Why： 无限滚动、扩展新段落的关键。

Day 5 — 基础角色系统
完成：
Player 显示
简单的移动动画（无需骨骼）
背景动，角色不动（马里奥风格）
碰撞检测初步框架（用于 GIF 点事件）
Why： 每个游戏必须有人物概念。

📅 Week 2（交互 + 日夜 + 事件 + PWA）

Day 6 — GIF 彩蛋事件系统
完成：
InteractionManager 识别点击/触碰区域
GIF 点触发事件 → Redux eventSlice
React 弹窗（恰到好处的小彩蛋）
一个简单的“发现⚡彩蛋”的 UI
Why： 游戏要有奖励感。

Day 7 — 日夜模式系统（光照层）
完成：
LightLayer 实现
日夜模式渐变策略（淡色 → 深色）
早晨/傍晚过渡滤镜
一个简单的 UI Switch（React）
Why： 你的游戏风格关键元素之一。

Day 8 — 段落过渡（Transition Effects）
完成：
深度渐变（FG/MG/BG 透明度动画）
色调渐变（浅绿 → 暗蓝 → 橙黄）
黑白淡出 + 淡入（optional）
Segment 触发 TransitionManager
Why： 多段卷轴不会突兀，风格统一。

Day 9 — Service Worker + 离线化 (PWA)
完成：
SW 缓存策略：资源层 + 道具数据层
离线启动游戏
manifest.json + icon
可添加到桌面 / Chrome 插件基础
Why： 需要离线可玩。

Day 10 — 性能优化 + Bug Fix + 小范围测试
完成：
停止渲染离屏段落（节省 GPU）
手动释放未使用的 PNG/GIF
限制 FPS 以节能手机端
1〜2 个段落做一次全流程测试
Why： 真机体验要流畅，特别是你的 20000+ px 长卷轴。

🔥 Week 2 Extra（如果顺利）

以下可选：
⭐ 天气系统初版
雨滴粒子
雾（用 Pixi.filters）
环境音效
⭐ 角色动画更丰富
停顿、加速、举手（点击时）
🎯 最终产出（两周后你应该拥有）：
✔ 一条可徒步的多段高精度卷轴
✔ 每段都有视差
✔ 有 GIF 彩蛋
✔ 日夜模式支持
✔ Transition 过渡
✔ 离线可玩
✔ 基本 UI（React）
✔ 可扩展架构：

新增段落很容易
新增事件很容易
新增天气很容易
这已经是一个可以展示给朋友或公司同事的「小游戏原型」。

架构落地 (核心基础), 每段 JSON 配置格式（非常重要）

我今天先开始把架构搭起来，其他的先不考虑那么多，只关心架构和可扩展性即可，不要让程序写得太死板以至于无法扩展。

好的，结合SamuelAsherRivello/pixi-project-template来做吧

好，你帮我写空架子文件

我先请教一下，之后打包文件如何管理，如果我想做多端应用呢，现有的架构是否有考虑到？

设计完整的多端 monorepo 结构（含 pnpm workspace），并且帮我写空架子文件，我要马上开始做。

结合SamuelAsherRivello/pixi-project-template帮我画一个文件结构图以及monorepo 多端开发 + 构建流程图，先不要写代码。

接着就是一些排错。最后项目用copilot搭建，lingma辅助ai开发。

十一点到凌晨，了解了一下pixi搭建的小工具ct.js，然后用chatgpt转换less源代码到目标位置json的配置文件。然后就是搭建好场景和人物，出现画面疯狂抖动的bug，更换了lingma，copilot，chatgpt，claude，都没有改好。再想想吧，今天先到这。

Day5

还是用了claude解决了jitter的问题。关键注释是jitter。

Summary of Fixes for Pixi.js Jittering Issue
Problems Identified:
Sub-pixel Rendering - Sprite and container positions were using fractional pixel values, causing visual instability
Missing update() Method - PlayerController was being called but the method didn’t exist, causing runtime errors
No Pixel Rounding - Containers and sprites weren’t configured to snap to whole pixels
Solutions Implemented:

1. ParallaxManager.ts
   ✅ Added Math.round() to scroll calculations (line 31)
   ✅ Enabled roundPixels on layer containers (line 14)
2. SegmentManager.ts
   ✅ Enabled roundPixels on scene container (line 55)
   ✅ Enabled roundPixels on segment containers (line 205)
   ✅ Enabled roundPixels on layer containers (line 229)
   ✅ Rounded all container positions using Math.round() (lines 210-211, 230-231)
   ✅ Rounded sprite positions for static sprites (lines 283-284)
   ✅ Rounded sprite positions for animated sprites/GIFs (lines 318-319)
3. GameManager.ts
   ✅ Enabled roundPixels on main game container (line 70)
4. PlayerController.ts
   ✅ Enabled roundPixels on player sprite (line 28)
   ✅ Added missing update() method (lines 73-106) with:
   Physics simulation (gravity, velocity)
   Position rounding to prevent jitter (lines 88-89)
   Ground collision detection
   Jump cooldown management
   Key Principle Applied:
   Always round positions to whole pixels - This prevents the browser from rendering sprites at fractional coordinates, which causes blurriness and jittering during animation. Your Pixi.js project should now render smoothly without any jittering! 🎮