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

Cocos Creator实战：从零开发《汉字找茬》小游戏

news 2026/8/7 5:39:39

1. 项目概述与核心思路拆解

最近在刷短视频和逛小游戏平台时，经常能看到《汉字找茬》或者《找汉字》这类游戏的身影。它们玩法简单却异常上头：给你一个由多个汉字组成的复杂图形或排列，让你在规定时间内找出所有隐藏的特定汉字。这种游戏看似简单，但背后涉及到UI布局、触摸交互、游戏逻辑和状态管理等多个模块，非常适合用来学习和练手Cocos Creator。今天，我就以一个从业者的角度，带你从零开始，用Cocos Creator 3.x版本，完整复刻一个这样的爆款小游戏。我会把每个步骤都拆开揉碎，不仅告诉你“怎么做”，更会解释“为什么这么做”，以及我在实际开发中踩过的那些坑。

这个项目的核心目标，是构建一个可玩性高、性能稳定、且易于扩展的“找汉字”游戏原型。我们将实现关卡选择、动态汉字矩阵生成、精准的触摸检测、游戏计时与得分、以及胜利/失败判定等完整功能。选择Cocos Creator，是因为它对于2D游戏开发效率极高，一次开发可以快速发布到微信小游戏、Web、乃至原生平台，非常适合这类轻量级休闲游戏。整个项目我会按照实际开发的流程来讲解：从场景搭建、预制体制作，到核心游戏逻辑的JavaScript/TypeScript脚本编写，最后是调试与优化。即使你是Cocos Creator的新手，跟着步骤走，也能做出一个像模像样的作品。

2. 开发环境准备与项目初始化

2.1 Cocos Creator编辑器安装与配置

首先，你需要去Cocos官网下载并安装最新稳定版的Cocos Creator编辑器。我目前使用的是3.8版本，它提供了更完善的2D工作流和性能分析工具。安装过程没什么好说的，一路下一步即可。安装完成后，启动编辑器，你会看到一个项目管理面板。这里我建议创建一个“空项目”，模板选择“2D Game”。给项目起个名字，比如“WordFinder”，然后选择一个你熟悉的本地目录存放。

项目创建成功后，我们先来熟悉一下编辑器的基本布局。中间是“场景”面板，这是我们搭建游戏界面的画布。右边是“层级管理器”，以树形结构展示场景中的所有节点。左边是“资源管理器”，管理项目中的所有资源，如图片、脚本、预制体等。下方是“属性检查器”，当我们选中某个节点时，这里会显示该节点的所有属性和组件，是我们进行配置和调整的主要区域。在开始动手前，我习惯先规划一下资源目录结构。在“资源管理器”中，右键点击“assets”文件夹，创建几个子文件夹：textures（存放所有图片素材）、scripts（存放所有TypeScript脚本）、prefabs（存放预制体）、sounds（存放音效）。一个清晰的结构会让后续开发维护省心很多。

2.2 美术与字体资源准备

这类找汉字游戏，视觉上通常比较简洁，核心是汉字本身。你需要准备两种关键资源：一是汉字字体文件（.ttf），二是游戏UI素材（如按钮、背景、进度条等）。字体方面，为了确保所有设备显示一致，我推荐使用一款开源的中文字体，比如“站酷快乐体”或“思源黑体”，将它们（.ttf文件）拖入assets/textures或新建的fonts文件夹。UI素材可以在一些免费的素材网站找到，或者用简单的色块和Cocos自带的UI组件临时替代，我们的重点是逻辑。

这里有个关键技巧：对于要动态生成的汉字，我们不会使用图片，而是直接用Cocos的Label（文本）组件来显示。这样做的好处是，我们可以通过代码动态修改文字内容，并且文字边缘清晰，不受缩放影响。将字体文件导入后，在“资源管理器”中点击它，在“属性检查器”里可以设置它为“动态字体”类型，这样它就可以被Label组件引用了。

3. 游戏场景与核心UI搭建

3.1 构建基础场景框架

我们的游戏主要包含三个场景：开始菜单（Menu）、关卡选择（LevelSelect）、游戏主场景（Game）。我们先从最简单的开始菜单做起。在“层级管理器”中，默认会有一个Canvas（画布）节点，所有UI元素都需要放在它下面，以确保能正确适配不同屏幕。

