game-mi4

游戏

安装

npm install game-mi4

使用

必须开启 "enableSkia": "true"

• json

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

• mini.project.json

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

• js

Page({
  data: {
    gameSource: {
      baseOps: {
        // 基础位置
        numBaseX: 100,
        numBaseY: 310,
        // 如果配置了每个元素的X位置，上面的基础X位置就失效
        num1X: 170,
        num2X: 270,
        num3X: 350,
        num4X: 396,
        num5X: 482,
        num6X: 560,

        // 匹配值
        ppz: "9.83",
        // 误差值
        wcz: "0.53"
      },
      player: {
        boomSpeed: "0.3",//初始速度
        maxSpeed: "1",//最大速度
        addSpeedTime: 30,//从默认速度加速到最大速度的时间，加到最大速度就不变了
        loop: true,
        // scale: { x: 0.5, y: 0.5 },
        x: "375",
        y: "600",
        anchor: { x: "0.5", y: "0.5" },
        json: require('./ani.json'),
        src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01pGKinl1FJvgxCloqf_!!1080040467.png"
      },
      number: [
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01fKGYoP1FJvgzA34nN_!!1080040467.png", "val": "0", "offsetX": "-20", "width": "109", "height": "205" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01N6kBj81FJvgxJzs13_!!1080040467.png", "val": "1", "offsetX": "-20", "width": "60", "height": "205" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01YHtaeP1FJvgvYTUQm_!!1080040467.png", "val": "2", "offsetX": "-20", "width": "111", "height": "205" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01gygA2Y1FJvgzqQifL_!!1080040467.png", "val": "3", "offsetX": "-20", "width": "110", "height": "205" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01aGVAI11FJvgzA1bLm_!!1080040467.png", "val": "4", "offsetX": "-20", "width": "123", "height": "205" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01IGDlKq1FJvguagSWr_!!1080040467.png", "val": "5", "offsetX": "-20", "width": "111", "height": "205" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zTWiKh1FJvgsyF4GD_!!1080040467.png", "val": "6", "offsetX": "-20", "width": "110", "height": "205" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01wCOnbr1FJvgy3vBAP_!!1080040467.png", "val": "7", "offsetX": "-20", "width": "108", "height": "205" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01MbkatX1FJvgrPf90i_!!1080040467.png", "val": "8", "offsetX": "-20", "width": "110", "height": "205" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01vPzQHT1FJvgi9h8vR_!!1080040467.png", "val": "9", "offsetX": "-20", "width": "110", "height": "205" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01CISo9R1FJvgzqXdNB_!!1080040467.png", "val": ".", "offsetX": "-20", "width": "60", "height": "205" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u9NT1h1FJvgzAJzho_!!1080040467.png", "val": "秒", "offsetX": "0", "width": "44", "height": "205" },
      ],
      bg: {
        src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN017PvNc51FJvgrP7yhP_!!1080040467.png",
        width: 750,
        height: 1700,
        x: 375,
        y: 550,
        anchor: { x: 0.5, y: 0.5 },
        minScale: 1,//默认缩放
        maxScale: 2,//最大缩放
        addScaleTime: 30,//从默认缩放到最大缩放的时间,加到最大就不变了
      }
    }
  },
  onLoad() {
  },
  beginFun(e) {
    // 开始游戏 必须在游戏初始化完成之后开始
    this.gameComponent.onEvent("start");
  },
  stopFun() {
    this.gameComponent.onEvent("stop");
  },
  resetFun() {
    this.gameComponent.onEvent("init");
  },
  isShowFun() {
    this.setData({
      showGame: !this.data.showGame
    })
  },

  onRef(game) {
    this.gameComponent = game;
    console.log("进入游戏")
  },
  onInitDone() {
    /* my.alert({
      content: "游戏初始化完成"
    }) */
  },
  onGameOver(data) {
    console.log(data)
  }
});

• xaml

<view class="pageBox">
  <view class="gameBox" a:if="{{!showGame}}">
    <game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onGameOver="onGameOver" />
  </view>
  <!--<view style="position:absolute;width:100%;height:2px;background:red;left:0;top:800rpx;"></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>

-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;
}