game-get

游戏

安装

npm install game-get

使用

必须开启 "enableSkia": "true"

• json

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

• mini.project.json

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

• js

Page({
  data: {
    gameSource: ({
      baseOps: {
        speed: { min: 10, max: 30, step: 0, intervalstepH: 5000 },//移动速度
        firstY: 200,//首次加载游戏第一个元素的底部坐标位置
        intervalStep: 1,//两个物体之间的间隔递减值
        intervalStepH: 50,//移动指定距离递减一次
        minIntervalH: 420,//两个物体之间的最小间隔距离
        maxIntervalH: 600,//两个物体之间的间隔距离
        maxCols: 5,//一共有多少列
        renderNum: { min: 1, max: 3 },//一次随机生成多少个元素
      },
      items: [
        { src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01CuBhJr1EUdObdWnoP_!!2185320355.png", audioName: "bomb1", probability: 1, val: 10, tip: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01iimxKZ1FJvlIXRM7Y_!!1080040467.png", fadeTime: 0.5 } },//加5秒时长
        { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01peODvg1EUdOXJjErO_!!2185320355.png", audioName: "bomb1", probability: 1, val: 10, tip: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01iimxKZ1FJvlIXRM7Y_!!1080040467.png", fadeTime: 0.5 } },//只加分数

        { src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01GPeDnD1EUdOXcYUgW_!!2185320355.png", audioName: "bomb1", probability: 1, val: -10, tip: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01RebWJE1FJvlRR2BGq_!!1080040467.png", fadeTime: 0.5 } },//只加分数
        // { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ZKpfSt1FJveOLp9Fs_!!1080040467.png", probability: 1, val: 0, isDie: true },//碰撞结束游戏
      ],
      player: {
        curIdx: 1,//当前玩家下标
        arr: [
          { src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01IUHHWr1EUdOZ6ALko_!!2185320355.png", bound: { left: 0, right: 0, bottom: 0, top: 0 }, moveY: false, bottom: 100, },
          { src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01JmMYRZ1EUdOUNVeih_!!2185320355.png", bound: { left: 0, right: 0, bottom: 0, top: 0 }, moveY: false, bottom: 100, },
          { src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01YULK2g1EUdOUNWG9l_!!2185320355.png", bound: { left: 0, right: 0, bottom: 0, top: 0 }, moveY: false, bottom: 100, },
        ]
      },

      scorePos: {
        align: "center",
        x: 145,
        y: 286,
        isDouHao: !true,
        // 分数数字图片 0 - 9
        numOffset: -4,//数字两边空白太多，增加偏移量
        numArr: [
          { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01k6L5iA1EUdOeFi8Ap_!!2185320355.png", "val": "0" },
          { "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01pDBPm61EUdOOGrMSW_!!2185320355.png", "val": "1" },
          { "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01ynwZqT1EUdOZXR8Ma_!!2185320355.png", "val": "2" },
          { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01DYomGL1EUdOXLHdxG_!!2185320355.png", "val": "3" },
          { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN015ru0lB1EUdOfRPlxC_!!2185320355.png", "val": "4" },
          { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01fP4V7a1EUdOdVRH8N_!!2185320355.png", "val": "5" },
          { "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01442jjD1EUdOZXP7eB_!!2185320355.png", "val": "6" },
          { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01nuMf131EUdOZ7gLEY_!!2185320355.png", "val": "7" },
          { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01dQeou11EUdOY6hfSF_!!2185320355.png", "val": "8" },
          { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01pAoGcN1EUdOVAKgG2_!!2185320355.png", "val": "9" },
        ],
        bg: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Wv8Hv81FJvlNa07I5_!!1080040467.png", x: 56, y: 260 },
      },
      scoreTip: {
        "v30": {
          src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01jwLlSr1FJvlOoMZZN_!!1080040467.png",
          fadeTime: 0.5
        },
        "v50": {
          src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01oM6OE91FJvlLSifDD_!!1080040467.png",
          fadeTime: 0.5
        },
        "v90": {
          src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01NJcb3L1FJvlUAqTWw_!!1080040467.png",
          fadeTime: 0.5
        },
      }
      // audio: {
      //   bomb1: { srcAudio: "http://isv-vod.alibabausercontent.com/mk8pOHtSi7MPYyhqseq/KLga47Xk8p4rE2JFaeV?auth_key=1668322708-0-0-cadb6bc238b5d078820ebdca2d74a4cb&w=0&h=0&e=sd&t=212b629c16680635082943279e5550&b=tb_rcpaasm&p=*_*&tr=aac-264-sd" },//元素接住音效
      // }
    }),
  },
  onLoad(query) {
  },

  playFun() {
    // this.gameComponent.onEvent("play");//打开音效
    // this.gameComponent.onEvent("mute");//关闭音效
    this._maxScore = 0;
    this.gameComponent.onEvent("start");
  },
  stopFun() {
    this.gameComponent.onEvent("gameOver");
  },
  resetFun() {
    this.gameComponent.onEvent("reset");
  },
  addSpeedFun() {
    // 加速
    this.gameComponent.onEvent("addSpeed", 8);
  },

  onInitDone(e) {
    this.gameComponent = e.ref;
    console.log("游戏初始化完成", e)
  },
  onUpdate(ops) {
    // { totalScore: 0, imgObj: { } }
    let score = ops.totalScoreObj.def;
    if (score > this._maxScore) {
      this._maxScore = score;
      if (score == 30) {
        console.log(ops, this.data.gameSource.scoreTip.v30)
        // 显示30分的提示
        this.gameComponent.onEvent("tip", this.data.gameSource.scoreTip.v30);
      } else if (score == 50) {
        // 显示50分的提示
        this.gameComponent.onEvent("tip", this.data.gameSource.scoreTip.v50);
        // 加速
        this.addSpeedFun();
      } else if (score == 90) {
        // 显示90分的提示
        this.gameComponent.onEvent("tip", this.data.gameSource.scoreTip.v90);
      } else if (score >= 100) {
        // 游戏结束
        this.stopFun();
      }
    }
  },
  onGameOver(obj) {
    console.log(obj)
  },
})

• xaml

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

<view onTap="playFun" style="position:absolute;left: 40%;bottom: 100rpx;">开始</view>
<view onTap="stopFun" style="position:absolute;left: 50%;bottom: 100rpx;">结束</view>
<view onTap="resetFun" style="position:absolute;left: 60%;bottom: 100rpx;">重置</view>
<view onTap="addSpeedFun" style="position:absolute;left: 70%;bottom: 100rpx;">加速</view>

-acss

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

  background-color: #ccc;
}