微信小游戏之 三消(一)

首先设定一下 单个 方块 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

相关推荐
初尘屿风44 分钟前
基于微信小程序的电影院订票选座系统的设计与实现,SSM+Vue+毕业论文+开题报告+任务书+指导搭建视频
vue.js·微信小程序·小程序
Igallta_8136222 小时前
【小游戏】C++控制台版本俄罗斯轮盘赌
c语言·开发语言·c++·windows·游戏·游戏程序
zsyzClb5 小时前
nim游戏及其进阶 [SDOI2011] 黑白棋 [SDOI2019] 移动金币
游戏
BingLin-Liu6 小时前
蓝桥杯备考:贪心算法之矩阵消除游戏
游戏·贪心算法·矩阵
韩召华9 小时前
微信小程序(uni)+蓝牙连接+Xprint打印机实现打印功能
微信小程序·小程序·notepad++
韩召华9 小时前
微信小程序实现拉卡拉支付
微信小程序·小程序
264玫瑰资源库9 小时前
七星棋牌源码高阶技术指南:6端互通、200+子游戏玩法深度剖析与企业级搭建实战(完全开源)
游戏·开源
paterWang12 小时前
基于 Spring Boot + 微信小程序的短文写作竞赛管理系统设计与实现(源码+文档)
spring boot·后端·微信小程序
luckyext20 小时前
HBuilderX中,VUE生成随机数字,vue调用随机数函数
前端·javascript·vue.js·微信小程序·小程序
狂团商城小师妹1 天前
挪车小程序挪车二维码php+uniapp
微信小程序·小程序·uni-app·微信公众平台