Gm-game-musicgame1

音符小游戏

安装

npm install gm-game-musicgame1

使用

• json

{
    "usingComponents": {
        "musicgame": "/musicGame1/musicGame"
    }
}

• js

Page({
  data: {
    imgArr: [
      { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01JA6vs01FJvYxiXyon_!!1080040467.png", width: 133, height: 149, score: 1, probability: 1 },
      { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01xfKlIt1FJvYx803Af_!!1080040467.png", width: 120, height: 164, score: 1, probability: 1 },
      { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01jm629W1FJvZ1gl15A_!!1080040467.png", width: 191, height: 245, score: 10, probability: 1 },
    ],
    btnArr: [
      { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TggVY81FJvZruison_!!1080040467.png", width: 120, height: 60, active: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EUJGrL1FJvZy2WAWs_!!1080040467.png" },
      { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TggVY81FJvZruison_!!1080040467.png", width: 120, height: 60, active: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EUJGrL1FJvZy2WAWs_!!1080040467.png" },
      { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TggVY81FJvZruison_!!1080040467.png", width: 120, height: 60, active: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EUJGrL1FJvZy2WAWs_!!1080040467.png" },
      { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TggVY81FJvZruison_!!1080040467.png", width: 120, height: 60, active: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EUJGrL1FJvZy2WAWs_!!1080040467.png" },
    ],
    lineObj: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EFuPWF1FJvZy2UI7u_!!1080040467.png", width: 750, height: 2 }
  },
  onLoad() {
  },
  // 下面为组件回调方法
  onChange(item) {
    // 消失回调方法 item包含匹配元素 基本信息、位置、消失触发百分比
    // percentage：消失点的百分比
    console.log("par:", item)
  },
  onStop(data) {
    console.log("游戏结束")
  },
  onStart() {
    console.log("游戏开始了")
  },
});

• xaml

      <!-- 
        组件注入页面名：musicComponent
        组件方法：
            start()：开始游戏
            goOnGame()：继续游戏
            restartGame()：重新开始游戏

        imgSource:图片资源
        btnSource:按钮图片
        btnHeight:底部按钮高度
        btnShowTop:按钮是否显示在上面，true：显示在上面，怎canvas区域撑满整个，false：按钮不浮在上面
        calcScoreLineBottomHeight:掉落产品计算边界距离底部的高度
        lineSource:分界线对象
        minSpeed：最小速度
        maxSpeed：最大速度（如果速度要求一致，则让minSpeed==maxSpeed即可）
     -->
    <musicgame
        imgSource="{{imgArr}}"
        btnSource="{{btnArr}}"
        btnHeight="{{100}}"
        btnShowTop="{{true}}"
        calcScoreLineBottomHeight="{{100}}"
        lineSource="{{lineObj}}"
        onChange="{{onChange}}"
        minSpeed="{{3}}"
        maxSpeed="{{6}}"
    ></musicgame>