微信小游戏《找茬找汉字闯关王》源码赠送

微信搜索 找茬找汉字闯关王看效果！

作为一款结合 "汉字找茬 + 闯关" 的休闲微信小游戏，《找茬找汉字闯关王》的核心是文字对比检测 + 关卡流程 + 交互反馈，本文会拆解核心实现逻辑，提供可直接复用的代码片段，帮你快速理解这类文字找茬小游戏的开发思路。

一、核心玩法与技术选型

1. 核心玩法

玩家对比 "参考文字串" 和 "待找茬文字串"，找出其中不同的汉字（如 "小明去买水" vs "小鸣去买氺"），点击错误汉字完成找茬，达到正确率 / 完成关卡数即可通关。

2. 技术选型

• 开发环境：微信小游戏原生框架（Canvas 2D 渲染）
• 核心技术：JavaScript（逻辑）+ Canvas（绘制）+ 微信小游戏 API（触摸、关卡存储）
• 适配：自动适配手机竖屏，兼容主流机型

二、核心代码实现（关键模块）

1. 项目基础结构

├── game.js        // 游戏主逻辑（找茬检测、关卡、交互）
├── game.json      // 小游戏配置
├── images/        // 背景、按钮图片（可选）
└── levels/        // 关卡配置文件（JSON）

2. 关卡配置（levels/levelConfig.json）

提前定义各关卡的 "参考文字""错误文字""找茬位置"，方便扩展关卡：

{
  "level1": {
    "refText": "床前明月光，疑是地上霜",  // 正确文字
    "wrongText": "床前眀月光，疑是地上箱", // 含错误的文字
    "errorPos": [3, 9],                   // 错误汉字的索引（第4、第10个字符）
    "tips": "注意形近字哦～",
    "score": 10                          // 本关卡分值
  },
  "level2": {
    "refText": "举头望明月，低头思故乡",
    "wrongText": "举头望眀月，低頭思故香",
    "errorPos": [4, 6, 9],
    "tips": "注意繁体和形近字～",
    "score": 20
  }
}

3. 游戏主逻辑（game.js）

（1）初始化画布与全局变量

// 获取微信小游戏画布
const canvas = wx.createCanvas();
const ctx = canvas.getContext('2d');
const systemInfo = wx.getSystemInfoSync();
const WIDTH = systemInfo.windowWidth;  // 屏幕宽度
const HEIGHT = systemInfo.windowHeight; // 屏幕高度
canvas.width = WIDTH;
canvas.height = HEIGHT;

// 全局游戏状态
let gameState = {
  currentLevel: 1,        // 当前关卡
  score: 0,               // 总分数
  refText: "",            // 参考文字
  wrongText: "",          // 错误文字
  errorPos: [],           // 错误位置
  foundError: [],         // 已找到的错误
  isPass: false           // 是否通关
};

（2）绘制游戏界面（文字、按钮、分数）

// 绘制游戏界面（每帧刷新）
function drawGame() {
  // 清空画布
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  
  // 绘制背景（浅米色，模拟纸张质感）
  ctx.fillStyle = "#F5F5DC";
  ctx.fillRect(0, 0, WIDTH, HEIGHT);

  // 绘制参考文字（顶部）
  ctx.fillStyle = "#333";
  ctx.font = "24px 微软雅黑";
  ctx.textAlign = "center";
  ctx.fillText("参考文字：", WIDTH/2, 80);
  ctx.fillText(gameState.refText, WIDTH/2, 120);

  // 绘制待找茬文字（中间，点击区域）
  ctx.fillStyle = "#000";
  ctx.font = "28px 微软雅黑";
  ctx.fillText("找出不同的汉字：", WIDTH/2, 200);
  // 逐字绘制（方便点击检测）
  const textX = WIDTH/2 - gameState.wrongText.length * 15; // 文字居中
  for (let i = 0; i < gameState.wrongText.length; i++) {
    const charX = textX + i * 30;
    const charY = 250;
    // 已找到的错误标红，未找到的正常显示
    ctx.fillStyle = gameState.foundError.includes(i) ? "#FF0000" : "#000";
    ctx.fillText(gameState.wrongText[i], charX, charY);
    // 绘制点击区域（透明，用于检测）
    ctx.fillStyle = "rgba(0,0,0,0)";
    ctx.fillRect(charX - 10, charY - 20, 30, 40);
  }

  // 绘制分数和关卡
  ctx.fillStyle = "#666";
  ctx.font = "20px 微软雅黑";
  ctx.textAlign = "left";
  ctx.fillText(`关卡：${gameState.currentLevel}`, 20, 50);
  ctx.fillText(`分数：${gameState.score}`, 20, 80);

  // 绘制通关提示
  if (gameState.isPass) {
    ctx.fillStyle = "rgba(0,0,0,0.7)";
    ctx.fillRect(0, 0, WIDTH, HEIGHT);
    ctx.fillStyle = "#fff";
    ctx.font = "36px 微软雅黑";
    ctx.textAlign = "center";
    ctx.fillText("关卡通关！", WIDTH/2, HEIGHT/2);
    ctx.font = "24px 微软雅黑";
    ctx.fillText("点击屏幕进入下一关", WIDTH/2, HEIGHT/2 + 50);
  }
}

