gm-game-flyair v1.3.2

Gm-game-ball

躲避障碍物小游戏

安装

npm install gm-game-flyair

使用

必须开启 "enableSkia": "true"

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

• json

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

• js

Page({
  data: {
    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 },
      ],
    },
    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: {
      playerInfo: {
        src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01htfguA1FJvZIgAvxd_!!1080040467.png", width: 186, height: 338,
        // 爆炸动画序列帧
        boomArr: [
          { 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 },
        ],
        boomSpeed: 0.1,// 爆炸动画速度 值越大，速度越快
      },
      barrierProbability: 1,//障碍物概率
      barrierArr: [
        // changePlayer:吃掉此元素 改变player显示 {hidePlayer:是否隐藏默认player（如果隐藏了，不能拖动player，必须等player显示后才能拖动） boomArr:改变后的player元素，可以放序列帧 fadeTime：消失时间}
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN017LRy821FJvaeHZH5a_!!1080040467.png", width: 158, height: 153, bound: { left: 0, right: 0, top: 0, bottom: 0 }, changePlayer: { hidePlayer: true, boomArr: [{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01fFT2cz1FJvaa4kG8S_!!1080040467.png", width: 203, height: 269 }], boomSpeed: 0.1, fadeTime: 0.5 } },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
        {
          src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01AyQNgC1FJvZgp5O1R_!!1080040467.png", probability: 1, width: 136, showHeight: 0, height: 126, bound: { left: 0, right: 0, top: 0, bottom: 0 },
          // 爆炸动画序列帧
          boomArr: [
            { 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 },
          ],
          boomSpeed: 0.1,// 爆炸动画速度 值越大，速度越快
        },
        {
          src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01AyQNgC1FJvZgp5O1R_!!1080040467.png", probability: 1, width: 136, showHeight: 0, height: 126, bound: { left: 0, right: 0, top: 0, bottom: 0 }
        },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
        {
          src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01AyQNgC1FJvZgp5O1R_!!1080040467.png", probability: 1, width: 136, showHeight: 0, height: 126, bound: { left: 0, right: 0, top: 0, bottom: 0 },
        },
        {
          src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01AyQNgC1FJvZgp5O1R_!!1080040467.png", probability: 1, width: 136, showHeight: 0, height: 126, bound: { left: 0, right: 0, top: 0, bottom: 0 },
        },
      ],
      energyProbability: 1,//能量概率
      maxEnergyNum: 0,//限制最多能吃多少个能量（0：不限制）
      energyArr: [
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN014XhPxP1FJvZKH2Atm_!!1080040467.png", probability: 1, width: 94, height: 94, val: 6, showHeight: 0, bound: { left: 0, right: 0, top: 0, bottom: 0 } },//showHeight:出现的高度
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01LY1v8r1FJvZMipHyn_!!1080040467.png", probability: 1, width: 94, height: 94, val: 2, showHeight: 0, bound: { left: 0, right: 0, top: 0, bottom: 0 } },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01UKH6jB1FJvZN3Fe7y_!!1080040467.png", probability: 1, width: 94, height: 94, val: 5, showHeight: 0, bound: { left: 0, right: 0, top: 0, bottom: 0 } },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN016ALiAh1FJvZHfakok_!!1080040467.png", probability: 1, width: 94, height: 94, val: 3, showHeight: 0, bound: { left: 0, right: 0, top: 0, bottom: 0 } },
      ]
    }
  },
  onLoad() {
  },
  onRef(game) {
    this.flyairComponent = game;
  },
  overFun() {
    this.flyairComponent.stop();
  },
  beginFun() {
    this.flyairComponent.start();
  },
  continueFun() {
    this.flyairComponent.continue();
  },
  resetFun() {
    this.flyairComponent.reset();
  },
  pauseFun(){
    this.flyairComponent.pause();
  },

  onFinish() {
    my.alert({
      content: "游戏结束"
    })
  },
  onProgress(progress) {
    // 资源读取进度回调
  },
  onError(e) {
    // 资源读取报错回调
  },
  onInitDone() {
    /* my.alert({
      content: "游戏初始化完成"
    }) */
  },
  onUpdate(item) {
    //吃掉元素时回调，item：吃掉的元素对象
    //item:{x:0,y:0,imgObj:{}}
    /* my.alert({
      content: "游戏消除了"
    }) */
  },
});

• xaml

  <!-- 
    speed：初始速度
    max-speed:最大速度
    speed-step:速度递增值 
    speed-step-height:指定高度递增一次速度
    barrier-height-step:两个元素间隔距离递减速度
    barrier-max-height:元素之间的最大高度，此处值为玩家高度的倍数(如果超过容器一半高度，则取容器一般高度)
    player-bottom:玩家离底部距离
    firstShowHeight:元素初始化出现在屏幕最下端的位置（不传或传0，则默认在总高度的一半位置）
    no-over:true游戏触发到障碍物不结束，会回调onUpdate传入障碍物
    score-pos:分数位置属性（不传则不显示）
    time-pos:倒计时位置属性（不传则不显示）
    isVertical:是否可以上下移动
    isTimeOverAnimal:游戏时间结束结束游戏时，player动画是否执行，默认false不执行（如果需要执行，必须开启playerNoAnimal:true）
    playerNoAnimal:player元素是否有结束动画，true：有动画
    game-col: 元素掉落总列数，默认为3列
  -->
  <game-flyair 
                speed="{{1.5}}" 
                max-speed="{{10}}"
                speed-step="{{0.1}}"
                speed-step-height="{{200}}"
                barrier-height-step="{{0}}"
                barrier-max-height="{{1.5}}"
                no-over="{{true}}"
                player-bottom="{{0}}"
                firstShowHeight="{{10}}"
                gameSource="{{gameSource}}"
                score-pos="{{scorePos}}"
                time-pos="{{timePos}}"
                isTimeOverAnimal="{{!true}}"
                playerAnimal="{{false}}"
                game-col="{{8}}"
                isVertical="{{!true}}"
                onRef="onRef"
                onProgress="onProgress"
                onError="onError"
                onFinish="onFinish" 
                onInitDone="onInitDone" 
                onUpdate="onUpdate" 
  ></game-flyair>