首先设定一下 单个 方块 cell 类:
类定义和属性
-
`init` 方法 用于初始化方块,接收游戏实例、数据、宽度、道具类型和位置。
-
`onWarning` 方法 设置警告精灵的帧,并播放闪烁动作,用于显示方块的警告状态。
-
`grow` 方法 根据传入的方向(上下左右),调整方块的大小,实现方块的增长效果。
-
- `bindEvent` 方法绑定触摸事件到方块节点。
-
- `onTouched` 方法处理触摸事件,包括用户点击和被其他方块触发的情况。根据方块状态和游戏状态,执行相应的逻辑。
-
`onBlockPop` 方法 在方块被消除时调用,处理连锁反应和道具触发的逻辑。
-
`playFallAction` 方法 控制方块下降的动画,更新方块的位置。
-
- `playStartAction` 控制方块生成时的动画。
-
- `playDieAction` 控制方块消失时的动画,并返回一个 Promise,以便在动画完成后执行其他操作。
-
- `surfaceAction` 控制方块浮出水面的动画。
-
- `generatePropAction` 可能是用于生成道具的动画,但具体实现为空。
init
方法是这段脚本中用于初始化方块实例的关键方法:
javascript
init(g, data, width, itemType, pos) {
this._game = g; // 游戏实例
this._status = 1; // 初始化方块状态为可触发点击
if (pos) {
// 如果提供了位置参数,则使用
}
pos = pos || {
x: data.x,
y: data.y
};
this._itemType = itemType || 0; // 初始化道具类型
this.warningType = 0; // 初始化警告类型
this.isPush = false; // 初始化是否被推动
this.bindEvent(); // 绑定事件
this.color = data.color || Math.ceil(Math.random() * 4); // 初始化方块颜色
this.colorSprite = this.node.getChildByName('color').getComponent(cc.Sprite);
// 设置方块颜色精灵的帧
this.colorSprite.spriteFrame = itemType
? g.propSpriteFrame[(itemType - 1) * 4 + this.color - 1]
: this._game.blockSprite[this.color - 1];
this.warningSprite.spriteFrame = ''; // 初始化警告精灵的帧为空
this._width = width; // 保存方块宽度
this._controller = g._controller; // 获取控制器
this.lightSprite.node.active = false; // 初始时关闭光效精灵
// 计算方块宽度
this.node.width = this.node.height = width;
this.startTime = data.startTime; // 初始化开始时间
this.iid = data.y; // 初始化方块在网格中的行索引
this.jid = data.x; // 初始化方块在网格中的列索引
this.node.x = -(730 / 2 - g.gap - width / 2) + pos.x * (width + g.gap);
this.node.y = (730 / 2 - g.gap - width / 2) - pos.y * (width + g.gap);
this.node.rotation = 0; // 初始化方块旋转角度为0
this.playStartAction(); // 播放开始动画
},
grow
方法是方块在游戏中进行变形或增长时的关键逻辑,它使得方块能够根据游戏规则在特定方向上扩展:
javascript
grow(type) { //1234 代表上、下、左、右
switch (type) {
case 1:
// 如果方块不是在水平增长状态,并且可以向上增长
if (this.growType != 2) {
this.colorSprite.node.height += this._game.gap * 2
this.colorSprite.node.y += this._game.gap
this.growType = 1
}
break
case 2:
// 如果方块不是在水平增长状态,并且可以向下增长
if (this.growType != 2) {
this.colorSprite.node.height += this._game.gap * 2
this.colorSprite.node.y -= this._game.gap
this.growType = 1
}
break
case 3:
// 如果方块不是在垂直增长状态,并且可以向左增长
if (this.growType != 1) {
this.colorSprite.node.width += this._game.gap * 2
this.colorSprite.node.x -= this._game.gap
this.growType = 2
}
break
case 4:
// 如果方块不是在垂直增长状态,并且可以向右增长
if (this.growType != 1) {
this.colorSprite.node.width += this._game.gap * 2
this.colorSprite.node.x += this._game.gap
this.growType = 2
}
break
}
},
详细介绍可以链接
微信小游戏之三消(一) (qq.com)https://mp.weixin.qq.com/s/SUPaWJ8bm5wrtLPZLiktjQ?token=1657907189&lang=zh_CN