game-kelaqi2

游戏

安装

npm install game-kelaqi2

使用

必须开启 "enableSkia": "true"

• json

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

• mini.project.json

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

• js

Page({
  data: {
    gameSource: JSON.stringify({
      baseOps: {
        moveSpeed: 20,//点击一次移动的距离
        showX: 750 / 2,
        modelY: 1000,//model显示的Y
        otherY: 100,//其他碎片元素出现的时候位置
        isAni: !true,//是否动画移动
        aniTime: 0.1,//动画时间
      },
      items: [
        {
          model: { src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01E3AF9D1EUdMKAzdKJ_!!2185320355.png" },
          arr: [
            { src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01v7Vxe91EUdMQ09WI8_!!2185320355.png", endPosOffset: { x: 88, y: 213 } },
            { src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01ZBVrnr1EUdMNz2bUf_!!2185320355.png", endPosOffset: { x: 88, y: 104 } },
            { src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01zaqQ341EUdMJUcKCo_!!2185320355.png", endPosOffset: { x: 88, y: 53 } },
            { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01zRpPhF1EUdMH3swVJ_!!2185320355.png", endPosOffset: { x: 123, y: 35 } },
            { src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01EbtekL1EUdMJPKhmx_!!2185320355.png", endPosOffset: { x: 41, y: 78 } },
          ]
        },
        {
          model: { src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01by5eCM1EUdMJPO7yr_!!2185320355.png" },
          arr: [
            { src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01KuvG0E1EUdMOlyoZH_!!2185320355.png", endPosOffset: { x: 90, y: 210 } },
            { src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01cYTTJY1EUdMKB3K6D_!!2185320355.png", endPosOffset: { x: 90, y: 90 } },
            { src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01HsM6tw1EUdMQ0CsLQ_!!2185320355.png", endPosOffset: { x: 90, y: 70 } },
            { src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01K7cDe61EUdMN1NQnW_!!2185320355.png", endPosOffset: { x: 37, y: 62 } },
            { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01LwuhKA1EUdMLGPxRr_!!2185320355.png", endPosOffset: { x: 127, y: 108 } },
          ]
        },
        {
          model: { src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01dXveZ31EUdMEmTzcq_!!2185320355.png" },
          arr: [
            { src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01i7N3CX1EUdMLhcuoG_!!2185320355.png", endPosOffset: { x: 90, y: 210 } },
            { src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN017rWaDC1EUdMLhdmsR_!!2185320355.png", endPosOffset: { x: 90, y: 92 } },
            { src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01PhsHkg1EUdMLGTiRm_!!2185320355.png", endPosOffset: { x: 95, y: 55 } },
            { src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN017iGFsK1EUdMGLvPpE_!!2185320355.png", endPosOffset: { x: 45, y: 76 } },
            { src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01nxvKxK1EUdMN1PFDb_!!2185320355.png", endPosOffset: { x: 126, y: 102 } },
          ]
        },
      ],
      timePos: {
        align: "center",
        x: 594,
        y: 280,
        // 时间数字图片 0 - 9
        numOffset: 0,//数字两边空白太多，增加偏移量
        numArr: [
          { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01A3hENV1EUdMOljZZ7_!!2185320355.png", "val": ".", "width": "4", "height": "19" },
          { "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01YwK25n1EUdMRwbccP_!!2185320355.png", "val": "s", "width": "11", "height": "19" },
          { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01qAArfR1EUdMJUQZb5_!!2185320355.png", "val": "0", "width": "12", "height": "19" },
          { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01HpTSMQ1EUdMN17Jrb_!!2185320355.png", "val": "1", "width": "11", "height": "19" },
          { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01oSOLjE1EUdMNyjoCa_!!2185320355.png", "val": "2", "width": "13", "height": "19" },
          { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN018qLoqE1EUdMGLcYCM_!!2185320355.png", "val": "3", "width": "13", "height": "19" },
          { "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01Faf4kZ1EUdMOlhh95_!!2185320355.png", "val": "4", "width": "14", "height": "19" },
          { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN0130fwyM1EUdMQlMRqe_!!2185320355.png", "val": "5", "width": "13", "height": "19" },
          { "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01f0Mudv1EUdM9uVghE_!!2185320355.png", "val": "6", "width": "12", "height": "19" },
          { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01UU02v31EUdMOlg1C6_!!2185320355.png", "val": "7", "width": "13", "height": "19" },
          { "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01MlfzY31EUdMEmCfbF_!!2185320355.png", "val": "8", "width": "13", "height": "19" },
          { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01UAAYex1EUdMGLcgWL_!!2185320355.png", "val": "9", "width": "13", "height": "19" },
        ],
      },
    }),
  },
  onLoad(query) {
  },

  playFun() {
    this.gameComponent.onEvent("start");
  },
  resetFun() {
    // reset: true:强制刷新 false:游戏结束才重置有效
    this.gameComponent.onEvent("reset", { reset: !true, idx: 1 });
  },

  onInitDone(e) {
    console.log("游戏初始化完成...")
    this.gameComponent = e.ref;

    // 参数对应items下标，渲染对应数据
    this.gameComponent.onEvent("init2", 0);
  },
  onUpdate(ops) {
    // { totalScore: 0, imgObj: { } }
    console.log("update:", ops)
  },
  onGameOver(totalScore) {
    console.log("gameOver:", totalScore)
  }
})

• xaml

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

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

• acss

.pageBox{
  position: absolute;
  width: 750rpx;
  height: 1200rpx;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}