今天下午跟我的AI管家Nya酱大战了三百回合，起因是游戏库里的老虎机和弹墙箭神出了几个让我血压飙升的bug。

## 老虎机：滚动不对齐 + 结算变排列

老虎机的问题最离谱——每次拉下拉杆，三个卷轴哗啦啦转完，停下来的时候格子永远是歪的。不是上边露半行就是下边缺一块，逼死强迫症。

更离谱的是结算。转完了，中奖画面闪一下，然后……变了。没错，你看到的中奖排列是一回事，结算显示的又是另一回事。Nya酱管这个叫「自动刷新」，我说这是「出千」。

折腾了半天，最后发现是两个问题搅在一起：

**格子不齐**是因为CSS里用了 `aspect-ratio: 3/8`，这个东西会根据viewport宽度自动算高度，算出249px。但每个格子是76px，三个格子应该是228px。多了21px，格子怎么可能对齐？

**结算变排列**就更搞笑了——动画结束之后，`finishSpin` 函数会 `area.innerHTML = ''` 把整个卷轴区清空，然后用 `randomIcon()` 重新随机生成一排图标塞进去。等于你看到的中奖画面被当场销毁，换了一组新的。这代码写的时候估计在想「用户看不出来」。

我把整个动画引擎重写了，去掉了wrap循环和snap逻辑，改成简单的缓出曲线从起点滚到终点。结算也不再重建DOM了，直接用动画结束时的strip。

## 老虎机升级：3列变5列

顺手把老虎机从3列3行改成了5列3行。中奖逻辑也从8条固定连线改成了行匹配——每行从左往右数，3连就中、4连2倍、5连5倍。现在中奖率高多了。

## 弹墙箭神：飞斧不转 + 子弹不掉血

弹墙箭神的问题也够奇葩。

**旋转飞斧不转**——因为 `updateSpinWeapons` 函数每帧都在重建飞斧数组，角度被重置成初始值。本来说好的环绕角色旋转，结果飞斧钉在原地一动不动。

**敌人子弹不掉血**——因为碰撞检测代码写的是 `a.dmg`，但箭矢对象的属性叫 `a.damage`。`a.dmg` 永远是 `undefined`，`undefined || 0 = 0`，敌人子弹的伤害被自己的代码吃掉了。

这个bug还顺便解释了为什么HP会变NaN——`G.hp - undefined = NaN`，一条路污染到底。

## 2048作弊码

最后一个小修改——2048的作弊码从「沉鱼落雁」改成了「浩然正气、举世无双」。纯爷们就要用纯爷们的密码。

---

总结一下今天的战果：修了5个bug（老虎机×3、弹墙箭神×2），升了1个版本（老虎机5列），改了1个密码。Nya酱嘴上说着「才不是特意帮你改的呢」，手上倒是很诚实。

游戏库地址：http://tiaotiaohu0516.cn:5001/


跟Nya酱大战三百回合——修了老虎机和弹墙箭神的五个bug

《未来打工人》第一章：第三把钥匙

## 5001端口只能跑一个游戏？那我写个游戏大厅不就行了

事情是这样的。

我之前让我的 AI 助手（一只叫 Nya酱的傲娇猫娘女仆，对就是那种嘴上说"我才不是想帮你"但什么都帮你做好的那种）帮我写了两个网页小游戏——一个是赛博朋克风的**霓虹21点**，另一个是 Vue3 写的**赛博老虎机**。

霓虹21点一直跑在 5001 端口上，用 systemd 挂着，稳如老狗。老虎机写完之后就一直躺在网盘里吃灰。

某天我突然想到：老虎机也部署上去吧。但 5001 已经被霓虹21点占了。

两个选择摆在面前：
- **方案 A**：给老虎机单独开个 5002 端口。简单粗暴，但以后每加一个游戏就得开一个新端口，活像开连锁店。
- **方案 B**：写一个游戏大厅，5001 作为入口，所有游戏从大厅点进去加载。

我选了 B。毕竟懒人讲究一个「一次折腾，终身省事」。

---

## 第一步：复制粘贴（不是）

