微信小游戏 彩色试管 倒水游戏 逻辑（三）

 最近开始研究微信小游戏，有兴趣的 可以关注一下 公众号， 记录一些心路历程和源代码。

定义 一个CupMgr class 管理 cup 。这个系统允许玩家通过拖动杯子来倒水，直到所有杯子都达到目标状态。以下是代码的主要部分及其功能解释：

主要功能

1. 初始化配置：

   • 从本地存储中读取当前关卡和上一次的操作记录。
   • 如果没有记录，则初始化配置。

2. 创建杯子：

   • 根据当前关卡的配置创建杯子，并设置其初始状态。
   • 使用布局组件（Layout）来排列这些杯子。

3. 处理杯子交互：

   • 玩家点击杯子时，检查是否可以倒水，并执行倒水动画。
   • 支持撤销上一步操作。

4. 关卡管理：

   • 玩家完成当前关卡后，自动进入下一关。
   • 提供获取当前关卡和操作记录数量的方法。

关键组件和类

• CupMgr：管理整个杯子系统的类。
• Cup：表示单个杯子的类，包含杯子的状态和操作方法。
• WaterFlow：表示水流动画的类，用于实现倒水效果。

主要方法和属性

• onLoad()：组件加载时调用，初始化关卡和配置。
• initCfg()：初始化当前关卡的配置。
• createCups()：创建并排列杯子。
• onClickCup()：处理杯子点击事件，检查并执行倒水操作。
• startPour()：开始倒水动画。
• onPourOneFinished()：处理一次倒水完成后的逻辑，如更新关卡状态。
• undoAction()：撤销上一步操作。
• nextLevel()：进入下一关。
• getLevel()：获取当前关卡数。
• checkIsAllFinished()：检查所有杯子是否都达到目标状态。

注意事项

• 代码中使用了sys.localStorage来存储和读取关卡和操作记录，确保游戏状态在玩家下次进入时可以恢复。
• 使用了tween来实现动画效果，使杯子移动和倒水过程更加平滑。
• 代码中包含了一些调试和编辑器相关的逻辑，如executeInEditMode和DEV、EDITOR常量，这些在发布时通常会被移除。

这段代码是一个典型的游戏逻辑实现，展示了如何使用Cocos Creator引擎来创建和管理游戏中的交互元素。

import { Component, JsonAsset, Layout, Prefab, _decorator, instantiate, sys,Node, UITransform, v2, v3, view, Color, tween, log } from "cc";
import Cup, { _CupInfo } from "./cup";
import { DEV, EDITOR } from "cc/env";

const { ccclass, property,executeInEditMode } = _decorator;

const COOKIE_LEVEL = "level"
const COOKIE_LAST_CFG = "last_cfg"
const COOKIE_ACTION_HISTORY = "action_history"

// spacesArr 是一个在 CupMgr 类中定义的对象，用于存储不同数量杯子时，水平布局的间距和缩放比例。具体来说，它是一个键值对对象，其中键是杯子的数量，值是一个数组，包含两个或三个元素：

// 第一个元素是水平间距 spacingX。
// 第二个元素是垂直缩放比例 scale。
// 第三个元素是垂直间距 spacingY（可选）。

const spacesArr = {
    [1] : [0,1],
    [2] : [80,1],
    [3] : [50,1],
    [4] : [40,0.9],
    [5] : [30,0.8],
    [6] : [30,0.65],
    [7] : [20,0.6,60],
    [8] : [10,0.55,80],
}

@cccl