gm-game-music v0.3.0

gm-game-music

音乐方块游戏

安装

npm install gm-game-music

使用

必须开启 "enableSkia": "true"

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

• json

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

• js

Page({
  data: {
    gameSource: {
      items: [
        {
          src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01SwwmP61FJvaLej83C_!!1080040467.jpg",
          type: "short",
          num: 44,
          width: 187,
          height: 307,
          active: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ZEgNCQ1FJvaOXd1QS_!!1080040467.jpg" },
          score: [
            {
              min: 0,//最小百分比
              max: 10,//最大百分比
              score: 10,//分数
              type: "PERFECT",//类型
              src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MkIt7L1FJvaOl6Unk_!!1080040467.png",
              width: 180,
              height: 48,
              top: 396,
              fadeTime: 0,//毫秒 显示多久消失 0就不消失，直到下次更改状态
              add: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qxlnUw1FJvaNXH49l_!!1080040467.png", width: 44, height: 64 },
              minNum: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R0o0xt1FJvaNgc6WR_!!1080040467.png", width: 480, height: 64, fadeTime: 500 },
            },
            {
              min: 10,//最小百分比
              max: 25,//最大百分比
              score: 6,//分数
              type: "AWESOME",//类型
              src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01WfdPUM1FJvaMxAFwq_!!1080040467.png",
              width: 222,
              height: 48,
              top: 396,
              fadeTime: 0,//毫秒 显示多久消失 0就不消失，直到下次更新状态
              add: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qxlnUw1FJvaNXH49l_!!1080040467.png", width: 44, height: 64 },
              minNum: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R0o0xt1FJvaNgc6WR_!!1080040467.png", width: 480, height: 64, fadeTime: 500 },
            },
            {
              min: 25,//最小百分比
              max: 60,//最大百分比
              score: 4,//分数
              type: "GOOD",//类型
              src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Dk1AvX1FJvaQa0sSl_!!1080040467.png",
              width: 138,
              height: 48,
              top: 396,
              fadeTime: 0,//毫秒 显示多久消失 0就不消失，直到下次更新状态
              add: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qxlnUw1FJvaNXH49l_!!1080040467.png", width: 44, height: 64 },
              minNum: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R0o0xt1FJvaNgc6WR_!!1080040467.png", width: 480, height: 64, fadeTime: 500 },
            },
            {
              min: 60,//最小百分比
              max: 100,//最大百分比
              score: 0,//分数
              type: "MISS",//类型
              src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zCBu961FJvaMeJ341_!!1080040467.png",
              width: 106,
              height: 48,
              top: 396,
              fadeTime: 0,//毫秒 显示多久消失 0就不消失，直到下次更新状态
              add: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qxlnUw1FJvaNXH49l_!!1080040467.png", width: 44, height: 64 },
              minNum: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R0o0xt1FJvaNgc6WR_!!1080040467.png", width: 480, height: 64, fadeTime: 500 },
            },
          ],
        },
        {
          src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01tAnTWF1FJvaNO6NDh_!!1080040467.png",
          type: "long",
          num: 22,
          width: 251,
          height: 679,
          active: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN016zVU2B1FJvaSE1p26_!!1080040467.png" },
          bound: { left: 32, right: 32, top: 32, bottom: 32 },
          score: [
            {
              min: 95,//最小百分比
              max: 100,//最大百分比
              score: 15,//分数
              type: "PERFECT",//类型
              src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MkIt7L1FJvaOl6Unk_!!1080040467.png",
              width: 180,
              height: 48,
              top: 396,
              fadeTime: 0,//毫秒 显示多久消失 0就不消失，直到下次更新状态
              add: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qxlnUw1FJvaNXH49l_!!1080040467.png", width: 44, height: 64 },
              minNum: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R0o0xt1FJvaNgc6WR_!!1080040467.png", width: 480, height: 64, fadeTime: 500 },
            },
            {
              min: 85,//最小百分比
              max: 95,//最大百分比
              score: 12,//分数
              type: "AWESOME",//类型
              src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01WfdPUM1FJvaMxAFwq_!!1080040467.png",
              width: 222,
              height: 48,
              top: 396,
              fadeTime: 0,//毫秒 显示多久消失 0就不消失，直到下次更新状态
              add: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qxlnUw1FJvaNXH49l_!!1080040467.png", width: 44, height: 64 },
              minNum: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R0o0xt1FJvaNgc6WR_!!1080040467.png", width: 480, height: 64, fadeTime: 500 },
            },
            {
              min: 40,//最小百分比
              max: 85,//最大百分比
              score: 8,//分数
              type: "GOOD",//类型
              src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Dk1AvX1FJvaQa0sSl_!!1080040467.png",
              width: 138,
              height: 48,
              top: 396,
              fadeTime: 0,//毫秒 显示多久消失 0就不消失，直到下次更新状态
              add: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qxlnUw1FJvaNXH49l_!!1080040467.png", width: 44, height: 64 },
              minNum: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R0o0xt1FJvaNgc6WR_!!1080040467.png", width: 480, height: 64, fadeTime: 500 },
            },
            {
              min: 0,//最小百分比
              max: 40,//最大百分比
              score: 0,//分数
              type: "MISS",//类型
              src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zCBu961FJvaMeJ341_!!1080040467.png",
              width: 106,
              height: 48,
              top: 396,
              fadeTime: 0,//毫秒 显示多久消失 0就不消失，直到下次更新状态
              add: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qxlnUw1FJvaNXH49l_!!1080040467.png", width: 44, height: 64 },
              minNum: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R0o0xt1FJvaNgc6WR_!!1080040467.png", width: 480, height: 64, fadeTime: 500 },
            },
          ],
        },
      ],
      totalScore: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01qA65TD1FJvaKwPMt9_!!1080040467.png", width: 1130, height: 146, top: 260 },
      line: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01dkTbHO1FJvaQ0ljDP_!!1080040467.png", width: 750, height: 17, bottom: 340 },
      music: {
        bg: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01bVzFqC1FJvaOYBfCu_!!1080040467.png", width: 639, height: 65, top: 166 },
        play: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01aOok8F1FJvaITHQ9h_!!1080040467.png", width: 108, height: 108, top: 166 }
      },
      clickPlayer: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01GjOGcX1FJvaKk8GRQ_!!1080040467.png", width: 156, height: 156 }
    },
    audio: "http://isv-vod.alibabausercontent.com/RGjZJMdpNgKGVQeEyw8/mxVPucoRR1vDtdZicz6?auth_key=1600589495-0-0-996d53997df9421727cc4280354f48ee",
    per: 0
  },
  onLoad() {
  },
  onRef(game) {
    this.musicComponent = game;
  },
  beginFun() {
    let bl = this.musicComponent.start();
    if (!bl) {
      my.alert({ content: "音乐还在缓冲中..." })
    }
  },
  overFun() {
    this.musicComponent.stop();
  },
  resetFun() {
    this.musicComponent.reset();
  },

  onFinish(score) {
    my.alert({
      content: "游戏结束,总分数：" + score
    })
  },
  onProgress(progress) {
    // 资源读取进度回调
  },
  onError(e) {
    // 资源读取报错回调
  },
  onInitDone() {
    my.alert({
      content: "游戏初始化完成"
    })
  },
  onUpdate(item) {
    /* 
    item:{
      per:百分比
      scoreObj:消除分数对象
      sprite:{
        imgObj:消除方块对象
      }
    }
    scoreObj:{
              min: 95,//最小百分比
              max: 100,//最大百分比
              score: 15,//分数
              type: "PERFECT",//类型
              src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MkIt7L1FJvaOl6Unk_!!1080040467.png",
              width: 180,
              height: 48,
              top: 396,
              fadeTime: 0,//毫秒 显示多久消失 0就不消失，直到下次更新状态
              add: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qxlnUw1FJvaNXH49l_!!1080040467.png", width: 44, height: 64 },
              minNum: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R0o0xt1FJvaNgc6WR_!!1080040467.png", width: 480, height: 64, fadeTime: 500 },
            }
     */
    // console.log(item)
    /* my.alert({
      content: "游戏消除了"
    }) */
  },
  onAudioDone() {
    my.alert({ content: "音乐缓存完毕" })
  }
});

• xaml

  <!-- 
    audio:音乐地址
    game-col: 元素掉落总列数，默认为4列
  -->
  <game-music 
                gameSource="{{gameSource}}"
                game-col="{{4}}"
                audio="{{audio}}"
                onRef="onRef"
                onProgress="onProgress"
                onError="onError"
                onFinish="onFinish" 
                onInitDone="onInitDone" 
                onUpdate="onUpdate" 
                onAudioDone="onAudioDone"
  />