game-jiukefei

游戏

安装

npm install game-jiukefei

使用

必须开启 "enableSkia": "true"

• json

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

• mini.project.json

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

• js

Page({
  data: {
    gameSource: JSON.stringify({
      baseOps: {
        speed: { min: 10, max: 30, step: 1, intervalstepH: 1000 },//移动速度
        firstY: 200,//首次加载游戏第一个元素的底部坐标位置
        intervalStep: 1,//两个物体之间的间隔递减值
        intervalStepH: 50,//移动指定距离递减一次
        minIntervalH: 420,//两个物体之间的最小间隔距离
        maxIntervalH: 600,//两个物体之间的间隔距离
        maxCols: 5,//一共有多少列
      },
      items: [
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01TKGOap1FJvhNTbBAe_!!1080040467.png", probability: 1, val: 0, time: -5, tip: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01YXIDF11FJvhNTai4T_!!1080040467.png", fadeTime: 0.5 } },//加5秒时长
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01B2qlNg1FJvhWpdsLY_!!1080040467.png", probability: 5, val: 5, tip: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01zbJp0N1FJvhfbIGp5_!!1080040467.png", fadeTime: 0.5 } },//只加分数
        // { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ZKpfSt1FJveOLp9Fs_!!1080040467.png", probability: 1, val: 0, isDie: true },//碰撞结束游戏
      ],
      player: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01mZdGXj1FJvhUW2VGB_!!1080040467.png", bound: { left: 0, right: 0, bottom: 0, top: 50 }, moveY: false, bottom: 100, },

      timePos: {
        align: "right",
        x: 518,
        y: 90,
        bg: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01mDQmVu1FJvhbpQZdn_!!1080040467.png", x: 224, y: 98 },
        isSplitHouse: !true,//是否拆分成时分秒
        time: 20,//倒计时时间
        // 时间数字图片 0 - 9
        numOffset: -4,//数字两边空白太多，增加偏移量
        numArr: [
          { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN013esOre1FJvhSLXOvY_!!1080040467.png", "val": "0" },
          { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01rEIipC1FJvhTsWESl_!!1080040467.png", "val": "1" },
          { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01axjI5j1FJvhWjqZ7k_!!1080040467.png", "val": "2" },
          { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN012HAgdn1FJvhSLVaeL_!!1080040467.png", "val": "3" },
          { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01sNlUUm1FJvhbpqDZZ_!!1080040467.png", "val": "4" },
          { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN014ZwJ5v1FJvhdkD5Ta_!!1080040467.png", "val": "5" },
          { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01QBNTH41FJvhfeOPUa_!!1080040467.png", "val": "6" },
          { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01s1dVo71FJvhb8VUuv_!!1080040467.png", "val": "7" },
          { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN010WoKcF1FJvhdkExr2_!!1080040467.png", "val": "8" },
          { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01ybIVxP1FJvhdkBwmY_!!1080040467.png", "val": "9" },
        ],
      },
      scorePos: {
        align: "center",
        x: 644,
        y: 60,
        isDouHao: !true,
        bg: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01qVF5Zl1FJvhYuL8pQ_!!1080040467.png", x: 582, y: 118 },
        // 分数数字图片 0 - 9
        numOffset: -4,//数字两边空白太多，增加偏移量
        numArr: [
          { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01zSYxrY1FJvhbpgPrW_!!1080040467.png", "val": "0" },
          { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01j4pNLR1FJvhXXJoGZ_!!1080040467.png", "val": "1" },
          { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01O3jlnC1FJvhbpfg6r_!!1080040467.png", "val": "2" },
          { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01cjqvgA1FJvhd14S2S_!!1080040467.png", "val": "3" },
          { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Erd6sz1FJvhfeFoa5_!!1080040467.png", "val": "4" },
          { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01w81USo1FJvhXXLcXK_!!1080040467.png", "val": "5" },
          { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01KVwlOo1FJvhYUbtPI_!!1080040467.png", "val": "6" },
          { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01e2BpzS1FJvhNWS4wR_!!1080040467.png", "val": "7" },
          { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zxuLgc1FJvhNWQwG8_!!1080040467.png", "val": "8" },
          { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01anMHjx1FJvhaBkmTv_!!1080040467.png", "val": "9" },
        ],
      },
    }),
  },
  onLoad(query) {
  },

  playFun() {
    this.gameComponent.onEvent("start");
  },
  resetFun() {
    this.gameComponent.onEvent("reset");
  },

  onRef(game) {
    this.gameComponent = game;
    console.log("进入游戏")
  },
  onInitDone() {
    // my.alert({
    //   content: "游戏初始化完成"
    // })
    // this.playFun();
  },
  onUpdate(ops) {
    // { totalScore: 0, imgObj: { } }
    console.log(ops)
  },
  onGameOver({ totalScore }) {
    console.log(totalScore)
  },
  onTimeUpdate(time) {
    console.log("时间", time)
  }
})

• xaml

<view class="pageBox">
  <game gameSource="{{gameSource}}" 
    onRef="onRef"
    onInitDone="onInitDone" 
    onTimeUpdate="onTimeUpdate"
    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%);

  background-color: #ccc;
}