《凪光》官网实践记录：从零开始瞎捣鼓
老实说，我一开始根本没打算自己动手写这个网站。我那个老伙计，搞独立游戏搞了快一年了，美术素材都堆成山了，可官网一直拖着没影。眼看着公测的日子就快到了，他急得团团转，跟我哭诉说找不到合适的前端，预算又低。
我听完就来气了。他那游戏我内测都玩了好几轮，画面和故事都顶尖。这么好的东西，不能因为一个官网掉链子。我拍着胸脯保证，这事我接了。虽然我主业不是前端，但架不住我以前爱瞎折腾。
第一步：抓设计稿和工具
我拿到手的就是一堆散乱的PNG和几张超长的游戏海报，连个正经的PSD都没有。我打开了取色器，把游戏里那些灰蒙蒙的、带着一丝赛博朋克感觉的主色调全都提取了一遍，定下了基调。
我果断放弃了那些复杂的框架，直接决定用最原始的HTML和CSS硬干，顶多加上一点点Vue用来管理状态，图个方便。我打开了VS Code，把Node环境检查了一遍，然后敲下了第一个 “npm init”。
第二步：被视差效果折磨
游戏官网嘛肯定要炫一点。我决定在背景上加一个微弱的视差滚动效果，让那张长海报看起来像在缓缓移动。这玩意儿说起来容易，做起来简直是灾难。我一开始找了个现成的JS库，结果它跟我现有的DOM结构完全冲突，我硬着头皮改了半天源码，没改明白。
- 我试着用CSS的 `background-attachment: fixed`，但发现移动端适配完蛋了。
- 我又尝试监听 `scroll` 事件，然后手动计算位移，但一滚动就卡顿，CPU风扇转得跟直升机似的。
- 我一狠心，把JS库全删了，只保留了最核心的滚动监听，然后用 `requestAnimationFrame` 配合 CSS transform: translateY() 来做平滑过渡。虽然代码写得非常粗糙，但总算是解决了卡顿的问题，跑起来效果还挺唬人。
最耗费时间的反而是字体。为了还原那个科幻感，我找遍了免费可商用的字体库，下载下来后又用工具压缩了一遍，生怕加载慢了。
第三步：实现与上线
接下来就是把所有内容模块往里塞：游戏介绍、世界观、配置要求、社区链接。我花了一整晚把移动端的布局给调顺了，确保无论手机还是电脑看，排版都不会乱掉。
网站结构定下来后，我把所有图片都用工具压到最小，确保加载速度。部署环节我没搞任何花里胡哨的。我直接把打包好的文件拖到了我租用的一台小服务器上，简单配置了一下Nginx。
我为啥这么拼命帮他搞这事？
因为这个老伙计，十年前我刚辞职，身上连吃饭钱都没有。他二话不说把他当时刚发的工资全塞我手里了，让我先挺着。那恩情我一直记着。现在他做独立游戏，我能帮的，必须帮到底。
当我点开域名，看到那个“凪光”的Logo缓缓浮现出来的时候，心里那块大石头终于落地了。代码是乱了点，但效果达到了。我把链接扔给他，他那边直接炸锅了，说比他预想的专业多了。我嘿嘿一笑，就是一股脑把所有精力都砸进去了。实践出真知，这回对前端动效的理解又深了一层。