ByteFisher

前言

在上一篇文章《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               # 游戏生命周期管理器（复用）

前言

继扫雷、俄罗斯方块之后，本文介绍五子棋 AI 对战游戏的开发。相比其他游戏，五子棋的核心难点在于AI 算法的实现：如何在有限时间内找到最优落子位置，同时平衡进攻与防守。

五子棋是一个信息完全公开的零和博弈游戏，理论上可以通过搜索算法找到最优解。但实际应用中，我们需要考虑：

1. 搜索空间巨大：15×15 棋盘有 225 个位置，搜索深度每增加一层，复杂度指数级增长
2. 时间限制：玩家期望 AI 在几秒内做出决策，不能无限搜索
3. 用户体验：AI 需要”合理”地犯错，给玩家获胜的机会

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

1. PJAX 兼容性处理：如何在静态博客中实现流畅的页面切换
2. AI 算法设计：如何实现具有不同难度的棋局评估与搜索

项目结构

1
2
3
4
5
6
7
8
9
10
11
12

source/ai-games/gomoku/
├── index.md                      # 游戏页面入口（HTML + CSS）
└── modules/
    ├── gomoku-config.js          # 配置模块（难度、分数常量）
    ├── gomoku-utils.js           # 工具函数（深拷贝、存储）
    ├── gomoku-core.js            # 棋盘核心（状态管理、胜负判定）
    ├── gomoku-ai.js             # AI 引擎（搜索算法、评估函数）
    ├── gomoku-ui.js              # UI 渲染（画布绘制、事件处理）
    └── gomoku-main.js           # 游戏入口（整合模块、流程控制）

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