game-rubble v0.0.1

game-rubble

游戏

安装

npm install game-rubble

使用

必须开启 "enableSkia": "true"

• json

{
    "usingComponents": {
        "game": "game-rubble/index"
    }
}

• js

Page({
  data: {
    gameSource: {
      r: 30,//橡皮擦半径
      bg: { src: 'https://img.alicdn.com/imgextra/i3/2185320355/O1CN01TfKKII1EUdOj2kcrz_!!2185320355.png', width: 750, height: 1700 },//刮的图片
    },
  },
  onLoad(query) {
  },

  resetFun() {
    this.gameComponent.reset();
  },

  onInitDone(e) {
    this.gameComponent = e.ref;
    console.log("游戏初始化完成", e)
  },
  onUpdate(ops) {
    // 返回檫掉区域百分比
    if (ops.per >= 40) {
    }
  },
})

• xaml

<view class="pageBox">
  <game gameSource="{{gameSource}}" onInitDone="onInitDone" onUpdate="onUpdate" />
</view>

<view onTap="resetFun" style="position:absolute;left: 50%;bottom: 100rpx;">重置</view>

-acss

.pageBox{
  position: absolute;
  width: 750rpx;
  height: 800rpx;
  left: 0;
  top: 300rpx;

  background-color: #f00;
  background: url("https://img.alicdn.com/imgextra/i1/2185320355/O1CN01z6Qva81EUdO3JsEl5_!!2185320355.png") no-repeat center top;
  background-image: url("https://img.alicdn.com/imgextra/i2/2185320355/O1CN01G32WVm1EUdOmGlIEs_!!2185320355.jpg");
  background-size: 750rpx auto;
}