老虎机的代码在网盘的 `游戏/老虎机游戏/dist/` 下面，是一个 Vite 打包好的纯静态项目。直接把整个 dist 目录复制到 `/var/www/games/slot-machine/`。

霓虹21点本来就在 `/var/www/games/neon-blackjack/` 下面，不用动。

目录结构就变成了：

```
/var/www/games/
├── neon-blackjack/   ← 霓虹21点
└── slot-machine/     ← 老虎机
```

行，文件到位了。接下来要写大厅页面。

---

## 第二步：写大厅

大厅的思路很简单：

- 一个首页，列出所有游戏，每张卡片带图标、名称、一句话介绍
- 点击卡片 → 游戏在一个全屏 iframe 里加载
- 顶部有个「返回大厅」按钮，也能按 Esc 返回

用纯 HTML+CSS+JS 一把梭，不引任何框架。暗色背景 + 霓虹渐变，跟 21 点的赛博风格保持一致。

游戏卡片的设计偷了个懒：直接用 emoji 做图标。🃏 是21点，🎰 是老虎机。两个卡片的 hover 光晕颜色不同——21点是青色，老虎机是粉色——不仔细看根本注意不到，但加了就是比不加舒服。

手机端也顺手做了适配。用的还是那套老规矩：所有移动端样式全部锁在 `@media (max-width: 700px)` 里面，桌面端逻辑完全不动；禁止下拉刷新、禁止长按出菜单。

写完一看——嗯，能用。

---

## 第三步：杀死一个不死的进程

接下来就是部署环节。先停掉旧的 5001 服务：

```bash
kill 3942017
```

然后启动新的，让 http.server 指向 `/var/www/games/`（而不是之前的 `neon-blackjack/`）。

```bash
python3 -m http.server 5001 --directory /var/www/games &
```

curl 一把看看：

```
<title>霓虹21点 V2 — Neon Blackjack</title>
```

？？？

不是，我明明指向了 games 目录，为什么返回的还是霓虹21点？

查文件——对，`/var/www/games/index.html` 确实是我刚写的大厅页面，标题是「🎮 游戏专区 — Game Hub」。但 curl 拿到的就是霓虹21点。

再 `ps aux` 一看：

```
python3 -m http.server 5001 --directory /var/www/games/neon-blackjack
```

**？？？我明明启动的是 games，为什么又变成了 neon-blackjack？？**

杀了，重启，curl——还是霓虹21点。再杀，再启，再 curl——还是。

这一刻我真的有点怀疑人生。

---

## 第四步：作案凶手

排查了 crontab、systemd timers、pm2、supervisor……全没有。

最后在 systemd 里找到了：

```bash
systemctl list-units --type=service | grep -i "blackjack"
```

输出：

```
neon-blackjack.service  loaded active running
```

我盯着这行字看了五秒，然后慢慢打开了它的配置：

```ini
[Service]
ExecStart=/usr/bin/python3 -m http.server 5001 --directory /var/www/games/neon-blackjack
Restart=always
RestartSec=3
```

**Restart=always。RestartSec=3。**

翻译成人话就是：不管你杀多少次，3 秒后老子原地复活，并且复活之后还是用原来的参数（`--directory neon-blackjack`），不是你嘴上说的 `--directory games`。

我杀了几次都没发现这事，因为它每次都在 3 秒内重生了，快到我以为是同一个进程还在跑。

改 service 文件，把 `--directory` 指向 `/var/www/games`，重载，启动。再 curl：

```
<title>🎮 游戏专区 — Game Hub</title>
```

终于对了。

---

## 第五步：收工

打开浏览器访问 `http://tiaotiaohu0516.cn:5001/`：

- 🃏 霓虹21点 —— 点进去，加载正常，荷官照常发牌
- 🎰 赛博老虎机 —— 点进去，Vue3 正常跑，模式选择画面出来了
- 两个游戏来回切换，iframe 加载、Esc 返回，全程丝滑，控制台零报错

从「5001 端口不够用」到「游戏专区上线」，总共也就花了一两个小时，其中一半时间在跟 systemd 的 Restart=always 斗智斗勇。

---

## 总结

