game-rio2

游戏

安装

npm install game-rio2

使用

必须开启 "enableSkia": "true"

• json

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

• mini.project.json

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

• js

Page({
  data: {
    gameSource: {
      baseOps: {
        runBound: {//气球自由运动空间范围
          minX: 0 - 100,
          maxX: 750 + 100,
          minY: 0 - 100,
          maxY: 500
        },
        speedRang: {//速度范围
          min: 10,
          max: 50,
        },
        backSpeed: 5,//返回时的速度时间，值越大，速度越慢
        getBaseSpeed: 100,//吸的时候，元素基础速度
        getSpeed: 10,//吸的时候，移动增长速度
        getMaxSpeed: 200,//移动的最大速度
        getDuration: 0.3,//点击吸持续时间（单位：s）
        initNum: 5,//气泡个数

        score: {
          baseX: 100,
          baseY: 60
        },
        time: {
          baseX: 100,
          baseY: 100
        },
        point: {
          // 中心点
          x: 375,
          y: 800,
          width: 100,//用此尺寸和精灵碰撞判断是否吸收
          height: 100,
          round: 500,//辐射范围 在此范围内，精灵才会有缩放
        },
        showPointSprite: !true,//在中心点显示一个物品做参照
        // hide2Add: true,// 吃掉一个就添加一个新元素
      },
      items: [
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01arKE801FJvgyzUqYQ_!!1080040467.png", "name": "瓶子1.png", "width": "207", "height": "208", val: "10", minScale: 0.5, maxScale: 1 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Wqw9k01FJvgsEZC0p_!!1080040467.png", "name": "瓶子2.png", "width": "165", "height": "166", val: "10", minScale: 0.5, maxScale: 1, maxShow: 1 },

        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01lYrZXf1FJvgyzUF7p_!!1080040467.png", "name": "红包.png", "width": "215", "height": "215", val: "1", minScale: 0.5, maxScale: 1 },
      ],
      light: {
        src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Awlbuw1FJvgywX3w6_!!1080040467.png",
        type: "animate",
        imgType: "max",
        width: "1120",
        height: "800",
        fWidth: "160",
        fHeight: "160",
        count: "19",
        boomSpeed: "0.4",
        loop: !true,
        stopPrev: true,//停止上一次动画重新播放
        anchor: { x: "0.5", y: "1" },
        x: "375",
        y: "800"
      },
      totalTime: 30,
      time: [
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN016oftKG1FJvgwTqGtK_!!1080040467.png", "val": "0", "offsetX": "4", "width": "14", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01RXsIRy1FJvgpRyEe6_!!1080040467.png", "val": "1", "offsetX": "4", "width": "7", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01FpN5qI1FJvgj4nwRv_!!1080040467.png", "val": "2", "offsetX": "4", "width": "15", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01TrAaYw1FJvgj4p578_!!1080040467.png", "val": "3", "offsetX": "4", "width": "16", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN010GE5GT1FJvh0mk2SF_!!1080040467.png", "val": "4", "offsetX": "4", "width": "17", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01DlIcFg1FJvgnshkpS_!!1080040467.png", "val": "5", "offsetX": "4", "width": "15", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MugQNA1FJvgj4nChj_!!1080040467.png", "val": "6", "offsetX": "4", "width": "15", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01FFgDvx1FJvgpS0BIC_!!1080040467.png", "val": "7", "offsetX": "4", "width": "15", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN0136tSi11FJvgsvQuxe_!!1080040467.png", "val": "8", "offsetX": "4", "width": "16", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ZT3GcE1FJvgnsj5yV_!!1080040467.png", "val": "9", "offsetX": "4", "width": "15", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01UgsyIw1FJvh05lTQi_!!1080040467.png", "val": "s", "offsetX": "0", "width": "13", "height": "17" },
      ],
      // baseScore: 1000,
      score: [
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN016oftKG1FJvgwTqGtK_!!1080040467.png", "val": "0", "offsetX": "4", "width": "14", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01RXsIRy1FJvgpRyEe6_!!1080040467.png", "val": "1", "offsetX": "4", "width": "7", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01FpN5qI1FJvgj4nwRv_!!1080040467.png", "val": "2", "offsetX": "4", "width": "15", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01TrAaYw1FJvgj4p578_!!1080040467.png", "val": "3", "offsetX": "4", "width": "16", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN010GE5GT1FJvh0mk2SF_!!1080040467.png", "val": "4", "offsetX": "4", "width": "17", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01DlIcFg1FJvgnshkpS_!!1080040467.png", "val": "5", "offsetX": "4", "width": "15", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MugQNA1FJvgj4nChj_!!1080040467.png", "val": "6", "offsetX": "4", "width": "15", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01FFgDvx1FJvgpS0BIC_!!1080040467.png", "val": "7", "offsetX": "4", "width": "15", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN0136tSi11FJvgsvQuxe_!!1080040467.png", "val": "8", "offsetX": "4", "width": "16", "height": "17" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ZT3GcE1FJvgnsj5yV_!!1080040467.png", "val": "9", "offsetX": "4", "width": "15", "height": "17" },
      ],
    }
  },
  onLoad() {
  },
  beginFun(e) {
    // 开始游戏 必须在游戏初始化完成之后开始
    this.gameComponent.onEvent("start");
  },
  resetFun() {
    this.gameComponent.onEvent("init");
  },
  isShowFun() {
    this.setData({
      showGame: !this.data.showGame
    })
  },
  getFun() {
    this.gameComponent.onEvent("get");
  },

  onRef(game) {
    this.gameComponent = game;
    console.log("进入游戏")
  },
  onInitDone() {
    /* my.alert({
      content: "游戏初始化完成"
    }) */
  },
  onUpdate(res) {
    // res : {img,totalScore}
    console.log("吸收了：", res)
    if (res.liveCount == 0) {
      // 新增一轮元素
      this.gameComponent.onEvent("addNum", { bl: true });
    }
  },
  onGameOver(data) {
    console.log(data)
  }
});

• xaml

<view class="pageBox">
  <view class="gameBox" a:if="{{!showGame}}">
    <game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onUpdate="onUpdate" onGameOver="onGameOver" />
  </view>
  
  <view onTap="beginFun" 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 onTap="getFun" 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;
}