Gm-game-popgame NPM

gm-game-popgame

消消乐小游戏

安装

npm install gm-game-popgame

使用

app.json

必须开启 "enableSkia": "true"

如果项目需要使用插件，在window下加上 disablePluginSandBox：“true”

json

{
    "usingComponents": {
        "gm-game-popgame": "gm-game-popgame/popGame"
    }
}

Page({
  data: {
    stepCount: 100,//步数
    scorePos: {
      src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TlwpbW1FJvZ2Q5aGq_!!1080040467.png",
      width: 136,
      height: 43,
      scoreTop: 108,//分数值顶部位置
      scoreRight: 600,//分数值最右边位置
      left: 500,
      top: 100,
      // 分数值图片 0 - 9
      numArr: [
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01GiVJFq1FJva0ojk0l_!!1080040467.png", width: 16, height: 27, val: 0 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01fgY9Hl1FJva5WWo6v_!!1080040467.png", width: 16, height: 27, val: 1 },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Uj8gqT1FJvZzukPht_!!1080040467.png", width: 16, height: 27, val: 2 },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01jAZw2G1FJvZxmwXTL_!!1080040467.png", width: 16, height: 27, val: 3 },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EyITGj1FJva3knfJe_!!1080040467.png", width: 16, height: 27, val: 4 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN012gc5k21FJva20z9Xo_!!1080040467.png", width: 16, height: 27, val: 5 },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01PMVAV61FJvZyHaz2t_!!1080040467.png", width: 16, height: 27, val: 6 },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01hf3iKp1FJva0FrSpE_!!1080040467.png", width: 16, height: 27, val: 7 },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Ays2W61FJvZyHcj7b_!!1080040467.png", width: 16, height: 27, val: 8 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01v0v42s1FJva4ONIOd_!!1080040467.png", width: 16, height: 27, val: 9 },
      ],
    },
    gameSteps: 30,
    timePos: {
      src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TlwpbW1FJvZ2Q5aGq_!!1080040467.png",
      width: 136,
      height: 43,
      time: 30,//倒计时时间
      timeTop: 108,//倒计时数字顶部位置
      timeleft: 120,//倒计时第一位数字左侧位置，第二位数紧跟其后
      timeRight: 194,//倒计时最后一位数字右侧位置，第三位数字在其前面
      left: 100,
      top: 100,
      // 时间数字图片 0 - 9
      numArr: [
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01GiVJFq1FJva0ojk0l_!!1080040467.png", width: 16, height: 27, val: 0 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01fgY9Hl1FJva5WWo6v_!!1080040467.png", width: 16, height: 27, val: 1 },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Uj8gqT1FJvZzukPht_!!1080040467.png", width: 16, height: 27, val: 2 },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01jAZw2G1FJvZxmwXTL_!!1080040467.png", width: 16, height: 27, val: 3 },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EyITGj1FJva3knfJe_!!1080040467.png", width: 16, height: 27, val: 4 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN012gc5k21FJva20z9Xo_!!1080040467.png", width: 16, height: 27, val: 5 },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01PMVAV61FJvZyHaz2t_!!1080040467.png", width: 16, height: 27, val: 6 },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01hf3iKp1FJva0FrSpE_!!1080040467.png", width: 16, height: 27, val: 7 },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Ays2W61FJvZyHcj7b_!!1080040467.png", width: 16, height: 27, val: 8 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01v0v42s1FJva4ONIOd_!!1080040467.png", width: 16, height: 27, val: 9 },
      ],
    },
    gameSource: {
      // 游戏元素
      items: [
        {
          src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01CNZUM31FJvaCYgu39_!!1080040467.png",
          val: 10,
          width: 110,
          height: 110,
          probability: 1,//出现概率
          // 爆炸动画序列帧
          boomArr: [
            { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
          ],
          boomSpeed: 0.1,// 爆炸动画速度 值越大，速度越快
          audioName: "default"
        },
        {
          src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01dl3mha1FJvaBrK9k0_!!1080040467.png",
          val: 10,
          width: 110,
          height: 110,
          probability: 1,//出现概率
          // 爆炸动画序列帧
          boomArr: [
            { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
          ],
          boomSpeed: 0.1,// 爆炸动画速度 值越大，速度越快
          audioName: "default"
        },
        {
          src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01JPFncl1FJvaCYh2MZ_!!1080040467.png",
          val: 10,
          width: 110,
          height: 110,
          probability: 1,//出现概率
          // 爆炸动画序列帧
          boomArr: [
            { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
          ],
          boomSpeed: 0.1,// 爆炸动画速度 值越大，速度越快
          audioName: "default"
        },
        {
          src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN0170OItT1FJva9ru6rG_!!1080040467.png",
          val: 10,
          width: 110,
          height: 110,
          probability: 1,//出现概率
          // 爆炸动画序列帧
          boomArr: [
            { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
          ],
          boomSpeed: 0.1,// 爆炸动画速度 值越大，速度越快
          audioName: "default"
        },
        {
          src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01aDjZeH1FJva8LzwUZ_!!1080040467.png",
          val: 10,
          width: 110,
          height: 110,
          probability: 1,//出现概率
          // 爆炸动画序列帧
          boomArr: [
            { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
          ],
          boomSpeed: 0.1,// 爆炸动画速度 值越大，速度越快
          audioName: "default"
        },
      ],
      // 选中动画 序列帧
      selectAnimateSpeed: 0.1,
      selectAnimate: [
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01CK6Gzr1FJvaBcATG7_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01HrKV2m1FJvaFPPdrE_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MGJ4UI1FJva5Q7e2o_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Jpme0X1FJvaFPQ6vS_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ywDOj31FJvaA6sR9d_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01BU82Rb1FJvaHpPNV5_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01etCn5O1FJvaEJRgHW_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01l1woJd1FJvaEAuzXf_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN019My1f21FJvaEJVMzw_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Iy9teo1FJvaDfEuGW_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01NP1VaK1FJvaHAJh4I_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN011M49dy1FJvaEJSozb_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01xCF4Ab1FJvaDfFqT2_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01uouz3B1FJvaGMSYH2_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017rg44P1FJvaDbP6Zv_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01l6wetk1FJvaEJSDZJ_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01KBqj751FJvaIy1cZi_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Hi4s5o1FJvaHAJ5gN_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01jCLVpu1FJvaA6uJWc_!!1080040467.png", "width": 110, "height": 110 },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01SF6PLE1FJvaIy0LaK_!!1080040467.png", "width": 110, "height": 110 }
      ],
      // 九宫格技能 炸弹
      sudoku: {
        src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01iAV9fF1FJva8M0gDl_!!1080040467.png",
        val: 10,
        width: 110,
        height: 110,
        // 默认显示时的序列帧动画 如果有srcArr会忽略src
        srcArr: [
          { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
        ],
        srcArrSpeed: 0.08,
        // 爆炸动画序列帧
        boomArr: [
          { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
        ],
        boomSpeed: 0.1,// 爆炸动画速度 值越大，速度越快
        audioName: "bomb2"
      },
      // 十字消除技能
      cross: {
        src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN016sHbY51FJvaBrJHhh_!!1080040467.png",
        val: 10,
        probability: 1,//全消概率 此处概率相对于1000
        width: 110,
        height: 110,
        // 爆炸动画序列帧
        boomArr: [
          { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
        ],
        boomSpeed: 0.1,// 爆炸动画速度 值越大，速度越快
        audioName: "bomb1"
      }
    },
    audioObj: {
      default: { src: "http://isv-vod.alibabausercontent.com/RGjZJMdpNgKGVQeEyw8/md0TVJ9FNFauX46iy5H?auth_key=1600418297-0-0-abfad5e2fa6d2a568be518189562d827" },//默认音效
      bomb1: { src: "http://isv-vod.alibabausercontent.com/RGjZJMdpNgKGVQeEyw8/RNpLxsf1VfhnI3puBjI?auth_key=1600418314-0-0-5b59216722fd88b18586e7c605ad3b76" },//十字消除音效
      bomb2: { src: "http://isv-vod.alibabausercontent.com/RGjZJMdpNgKGVQeEyw8/RNpLxsf1VfhnI3puBjI?auth_key=1600418314-0-0-5b59216722fd88b18586e7c605ad3b76" },//炸弹音乐
      clearAudio: { src: "http://isv-vod.alibabausercontent.com/RGjZJMdpNgKGVQeEyw8/RNpLxsf1VfhnI3puBjI?auth_key=1600418314-0-0-5b59216722fd88b18586e7c605ad3b76" },//全屏消除音乐
    },

    curSteps: 30,
  },
  onLoad() { },
  onRef(game) {
    this.popGameComponent = game;
  },
  overFun() {
    this.popGameComponent.stop();
  },
  beginFun() {
    my.alert({
      content: "游戏开始"
    })
    this.popGameComponent.start();
  },
  resetFun() {
    this.popGameComponent.reset();
  },
  clearFun() {
    this.popGameComponent.clear();
  },

  onFinish() {
    my.alert({
      content: "游戏结束"
    })
  },
  onProgress(progress) {
    // 资源读取进度回调
  },
  onError(e) {
    // 资源读取报错回调
  },
  onInitDone() {
    my.alert({
      content: "游戏初始化完成"
    })
  },
  onUpdate(item) {
    // {curScore,totalScore,curSteps}
    this.setData({
      curSteps: item.curSteps,
      totalScore: item.totalScore,
      curScore: item.curScore
    })
    // my.alert({
    //   content: "游戏消除了"
    // })
  },
});

xaml

  <!-- 
    gameSource:游戏资源
    scorePos:分数对象
    gameSteps:游戏步数（游戏步数和倒计时是二选一，如果都传了，则取游戏步数）
    timePos:倒计时对象
		selectShowAll:选中状态是否撑满 默认true:撑满 false:不撑满
    rowNum:行数
    colNum:列数
    audio:游戏音效地址
    gameStartPlayAudio:游戏进行中才播放音效 默认false：游戏渲染了消除就播放 true：游戏开始后消除才播放
    onInitDone:游戏渲染完回调 
    onUpdate:游戏消除回调
    onFinish:游戏结束回调
  -->
  <gm-game-popgame 
          gameSource="{{gameSource}}"
          scorePos="{{scorePos}}"
          gameSteps="{{gameSteps}}"
          timePos="{{timePos}}"
          selectShowAll="{{true}}"
          rowNum="{{6}}"
          colNum="{{6}}"
          audio="{{audioObj}}"
          gameStartPlayAudio="{{true}}"
          onRef="onRef"
          onProgress="onProgress"
          onError="onError"
          onInitDone="onInitDone" 
          onUpdate="onUpdate" 
          onFinish="onFinish" 
  />

@tbminiapp/pixi-miniprogram-engine @tbmp/mp-cloud-sdk @types/pixi.js

@infinitebrahmanuniverse/nolb-gm @everything-registry/sub-chunk-1772

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago