ByteFisher

Hexo博客集成抖音视频实战指南

发表于 2026-04-03 分类于 Hexo博客搭建阅读次数： Valine：

前言

作为一名钓鱼爱好者，我在抖音分享了许多钓鱼视频。为了让博客访问者能够直观地浏览我的抖音作品，决定在Hexo博客中集成抖音视频相册功能。

本文将详细介绍整个实现过程，从数据配置到页面展示，再到进阶优化，帮助你快速在博客中实现类似功能。

阅读全文 »

Hexo 博客实战：扫雷小游戏开发指南

发表于 2026-03-31 分类于编程，游戏开发阅读次数： Valine：

前言

继俄罗斯方块之后，本文讲解扫雷游戏的开发。扫雷是 Windows 系统经典的益智小游戏，核心玩法是揭开格子找出所有安全区域，同时避免触雷。

相比俄罗斯方块，扫雷更侧重于逻辑推理和策略标记，需要实现数字计算、递归扩散、旗标标记等功能。

项目结构

游戏放置在 source/ai-games/minesweeper/ 目录下，文件结构如下：

1
2
3

source/ai-games/minesweeper/
├── index.md              # 游戏页面（HTML + 样式）
└── minesweeper-game.js   # 游戏核心逻辑（约570行）

游戏页面实现

顶部状态栏

扫雷游戏采用经典的三段式状态栏设计：

<div class="game-header">
    <div class="game-display">
        <span id="score">10</span>   <!-- 剩余地雷数 -->
    </div>
    <button id="face-btn">😀</button>  <!-- 笑脸按钮 -->
    <div class="game-display">
        <span id="timer">000</span>   <!-- 计时器 -->
    </div>
</div>

剩余地雷数：初始为地雷总数，每插一面旗减1
笑脸按钮：点击重新开始游戏，不同状态显示不同表情
计时器：从第一次点击开始计时，秒数递增

难度选择

const DIFFICULTY = {
    easy: { cols: 9, rows: 9, mines: 10 },      // 简单
    normal: { cols: 16, rows: 16, mines: 40 },   // 普通
    hard: { cols: 30, rows: 16, mines: 99 }     // 困难
};

三种难度满足不同水平玩家的需求。

核心逻辑实现

游戏状态管理

let board = [];           // 存储地雷和数字
let revealed = [];        // 记录格子是否已揭开
let flagged = [];         // 记录格子是否已插旗
let minePos = [];         // 存储所有地雷位置
let firstClick = true;   // 是否第一次点击
let gameOver = false;    // 游戏是否结束
let win = false;         // 是否胜利
let mineCount = MINES;   // 剩余地雷数
let revealCount = 0;     // 已揭开格子数

board 中：-1 表示地雷，0-8 表示周围地雷数量。

初始化棋盘

function initBoard() {
    for (let y = 0; y < ROWS; y++) {
        board[y] = [];
        revealed[y] = [];
        flagged[y] = [];
        for (let x = 0; x < COLS; x++) {
            board[y][x] = 0;
            revealed[y][x] = false;
            flagged[y][x] = false;
        }
    }
}

阅读全文 »

Hexo 博客实战：俄罗斯方块小游戏开发指南

发表于 2026-03-27 分类于编程，游戏开发阅读次数： Valine：

前言

继上一篇文章介绍贪吃蛇小游戏的实现方案后，本文继续讲解俄罗斯方块游戏的开发。相比贪吃蛇，俄罗斯方块的实现更加复杂，涉及方块旋转、多行消除、速度递增等机制。

通过这个案例，可以学习到如何用原生 JavaScript 实现经典的方块下落消除游戏。

项目结构

游戏放置在 source/ai-games/tetris/ 目录下，文件结构如下：

1
2
3

source/ai-games/tetris/
├── index.md          # 游戏页面（HTML + 样式）
└── tetris-game.js    # 游戏核心逻辑（约394行）

与贪吃蛇相同的独立目录结构，便于管理和扩展更多游戏。

