docs: update

jzllove9 · Sep 10, 2024 · a1950d9 · a1950d9
1 parent 9270166
commit a1950d9
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 19 deletions.
diff --git a/src/content/blog/fe/使用Pixi.js实现《围追堵截》桌游（一）.md b/src/content/blog/fe/使用Pixi.js实现《围追堵截》桌游（一）.md
@@ -1,11 +1,12 @@
 ---
 title: 使用Pixi.js实现《围追堵截》桌游（一）
-description: 本文将介绍《围追堵截》桌游的游戏规则，以及如何使用 Pixi.js 实现游戏的绘制。
+description: 本文将介绍《围追堵截》桌游的游戏规则，以及如何使用 Pixi.js 实现游戏的绘制，第一部分。
 date: 2024-09-10
 ---
 
 ## 前言
 > 游戏体验地址：http://www.jiajialove.com/war-of-barriers/home
+>
 > 项目地址：https://github.com/jzllove9/war-of-barriers
 
 本来只想简单画一下游戏的模块拆分。但当开始写这篇博客的时候才发现其实想用最简单的语言讲清楚还真不是一件容易的事情。比如以下这几个问题：
@@ -36,7 +37,7 @@ date: 2024-09-10
 
 2. A* 算法
 A*是一种路径规划算法，它有较好的性能和准确度。在阅读本文时可以将其理解为一个黑盒的算法：输入一个二维数组 + 起始坐标 + 终点坐标，返回一个代表着路径的坐标数组，如下所示：
