docs: update

src/content/blog/fe/了解 ora.md

@@ -20,7 +20,7 @@ date: 2024-09-09
 
 ### 基本使用
 
-```
+```javascript
 import ora from 'ora'
 
 // 或者使用 Promise
@@ -45,7 +45,7 @@ await oraPromise(new Promise((resolve, reject) => {
 
 TTY 原本是指 “Teletypewriter（电传打字机）”，它是一种早期的电信设备。随着时间的推移，TTY 在计算机科学中演变为一个泛指通常指代一种文本终端。文本终端是一个用户可以用来输入命令和查看输出的设备或软件环境。
 
-```
+```javascript
 - 现代意义上的 TTY 有以下几个主要特点：
 - 文本模式：TTY 只支持纯文本的输入和输出，没有图形界面。所有的交互都是通过字符和控制字符来进行的。
 - 流式输入输出：TTY 设备以流的方式处理输入和输出，这意味着数据是按顺序处理的。用户输入数据流，终端处理并输出结果。
@@ -77,7 +77,7 @@ ANSI 标准终端转义序列：https://gist.github.com/fnky/458719343aabd01cfb1
 
 ### 依赖库
 
-```
+```javascript
 // 隐藏/恢复终端输入光标
 cli-cursor: https://github.com/sindresorhus/cli-cursor
 // 提供loading集合
@@ -99,7 +99,7 @@ stdin-discarder: https://github.com/sindresorhus/stdin-discarder
 ### 导出变量
 > 一句话总结 ：各种样式的 spnnier 集合
 
-```
+```javascript
 export { default as spinners } from 'cli-spinners'
 ```
 见 https://github.com/sindresorhus/cli-spinners/blob/main/spinners.json
@@ -115,7 +115,7 @@ export { default as spinners } from 'cli-spinners'
 
 再来回顾一下 ora.js 的基本用法：
 
-```
+```javascript
 const spinner = ora('Loading unicorns').start();
 
 // or

src/content/blog/fe/使用Pixi.js实现《围追堵截》桌游（一）.md

@@ -11,7 +11,7 @@ date: 2024-09-10
 
 本来只想简单画一下游戏的模块拆分。但当开始写这篇博客的时候才发现其实想用最简单的语言讲清楚还真不是一件容易的事情。比如以下这几个问题：
 
-```
+```javascript
 - 如何进行技术选型？
 - 如何拆分游戏规则？
 - 如何实现游戏交互？
@@ -49,32 +49,32 @@ https://github.com/prettymuchbryce/easystarjs
 ## 游戏绘制对象分析与实现
 
 **首先**，在正式开发前，先分析下《围追堵截》这款桌游本身。整个桌游由以下部分组成：
-```
+```javascript
 棋子 * 2（也有 4 个棋子的模式，本文不考虑该情况）
 棋盘 * 1
 阻挡墙 * 20
 ```
 
 在项目中，我们针对这几个组成部分，创建出对应的绘制对象类：
-```
+```javascript
 棋子绘制类： Role
 棋盘绘制类： Board
 阻挡墙绘制类： Block
 ```
 
 **其次**，我们还需要一个整体的类来管理游戏对象的初始化，回合切换，对界面暴露事件和方法等，所以再创建一个游戏类：
-```
+```javascript
 游戏类： Game
 ```
 
 另外，我们知道围追堵截这个桌游是一个 9 * 9 的棋盘，但其实在游戏过程中不仅格子本身可以交互（移动角色），格子之间的缝隙也是可以交互的（放挡板），这就说明缝隙在棋盘中也是一个可交互对象（即绘制对象）。所以我们需要为他们分别创建绘制类，并取名为 Rect 和 Gap。
 
-```
+```javascript
 棋盘格绘制类： Rect
 缝隙绘制类： Gap
 ```
 需要注意的是，由于缝隙作为绘制对象的加入，每行每列变为 9 个格子 + 8 个缝隙，原本的 9 * 9 棋盘的实际数量为 17 * 17：
-```
+```javascript
 const N = 9
 const bordRow = 2 * N - 1 // 17
 const bordCol = 2 * N - 1 // 17
@@ -98,7 +98,7 @@ const bordCol = 2 * N - 1 // 17
 
  可以看到，棋盘的绘制对象分部符合以下规律：
 
-```
+```javascript
  - 偶数行：
     - 偶数列：棋盘格子
     - 奇数列：缝隙（纵向）
@@ -111,7 +111,7 @@ const bordCol = 2 * N - 1 // 17
 
 - ```Game 类的初始化``` ：在 Game 的初始化函数中实例化上述所有的绘制类，当然别忘了要初始化符合游戏本身要求的实例数量：
 
-```
+```javascript
 棋子绘制实例 * 2 -> role1，role2
 棋盘绘制实例 * 1 -> board（由多个 rect 实例 + 多个 gap 实例组成）
 阻挡墙绘制实例 * 1 -> block （一个绘制实例就可以绘制所有后续游戏逻辑中产生的阻挡墙，所以这里仅需要一个实例即可）

src/content/blog/fe/使用Pixi.js实现《围追堵截》桌游（二）.md

@@ -21,7 +21,7 @@ date: 2024-09-10
 
 如上图所示，当在棋盘上指出一个索引坐标时可以获取该索引位置的实际元素。也就是说可以将棋盘看做一个二维数组，并用数组中不同大小的数值表示棋盘中的不同类型的元素，在本游戏中使用的数值与对象的对应关系如下：
 
-```
+```javascript
 方格：1（低代价）
 缝隙：2（高代价）
 挡板：0（不可通行）
@@ -46,7 +46,7 @@ date: 2024-09-10
 
 我们来试着总结一下：
 
-```
+```javascript
 
 - 是否满足获胜条件了？
 - 当前是自己的回合吗？
@@ -66,7 +66,7 @@ date: 2024-09-10
 
 **是否已经获胜**：根据游戏规则，到达对手出发时所在行即获胜。如果使用游戏内的索引坐标来描述这条规则，就是当前角色索引坐标的 y 值是否等于对手出发时所在行的 y 值。根据这个描述，我们在初始化时角色管理类实例的时候，可以将该目标值作为预设条件设置到实例里面，并在每回合结束的时候通过该值进行判断：
 
-```
+```javascript
 // constructor()
  this.targetY = targetY;
 
@@ -80,14 +80,14 @@ date: 2024-09-10
 
 本游戏中使用棋子的可移动位置闪烁来提示用户当前是哪位玩家的回合，同时对界面 UI 也会进行限制。
 
-```
+```javascript
 toggleSelected(isOpen) {
     // 控制棋子的绘制对象动画，例如闪烁动画，改变颜色等；启用/禁用棋子的交互事件，从而达到回合制的目的
 }
 ```
 
 **己方挡板剩余数量**：在每个角色管理实例中初始化一个挡板管理实例，这个实例对外暴露两个方法：检查当前剩余挡板数量方法，以及减少一个挡板方法。同时初始化的时候给予每位玩家 10 块挡板。
-```
+```javascript
 remain = MaxBlocksNum;
 
 checkRemain() {
@@ -121,7 +121,7 @@ decreaseRemain() {
 
 我们根据己方棋子和对方棋子所在的方位，计算出“对方棋子背后”的方格是否存在于对方棋子可行进的格子内。
 
-```
+```javascript
 /**
  * 获取对手棋子背后的格子
  * const deltaX = crossB.x - this.x;
@@ -147,7 +147,7 @@ const backY = 2 * crossB.y - this.y
 
 在现实世界中玩《围追堵截》桌游的时候挡板的位置是不可以随意摆放的，比如以下几种情况不允许出现：
 
-```
+```javascript
 -挡板不能超出边界
 - 挡板必须正好挡住两个方格
 - 挡板不允许互相交叠
@@ -159,7 +159,7 @@ const backY = 2 * crossB.y - this.y
 
 **挡板不能超出边界**，对于这个问题可以通过对于输入的绘制起始坐标以及挡板类型进行判断，如果其超出了允许绘制的边界，我们可以将允许绘制的边界坐标返回，从而避免挡板超出棋盘范围
 
-```
+```javascript
 /**
  * 获取真正的绘制起点信息
  * @param {*} indexX
@@ -182,7 +182,7 @@ else {
 
 **挡板不允许互相交叠**，可以计算当前挡板绘制后会影响哪些索引坐标，判断所影响的索引坐标中是否已经被绘制了挡板，如果已经绘制则不允许再次绘制就可以避免出现交叠的情况。
 
-```
+```javascript
 info.effectGaps = this.getEffectGaps(info.x, info.y, direct);
 info.isHitWithExistBlocks = this.getHitWithExistBlocks(info.effectGaps);