游戏页面实现

Canvas 画布

1	<canvas id="game-canvas" width="240" height="400"></canvas>

俄罗斯方块采用 12×20 网格，每个格子 20px，宽度较窄以适应竖屏布局。

样式设计

canvas {
    border: 2px solid #2196F3;
    border-radius: 8px;
    background: #111;
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.3);
    touch-action: none;
}

使用蓝色主题（#2196F3）与贪吃蛇的绿色区分开。

核心逻辑实现

方块形状定义

游戏包含 7 种经典方块形状，用矩阵和颜色表示：

const SHAPES = {
    I: { matrix: [[1,1,1,1]], color: '#00f5ff' },  // 青色长条
    O: { matrix: [[1,1],[1,1]], color: '#ffeb3b' }, // 黄色方块
    T: { matrix: [[0,1,0],[1,1,1]], color: '#bf5af2' }, // 紫色T形
    S: { matrix: [[0,1,1],[1,1,0]], color: '#30d158' }, // 绿色S形
    Z: { matrix: [[1,1,0],[0,1,1]], color: '#ff375f' }, // 红色Z形
    J: { matrix: [[1,0,0],[1,1,1]], color: '#0a84ff' }, // 蓝色J形
    L: { matrix: [[0,0,1],[1,1,1]], color: '#ff9f0a' }  // 橙色L形
};
const SHAPE_KEYS = ['I', 'O', 'T', 'S', 'Z', 'J', 'L'];

每种方块用 0/1 矩阵表示形状，1 表示方块存在的位置。

游戏状态管理

let board = [];           // 12×20 游戏板，存储已落方块颜色
let currentPiece = null; // 当前下落的方块
let currentX = 0;         // 当前方块X坐标
let currentY = 0;        // 当前方块Y坐标
let score = 0;            // 得分
let dropInterval = 800;   // 下落间隔（毫秒）

board 是二维数组，存储已固定在底部的方块颜色，空位为 0。

随机生成方块

function randomPiece() {
    const key = SHAPE_KEYS[Math.floor(Math.random() * SHAPE_KEYS.length)];
    const shape = SHAPES[key];
    return {
        matrix: shape.matrix.map(row => [...row]),  // 深拷贝矩阵
        color: shape.color
    };
}

使用 map(row => [...row]) 实现矩阵的深拷贝，避免修改原始形状定义。

碰撞检测

function checkCollision(matrix, x, y) {
    for (let r = 0; r < matrix.length; r++) {
        for (let c = 0; c < matrix[r].length; c++) {
            if (matrix[r][c]) {
                const newX = x + c;
                const newY = y + r;
                // 边界检测
                if (newX < 0 || newX >= COLS || newY >= ROWS) return true;
                // 与已落方块碰撞检测
                if (newY >= 0 && board[newY][newX]) return true;
            }
        }
    }
    return false;
}

遍历方块的每个单元格，检查是否越界或与已落方块重叠。

阅读全文 »

Hexo 博客实战：贪吃蛇小游戏开发指南

发表于 2026-03-27 分类于编程，游戏开发阅读次数： Valine：

前言

在静态博客中嵌入 JavaScript 小游戏是一种提升用户体验的好方法。之前用 Lua 为 Unity 实现过多种小游戏，现在尝试将经典的贪吃蛇游戏移植到 Hexo 博客中。

本文将详细介绍如何在 Hexo 博客中实现一个可玩的贪吃蛇小游戏，包括游戏页面搭建、核心逻辑实现以及移动端适配。

项目结构

游戏放置在 source/ai-games/snake/ 目录下，文件结构如下：

1
2
3

source/ai-games/snake/
├── index.md          # 游戏页面（HTML + 样式）
└── snake-game.js     # 游戏核心逻辑

这种独立目录的方式便于管理，每个游戏都有自己完整的资源。

游戏页面实现

游戏页面使用 Hexo 的标签来嵌入原始 HTML 代码，这样可以避免 Hexo 对 HTML 标签进行转义。