首先，创建一个背景。右键点击Canvas-> 创建节点 -> 渲染节点 ->Sprite，命名为BG。在属性检查器中，为它添加一个Sprite组件，然后从资源管理器拖拽一张背景图到Sprite Frame属性上，或者直接使用纯色。将BG节点的Anchor（锚点）设置为（0.5， 0.5），Position设置为（0， 0），这样它就会居中于屏幕。然后，将Size Mode设置为CUSTOM，并将宽高设置为画布的实际分辨率（例如720*1280），确保背景铺满全屏。

接下来，添加标题和按钮。创建节点 -> UI节点 ->Label，命名为Title。将其锚点设为顶部居中（0.5， 1），位置设为（0， -100）。在Label组件中，输入文本“汉字找茬”，选择我们导入的字体，调整字体大小、颜色。再创建一个按钮：创建节点 -> UI节点 ->Button，命名为StartBtn。你会看到它自动带了一个Label子节点，修改这个Label的文字为“开始游戏”。调整按钮的位置和大小。用同样的方法，可以再创建一个“设置”按钮。

3.2 制作可复用的汉字方块预制体

这是游戏的核心交互单元。我们需要创建一个预制体（Prefab），它代表游戏网格中的一个可点击的汉字格子。在“层级管理器”中，创建一个空节点，命名为WordTile。然后为它添加以下组件：

Sprite组件：作为格子的背景。可以给它一个简单的矩形Sprite Frame，比如一个带圆角的灰色方块。
Label组件：作为显示汉字的文本。将其锚点设为居中，位置设为（0，0）。调整字体和大小。
Button组件：用于接收点击事件。将Transition（过渡类型）设为SCALE（缩放），这样点击时会有缩放动画反馈。
BoxCollider2D组件（可选但推荐）：2D盒型碰撞器。用于更精确的物理点击检测，尤其是在汉字排列密集时。勾选Editing，调整绿色框的大小，使其刚好覆盖整个格子。

调整好WordTile节点的尺寸（例如80x80）。然后，从“层级管理器”将这个WordTile节点直接拖拽到“资源管理器”的assets/prefabs文件夹中。这样，一个蓝色的预制体文件就生成了。之后，我们就可以在代码中动态生成这个预制体的实例了。原场景中的那个节点可以删除。

注意：在制作预制体时，确保其根节点（WordTile）的Position是（0，0），Scale是（1，1）。这是一个好习惯，能避免动态实例化时出现位置偏移问题。

3.3 游戏主场景布局

创建一个新场景，保存为Game。这个场景的UI会更复杂一些。我们需要：

顶部信息栏：包含关卡显示、计时器、目标汉字/剩余数量。
- 创建节点 -> UI节点 ->Layout（水平布局），命名为TopBar。锚点设为顶部拉伸（0，1；1，1），调整其高度和位置。
- 在TopBar下创建三个Label节点，分别命名为LevelText，TimerText，TargetText。通过Layout组件的Spacing X属性控制它们之间的间距。
游戏网格区域：这是汉字方块显示的地方。
- 创建一个空节点，命名为GameGrid。锚点设为居中，并给它一个固定的尺寸（比如600x600）。我们后续会用代码在这个区域内排列汉字方块。
- 可以为GameGrid添加一个Sprite子节点作为底纹背景。
底部控制栏：可以放置“提示”、“重来”、“返回”等按钮。
- 类似顶部信息栏，创建一个水平布局的BottomBar，锚点设为底部拉伸。

4. 核心游戏逻辑实现

4.1 游戏数据管理与配置

在写具体玩法逻辑前，我们需要先定义游戏的数据结构。在assets/scripts下创建一个TypeScript脚本，命名为GameData.ts。这里我们将用JSON格式来定义关卡数据。

// GameData.ts export interface LevelData { level: number; // 关卡号 gridRow: number; // 网格行数 gridCol: number; // 网格列数 targetCharacter: string; // 目标汉字，如“木” totalTargetCount: number; // 目标汉字在网格中的总数量 timeLimit: number; // 时间限制（秒） characterPool: string[]; // 本关卡所有可能出现的汉字池（包含目标汉字和其他干扰汉字） } export class GameConfig { // 示例关卡数据 public static levels: LevelData[] = [ { level: 1, gridRow: 4, gridCol: 4, targetCharacter: "木", totalTargetCount: 5, timeLimit: 60, characterPool: ["木", "林", "森", "树", "枝", "根", "本", "末"] }, { level: 2, gridRow: 5, gridCol: 5, targetCharacter: "口", totalTargetCount: 8, timeLimit: 75, characterPool: ["口", "日", "目", "田", "中", "只", "石", "右", "加", "如"] }, // ... 更多关卡 ]; // 根据关卡号获取数据 public static getLevelData(level: number): LevelData | null { const data = this.levels.find(l => l.level === level); return data || null; } }

