当前位置：首页 > news >正文

Cocos Creator 实现汉字找茬小游戏（完整源码可直接上线）

news 2026/5/2 20:46:58

先看效果：找茬找汉字闯关王点击或者搜索即可体验

前言

汉字找茬是目前微信小程序流量极高的益智休闲小游戏，玩法简单、受众极广，男女老少都能玩，审核通过率高，非常适合个人开发者换皮上线、流量变现。

市面上大部分找茬教程都是图片找茬，同质化严重。本文基于Cocos Creator 3.x从零开发一款汉字找茬小游戏，区别于传统图片找茬，通过细微字形差异做关卡，纯代码手写、无复杂架构、无第三方插件，源码完整可直接运行、打包上线。

整篇教程通俗易懂，新手零基础也能复刻，完整实现关卡切换、正误判定、计时扣分、分数统计、游戏结束重玩全套功能。

一、游戏玩法介绍

本次实现汉字找茬核心玩法，贴合市面爆款小游戏逻辑：

每一关展示两个高度相似的汉字，存在一处笔画差异
玩家点击不同的笔画位置即可通关加分
每局游戏限制倒计时，超时判定闯关失败
点击错误位置扣除次数，累计3次错误直接游戏结束
支持多关卡循环切换、分数统计、重新游玩功能
点击正确播放成功动画、错误弹出提示，交互反馈完善

二、项目搭建

引擎版本：Cocos Creator 3.8+

开发语言：TypeScript

项目类型：2D 益智休闲小游戏

基础场景结构，极简无冗余：

Canvas：场景根节点
TimeLabel：倒计时文字
ScoreLabel：分数展示文字
ErrorLabel：错误次数提示
WordLeft、WordRight：左右对比汉字节点
GameOverUI：游戏结束面板（默认隐藏）
SuccessTip：通关成功提示节点

无需复杂预制体，仅通过代码动态生成点击区域，极大简化项目结构，降低新手上手难度。

三、完整源码实现

项目一共只需要两个脚本，全局游戏管理器+点击判定逻辑，代码平铺直白，无封装嵌套、无难懂算法。

1. 全局游戏主逻辑 WordFindMgr.ts

负责关卡管理、倒计时、分数统计、错误判定、游戏状态全局管控

import { _decorator, Component, Label, Node, instantiate, Prefab, tween } from 'cc'; const { ccclass, property } = _decorator; // 汉字关卡数据 export interface WordLevelData { wordName: string; // 汉字文本 diffPos: { x: number, y: number }; // 差异点击坐标 } @ccclass('WordFindMgr') export class WordFindMgr extends Component { // 单例 static ins: WordFindMgr; @property(Label) timeLab: Label = null!; @property(Label) scoreLab: Label = null!; @property(Label) errorLab: Label = null!; @property(Node) wordLeftNode: Node = null!; @property(Node) wordRightNode: Node = null!; @property(Node) gameOverUI: Node = null!; @property(Node) successTip: Node = null!; // 游戏全局数据 public score: number = 0; public errorCount: number = 0; public maxError: number = 3; public gameTime: number = 15; public curTime: number = 0; public isGameOver: boolean = false; public curLevel: number = 0; // 汉字关卡库（可无限拓展关卡） public levelArr: WordLevelData[] = [ { wordName: "末", diffPos: { x: 20, y: 10 } }, { wordName: "土", diffPos: { x: -15, y: -5 } }, { wordName: "日", diffPos: { x: 10, y: -10 } }, { wordName: "人", diffPos: { x: 5, y: 15 } } ]; onLoad() { WordFindMgr.ins = this; } start() { this.resetGame(); } // 初始化游戏 resetGame() { this.isGameOver = false; this.score = 0; this.errorCount = 0; this.curLevel = 0; this.updateUI(); this.gameOverUI.active = false; this.startLevel(); } // 开始当前关卡 startLevel() { if (this.isGameOver) return; // 重置倒计时 this.curTime = this.gameTime; this.timeLab.string = `剩余时间：${this.curTime}s`; // 加载当前关卡汉字 let levelData = this.levelArr[this.curLevel]; this.wordLeftNode.getComponent(Label).string = levelData.wordName; this.wordRightNode.getComponent(Label).string = levelData.wordName; // 开启倒计时 this.schedule(this.timeDown, 1); } // 倒计时回调 timeDown() { this.curTime--; this.timeLab.string = `剩余时间：${this.curTime}s`; if (this.curTime <= 0) { // 超时闯关失败 this.addError(); } } // 点击正确，通关成功 checkSuccess() { if (this.isGameOver) return; this.unschedule(this.timeDown); // 通关动画提示 this.successTip.active = true; tween(this.successTip) .delay(0.5) .call(() => { this.successTip.active = false; // 加分 this.score += 10; this.updateUI(); // 进入下一关 this.nextLevel(); }) .start(); } // 下一关 nextLevel() { this.curLevel++; // 关卡循环 if (this.curLevel >= this.levelArr.length) { this.curLevel = 0; } this.startLevel(); } // 点击错误，增加错误次数 addError() { this.errorCount++; this.updateUI(); // 累计错误达到上限，游戏结束 if (this.errorCount >= this.maxError) { this.gameOver(); } } // 游戏结束 gameOver() { this.isGameOver = true; this.unscheduleAllCallbacks(); this.gameOverUI.active = true; } // 更新UI文字 updateUI() { this.scoreLab.string = `分数：${this.score}`; this.errorLab.string = `失误：${this.errorCount}/${this.maxError}`; } }

2. 汉字点击判定 WordItem.ts

挂载在右侧对比汉字节点，处理用户点击、坐标判定、正误逻辑

import { _decorator, Component, Node, EventTouch } from 'cc'; import { WordFindMgr } from './WordFindMgr'; const { ccclass } = _decorator; @ccclass('WordItem') export class WordItem extends Component { onLoad() { this.node.on(Node.EventType.TOUCH_START, this.onWordClick, this); } // 汉字点击判定 onWordClick(e: EventTouch) { if (WordFindMgr.ins.isGameOver) return; // 获取当前关卡差异坐标 let levelData = WordFindMgr.ins.levelArr[WordFindMgr.ins.curLevel]; // 获取点击相对坐标 let localPos = e.getUILocation(); // 距离判定：在差异坐标范围内即为答对 let disX = Math.abs(localPos.x - levelData.diffPos.x); let disY = Math.abs(localPos.y - levelData.diffPos.y); if (disX < 25 && disY < 25) { // 点击正确，通关 WordFindMgr.ins.checkSuccess(); } else { // 点击错误 WordFindMgr.ins.addError(); } } }

3. 按钮通用逻辑 CommonBtn.ts

实现游戏重启功能，极简通用按钮脚本

import { _decorator, Component } from 'cc'; import { WordFindMgr } from './WordFindMgr'; const { ccclass } = _decorator; @ccclass('CommonBtn') export class CommonBtn extends Component { // 重启游戏 restartGame() { WordFindMgr.ins.resetGame(); } }