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

Cocos Creator 《打螺丝消除小游戏》完整源码+逻辑详解

news 2026/6/4 23:35:20

先看效果：点击打螺丝我贼行或者搜索即可

一、项目概述

近几年微信小游戏生态中，轻点击消除类休闲游戏凭借操作简单、节奏轻快、解压休闲的特质，一直拥有极高的用户活跃度。不同于传统闯关游戏，打螺丝消除游戏玩法纯粹、上手零门槛、交互反馈舒适，是非常适合新手入门 Cocos 游戏开发的经典实战项目。

本文将基于Cocos Creator 引擎，从零完整开发一款原生《打螺丝消除小游戏》。全程采用模块化开发思路，不滥用复杂逻辑、不依赖第三方插件，纯原生代码实现。包含随机物体生成、点击消除判定、动态计时系统、关卡难度递增、游戏状态管理、微信原生分享适配、全机型适配等完整功能。

本文适合 Cocos 初学者、小游戏开发爱好者、在校实训学习使用，所有代码规范整洁、注释完善、可直接运行学习，无冗余逻辑、无广告商业化内容，专注技术实战教学。

二、游戏核心玩法与设计思路

2.1 游戏核心玩法

1. 游戏开始后，屏幕内随机位置持续生成螺丝道具；

2. 玩家通过点击屏幕上的螺丝，即可完成消除操作，并获得对应分数；

3. 每一关拥有固定倒计时与消除目标数量，在规定时间内完成指定消除数量即可闯关成功；

4. 倒计时结束未达标则判定闯关失败；

5. 关卡递进难度动态提升，生成速度更快、目标数量更多，逐步提升游戏挑战性。

2.2 功能模块拆解

为保证代码低耦合、易阅读、易维护，本项目严格采用功能分层设计：

1.数据管理层：统一维护分数、关卡、倒计时、通关目标等全局游戏数据；

2.游戏主逻辑层：负责螺丝随机生成、点击消除判定、游戏状态切换；

3.UI 展示层：实时刷新分数、关卡、倒计时，管理开始/成功/失败弹窗；

4.平台适配层：对接微信小游戏原生分享能力，适配移动端真机运行环境。

2.3 开发环境与技术栈

开发引擎：Cocos Creator 2.x / 3.x 全版本兼容

开发语言：TypeScript

运行平台：微信小游戏（移动端全机型适配）

核心技术：随机算法、节点动态生成、触摸交互、计时器调度、状态机管理、微信原生 API

三、项目初始化与场景搭建

3.1 项目基础配置

新建 Cocos Creator 2D 空白项目，删除默认无用资源，设置游戏设计分辨率为720 × 1280，适配模式选择「固定高度」，保证所有安卓、iOS 手机竖屏显示完整、无黑边、UI不挤压错位。

3.2 场景节点层级结构

规范化搭建场景层级，保证层级清晰、互不遮挡、方便代码管理：

Canvas ├── BackGround（全屏静态背景） ├── TopUI（顶部数据信息栏） │ ├── ScoreLab（当前分数文本） │ ├── LevelLab（当前关卡文本） │ ├── TimeLab（剩余时间文本） ├── GameRoot（游戏动态节点父容器） │ └── ScrewContainer（所有螺丝生成容器） ├── StartPanel（游戏开始界面） ├── SuccessPanel（闯关成功弹窗） ├── FailPanel（闯关失败弹窗）

3.3 制作螺丝预制体

螺丝是游戏核心交互物体，需要做成独立预制体复用：

1. 新建空节点，添加 Sprite 组件，加载螺丝素材图；

2. 添加 Button 按钮组件，开启点击缩放效果，优化按压手感；

3. 绑定独立脚本，管理自身点击销毁逻辑；

4. 整体保存为ScrewPrefab预制体，供全局动态生成调用。

四、全局数据中心模块实现

新建GameData.ts，作为全局唯一数据中心，统一管理所有游戏数值，杜绝全局变量泛滥，方便后续迭代拓展。