这种配置化的设计好处非常明显：要新增或修改关卡，只需要改动这个数组即可，无需修改核心游戏逻辑代码。

4.2 游戏主控制器（GameManager）实现

这是游戏的大脑，负责协调所有子系统。创建脚本GameManager.ts，并将其挂载到Game场景的Canvas节点或一个专门的空节点上。

// GameManager.ts import { _decorator, Component, Node, Prefab, instantiate, Label, director } from 'cc'; import { GameConfig, LevelData } from './GameData'; const { ccclass, property } = _decorator; @ccclass('GameManager') export class GameManager extends Component { // 通过属性检查器绑定预制体和UI节点 @property(Prefab) wordTilePrefab: Prefab = null!; // 汉字方块预制体 @property(Node) gameGridNode: Node = null!; // 游戏网格容器节点 @property(Label) levelLabel: Label = null!; // 显示关卡的Label @property(Label) timerLabel: Label = null!; // 显示时间的Label @property(Label) targetLabel: Label = null!; // 显示目标的Label private currentLevel: number = 1; private currentLevelData: LevelData | null = null; private tileMap: Node[][] = []; // 二维数组，存储所有汉字方块节点 private remainingTargets: number = 0; private gameTime: number = 0; private isGameActive: boolean = false; start() { // 游戏启动，这里可以从本地存储或上一场景获取当前关卡 this.loadLevel(this.currentLevel); } loadLevel(level: number) { this.currentLevel = level; this.currentLevelData = GameConfig.getLevelData(level); if (!this.currentLevelData) { console.error(`Level ${level} data not found!`); return; } // 初始化UI this.levelLabel.string = `关卡: ${level}`; this.targetLabel.string = `找出: ${this.currentLevelData.targetCharacter} (0/${this.currentLevelData.totalTargetCount})`; this.gameTime = this.currentLevelData.timeLimit; this.updateTimerDisplay(); this.remainingTargets = this.currentLevelData.totalTargetCount; // 清空上一关的网格 this.clearGameGrid(); // 生成新的汉字网格 this.generateWordGrid(); // 开始游戏计时 this.isGameActive = true; this.schedule(this.updateGameTimer, 1); // 每秒触发一次 } clearGameGrid() { this.gameGridNode.removeAllChildren(); this.tileMap = []; } generateWordGrid() { const data = this.currentLevelData!; const { gridRow, gridCol, characterPool, totalTargetCount, targetCharacter } = data; // 计算每个格子的间距和起始位置 const tileSize = 80; // 与预制体大小一致 const spacing = 10; const totalWidth = gridCol * tileSize + (gridCol - 1) * spacing; const totalHeight = gridRow * tileSize + (gridRow - 1) * spacing; const startX = -totalWidth / 2 + tileSize / 2; const startY = totalHeight / 2 - tileSize / 2; // 先创建一个包含所有目标汉字位置的列表 let targetPositions: [number, number][] = []; while (targetPositions.length < totalTargetCount) { let row = Math.floor(Math.random() * gridRow); let col = Math.floor(Math.random() * gridCol); let posKey = `${row},${col}`; if (!targetPositions.some(p => p[0]===row && p[1]===col)) { targetPositions.push([row, col]); } } // 初始化二维数组并实例化格子 for (let row = 0; row < gridRow; row++) { this.tileMap[row] = []; for (let col = 0; col < gridCol; col++) { // 实例化预制体 const tileNode = instantiate(this.wordTilePrefab); this.gameGridNode.addChild(tileNode); // 设置位置 const posX = startX + col * (tileSize + spacing); const posY = startY - row * (tileSize + spacing); tileNode.setPosition(posX, posY); // 决定这个格子显示什么字 let characterToShow: string; const isTargetPosition = targetPositions.some(p => p[0]===row && p[1]===col); if (isTargetPosition) { characterToShow = targetCharacter; } else { // 从汉字池中随机选择一个非目标汉字 const otherChars = characterPool.filter(c => c !== targetCharacter); characterToShow = otherChars[Math.floor(Math.random() * otherChars.length)]; } // 获取Tile上的Label组件并设置文字 const labelComp = tileNode.getComponentInChildren(Label); if (labelComp) { labelComp.string = characterToShow; } // 为Tile添加点击事件监听（需要在Tile自己的脚本中处理，这里先存储引用） this.tileMap[row][col] = tileNode; // 我们可以给Tile节点传递行列信息，方便点击时识别 tileNode['_gridPos'] = { row, col }; tileNode['_character'] = characterToShow; } } } updateGameTimer() { if (!this.isGameActive) return; this.gameTime -= 1; this.updateTimerDisplay(); if (this.gameTime <= 0) { this.gameTime = 0; this.gameOver(false); // 时间到，游戏失败 } } updateTimerDisplay() { const minutes = Math.floor(this.gameTime / 60); const seconds = this.gameTime % 60; this.timerLabel.string = `时间: ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; } // 这个方法由每个Tile的点击事件调用 onTileClicked(tileNode: Node) { if (!this.isGameActive) return; const gridPos = tileNode['_gridPos']; const character = tileNode['_character']; const targetChar = this.currentLevelData!.targetCharacter; if (character === targetChar) { // 点击正确！ this.remainingTargets--; // 更新UI this.targetLabel.string = `找出: ${targetChar} (${this.currentLevelData!.totalTargetCount - this.remainingTargets}/${this.currentLevelData!.totalTargetCount})`; // 将Tile标记为已找到（例如变灰、禁用、播放动画） tileNode.getComponentInChildren(Label)!.color = new Color(150, 150, 150); // 变灰 tileNode.getComponent(Button)!.interactable = false; // 禁用按钮 if (this.remainingTargets <= 0) { this.gameOver(true); // 所有目标找到，游戏胜利 } } else { // 点击错误，可以给予惩罚，比如减少时间或播放错误音效 this.gameTime = Math.max(0, this.gameTime - 5); // 错误点击扣5秒 this.updateTimerDisplay(); // 可以播放一个错误的抖动动画 } } gameOver(isWin: boolean) { this.isGameActive = false; this.unschedule(this.updateGameTimer); // 停止计时器 if (isWin) { console.log(`关卡 ${this.currentLevel} 通关！`); // 弹出胜利UI，显示得分，提供进入下一关或返回菜单的选项 // 这里可以保存通关记录 } else { console.log(`关卡 ${this.currentLevel} 失败！`); // 弹出失败UI，提供重试或返回菜单的选项 } } }

