微信小游戏《找茬找汉字闯关王》开发实战：送全部源码

微信搜索《找茬找汉字闯关王》即可看全部关卡效果!

休闲类文字找茬小游戏凭借轻量化，成为微信小游戏赛道的热门方向。本文以《找茬找汉字闯关王》为例，拆解 "汉字找茬 + 闯关 + 轻度消消乐融合" 的完整开发逻辑，提供可直接复用的代码和上线建议，零基础也能快速落地。

一、游戏核心定位与技术框架

1. 核心玩法设计

区别于传统图片找茬，《找茬找汉字闯关王》聚焦 "文字差异化检测"，核心玩法：

基础模式：对比两行汉字串，点击不同汉字（形近字 / 错字 / 漏字）完成找茬；
进阶模式：融合消消乐逻辑，找到错误汉字后可消除，累计消除数达标通关；
闯关机制：每关递增难度（错误数增加、文字长度变长、加入谐音梗 / 网络热梗）。

2. 技术选型（轻量化适配微信生态）

表格

模块	技术 / 工具	优势
渲染层	Canvas 2D（微信小游戏原生）	轻量、适配移动端、绘制效率高
逻辑层	JavaScript	适配微信小游戏环境、开发成本低
资源管理	本地 JSON（关卡配置）	无需服务器、加载速度快
交互适配	微信小游戏触摸 API	兼容手机端点击 / 滑动操作

二、核心代码实现（模块化拆解）

项目结构（极简可扩展）

├── game.js // 主逻辑（找茬检测、关卡、交互）
├── game.json // 小游戏全局配置
├── res/ // 资源文件夹（音效/背景图，可选）
└── config/
└── level.json // 关卡配置文件（核心）

2. 关卡配置（config/level.json）

采用 JSON 解耦关卡数据，新增关卡无需修改核心逻辑，支持 "找茬 + 消消乐" 双模式配置：

复制代码

{
  "level1": {
    "type": "base", // 基础找茬模式
    "refText": "人生若只如初见，何事秋风悲画扇", // 正确文字
    "targetText": "人生若只如初见，何事秋风悲画翄", // 含错误的文字
    "errorIndex": [13], // 错误汉字索引（第14个字符）
    "score": 10, // 单关分值
    "tips": "提示：注意形近字哦～"
  },
  "level2": {
    "type": "eliminate", // 消消乐融合模式
    "refText": "春有百花秋有月，夏有凉风冬有雪",
    "targetText": "春有百芲秋有月，夏有凉风冬有膤",
    "errorIndex": [4, 14],
    "eliminateCount": 2, // 需消除的错误数
    "score": 20,
    "tips": "找到错误汉字并消除，即可通关！"
  }
}

3. 主逻辑实现（game.js）

（1）初始化全局状态与画布

复制代码

// 获取微信小游戏画布与系统信息
const canvas = wx.createCanvas();
const ctx = canvas.getContext('2d');
const sysInfo = wx.getSystemInfoSync();
const CANVAS_WIDTH = sysInfo.windowWidth;
const CANVAS_HEIGHT = sysInfo.windowHeight;
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;

// 全局游戏状态（统一管理）
const gameData = {
  currentLevel: 1,       // 当前关卡
  totalScore: 0,         // 总分数
  levelData: {},         // 当前关卡数据
  foundErrors: [],       // 已找到的错误索引
  isLevelPass: false,    // 本关是否通关
  gameMode: ""           // 当前玩法模式（base/eliminate）
};

（2）核心绘制函数（适配不同玩法模式）

复制代码

/**
 * 绘制游戏界面（按需渲染，减少性能消耗）
 */
function renderGame() {
  // 1. 清空画布
  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  
  // 2. 绘制背景（浅米色模拟纸张质感）
  ctx.fillStyle = "#F8F5E6";
  ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

  // 3. 绘制顶部信息栏
  drawInfoBar();

  // 4. 绘制文字区域（区分参考文字和待找茬文字）
  drawTextArea();

  // 5. 绘制通关提示（通关后显示）
  if (gameData.isLevelPass) {
    drawPassTip();
  }
}

/**
 * 绘制信息栏（关卡/分数/提示）
 */
function drawInfoBar() {
  // 关卡&分数
  ctx.fillStyle = "#333";
  ctx.font = "22px 微软雅黑";
  ctx.textAlign = "left";
  ctx.fillText(`关卡：${gameData.currentLevel}`, 20, 40);
  ctx.fillText(`总分：${gameData.totalScore}`, 20, 70);
  
  // 提示文字
  ctx.fillStyle = "#666";
  ctx.font = "18px 微软雅黑";
  ctx.textAlign = "right";
  ctx.fillText(gameData.levelData.tips || "", CANVAS_WIDTH - 20, 55);
}

/**
 * 绘制文字区域（核心：逐字绘制，支持点击检测）
 */
function drawTextArea() {
  const refText = gameData.levelData.refText;
  const targetText = gameData.levelData.targetText;
  const textY1 = CANVAS_HEIGHT / 2 - 60; // 参考文字Y坐标
  const textY2 = CANVAS_HEIGHT / 2 + 20; // 待找茬文字Y坐标
  const charWidth = 30; // 单个汉字宽度
  const startX = (CANVAS_WIDTH - refText.length * charWidth) / 2; // 文字居中

  // 绘制参考文字（灰色，不可点击）
  ctx.fillStyle = "#999";
  ctx.font = "28px 微软雅黑";
  ctx.textAlign = "center";
  for (let i = 0; i < refText.length; i++) {
    ctx.fillText(refText[i], startX + i * charWidth, textY1);
  }

  // 绘制待找茬文字（可点击，错误字标红/消除效果）
  for (let i = 0; i < targetText.length; i++) {
    const charX = startX + i * charWidth;
    // 已找到的错误字：消消乐模式画消除框，基础模式标红
    if (gameData.foundErrors.includes(i)) {
      if (gameData.gameMode === "eliminate") {
        // 消除效果：绘制圆形消除框
        ctx.strokeStyle = "#FF4444";
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.arc(charX, textY2, 18, 0, Math.PI * 2);
        ctx.stroke();
      }
      ctx.fillStyle = "#FF4444";
    } else {
      ctx.fillStyle = "#000";
    }
    ctx.fillText(targetText[i], charX, textY2);
  }
}

/**
 * 绘制通关提示
 */
function drawPassTip() {
  // 半透明遮罩
  ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
  ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  
  // 通关文字
  ctx.fillStyle = "#FFFFFF";
  ctx.font = "36px 微软雅黑";
  ctx.textAlign = "center";
  ctx.fillText(`第${gameData.currentLevel}关通关！`, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 30);
  
  ctx.font = "24px 微软雅黑";
  ctx.fillText("点击屏幕进入下一关", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 20);
}

（3）找茬 + 消消乐核心逻辑（点击检测）

复制代码

/**
 * 加载指定关卡
 * @param {number} level - 关卡数
 */
function loadLevel(level) {
  // 读取关卡配置（实际开发可做缓存优化）
  const levelConfig = require('./config/level.json')[`level${level}`];
  if (!levelConfig) {
    wx.showToast({ title: "暂无更多关卡", icon: "none" });
    return;
  }
  
  // 更新全局状态
  gameData.levelData = levelConfig;
  gameData.gameMode = levelConfig.type;
  gameData.foundErrors = [];
  gameData.isLevelPass = false;
  
  // 首次渲染
  renderGame();
}

/**
 * 检测点击位置对应的汉字索引
 * @param {number} touchX - 点击X坐标
 * @returns {number} 汉字索引（-1表示未点击到）
 */