game-bigrich

游戏

安装

npm install game-bigrich

使用

必须开启 "enableSkia": "true"

• json

{
    "usingComponents": {
        "game": "game-bigrich/bigrich"
    }
}

• mini.project.json

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

• js

Page({
  data: {
    gameSource: JSON.stringify({
      ops: {
        boxSpriteAlpha: 0,//显示单个格子
        singleBoxDuration: 0.1,//单个格子移动的时间
        bgMoveDuration: 1,//单次人物移动完之后背景移动动画时间
        minMoveNum: 3,//必须超过此值才移动背景
        centerPos: {
          x: 750 / 2,
          y: 1200
        },
        box: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01kh2zI31FJvfXaE7Dw_!!1080040467.png" },
        boxOffset: {
          //单个格子的偏移量
          left: { x: 118, y: 52 },
          right: { x: 129, y: 55 },
          bottom: { x: 102, y: 60 },
        },
      },
      start: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01VHKQiJ1FJvfVovhXG_!!1080040467.png", y: 1300 },
      map: {
        src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01aIpIYK1FJvfWuJk7Z_!!1080040467.png", offset: { left: 164, top: 0, right: 0, bottom: 0 },
        childArr: [
          // boxType: 1:黄色 2:红色 3:橙色 4:酒红色
          { fx: "right", boxType: 1 },
          { fx: "right", boxType: 2 },
          { fx: "right", boxType: 3 },
          { fx: "left", boxType: 4 },
          { fx: "right", boxType: 3 },
          { fx: "right", boxType: 1 },
          { fx: "left", boxType: 2 },
          { fx: "left", boxType: 1 },
          { fx: "right", boxType: 4 },
          { fx: "left", boxType: 2 },
          { fx: "left", boxType: 1 },
          { fx: "right", boxType: 3 },
          { fx: "right", boxType: 4 },
          { fx: "bottom", boxType: 2 },
          { fx: "right", boxType: 3 },
          { fx: "right", boxType: 1 },
          { fx: "right", boxType: 2 },
          { fx: "right", boxType: 1 },
          { fx: "right", boxType: 2 },
          { fx: "right", boxType: 3 },
          { fx: "right", boxType: 4 },
          { fx: "left", boxType: 3 },
          { fx: "right", boxType: 1 },
          { fx: "left", boxType: 3 },
          { fx: "right", boxType: 2 },
          { fx: "left", boxType: 1 },
          { fx: "left", boxType: 4 },
          { fx: "right", boxType: 2 },
          { fx: "right", boxType: 3 },
          { fx: "bottom", offset: { x: 0, y: -10 }, boxType: 4 },
          { fx: "right", boxType: 1 },
          { fx: "right", boxType: 4 },
          { fx: "left", boxType: 2 },
          { fx: "right", boxType: 3 },
          { fx: "right", boxType: 1 },
          { fx: "right", boxType: 4 },
          { fx: "right", boxType: 1 },
          { fx: "right", boxType: 2 },
          { fx: "left", boxType: 1 },
          { fx: "right", boxType: 3 },
          { fx: "right", boxType: 4 },
          { fx: "left", boxType: 3 },
          { fx: "left", boxType: 1 },
          { fx: "right", boxType: 4 },
          { fx: "left", boxType: 2 },
          { fx: "right", boxType: 1 },
          { fx: "right", boxType: 3 },
          { fx: "bottom", boxType: 2 },
          { fx: "right", boxType: 4 },
          { fx: "right", boxType: 2 },
          { fx: "left", boxType: 1 },
          { fx: "right", boxType: 4 },
          { fx: "right", boxType: 3 },
          { fx: "right", boxType: 4 },
          { fx: "right", boxType: 1 },
          { fx: "right", boxType: 2 },
          { fx: "right", boxType: 3 },
          { fx: "left", boxType: 4 },
          { fx: "right", boxType: 3 },
          { fx: "right", boxType: 1 },
          { fx: "left", boxType: 2 },
          { fx: "left", boxType: 1 },
          { fx: "right", boxType: 4 },
          { fx: "left", boxType: 2 },
          { fx: "left", boxType: 1 },
          { fx: "right", boxType: 3 },
          { fx: "right", offset: { x: 9, y: 0 }, boxType: 4 },
          { fx: "bottom", offset: { x: 0, y: -1 }, boxType: 2 },
          { fx: "right", boxType: 3 },
          { fx: "right", boxType: 1 },
          { fx: "right", boxType: 4 },
        ]
      },//offset：每个方向的格子边界偏移量
      player: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01mndmpw1FJvfWpgoMC_!!1080040467.png", offset: { x: 128, y: -34 } }
    }),
  },
  onLoad(query) {
  },

  playFun() {
    // 获取player元素后面6个格子对象 6:返回指定个数
    let t = this.gameComponent.onEvent("getBox", 6);
    console.log(t)
    // 开始移动，6：移动的格数
    // this.gameComponent.onEvent("go", 6);
  },

  onRef(game) {
    this.gameComponent = game;
    console.log("进入游戏")
  },
  onInitDone() {
    /* my.alert({
      content: "游戏初始化完成"
    }) */
    this.gameComponent.onEvent("initPos", 0);//人物初始位置
  },
  onUpdate(ops) {
    // { totalScore: 0, imgObj: { } }
    console.log(ops)
    // 获取player位置
    let pos = this.gameComponent.onEvent("getPlayerPos");
    this.setData({
      x: pos.x,
      y: pos.y
    })
  }
})

• xaml

  <view class="pageBox">
    <game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onUpdate="onUpdate" />
    <view style="position:absolute;width:200rpx;height:200rpx;background:rgba(0,0,0,0.3);left:{{x}}rpx;top:{{y}}rpx;"></view>
  </view>

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

-acss

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