4.3 汉字方块（WordTile）交互脚本

为了让每个方块能响应点击并通知GameManager，我们需要为预制体创建一个脚本。

// WordTile.ts import { _decorator, Component, Node, Button, Label } from 'cc'; const { ccclass, property } = _decorator; @ccclass('WordTile') export class WordTile extends Component { // 可以通过属性绑定传递行列信息，但这里我们通过GameManager设置 // private row: number = 0; // private col: number = 0; start() { // 获取Button组件并添加点击监听 const button = this.node.getComponent(Button); if (button) { button.node.on(Button.EventType.CLICK, this.onClick, this); } } onClick() { // 通知游戏管理器这个Tile被点击了 // 我们需要一种方式来获取GameManager的实例。这里使用一种简单的方法：查找场景中特定的节点。 const gameManagerNode = director.getScene()!.getChildByName('GameManager'); if (gameManagerNode) { const gameManager = gameManagerNode.getComponent('GameManager'); // 通过组件名获取 if (gameManager && gameManager.onTileClicked) { gameManager.onTileClicked(this.node); } } // 更优雅的方式是使用事件系统（EventTarget）或依赖注入，但对于中小型项目，直接查找也够用。 } }

将这个WordTile.ts脚本挂载到我们之前创建的WordTile预制体根节点上。这样，每个生成的汉字方块就都有了交互能力。

5. 功能扩展与细节打磨

5.1 添加视觉反馈与动画

干巴巴的点击反馈体验很差。我们可以为正确和错误的点击添加动画。