（3）核心：找茬检测（点击汉字判断是否错误）

// 加载当前关卡
function loadLevel(level) {
  const levelData = require('./levels/levelConfig.json')[`level${level}`];
  gameState.refText = levelData.refText;
  gameState.wrongText = levelData.wrongText;
  gameState.errorPos = levelData.errorPos;
  gameState.foundError = [];
  gameState.isPass = false;
  drawGame();
}

// 检测点击位置对应的汉字索引
function getClickCharIndex(touchX) {
  const textX = WIDTH/2 - gameState.wrongText.length * 15;
  for (let i = 0; i < gameState.wrongText.length; i++) {
    const charLeft = textX + i * 30 - 10;
    const charRight = textX + i * 30 + 20;
    if (touchX >= charLeft && touchX <= charRight) {
      return i;
    }
  }
  return -1; // 未点击到文字
}

// 处理触摸点击事件
function bindTouchEvent() {
  canvas.addEventListener('touchstart', (e) => {
    // 通关后点击进入下一关
    if (gameState.isPass) {
      gameState.currentLevel++;
      loadLevel(gameState.currentLevel);
      drawGame();
      return;
    }

    const touchX = e.touches[0].clientX;
    const charIndex = getClickCharIndex(touchX);
    
    // 未点击到文字，不处理
    if (charIndex === -1) return;
    
    // 判断是否是错误汉字
    if (gameState.errorPos.includes(charIndex) && !gameState.foundError.includes(charIndex)) {
      // 找到错误，标记并加分
      gameState.foundError.push(charIndex);
      gameState.score += 10;
      // 检测是否找完所有错误（通关）
      if (gameState.foundError.length === gameState.errorPos.length) {
        gameState.isPass = true;
      }
    } else if (!gameState.errorPos.includes(charIndex)) {
      // 点错了，扣分
      gameState.score = Math.max(0, gameState.score - 5);
    }
    drawGame();
  });
}

（4）游戏入口：初始化并启动

// 游戏初始化
function initGame() {
  loadLevel(1); // 加载第一关
  bindTouchEvent(); // 绑定点击事件
  // 游戏主循环
  function gameLoop() {
    drawGame();
    requestAnimationFrame(gameLoop);
  }
  gameLoop();
}

// 启动游戏
initGame();

4. 小游戏配置（game.json）

   {
   "deviceOrientation": "portrait",
   "showStatusBar": false,
   "networkTimeout": {
   "request": 5000
   },
   "lazyCodeLoading": "requiredComponents"
   }

三、核心逻辑解析

1. 找茬核心原理

通过索引对比实现：提前定义错误汉字在字符串中的索引位置，玩家点击后获取对应索引，判断是否在错误索引列表中，核心是 "位置匹配" 而非文字语义识别（降低开发复杂度）。

2. 交互反馈设计

• 找对错误：汉字标红 + 加分（+10）；
• 找错：扣分（-5，最低 0 分）；
• 通关：遮罩提示 + 点击进入下一关；

3. 关卡扩展

只需在levelConfig.json中新增关卡配置，无需修改核心逻辑，支持无限扩展关卡。

四、优化与扩展建议

1. 体验优化

• 加入音效：点击正确 / 错误、通关时播放对应音效（微信小游戏wx.createInnerAudioContext()）；
• 动画效果：错误汉字点击后添加缩放 / 抖动动画；
• 提示功能：每关可提示 1 次错误位置（扣少量分数）；

2. 玩法扩展

• 增加 "找梗" 玩法：替换文字为网络热梗图片，找图片中的梗点；
• 融合消消乐：找到错误汉字后可消除，累计消除数通关；
• 难度升级：后期关卡增加错误数量、缩短答题时间；

3. 性能优化

• 缓存关卡数据：避免重复读取 JSON 文件；
• 减少 Canvas 重绘：仅在交互后刷新，而非每帧全量绘制。

五、部署与测试

1. 打开微信开发者工具，创建 "小游戏" 项目，填入 AppID；
2. 将上述代码放入对应文件，保存后点击 "编译"；
3. 模拟器中测试找茬、关卡切换功能，真机调试适配；
4. 提交审核后即可上线微信小游戏平台。

总结

《找茬找汉字闯关王》的核心是 **"文字索引匹配 + Canvas 交互绘制"**，以上代码实现了游戏的核心玩法，只需简单扩展即可适配 "找茬、找梗、消消乐" 等衍生玩法。该方案轻量化、易扩展，适合休闲小游戏的快速开发与上线，也是微信小游戏入门的经典练手案例。