/** * 全局游戏数据管理中心 * 统一维护分数、关卡、时间、通关目标 */ export class GameData { // 玩家当前分数 public static nowScore: number = 0; // 当前闯关关卡 public static nowLevel: number = 1; // 单局倒计时 public static gameTime: number = 30; // 当前关卡需要消除的目标数量 public static targetClearNum: number = 15; // 当前关卡已消除数量 public static currentClearNum: number = 0; /** * 初始化单局关卡数据 */ public static initLevelData() { this.gameTime = 30; this.currentClearNum = 0; // 关卡递增难度：关卡越高，需要消除的数量越多 this.targetClearNum = 15 + (this.nowLevel - 1) * 6; } /** * 重置全局游戏数据 */ public static resetAllData() { this.nowScore = 0; this.nowLevel = 1; this.initLevelData(); } }

五、螺丝单体逻辑脚本

新建ScrewItem.ts，挂载到螺丝预制体，负责单个螺丝的点击交互、缩放反馈、销毁逻辑，实现组件独立解耦。

import { _decorator, Component, Button, tween } from 'cc'; const { ccclass, property } = _decorator; @ccclass('ScrewItem') export class ScrewItem extends Component { onLoad() { // 初始化按钮点击缩放动画，提升手感 const btn = this.getComponent(Button); if (btn) { btn.transition = Button.Transition.SCALE; btn.zoomScale = 0.85; } } /** * 螺丝消除销毁动画 */ public destroyAnim() { // 缩放淡出动画 tween(this.node) .to(0.15, { scale: 0, opacity: 0 }) .call(() => { this.node.destroy(); }) .start(); } }

六、游戏主核心逻辑管理器

新建GameManager.ts，挂载场景根节点，是整个游戏的核心调度中枢，负责游戏初始化、螺丝随机生成、倒计时、通关判定、UI刷新等核心逻辑。

import { _decorator, Component, Node, instantiate, Label, clamp } from 'cc'; import { GameData } from './GameData'; import { ScrewItem } from './ScrewItem'; const { ccclass, property } = _decorator; @ccclass('GameManager') export class GameManager extends Component { @property(Node) screwContainer: Node = null!; @property(Node) screwPrefab: Node = null!; @property(Label) scoreLab: Label = null!; @property(Label) levelLab: Label = null!; @property(Label) timeLab: Label = null!; @property(Node) startPanel: Node = null!; @property(Node) successPanel: Node = null!; @property(Node) failPanel: Node = null!; // 游戏运行状态 private isGameRunning: boolean = false; // 螺丝生成频率 private createSpeed: number = 0.5; onLoad() { this.updateUI(); this.hideAllPanel(); } // 开始游戏 startGame() { GameData.initLevelData(); this.isGameRunning = true; this.startPanel.active = false; this.hideAllPanel(); // 根据关卡调整生成速度，难度递增 this.createSpeed = Math.max(0.2, 0.5 - GameData.nowLevel * 0.03); // 定时生成螺丝 this.schedule(this.createRandomScrew, this.createSpeed); // 开启倒计时 this.schedule(this.countDownTime, 1); this.updateUI(); } // 随机生成螺丝 createRandomScrew() { if (!this.isGameRunning) return; const screw = instantiate(this.screwPrefab); screw.setParent(this.screwContainer); // 限制生成范围，防止超出屏幕 const randX = clamp(Math.random() * 600 - 300, -320, 320); const randY = clamp(Math.random() * 800 - 400, -450, 450); screw.setPosition(randX, randY); // 绑定点击事件 screw.on(Node.EventType.CLICK, () => { this.onClickScrew(screw); }) } // 点击螺丝消除 onClickScrew(node: Node) { const screwItem = node.getComponent(ScrewItem); screwItem.destroyAnim(); // 数据累加 GameData.nowScore++; GameData.currentClearNum++; this.updateUI(); // 判断是否达成通关条件 if (GameData.currentClearNum >= GameData.targetClearNum) { this.gameSuccess(); } } // 倒计时逻辑 countDownTime() { if (!this.isGameRunning) return; GameData.gameTime--; this.updateUI(); if (GameData.gameTime <= 0) { this.gameFail(); } } // 闯关成功 gameSuccess() { this.endGameLogic(); GameData.nowLevel++; this.successPanel.active = true; } // 闯关失败 gameFail() { this.endGameLogic(); this.failPanel.active = true; } // 结束游戏统一逻辑 endGameLogic() { this.isGameRunning = false; this.unscheduleAllCallbacks(); // 清空屏幕剩余螺丝 this.screwContainer.removeAllChildren(); } // 下一关 nextLevel() { this.startGame(); } // 重新开始游戏 restartGame() { GameData.resetAllData(); this.startGame(); } // 隐藏所有弹窗 hideAllPanel() { this.successPanel.active = false; this.failPanel.active = false; } // 刷新所有UI文本 updateUI() { this.scoreLab.string = `分数：${GameData.nowScore}`; this.levelLab.string = `关卡：${GameData.nowLevel}`; this.timeLab.string = `剩余时间：${GameData.gameTime}s`; } }

七、微信小游戏原生分享适配

微信小游戏官方要求游戏需具备基础传播能力，本文采用官方原生右上角分享，无需自定义按钮，合规稳定、真机百分百生效，适配所有微信版本。

在游戏启动入口脚本中加入以下代码：

// 开启微信右上角分享菜单 wx.showShareMenu({ withShareTicket: true, menus: ["shareAppMessage", "shareTimeline"] }); // 分享给微信好友配置 wx.onShareAppMessage(() => { return { title: "轻松解压的打螺丝小游戏，休闲益智超好玩！", imageUrl: "https://g.vwisdom.cn/share.png" } }); // 分享到朋友圈配置 wx.onShareTimeline(() => { return { title: "极简解压小游戏，闯关挑战超有趣！", imageUrl: "https://g.vwisdom.cn/share.png" } });

注意：分享配图必须使用 HTTPS 外网图片地址，保证真机正常展示。