正确点击：除了变灰，可以增加一个缩放消失或粒子爆炸的动画。在WordTile脚本的onClick方法中，如果点击正确，可以播放一个动画组件（Animation）或使用tween（补间动画）。

// 在WordTile.ts中 import { tween } from 'cc'; // ... 在正确点击后的处理逻辑里（这部分逻辑最好由GameManager调用Tile的方法来执行） public markAsFound() { const button = this.node.getComponent(Button); if(button) button.interactable = false; // 使用补间动画实现缩放消失效果 tween(this.node) .to(0.3, { scale: new Vec3(0, 0, 1) }) .call(() => { this.node.destroy(); }) // 动画结束后销毁节点，或设置为不可见 .start(); }

错误点击：可以让方块快速抖动一下。同样使用tween实现。

public shakeOnError() { const originalPos = this.node.position.clone(); tween(this.node) .to(0.05, { position: new Vec3(originalPos.x + 5, originalPos.y, 0) }) .to(0.05, { position: new Vec3(originalPos.x - 5, originalPos.y, 0) }) .to(0.05, { position: originalPos }) .start(); }

5.2 实现关卡选择与进度保存

我们需要一个关卡选择场景。创建一个LevelSelect场景，使用ScrollView（滚动视图）组件来展示所有关卡按钮。每个按钮显示关卡号和是否解锁（根据本地保存的进度）。在Cocos Creator中，可以使用localStorage来简单实现进度保存。

// 在某个全局管理脚本或LevelSelect场景脚本中 export class LevelManager { private static readonly SAVE_KEY = 'word_finder_progress'; // 获取已解锁的最高关卡 static getUnlockedLevel(): number { const saved = localStorage.getItem(this.SAVE_KEY); return saved ? parseInt(saved) : 1; // 默认第一关解锁 } // 解锁新关卡 static unlockLevel(level: number) { const current = this.getUnlockedLevel(); if (level > current) { localStorage.setItem(this.SAVE_KEY, level.toString()); } } // 清除进度（用于调试） static clearProgress() { localStorage.removeItem(this.SAVE_KEY); } }

在关卡选择场景中，根据LevelManager.getUnlockedLevel()的返回值，来设置每个关卡按钮的交互状态（interactable）和显示样式。

5.3 音效与背景音乐集成

好的音效能极大提升游戏体验。在assets/sounds文件夹中导入一些音效文件（.mp3或.wav），如点击音效、正确音效、错误音效、胜利音效、背景音乐等。Cocos Creator使用AudioSource组件播放音频。

在GameManager节点上添加一个AudioSource组件，用于播放背景音乐。

为音效创建一个专门的节点并添加多个AudioSource组件，或者使用一个AudioSource动态切换Clip。更常见的做法是写一个简单的音效管理器。

// AudioManager.ts import { _decorator, Component, AudioSource, AudioClip } from 'cc'; const { ccclass, property } = _decorator; @ccclass('AudioManager') export class AudioManager extends Component { @property(AudioClip) bgm: AudioClip = null!; @property(AudioClip) clickSound: AudioClip = null!; @property(AudioClip) correctSound: AudioClip = null!; @property(AudioClip) wrongSound: AudioClip = null!; @property(AudioClip) winSound: AudioClip = null!; private static instance: AudioManager = null!; private audioSource: AudioSource = null!; onLoad() { if(AudioManager.instance) { this.node.destroy(); return; } AudioManager.instance = this; // 防止切换场景时被销毁 director.addPersistRootNode(this.node); this.audioSource = this.getComponent(AudioSource)!; this.playBGM(); } playBGM() { if(this.bgm && this.audioSource) { this.audioSource.clip = this.bgm; this.audioSource.loop = true; this.audioSource.play(); } } playSound(clip: AudioClip) { // 创建一个临时的AudioSource节点来播放音效，避免干扰BGM const tempNode = new Node(); const tempSource = tempNode.addComponent(AudioSource); tempSource.clip = clip; tempSource.play(); // 播放完成后销毁节点 setTimeout(() => { tempNode.destroy(); }, clip.getDuration() * 1000); } // 提供静态方法方便调用 static playClick() { this.instance?.playSound(this.instance.clickSound); } static playCorrect() { this.instance?.playSound(this.instance.correctSound); } static playWrong() { this.instance?.playSound(this.instance.wrongSound); } static playWin() { this.instance?.playSound(this.instance.winSound); } }

