gm-game-tail

点击元素

安装

npm install gm-game-tail

使用

必须开启 "enableSkia": "true"

• json

{
    "usingComponents": {
        "game-tail": "gm-game-tail/tail"
    }
}

• js

Page({
  data: {
    renderGame: true,
    gameSource: {
      speed: 8,//初始速度
      maxSpeed: 10,//最大速度
      speedStep: 0,//递增速度
      speedStepHeight: 200,//递增高度（没隔递增高度增加对应的递增速度）
      firstShowHeight: 0,//初始元素显示坐标
      JGH: 450,//元素之间间隔的高度
      audio: "http://isv-vod.alibabausercontent.com/qzvQAnelVfKTojuKncj/upeoJFcZAYKwcLI4VGZ?auth_key=1614578932-0-0-b38aea24671585ab540b3ccbc0fb1a1f&w=0&h=0&e=sd&t=212b532716143197326045040ed328",
      guideTip: [{
        src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN015YrBIn1FJvcouwerQ_!!1080040467.png",
        showPos: "left",//显示在左侧，隔一个换方向（当前left,下一个right）
        hide: !true,//true:点击触碰到了消失
        width: 47,
        height: 23,
      }, {
        src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN015YrBIn1FJvcouwerQ_!!1080040467.png",
        width: 47,
        height: 23,
      }, {
        src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN015YrBIn1FJvcouwerQ_!!1080040467.png",
        width: 47,
        height: 23,
      }],
      playerInfo: {
        src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01ZbBVVw23c02LRjQ07_!!555657275.png", width: 78, height: 110, speed: 18,
        tail: {
          srcArr: [
            { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01WoFqB21FJvcY6nRGA_!!1080040467.png", width: 44, height: 44, },//测试
          ],
          config: {
            "alpha": { "start": 1, "end": 0.31, },//alpha 通道
            "scale": { "start": 0.5, "end": 0.3, },//缩放
            "color": { "start": "e8a9a8", "end": "e8a9a8", },//颜色
            "speed": { "start": 500, "end": 200, },//速度
            "acceleration": { "x": 0, "y": 0, },//加快
            "startRotation": { "min": 90, "max": 90, },//开始旋转
            "rotationSpeed": { "min": 0, "max": 0, },//旋转速度
            "lifetime": { "min": 0.1, "max": 0.1, },//生命周期
            "blendMode": "normal",//混合模式
            "frequency": 0.001,//频率
            "emitterLifetime": 0,//发射生命周期
            "maxParticles": 150,//最大粒子数
            "pos": { "x": -2, "y": 20, },//位置
            "addAtBack": false,//是否在后面添加
            "spawnType": "circle",//繁殖类型
            "spawnCircle": { "x": -2, "y": 0, "r": 0, }//繁殖范围
          }
        },
      },
      scorePos: {
        src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01awdHtc1FJvcYceROM_!!1080040467.png",
        width: 174,
        height: 174,
        left: 570,
        top: 172,
        scoreTop: 234,//分数值顶部位置
        scoreLeft: 660,//分数值最左边位置
        scoreCenter: 658,
        // 分数值图片 0 - 9
        numArr: [
          { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01C733BB1FJvcbFNbQq_!!1080040467.png", width: 32, height: 42, val: 0 },
          { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01x2dDop1FJvcd82X3o_!!1080040467.png", width: 32, height: 42, val: 1 },
          { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01DV8heE1FJvcibMfEY_!!1080040467.png", width: 32, height: 42, val: 2 },
          { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01BZiYzh1FJvcl7WWpM_!!1080040467.png", width: 32, height: 42, val: 3 },
          { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01K4vGse1FJvchT1sOk_!!1080040467.png", width: 32, height: 42, val: 4 },
          { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01pAdeIP1FJvcjaR7Fk_!!1080040467.png", width: 32, height: 42, val: 5 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Lzfkh01FJvciBv4IZ_!!1080040467.png", width: 32, height: 42, val: 6 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01tzK6fd1FJvcbFPLTw_!!1080040467.png", width: 32, height: 42, val: 7 },
          { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01SuGxOB1FJvcg5atpM_!!1080040467.png", width: 32, height: 42, val: 8 },
          { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01b7CIsQ1FJvcgLcxZE_!!1080040467.png", width: 32, height: 42, val: 9 },
        ],
        tipFadeTime: 1000,
        tipAdd: {
          src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01mJgz7a1FJvcnJMGRn_!!1080040467.png",
          width: 37,
          height: 60
        },
        tipNumArr: [
          { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01tMWKee1FJvcjdafN5_!!1080040467.png", width: 32, height: 60, val: 0 },
          { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01jAdGmj1FJvcllSImn_!!1080040467.png", width: 32, height: 60, val: 1 },
          { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01TnD5N51FJvcjdckHW_!!1080040467.png", width: 32, height: 60, val: 2 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01KgEXTx1FJvchYEiJa_!!1080040467.png", width: 32, height: 60, val: 3 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN018p6oEg1FJvckmj8K0_!!1080040467.png", width: 32, height: 60, val: 4 },
          { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01gIJKKM1FJvcdPontT_!!1080040467.png", width: 32, height: 60, val: 5 },
          { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01KQBxTo1FJvcnJK7JO_!!1080040467.png", width: 32, height: 60, val: 6 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01fjKlyI1FJvcmPe48C_!!1080040467.png", width: 32, height: 60, val: 7 },
          { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01hxhBYO1FJvcnJHpuX_!!1080040467.png", width: 32, height: 60, val: 8 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN014JULx41FJvcjdcsc7_!!1080040467.png", width: 32, height: 60, val: 9 },
        ]
      },
      timePos: {
        src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01mlIXUQ1FJvcedbsRb_!!1080040467.png",
        width: 174,
        height: 174,
        left: 4,
        top: 172,
        time: 50,//倒计时时间
        timeTop: 234,//倒计时数字顶部位置
        // timeleft: -999,//倒计时第一位数字左侧位置，第二位数紧跟其后
        // timeRight: 130,//倒计时最后一位数字右侧位置，第三位数字在其前面
        center: 90,//倒计时时间中间位置，如果有该字段，timeLeft和timeRight无效
        endImg: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01rP01Ur1FJvckIUKd7_!!1080040467.png", width: 32, height: 42 },//跟在倒计时后面
        // 时间数字图片 0 - 9
        numArr: [
          { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01C733BB1FJvcbFNbQq_!!1080040467.png", width: 32, height: 42, val: 0 },
          { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01x2dDop1FJvcd82X3o_!!1080040467.png", width: 32, height: 42, val: 1 },
          { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01DV8heE1FJvcibMfEY_!!1080040467.png", width: 32, height: 42, val: 2 },
          { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01BZiYzh1FJvcl7WWpM_!!1080040467.png", width: 32, height: 42, val: 3 },
          { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01K4vGse1FJvchT1sOk_!!1080040467.png", width: 32, height: 42, val: 4 },
          { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01pAdeIP1FJvcjaR7Fk_!!1080040467.png", width: 32, height: 42, val: 5 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Lzfkh01FJvciBv4IZ_!!1080040467.png", width: 32, height: 42, val: 6 },
          { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01tzK6fd1FJvcbFPLTw_!!1080040467.png", width: 32, height: 42, val: 7 },
          { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01SuGxOB1FJvcg5atpM_!!1080040467.png", width: 32, height: 42, val: 8 },
          { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01b7CIsQ1FJvcgLcxZE_!!1080040467.png", width: 32, height: 42, val: 9 },
        ],
      },
      beginTip: [
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01OxUBCt1FJvcdRE4xA_!!1080040467.png", width: 500, height: 248, val: 3 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01IspkhM1FJvclmx596_!!1080040467.png", width: 500, height: 248, val: 2 },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01A9za5R1FJvcmR8AhO_!!1080040467.png", width: 500, height: 248, val: 1 },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01lyXYrs1FJvcjf19GF_!!1080040467.png", width: 500, height: 248, val: 0 },
      ],
      energyArr: [
        { src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01tW4Meo23c02Sy5OVe_!!555657275.png_.webp", width: 142, height: 262, val: 10, showHeight: 0, probability: 1, bound: { left: 0, right: 0, top: 0, bottom: 0 }, },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
        { src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01ao6dIM23c02QQ9I6O_!!555657275.png_.webp", width: 142, height: 262, val: 10, showHeight: 0, probability: 1, bound: { left: 0, right: 0, top: 0, bottom: 0 }, },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
        { src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01FOh1Hf23c02I2d8iB_!!555657275.png_.webp", width: 142, height: 262, val: 20, showHeight: 0, probability: 1, bound: { left: 0, right: 0, top: 0, bottom: 0 }, },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
      ],
      padding: {
        top: 0
      }
    },
  },
  onLoad() {
  },
  onRef(game) {
    this.gameComponent = game;
  },
  changeFun() {
    this.setData({
      renderGame: !this.data.renderGame
    })
  },
  overFun() {
    this.gameComponent.stop();
  },
  beginFun() {
    this.gameComponent.start();
  },
  continueFun() {
    this.gameComponent.continue();
  },
  resetFun() {
    this.gameComponent.reset();
  },
  pauseFun() {
    this.gameComponent.pause();
  },

  onShow(){
    this.continueFun();
  },
  onHide() {
    this.pauseFun();
  },

  onFinish(obj) {
    // obj {score:总分数,type:"timeout"}
    my.alert({
      content: "游戏结束" + obj.score
    })
  },
  onInitDone() {
    // my.alert({
    //   content: "游戏初始化完成"
    // })
    this.beginFun();
  },
  onUpdate(item) {
    // console.log("------", item.imgObj)
    // item.imgObj 返回图片对象
    /* my.alert({
      content: "游戏消除了"
    }) */
  },
});

• xaml

  <game-tail
    gameSource="{{gameSource}}"
    onRef="onRef"
    onFinish="onFinish" 
    onInitDone="onInitDone" 
    onUpdate="onUpdate" 
  />