Canvas 画布

1	<canvas id="game-canvas" width="400" height="400"></canvas>

游戏采用 20×20 网格，每个格子 20px，整体画布大小为 400×400 像素。

样式设计

canvas {
    border: 2px solid #4CAF50;
    border-radius: 8px;
    background: #111;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
    touch-action: none;
}

暗色系背景配合绿色边框，营造游戏氛围。touch-action: none 用于禁止移动端默认触摸行为，避免游戏时页面滚动。

核心逻辑实现

游戏逻辑全部封装在 snake-game.js 文件中，共约 309 行代码。

全局初始化函数

window.initSnakeGame = function() {
    // 获取 DOM 元素
    const canvas = document.getElementById('game-canvas');
    const ctx = canvas.getContext('2d');
    // ... 初始化逻辑
};

将游戏初始化函数挂载到 window 对象上，便于 PJAX 页面切换后重新调用。

游戏配置

const gridSize = 20;      // 20x20 网格
const cellSize = 20;      // 每个格子 20px
let snake = [
    {x: 10, y: 10},
    {x: 9, y: 10},
    {x: 8, y: 10}
];
let direction = 'RIGHT';
let nextDirection = 'RIGHT';

蛇身使用数组存储，每个元素表示蛇的一节坐标。direction 和 nextDirection 分离的设计可以防止连续快速按键导致蛇身掉头自杀。

蛇的移动

function move() {
    // 应用下次方向（防止掉头）
    const opposite = { 'UP': 'DOWN', 'DOWN': 'UP', 'LEFT': 'RIGHT', 'RIGHT': 'LEFT' };
    if (nextDirection && opposite[nextDirection] !== direction) {
        direction = nextDirection;
    }

    const head = snake[0];
    let newHead = { ...head };
    switch (direction) {
        case 'RIGHT': newHead.x++; break;
        case 'LEFT':  newHead.x--; break;
        case 'UP':    newHead.y--; break;
        case 'DOWN':  newHead.y++; break;
    }

    // 判断是否吃到食物
    const isEating = food && newHead.x === food.x && newHead.y === food.y;
    let newSnake = [newHead, ...snake];
    if (!isEating) newSnake.pop();  // 没吃到则移除尾部

    snake = newSnake;
}

核心思路：

每次移动在头部添加新方块
吃到食物时不移除尾部，蛇身变长
未吃到食物时移除尾部，保持蛇身长度不变

碰撞检测

// 边界碰撞
if (newHead.x < 0 || newHead.x >= gridSize || 
    newHead.y < 0 || newHead.y >= gridSize) {
    gameOver = true;
    return;
}

// 自身碰撞
if (newSnake.slice(1).some(seg => seg.x === newHead.x && seg.y === newHead.y)) {
    gameOver = true;
    return;
}

食物生成

function randomFood() {
    for (let i = 0; i < 1000; i++) {
        const x = Math.floor(Math.random() * gridSize);
        const y = Math.floor(Math.random() * gridSize);
        // 避开蛇身
        if (!snake.some(seg => seg.x === x && seg.y === y)) {
            return {x, y};
        }
    }
    return null;
}

使用循环尝试生成随机位置，直到找到不与蛇身重叠的位置。

绘制系统

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制网格线
    for (let i = 0; i <= gridSize; i++) {
        // ... 绘制横竖线
    }

    // 绘制蛇身
    snake.forEach((seg, idx) => {
        ctx.fillStyle = idx === 0 ? '#8bc34a' : '#4CAF50';
        ctx.fillRect(seg.x * cellSize + 1, seg.y * cellSize + 1, 
                     cellSize - 2, cellSize - 2);
        // 蛇眼睛
        if (idx === 0) {
            // ... 绘制眼睛
        }
    });

    // 绘制食物
    if (food) {
        ctx.fillStyle = '#f44336';
        ctx.beginPath();
        ctx.arc(food.x * cellSize + cellSize / 2, 
                food.y * cellSize + cellSize / 2, 8, 0, 2 * Math.PI);
        ctx.fill();
    }
}

绘制顺序：清空画布 → 网格线 → 蛇身 → 食物 → 游戏结束遮罩。

阅读全文 »

VSCode 中搭建 OpenCode AI 编程助手完整指南

发表于 2026-03-24 更新于 2026-03-26 分类于 IT ， AI 阅读次数： Valine：

在 AI 编程工具蓬勃发展的今天，开源免费的 OpenCode 凭借其强大的功能和灵活的扩展性，已经成为超过 500 万开发者的首选。作为一个拥有 12 万 + GitHub Stars 的开源项目，OpenCode 提供了终端、桌面应用和 IDE 多种使用方式。本文将详细介绍如何在 VSCode 中搭建和使用 OpenCode，帮助你快速上手这款强大的 AI 编程助手。

阅读全文 »

Ollama + DeepSeek-Coder-V2 + Visual Studio + Copilot(插件)打造高效率的“本地 AI 程序员”

发表于 2026-03-10 更新于 2026-03-12 分类于 C# ， Unity3D ， IT 阅读次数： Valine：

针对 Visual Studio 2022 用户，要打造一个高效率的“本地 AI 程序员”，关键在于选择一款能与 VS 2022 深度集成、且支持连接本地模型（如 Ollama）的插件。目前最高效的方案是使用 Visual Studio 的插件 Copilot (第三方开源版，非官方) 配合 Ollama。

以下是部署全流程：

方案架构

- 核心引擎: Ollama。负责在本地运行 DeepSeek 模型。

- 模型选择: DeepSeek-Coder-V2:16b。这是目前代码能力极强且适合本地部署的专用模型（如果显存不足，可退而求其次选择 deepseek-coder:6.7b）。

- IDE 插件: Visual Copilot (在 VS 扩展市场中搜索)。这是一个开源免费插件，能够将 Ollama 接入 VS 2022，提供代码补全和聊天功能。

详细部署步骤

- 第一步：配置本地模型引擎 (Ollama)

下载安装： 访问 Ollama 官网下载并安装 Windows 版本。

拉取专用代码模型： 打开命令行（PowerShell 或 CMD），输入以下命令下载 DeepSeek 的代码模型：

ollama run deepseek-coder-v2:16b

注：如果您的显卡显存小于 12GB，建议使用 ollama run deepseek-coder:6.7b 以保证速度。

验证运行： 安装完成后，确保 Ollama 在托盘区运行，且在浏览器访问 http://localhost:11434 能看到 “Ollama is running” 字样。

- 第二步：安装并配置 Visual Studio 2022 插件

Visual Studio 2022 原生集成了 GitHub Copilot，但它无法连接本地 Ollama（除非使用代理转发，非常麻烦）。我们需要安装支持 OpenAI 兼容接口的第三方插件。

打开扩展管理器： 在 Visual Studio 2022 中，点击顶部菜单栏的扩展 -> 管理扩展。

搜索插件： 在搜索框中输入 “Visual Copilot” （或者搜索 “CodeGPT” ，两者皆可，这里以 Visual Copilot 为例，因为它对 OpenAI 兼容性很好）。

安装： 点击下载，安装完成后重启 VS 2022。

- 第三步：连接插件与 Ollama

重启后，我们需要告诉插件去哪里找本地模型：

打开设置： 在 VS 菜单栏找到新出现的 Visual Copilot 图标或菜单项，选择 Settings / Options。

配置 API 地址：

找到 Api Base (或 Endpoint) 一栏。

填入：http://localhost:11434/v1

注意：必须加上 /v1，这是为了兼容 OpenAI 的协议格式。

配置密钥 (API Key)：

找到 Api Key 一栏。

填入：ollama (或者随便填几个字符，本地模式下 Ollama 不验证 Key，但这栏通常不能为空)。

配置模型名称：

阅读全文 »