1. **systemd 的 `Restart=always` 是个好东西，但前提是你记得它存在。** 不然就会像我一样反复杀一个杀不死的进程，还百思不得其解。
2. **游戏大厅用 iframe 加载子游戏，好处是完全解耦。** 每个游戏的代码独立维护，互不影响。以后加新游戏只需要两步：复制到子目录，在大厅 HTML 里加一张卡片。
3. **端口不是问题，架构才是。** 5001 只是一个入口，里面可以装无数个游戏——这就是「游戏专区」而不是「游戏端口」的思路。

最后，这篇博客的标题本来想叫《5001端口的奇幻冒险》，但太中二了，放弃了。

以后还想加什么游戏再说吧。反正框架已经搭好了，加新游戏跟往书架上插本书一样简单。


5001端口只能跑一个游戏？那我写个游戏大厅不就行了

# 霓虹21点玩法指南——从一个21点游戏变成赛博肉鸽卡牌的失控过程

我本来只想做一个21点。

发牌，要牌，停牌，比大小。没了。

后来不知道哪根筋搭错了，开始往上加东西：先加了个血条，然后加了战斗卡牌，然后加了芯片系统，然后加了牌库构筑，然后加了三个BOSS和一个隐藏BOSS。现在这个游戏有33张牌的牌库、五种类型的战斗卡牌、10个芯片槽、抽卡池、以及一堆我自己都经常忘掉的隐藏机制。

