ByteFisher

上次收杆时说过，五一回来算总账。

言出必行。

五月一号，天还没亮就醒了。窗外淅淅沥沥的雨声让我心里一凉——天气预报没说下雨啊。打开手机一看，蒙蒙细雨，温度不高，气压倒是稳定。我一拍大腿：这不就是钓大鱼的天吗？阴雨天，大物靠岸，今天不爆护都对不起这天气！

抄起装备就出发。后备箱里波纹鲤K6.3已经擦得锃亮，线组也提前绑好了——2.0主线+1.5子线，新关东2号钩。上次1.0子线被切得怀疑人生，今天直接加粗。对了，这次特地换了个大鱼桶，上次那个小桶三条鱼就塞满了，今天五一必须安排到位。

到水库的时候岸边已经有不少人了，好位置基本都被占了。我沿着水边走了一圈，找了个相对宽敞的空位坐下来。雨丝细细密密的，水面泛着一层涟漪。调漂、找底、打窝，一套流程走完，挂上老坛玉米抛下第一竿。

抽了支烟的功夫，浮漂轻轻点了一下。

我瞬间坐直了身子，眼睛死死盯着那枚红绿相间的浮漂。又过了大概两分钟，浮漂出现了一个标准的鲤鱼口——先点两下，然后稳稳地斜着沉了下去。等到黑漂的瞬间，我猛地扬竿刺鱼！

杆身传来的第一感觉让我心跳都漏了一拍——好重！

波纹鲤K6.3的腰身瞬间弯成一道漂亮的弧线，竿梢几乎扎进水里。鱼线切水的声音在雨幕中格外清脆——“嗡——嗡——“，那是只有大鱼才拉得出来的声音。

前言

在上一篇文章《Hexo博客集成抖音视频实战指南》中，我们详细介绍了如何在Hexo博客中集成抖音视频相册功能，包括数据层设计、页面模板、弹窗播放等核心实现。

然而，在实际使用过程中，我发现弹窗播放存在几个体验问题：视频内容没有垂直居中、弹窗内部出现滚动条、底部进度条和”看更多”区域被遮挡。这些问题严重影响了用户的观看体验。

本文作为续篇，将深入分析这些问题背后的技术根因，并提供完整的修复方案。

前言

继光影拼图游戏开发指南（功能篇）介绍功能实现后，本篇聚焦优化过程中解决的 7 个 P0 级集成问题 与运行 Bug。问题的根源在于：Phase 1/Phase 2 的优化模块代码已完成，但未正确集成到游戏主流程中。

本文重点讲解：

1. 模块集成问题：优化代码为何闲置，如何激活
2. 集成修复：6 大模块重构
3. Bug 修复：融入具体集成章节中

上周你在水库里想干嘛？把我的达摩浮漂拖走了还不过瘾，还连续切我1.0子线、2.0主线？真把这水库当你家开的了？

今天我就是来算账的。

周六一大早就醒了，比上班还积极。到水库边才八点半，晨雾还没散尽，水面飘着一层薄薄的水汽。还是上次那个钓位，还是那套装备——6.3米鱼竿+2.0主线+1.0子线。挂饵抛竿，我就不信这个邪了。

下杆不到十分钟，浮漂一个黑漂闷了下去！我条件反射提竿——

好家伙，中鱼了！

杆身瞬间弯成满月，线切水的声音”呜呜”响。绝对是条大物，手心全是汗。遛了大概两三分钟，鱼劲刚松了点，我刚想往岸边带——

“嘣”的一声，杆梢弹了回来。

子线又双叒叕切了。

在上篇文章 VSCode 中搭建 OpenCode AI 编程助手完整指南 中，我们介绍了 OpenCode 的基础使用方法。在实际使用中，除了 OpenCode Zen 官方套餐外，很多开发者希望使用其他 AI 模型来降低成本或获得更好的中文编程支持。阿里云 Qwen（通义千问）作为国产优秀的大语言模型，在中文理解和代码生成方面表现出色，而且接入成本较低。本文将详细介绍如何在 OpenCode 中接入 Qwen 模型。

前言

继五子棋之后，本文介绍光影拼图游戏的开发。相比其他游戏，拼图的核心难点在于图片处理与碎片管理：如何将一张图片切割成碎片，实现拖拽吸附，并保证在移动端和桌面端都有良好的交互体验。

拼图游戏是一个看似简单但技术实现复杂的益智游戏，实际开发中需要解决：

1. 图片处理：如何动态加载、切割图片，并处理加载失败的情况
2. 碎片管理：如何生成、定位、旋转和吸附碎片
3. 响应式设计：如何在不同屏幕尺寸下保持游戏体验
4. 移动端适配：如何统一处理触摸和鼠标事件
5. 性能优化：如何管理图片资源和动画帧

本文重点讲解三个核心问题：

1. 图片切割与碎片生成：Canvas 图片处理技术
2. 拖拽吸附算法：碎片位置匹配与自动吸附
3. 跨平台事件处理：统一鼠标与触摸交互

项目结构

1
2
3
4
5
6
7
8
9
10
11

source/ai-games/puzzle/
├── index.md                      # 游戏页面入口（HTML + CSS）
└── modules/
    ├── puzzle-config.js          # 配置模块（难度、颜色、动画参数）
    ├── puzzle-core.js            # 核心逻辑（碎片生成、吸附算法）
    ├── puzzle-render.js          # 渲染模块（Canvas 绘制、动画）
    ├── puzzle-ai.js              # AI 提示系统
    └── puzzle-game.js           # 游戏入口（整合模块、事件处理）

source/ai-games/gamejs/
└── game-manager.js               # 游戏生命周期管理器（复用）