game-claw

游戏

安装

npm install game-claw

使用

必须开启 "enableSkia": "true"

• json

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

• mini.project.json

{
  "node_modules_es6_whitelist": [
    "common-game"
  ]
}

• js

Page({
  data: {
    gameSource: {
      baseOps: {
        wczY: 10,//抓取时，y轴误差值
        wczX: 30,//抓取时，中心点误差值(注：如果元素上有wczX参数，则使用元素的wczX值)值越大越容易抓中
        clawDuration: 0.5,//爪子下拉动画时间
        maxHeight: 700,//爪子最大升的长度
        // saveBaseX: true,//保持原位置，默认false会让精灵居中
        player: {//爪子左右移动区域和速度
          minX: 156,
          maxX: 580,
          speed: 0,
        },
        singlePro: {//单个产品尺寸，显示按照此尺寸居中显示，如果大于此尺寸，就做等比缩放
          width: 180,
          height: 210
        },
        line1: {
          noClaw: false,//true:这一行不会被抓取
          y: 800,//第一行y轴坐标
          baseX: 70,//第一行起始点
          speed: -1,//移动速度，正数向右移动，负数向左移动
        },
        line2: {
          y: 900,//第二行y轴坐标
          baseX: 0,//第二行起始点
          speed: 1,//移动速度，正数向右移动，负数向左移动
        }
      },
      player: {
        tranHead: { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017gBJ4w1FJvh0bYj19_!!1080040467.png", "width": "86", "height": "25", x: 375, y: 100, offsetY: -25 },//透明head，和head一致
        head: { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Nl2dQK1FJvgtYk9M0_!!1080040467.png", "width": "86", "height": "25" },
        line: { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN0108r16o1FJvgvlPzhl_!!1080040467.png", "width": "16", "height": "474" },
        claw: { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN011LK4261FJvgmW6fru_!!1080040467.png", "width": "122", "height": "165", bounds: { bottom: 20 } },
        light: {//抓取成功后，播放的动画
          width: 240,
          height: 240,
          boomSpeed: 0.3,//速度
          srcArr: [
            { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01T6AXmK1FJvgtd3KuN_!!1080040467.png", "name": "1.png", "width": "240", "height": "240" },
            { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01sDyctZ1FJvh4m8pD8_!!1080040467.png", "name": "2.png", "width": "240", "height": "240" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01elFJje1FJvh2F9bbd_!!1080040467.png", "name": "3.png", "width": "240", "height": "240" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01MkUoON1FJvh5tRpld_!!1080040467.png", "name": "4.png", "width": "240", "height": "240" },
          ],
        },
      },
      items: [
        // 元素使用bounds的left和right控制中心点
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EJezT31FJvgwX7bOP_!!1080040467.png", "name": "1.png", "width": "125", "height": "120", bounds: { top: 0, right: 0, left: 0 }, wczX: 63, "val": "10", showLine: [1] },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01bHN6BW1FJvgt2gERy_!!1080040467.png", "name": "2.png", "width": "69", "height": "208", bounds: { top: 0, right: 0, left: 0 }, wczX: 35, "val": "10", showLine: [1] },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01OeiWM01FJvgvvIjKn_!!1080040467.png", "name": "3.png", "width": "74", "height": "213", bounds: { top: 0, right: 0, left: 0 }, wczX: 37, "val": "10", showLine: [1] },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01KbwHTn1FJvh2bpXt7_!!1080040467.png", "name": "4.png", "width": "189", "height": "166", bounds: { top: 0, right: 0, left: 0 }, wczX: 95, "val": "10", showLine: [2] },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01JpUIa11FJvh4Q2tFG_!!1080040467.png", "name": "5.png", "width": "123", "height": "218", bounds: { top: 0, right: 0, left: 0 }, wczX: 62, "val": "10", showLine: [2] },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Fc6gjS1FJvgrU9bK8_!!1080040467.png", "name": "6.png", "width": "180", "height": "124", bounds: { top: 0, right: 0, left: 30 }, wczX: 90, "val": "10", showLine: [2] },
      ]
    }
  },
  onLoad() {
  },
  beginFun(e) {
    // 开始游戏 必须在游戏初始化完成之后开始
    this.gameComponent.onEvent("start");
  },
  stopFun() {
    this.gameComponent.onEvent("stop");
  },
  resetFun() {
    this.gameComponent.onEvent("init");
  },
  isShowFun() {
    this.setData({
      showGame: !this.data.showGame
    })
  },
  getFun() {
    this.gameComponent.onEvent("runClaw");
  },

  onRef(game) {
    this.gameComponent = game;
    console.log("进入游戏")
  },
  onInitDone() {
    /* my.alert({
      content: "游戏初始化完成"
    }) */
  },
  onUpdate(res) {
    // res : {img,totalScore}
    console.log("抓到的元素：", res)
    // 默认抓完就停止,如需继续,则手动调用开始
    this.beginFun();
  },
  onGameOver() {
    // 所有元素都被抓完了回调方法
    console.log("游戏结束了或者所有元素都被抓完了")
  },
  onVersionError() {
    console.error("low version...")
  }
});

• xaml

<view class="pageBox">
  <view class="gameBox" a:if="{{!showGame}}">
    <game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onUpdate="onUpdate" onGameOver="onGameOver" />
  </view>
  
  <view onTap="beginFun" style="position:relative;z-index: 10;">开始</view>
  <view onTap="stopFun" style="position:relative;z-index: 10;">停止</view>
  <view onTap="resetFun" style="position:relative;z-index: 10;">重置游戏</view>
  <view onTap="isShowFun" style="position:relative;z-index: 10;">切换</view>
  <view onTap="getFun" style="position:relative;z-index: 10;">吸</view>
</view>

-acss

.pageBox{
  position: absolute;
  width: 750rpx;
  height: 100vh;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.gameBox{
  position: relative;
  width: 750rpx;
  height: 1200rpx;
  /* background: #323449; */
  background-color: #ccc;
}