Gm-game-colorblock

色块匹配小游戏

安装

npm install gm-game-colorblock

使用

• json

{
    "usingComponents": {
        "colorblock": "/pages/components/colorBlock/colorBlock"
    }
}

• js

Page({
  data: {
    checkprobability: 3,
    imgs: [
      { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01wgmopf1FJvZCSWGJf_!!1080040467.jpg", id: 1, width: 300, height: 300, probability: 1 },//probability：随机出现概率
      { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01qhLpOE1FJvZPzAs58_!!1080040467.png", id: 2, width: 300, height: 300, probability: 1 },
      { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01KXz8vN1FJvZZmspbu_!!1080040467.jpg", id: 3, width: 300, height: 300, probability: 1 },
      { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01G4o4jD1FJvZUm5pMA_!!1080040467.png", id: 4, width: 300, height: 300, probability: 1 },
      { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01wdhn8n1FJvZOeWKXC_!!1080040467.png", id: 5, width: 300, height: 300, probability: 1 },
    ],
  },
  onLoad() {
  },
  startGame() {
    this.colorBlockGameComponent.start();
  },
  stopGame() {
    // 手动停止游戏
    this.colorBlockGameComponent.stop();
  },
  // 下面为组件回调方法
  onChange(item, checkstr) {
  },
  onStop(data) {
    console.log("游戏结束")
  },
  onRender() {
    console.log("游戏渲染完成")
  },
  onStart() {
    console.log("游戏开始了")
  },
});

• xaml

<colorblock imgs="{{imgs}}" 
                speedminx="{{0}}" //横向最小速度
                speedmaxx="{{2}}" //横向最大速度
                speedminy="{{3}}" //纵向最小速度
                speedmaxy="{{4}}" //纵向最大速度
                fadetime="{{0}}" //成功匹配后，间隔时间消失
                scalemin="{{0.5}}" //缩放比例最小值
                scalemax="{{1}}" //缩放比例最大值
                checkstr="{{'id=1'}}"//匹配属性 键=值 格式传递
                checkprobability="{{checkprobability}}" //当前匹配属性出现的概率
    ></colorblock>