-![A*](https://github.com/jzllove9/Blog-jzl/assets/13548092/71eb0b97-a5dc-4b6d-9d6e-977ee0b9b8b6)
+![A*](https://cdn.z.wiki/autoupload/20240910/gaTl/1390X486/A*.png)
 
 > 两篇介绍 A* 算法的文章：
 英文 [《Introduction to the A* Algorithm》](https://www.redblobgames.com/pathfinding/a-star/introduction.html)
@@ -88,12 +89,12 @@ const bordCol = 2 * N - 1 // 17
  - ```Rect 类的初始化``` ：使用 Graphics 绘制一个方块，逻辑比较简单不再赘述。
 
  - ```Gap 类的初始化``` ：通过观察桌游本身可知，游戏中的 Gap 有三种类型：水平，垂直，无方向，如下所示：
-![gap](https://github.com/jzllove9/Blog-jzl/assets/13548092/51e1eb2f-016f-4a32-8ba7-6c39746d8eee)
+![gap](https://cdn.z.wiki/autoupload/20240910/wM43/2344X776/gap.png)
 
 > 需要注意的是，在初始化时我们需要根据 Gap 不同的类型来进行不同的绘制操作。
 
 - ```Board 类的初始化``` ：来看整体棋盘的布局：
-![gap1](https://github.com/jzllove9/Blog-jzl/assets/13548092/245aec65-fe53-4cb4-9416-6f2d0aa9ef2b)
+![gap1](https://cdn.z.wiki/autoupload/20240910/u37A/1498X614/gap1.png)
 
  可以看到，棋盘的绘制对象分部符合以下规律：
 

diff --git a/src/content/blog/fe/使用Pixi.js实现《围追堵截》桌游（三）.md b/src/content/blog/fe/使用Pixi.js实现《围追堵截》桌游（三）.md
@@ -1,6 +1,6 @@
 ---
 title: 使用Pixi.js实现《围追堵截》桌游（三）
-description: 本文将介绍《围追堵截》桌游的游戏规则，以及如何使用 Pixi.js 实现游戏的绘制。
+description: 本文将介绍《围追堵截》桌游的游戏规则，以及如何使用 Pixi.js 实现游戏的绘制，第三部分。
 date: 2024-09-10
 ---
 
@@ -26,20 +26,20 @@ game.init();
 
 这样我们就实现了从 game 到 UI 的通信
 
-![i3](https://github.com/jzllove9/Blog-jzl/assets/13548092/72e8b567-8b25-4252-afa7-861bb294b74f)
+![i3](https://cdn.z.wiki/autoupload/20240910/2wRW/1518X346/i3.png)
 
 **从 UI 到 Game**
 本项目直接在 UI 中调用了 Game 实例的方法，如果不希望两个模块耦合程度过高依旧可以采用发布 - 订阅的方式来实现。
 
-![i4](https://github.com/jzllove9/Blog-jzl/assets/13548092/67aa180e-db24-40d6-b68e-aa476ee538ef)
+![i4](https://cdn.z.wiki/autoupload/20240910/5thy/1438X318/i4.png)
 
 ---
 
 ## 用户与游戏对象的交互
 **初始化游戏对象交互**
 《围追堵截》这款桌游的操作只有两种：移动棋子和放置挡板。而在我们的游戏中，棋子移动的本质其实是点击棋盘上的 Rect 对象来告知棋子往哪里走。而挡板放置的本质是点击有方向的 Gap 对象（还记得我们有横向，纵向，无方向三种类型的 Gap 么）来告知 Block 类如何绘制挡板。
 
-![interactive1](https://github.com/jzllove9/Blog-jzl/assets/13548092/77692033-c9fc-4bef-a5f4-fd1de387753a)
+![interactive1](https://cdn.z.wiki/autoupload/20240910/Ed2p/1592X468/interactive1.png)
 
 下面给 Board 上所有的 Rect 和有方向的 Gap 添加交互事件：
 
@@ -190,7 +190,7 @@ async updatePlayerInfo() {
 
 1. 如果玩家剩余挡板不足则需要在 UI 上给予用户提示，这也是为什么代码实现中 game 实例要对外抛出一个事件 `block-remain-lack`  ：
 
-![interactive2](https://github.com/jzllove9/Blog-jzl/assets/13548092/f647ce84-874d-4436-871c-7b79bb195871)
+![interactive2](https://cdn.z.wiki/autoupload/20240910/6d6C/1454X954/interactive2.png)
 
 3. 由于只有阻挡墙的放置才可能会导致双方没有路径可以到达终点，所以只在 Gap 的交互中判断违规即可。
 4. 我们在需要移动的时候同时调用了 player 的 move 方法来进行移动。

diff --git a/src/content/blog/fe/使用Pixi.js实现《围追堵截》桌游（二）.md b/src/content/blog/fe/使用Pixi.js实现《围追堵截》桌游（二）.md
@@ -1,6 +1,6 @@
 ---
 title: 使用Pixi.js实现《围追堵截》桌游（二）
-description: 本文将介绍《围追堵截》桌游的游戏规则，以及如何使用 Pixi.js 实现游戏的绘制。
+description: 本文将介绍《围追堵截》桌游的游戏规则，以及如何使用 Pixi.js 实现游戏的绘制，第二部分。
 date: 2024-09-10
 ---
 
@@ -17,7 +17,7 @@ date: 2024-09-10
 > 思考一个问题：在我们的游戏内，棋盘除了绘制格子和缝隙之外，还承载着哪些信息？
 
 **首先**，棋盘上存在元素坐标信息，注意这里的坐标并不是元素的`实际坐标`，而是元素的`索引坐标`：
-![grid1](https://github.com/jzllove9/Blog-jzl/assets/13548092/0f2de0ab-2a68-4ee2-af00-539ae6c303ea)
+![grid1](https://cdn.z.wiki/autoupload/20240910/s7PY/1806X574/grid1.png)
 
 如上图所示，当在棋盘上指出一个索引坐标时可以获取该索引位置的实际元素。也就是说可以将棋盘看做一个二维数组，并用数组中不同大小的数值表示棋盘中的不同类型的元素，在本游戏中使用的数值与对象的对应关系如下：
 
@@ -28,7 +28,7 @@ date: 2024-09-10
 ```
 
 最终如图所示，一个 3*3 的棋盘会被抽象成如下的样子：
-![grid1](https://github.com/jzllove9/Blog-jzl/assets/13548092/85b3fc24-c93e-454f-8e3d-8df1a024013e)
+![grid1](https://cdn.z.wiki/autoupload/20240910/s7PY/1806X574/grid1.png)
 
 > 注意，一个 3 * 3 的棋盘，最终在实际绘制的时候是一个 5 * 5 的二维矩阵，原因请参考上一篇文章。
 
@@ -104,20 +104,20 @@ decreaseRemain() {
 **己方棋子可移动位置**: 根据游戏规则，己方棋子每回合移动步数为 1 格，而可移动的位置同时会受到棋盘边缘，挡板位置，对方棋子三个因素的影响，下面来逐步实现：
 
 第一步，需要知道棋子周围所有格子和缝隙的信息，如下图所示：
-![player1](https://github.com/jzllove9/Blog-jzl/assets/13548092/1b7a5691-d173-4155-8bdf-95bb468c38c6)
+![player1](https://cdn.z.wiki/autoupload/20240910/FR2f/1720X542/player1.png)
 
 需要注意的是一些边界值情况，例如当棋子处于棋盘边缘的时候只能获取到两个方向的信息
 
 第二步，根据上面收集到的格子和缝隙信息，根据缝隙里面是否已经存在阻挡墙，以确定对应的格子是否可以到达：
-![player2](https://github.com/jzllove9/Blog-jzl/assets/13548092/68e88358-786d-44a6-a06c-c75f670cc1fd)
+![player2](https://cdn.z.wiki/autoupload/20240910/sbKR/1412X534/player2.png)
 
 第三步，需要从当前棋子所有可行进的格子中判断是否和对方棋子所在格子存在交叉的情况，如果不存在，那么目前的结果就是我们的所有可行进方向了。而如果有交叉的情况，根据游戏规则可知，若对方棋子处于我们的行进路线上，则可以借助对方棋子进行 "跳跃"，所以当发生交叉的情况我们还需要进一步进行处理。
 
 第四步，先获取对方棋子所在位置周围所有的可行进格子，这一步除了需要排除掉己方玩家所在位置这一步操作外和获取己方棋子可行进格子时一模一样：
-![player3](https://github.com/jzllove9/Blog-jzl/assets/13548092/2cc120d7-88b4-4595-920a-b09c9198d7ee)
+![player3](https://cdn.z.wiki/autoupload/20240910/FuM8/1438X526/player3.png)
 
 第五步，根据游戏规则可知，借助对方棋子进行 "跳跃" 时，如果对方背后没有阻挡墙或没到达棋盘边界，则只可以落在对方背后的格子内，否则才可以落在对方两侧的位置：
-![player4](https://github.com/jzllove9/Blog-jzl/assets/13548092/31eee053-263d-4557-82d8-81811c6c7e76)
+![player4](https://cdn.z.wiki/autoupload/20240910/pZFr/1400X554/player4.png)
 
 我们根据己方棋子和对方棋子所在的方位，计算出“对方棋子背后”的方格是否存在于对方棋子可行进的格子内。
 
@@ -153,7 +153,7 @@ const backY = 2 * crossB.y - this.y
 - 挡板不允许互相交叠
 ```
 
-![block1](https://github.com/jzllove9/Blog-jzl/assets/13548092/d73afe6c-24da-47bd-b141-609a77142307)
+![block1](https://cdn.z.wiki/autoupload/20240910/H5SM/1910X522/block1.png)
 
 那么在挡板管理类中就应该对这些情况进行判断，如果判断条件不通过，则不允许进行挡板的绘制。
 

diff --git a/src/content/blog/fe/使用Pixi.js实现《围追堵截》桌游（四）.md b/src/content/blog/fe/使用Pixi.js实现《围追堵截》桌游（四）.md
@@ -1,6 +1,6 @@
 ---
 title: 使用Pixi.js实现《围追堵截》桌游（四）
-description: 本文将介绍《围追堵截》桌游的游戏规则，以及如何使用 Pixi.js 实现游戏的绘制。
+description: 本文将介绍《围追堵截》桌游的游戏规则，以及如何使用 Pixi.js 实现游戏的绘制，第四部分。
 date: 2024-09-10
 ---
 
@@ -18,7 +18,7 @@ date: 2024-09-10
 
 对玩家而言当前回合的操作分为两种：操作棋子进行移动和选择挡板进行阻挡。通过限制这两项能力来区分出当前是谁的回合，当然，也要将回合的变化通过发送事件通知 UI 从而体现在用户界面上。
 
-![t1](https://github.com/jzllove9/Blog-jzl/assets/13548092/3b0f5dd8-e8d0-41a3-89f8-4686532a985f)
+![t1](https://cdn.z.wiki/autoupload/20240910/QrIk/2424X1002/t1.png)
 
 下面我们来看下游戏回合切换的实现：