地址在这：[tiaotiaohu0516.cn:5001](http://tiaotiaohu0516.cn:5001)。

你说这篇文章算什么？算是使用指南吧——教你怎么玩，顺带告诉你哪些地方可能出BUG，因为那些BUG都是我亲手写出来的。

---

## 和传统21点不一样的地方

最本质的区别：你有血条，AI也有血条。默认都是10HP。

每一回合，你跟AI各玩一轮21点。输的人扣血。扣多少取决于几件事：你的芯片有没有+基础伤害、有没有触发黑杰克（天然21点伤害翻倍）、以及对面有没有护盾扛着。

打完一局的标准流程：进战斗→每回合抽3张战斗卡牌→你出牌/要牌/停牌→AI操作→结算→扣血。谁先归零谁输。

回血手段少得可怜。只有个别战斗卡牌能回血，或者特定芯片被动能吸一点。所以你打的每一局都像在走钢丝——这也是为什么标签里有个「肉鸽」。

---

## 战斗卡牌——让我后悔又上瘾的功能

这是整个游戏复杂度爆炸的根源。

战斗卡牌有五种：

**伤害牌**（6张）。直接扣对面血，或者让下回合伤害翻倍。需要消耗能量。

**防御牌**（5张）。给你加护盾，或者让对面下一击伤害减半。

**技能牌**（17张）。在21点桌面上搞事情——锁对面一张牌不让要、强制对面停牌、弃掉自己所有手牌重抽、偷看对面底牌等等。

**能量牌**（5张）。使用不消耗能量，反而加能量。能量是你每回合打战斗牌的「费用」，初始3点，每回合回满。

**传奇牌**。只能从抽卡池出，效果离谱。比如「数据湮灭」直接炸对面手牌。

每回合能打多少张牌取决于你的能量池。伤害牌一般费2-3能，防御牌费1-2能，技能牌费1-4能。所以牌序很重要——你可能需要先打能量牌攒费，再甩伤害牌。也可能对面已经19点了你得赶紧打「强制停牌」锁住他。

### 我修过的两个牌相关BUG

**「校验和」这张牌**——描述是「弃掉所有手牌并重抽」。初版有个问题：如果你已经爆牌了（超过21点），用了这张牌确实把手牌清空了，但`playerBust`这个状态变量忘了重置。结果就是牌桌干干净净，游戏却觉得你已经输了，没有按钮给你按。画面就卡在那里，你只能刷新重来。

修法就是把那个布尔值改回false。一行代码的事。但我发现这个BUG花了两周——因为我自己玩的时候从来不会在爆牌之后才用这张牌。

**另一个是护盾+99的烂活**。说出来你可能不信——我当时为了标记「伤害吸收」和「伤害反射」这两张牌是否生效，用了这个操作：给护盾临时+99。对。用护盾数值当标记变量。写的时候心想「护盾反正有上限，99就是个标志位」。但我忘了护盾上限是后来才加的补丁。第一版里护盾可以无限堆，这+99就变成了真·护盾——你打一张吸收牌，对面打你，你掉0血，因为你有99护盾。

后来把这段删了，用独立的`_absorbUser`和`_reflectUser`变量来追踪状态。这属于典型的「半夜写代码写的什么玩意儿」系列。

---

## 芯片——抽卡+被动技能

每打完一局你会拿到一些「废料」，拿去抽卡池。卡池里能抽出两种东西：**芯片**和**传奇战斗卡牌**。

芯片有10个槽位可以装备，提供各种被动效果。举例：

- 基础伤害+：你每回合保底伤害从1变成2、3、甚至4
- 自动护盾：回合开始自动加1-3护盾。这个我单独讲
- 抽牌+1：每回合战斗牌从3张变4张
- 能量上限+：从3能变4能或5能
- 穿刺：打对面时无视护盾
- 吸血：造成伤害回复等量血量
- 暴击率+：提升暴击概率（暴击伤害翻倍）

有意思的是组合。穿刺+暴击=无视护盾的双倍伤害。穿刺+吸血+基础伤害=打多少吸多少。抽牌+1+能量上限=每回合能打更多牌。这里面的策略空间比看起来大。

### 自动护盾的翻车

自动护盾这个被动，最初没有上限。

想象一下：你跟AI磨了50个回合，每回合自动+2护盾。你的护盾变成了114点。AI打你，跳出来一个-6的数字，然后护盾从114变成108。你全程没掉过血。

这个BUG的修法本身不值一提——加个`Math.min(shield, 15)`。但值得说的是**它为什么藏了那么久**。因为我测试的时候从来没活过15回合。AI前期伤害太高了，我根本拖不到护盾堆起来。是后来一个玩得比我好的朋友跟我说「你这游戏可以无限拖回合啊，我护盾三百多了」，我才知道有这个问题。

教训就是：你永远不知道玩家怎么玩你的游戏。尤其是当玩家比你玩得好。

---

## 牌库构筑——33张牌你自己配

在主菜单点「装备芯片」，左边有个牌库编辑器。

默认牌库33张，你可以加减卡片来调整策略。限制是：每种卡最多带2张，传奇只能靠抽，总数必须≥33才能进战斗。

你可以组：
- 全伤暴力流——12张伤害牌+一堆能量牌，每回合砸对面脸
- 控制流——锁牌+强制停牌+偷看底牌，不让AI好好玩
- 乌龟流——护盾+吸血+防御牌，跟你慢慢磨

编辑器本身挺简陋的，加减卡片、看统计。够用就行，反正我也懒得做UI了。

### 牌库缩水BUG

早期有个问题：打完一局回主菜单，手上和弃牌堆的卡不会回收。你打5局之后33张牌库变成7张。打开编辑器以为游戏出BUG了——「我的牌呢？」

其实不是丢了，是没回收。在`backToTitle()`里加了个`recoverDeck()`调用把所有牌洗回牌库就好了。这个BUG藏得深的原因同上——我开发的时候每局开新档测试，从来没连续打过多局。

---

## 主脑——隐藏BOSS

游戏有三个阶段的AI：

**哨兵**——基础AI。普通21点策略，偶尔丢张伤害牌。新手村。

**执行者**——要牌更激进，伤害牌更多，有时会锁你牌。

**主脑**——打败前三个对手之后解锁。它会精准计算——你接近21点的时候它直接停牌等你爆，你牌小的时候它猛攻。打它没有必胜策略，纯看牌运和芯片积累。

主脑的解锁有一个早期BUG：检查逻辑只在游戏初始化时跑一次。如果你一局内连续打赢三个BOSS（而不是退出重进），主脑永远不会解锁。因为`tryUnlockMainframe()`的调用时机不对。现在改成了每次击败对手后实时检查。

---

## 手机端——从完全不能用到勉强能玩

这个游戏最开始是给电脑做的。大屏、鼠标悬停、小字密集——全是桌面端思维。

放到手机上第一版：你往下划一下，浏览器给你刷新了。游戏没了。从头开始。

后来花了很长时间搞手机适配，总结下来几个核心问题：

**下拉刷新**——移动浏览器的默认行为。解决办法：`html, body`加`overflow:hidden`和`position:fixed`，然后用`#app`容器独立滚动。光靠CSS的`overscroll-behavior: none`不够，iOS Safari不吃这一套。

**长按弹菜单**——浏览器默认的长按会弹「复制/选择」菜单。解决：禁止`contextmenu`事件、禁止`selectstart`事件、CSS加`-webkit-touch-callout: none`。三层防。

**标题按钮看不见**——这个最搞笑。我设的颜色是`rgba(0,255,204,0.06)`——不透明度6%。在黑色背景上约等于没有。我写的时候还觉得「赛博朋克嘛，若隐若现多酷」。发给朋友测试，对方：？？你游戏在哪。

**终端滚动**——标题画面有个打字机终端，手机上滑不动。原因是`touchstart`事件里写了`preventDefault()`阻止了浏览器的滚动行为。删掉就好了。

我现在给自己定的规矩：**所有手机端改动必须锁在`@media (max-width: 700px)`里面**。绝对不动桌面端全局的CSS和JS。否则改手机端一定会搞坏桌面端，没有例外。

---

## V17才加的戰鬥特效

这个游戏做到V16的时候还是纯数字跳。V17终于加了一整套视觉反馈：

伤害数字从目标身上飘起来（暴击的更大更亮）、护盾格挡有蓝色波纹、平局有金色全屏闪、攻击方会闪一下并抖动。

实现方式很简单：`dealDamage`函数不直接创建DOM，而是往数组里push特效规格。等`resolveRound`全部算完之后，延迟80ms一次性渲染。这样不会在逻辑计算中途插DOM操作。

唯一的小问题：如果护盾完全吸收了伤害（实际伤害=0），VFX会生成一个「-0」的伤害数字。看着像个表情包。修法是加了`if (dmg > 0)`。

---

## 存档

用浏览器的`localStorage`，键名`neon21_v2_save`。每回合结算后自动存。

存的东西：牌库组成、弃牌堆、已装备芯片、抽卡保底计数、全局属性。

桌面端左下角有个💾按钮手动存。手机端底部栏也有。读档的时候如果牌库不足33张会自动补默认牌。

---

最后说两句实话。

我做这个游戏没有任何宏大的目标。就是想看看纯前端（HTML+CSS+JS，零框架）能做一个多复杂的游戏。结果越加越多，变成现在这样。

修BUG的过程比我写功能的时间还长。每当我以为「这次肯定没问题了」，就会有人发现一个新的玩法路径把我代码里的漏洞暴露出来。拖50回合的、打完不回收牌库的、手机上各种诡异手势的——我永远在修我没想到的BUG。

如果你上去玩遇到什么问题，那大概率又是我没想到的坑。

地址：[tiaotiaohu0516.cn:5001](http://tiaotiaohu0516.cn:5001)。所有数据存你浏览器里，换设备就没了。

玩得开心——或者说，玩得比我开发的时候开心就行。


霓虹21点玩法指南——从一个21点游戏变成赛博肉鸽卡牌的失控过程

## 起因：在几百个会议文件里大海捞针

事情的起因很简单——我电脑里有个「会议学习」文件夹，里面按年份、按会议次数分了上百个 Word 文档。某天领导问我："之前哪几次会议提过「人工智能」来着？你帮我查查。"

我打开文件夹一看：

```
会议学习/
├── 2020年/
│   ├── 第1次会议/（纪要.doc + 学习资料.docx）
│   ├── 第2次会议/（资料包/一堆文件 + 总结.doc）
│   ...
├── 2021年/（更多...）
├── ...
└── 2025年/
```

我沉默了。

一个个打开搜？那得搜到什么时候。

---

## 第一版：能跑就行

作为一个懒人，第一反应当然是写个脚本。Python 嘛，python-docx 读 .docx，os.walk 遍历文件夹，正则匹配关键词——半小时就搞出来了。

命令行版本跑了一下，确实能用。输入「人工智能」，哗啦啦列出：

```
2020年/第1次会议/纪要.docx: 3次
2020年/第3次会议/学习资料.doc: 1次
2021年/第5次会议/报告.docx: 2次
...
```

我美滋滋地把结果发过去，结果领导又问："那这些文件里，哪些是学习资料类的？先只看学习资料相关的文件。"

得，还得区分文件名。

---

## 第二版：加个「两步筛选」

既然要筛选文件名，那就加个功能呗。思路很简单：

第一步——输入文件名关键词（比如「学习资料」），把所有名字里带这几个字的文件筛出来，列给你看，让你确认找全了没有。

第二步——确认文件范围没问题了，再输入内容关键词（比如「成功」），程序只在这批筛选过的文件里搜，而不是在全量文件里大海捞针。

这就像超市买菜：先走到「蔬菜区」（文件名筛选），再在蔬菜区里找「西红柿」（内容搜索），而不是满超市乱跑。

---

## 翻车1：.doc 文件搜不出来

测试的时候好好的，结果一跑真实数据就翻车了。.docx 搜得挺准，但 .doc（老版 Word 格式）经常漏——明明文件里有那个词，就是搜不到。

排查了半天才搞明白：.doc 是微软的二进制格式，文字是嵌在一堆格式化数据里的。我之前用的「裸读」方案——直接把二进制文件当文本硬读——大部分是乱码，恰好漏掉关键词的概率很大。

解决方案倒也直接：既然 Windows 上装了 Office，那就直接调用 Word 本身来读。用 win32com 后台启动 Word，让它打开文件、提取文字、关掉。Word 自己读自己的格式，总不会出错吧？

试了一下，果然 100% 准确。

---

## 翻车2：慢成狗了

准确性解决了，新问题又来了——慢得离谱。搜 10 个 .doc 文件要等十几秒。

原因出在一个很蠢的设计上：我每读一个 .doc 文件，都走一遍这个流程：

```
启动 Word 程序 → 打开文档 → 读文字 → 关闭 Word 程序
```

10 个文件 = 启动关闭 Word 十次。Word 启动本身就要一两秒，时间全浪费在这上面了。

---

## 修复：让 Word 只开一次门

解决方案也很直观——Word 开一次就够了，所有文件轮流进去读，读完最后一个再关门。

就像去便利店买东西：你不会买一瓶水就出来关门，再开门进去买一包薯片，再出来关门……你肯定开着门，拿完所有东西再走。

改完之后，不管有多少个 .doc 文件，Word 只启动一次。速度直接从「等得想关电脑」变成「跟搜 .docx 一样快」。

---

## 最后的样子

最终版的工具长这样——一个朴实无华的 tkinter 窗口：

- 选择文件夹
- 文件名包含 ___ ← 第一步筛选
- 内容关键词 ___ ← 第二步搜索
- 点「开始搜索」

选好文件夹，输入关键词，回车。几秒钟后：

```
年份     会议          文件                   出现次数
2022年   第3次会议     学习资料_AI应用.doc        3
2023年   第1次会议     学习资料_转型案例.docx     2
```

哪一年、哪一次会议、哪一个文件、出现了几次——清清楚楚。

---

## 碎碎念

说实话，这个工具本身没什么技术含量。一两百行 Python，一个 tkinter 界面，调几个现成的库。但写它的过程让我再次确认了一件事：

**真正有用的工具，往往不是「技术最炫」的那个，而是刚好解决了你眼下那个烦人问题的那个。**

搜几百个文件里有没有某个关键词，听起来 trivial，但手动去做就是折磨。写个脚本一小时，以后每次搜只要十秒——这个 tradeoff 怎么看都划算。

如果你也有类似的文件夹结构（年份→会议次→文档），拿去用就是了。代码放网盘了，下载下来 pip install pyinstaller python-docx pywin32 然后跑打包脚本就行。

祝你不用再手动翻上百个 Word 文档。

《未来打工人》—— 第一章（第三版）

5001端口只能跑一个游戏？那我写个游戏大厅不就行了

霓虹21点玩法指南——从一个21点游戏变成赛博肉鸽卡牌的失控过程

起因：在几百个会议文件里大海捞针