将这个脚本挂载到一个空节点上，并在场景中配置好对应的音频片段。之后在游戏逻辑中，只需要调用AudioManager.playCorrect()即可播放正确音效。

6. 调试、优化与发布

6.1 常见问题与调试技巧

在开发过程中，你肯定会遇到各种问题。这里分享几个我踩过的坑和解决方法：

汉字方块点击无反应：
- 检查：首先确认WordTile预制体上的Button组件和BoxCollider2D组件是否正常添加且尺寸覆盖正确区域。
- 检查：Button的Interactable属性是否被误设为false。
- 检查：WordTile.ts脚本中的onClick事件绑定是否成功。可以在方法开始加一句console.log('Tile clicked')来测试。
- 检查：GameManager的引用传递是否正确。确保onTileClicked方法能被调用到。
动态生成的汉字位置错乱：
- 检查：GameManager.generateWordGrid方法中的位置计算逻辑。确保startX和startY是基于容器GameGridNode的中心点计算的。
- 检查：预制体WordTile根节点的锚点（Anchor）是否是(0.5， 0.5)，这代表中心点，计算位置时最直观。
游戏卡顿，特别是在关卡格子多时：
- 优化：使用对象池（Object Pooling）管理汉字方块。在关卡开始时预实例化一定数量的Tile放入池中，使用时取出，不用时放回并隐藏，而不是频繁地instantiate和destroy。Cocos Creator有内置的NodePool类可以方便地实现。
- 优化：减少不必要的Update方法。如果脚本里没有持续变化的逻辑，就不要实现update(deltaTime: number)方法。
发布到小游戏平台后字体不显示：
- 解决：确保字体文件（.ttf）被包含在项目构建的包体内。在Cocos Creator的“构建发布”面板中，检查“资源”选项，确保字体文件所在的目录被包含。
- 备选：对于Web和小游戏平台，可以考虑使用“位图字体”（Bitmap Font），虽然制作麻烦，但显示绝对可靠。

6.2 性能优化建议

Draw Call合并：Cocos Creator会自动对使用相同材质的Sprite进行合批，以减少Draw Call。确保你的汉字方块背景Sprite使用的是同一张图集（Atlas）里的精灵帧。可以将所有UI小图打包成一个图集。
减少节点数量：如果关卡网格非常大（比如10x10），100个节点对性能有一定压力。可以考虑使用自定义渲染组件，在一个节点上绘制所有文字，但这会大幅增加逻辑复杂度。对于找汉字游戏，8x8以内用节点方式通常没问题。
脚本优化：避免在update方法里进行复杂的计算或频繁的查找节点操作。将需要频繁访问的组件引用在start或onLoad时缓存起来。

6.3 构建与发布

游戏完成后，点击Cocos Creator编辑器顶部的“项目” -> “构建发布”。

发布平台：选择目标平台，如“Web Mobile”（H5）或“微信小游戏”。
构建参数：
- 主包压缩类型：选择合并所有JSON，可以优化加载速度。
- MD5 Cache：勾选，有利于资源更新。
- 内联所有SpriteFrame：如果图集不多，可以勾选以简化加载逻辑。
小游戏平台配置：如果发布微信小游戏，需要填写小游戏的appid，并按照官方文档配置game.json等文件。
构建：点击“构建”。构建完成后，点击“运行”即可在模拟器或真机上预览。

对于微信小游戏，你还需要使用微信开发者工具打开构建生成的wechatgame文件夹，进行进一步的预览、调试和上传。

7. 项目总结与扩展思路

走到这一步，一个功能完整的《汉字找茬》游戏核心就已经实现了。从场景搭建、数据配置、逻辑编写到交互反馈，我们走完了整个开发流程。这个项目麻雀虽小，五脏俱全，涵盖了Cocos Creator 2D游戏开发的大部分基础概念：节点、组件、预制体、脚本、UI系统、事件、动画、数据管理、音频、构建发布。

在实际操作中，有几个点我深有体会：一是前期规划很重要，像GameData.ts这种数据与逻辑分离的设计，后期加关卡简直不要太轻松；二是善用Cocos Creator的属性检查器进行参数绑定，比在代码里硬编码要灵活得多；三是调试阶段多使用浏览器（或模拟器）的开发者工具，console.log和断点调试能解决大部分问题。

这个项目还有很多可以扩展和深化的方向：