game-kadian v0.0.4

game-kadian

游戏

安装

npm install game-kadian

使用

必须开启 "enableSkia": "true"

• json

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

• mini.project.json

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

• js

Page({
  data: {
    gameSource: {
      baseOps: {
        // 分数坐标
        score: {
          baseX: 100,
          baseY: 60
        },
        bezierV: {
          min: 10,
          max: 50
        },//贝塞尔曲线最高点区间范围（相对开始点与结束点最小Y值）
        // 随机生成点位的区间范围(相对player位置)
        randomPos: {
          x: { min: 100, max: 300 },
          y: { min: 50, max: 100 }
        },
        // 球跳动的区域
        jumpBound: {
          x: { min: 0, max: 750 },
          y: { min: 200, max: 800 }
        },
        pointOver: true,//配置的时间数组执行完之后就停止 false：不停止，继续以默认时间跳动
        defTime: 1,//配置的timePoint执行完之后，默认的间隔时间
      },
      // defaultPos:第一个到达的地点，time:运动的时间 第一个动画固定为直线运动，之后的点都是贝塞尔曲线
      player: { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01FBZorE1FJvgw9S1np_!!1080040467.png", "width": "59", "height": "59", "x": "100", "y": "-30", defaultPos: { x: 100, y: 500 } },
      // 配置时间点，如果不配置，则自动1s跳动下一个点 diffTime:计算两个点之间的时间差
      timePoint: [{ diffTime: "3.56" }, { diffTime: "4.16" }, { diffTime: "4.76" }, { diffTime: "5.32" }, { diffTime: "5.96" }, { diffTime: "6.40" }, { diffTime: "6.88" }, { diffTime: "7.92" }, { diffTime: "8.92" }, { diffTime: "9.76" }, { diffTime: "10.72" }, { diffTime: "11.24" }, { diffTime: "12.80" }, { diffTime: "13.40" }, { diffTime: "14.04" }, { diffTime: "14.52" }, { diffTime: "15.00" }, { diffTime: "15.60" }, { diffTime: "16.68" }, { diffTime: "17.24" }, { diffTime: "17.88" }, { diffTime: "18.88" }, { diffTime: "20.16" }, { diffTime: "20.80" }, { diffTime: "21.44" }, { diffTime: "22.12" }, { diffTime: "22.68" }, { diffTime: "23.44" }, { diffTime: "24.56" }, { diffTime: "25.36" }, { diffTime: "26.32" }, { diffTime: "26.88" }, { diffTime: "28.80" }, { diffTime: "29.40" }, { diffTime: "30.00" }, { diffTime: "30.56" }, { diffTime: "31.60" }, { diffTime: "32.68" }, { diffTime: "33.56" }, { diffTime: "34.04" }, { diffTime: "34.64" }, { diffTime: "35.28" },],
      // timePoint: [{ time: "0.5" }, { time: "0.58" }],
      hot: {
        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,
        anchor: { x: "0.5", y: "0.5" },
        x: "375",
        y: "400"
      },
      tip: {
        great: {
          src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Awlbuw1FJvgywX3w6_!!1080040467.png",
          type: "animate",
          imgType: "max",
          width: "1120",
          height: "800",
          fWidth: "160",
          fHeight: "160",
          startIndex: 19,
          count: "35",
          boomSpeed: "0.8",
          loop: !true,
          val: 10,
          anchor: { x: "0.5", y: "0.5" },
          x: "375",
          y: "400"
        },
        miss: {
          src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ygqJxx1FJvh3rHnIc_!!1080040467.png",
          type: "animate",
          imgType: "max",
          width: "1120",
          height: "800",
          fWidth: "160",
          fHeight: "160",
          startIndex: 20,
          count: "35",
          boomSpeed: "0.8",
          loop: !true,
          val: 0,
          anchor: { x: "0.5", y: "0.5" },
          x: "375",
          y: "900"
        },
      },
      // baseScore: 1000,
      score: [
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ZsXUpw1FJvh5OLFoC_!!1080040467.png", "val": "0", "width": "22", "height": "24", "offsetX": "4" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Eibztu1FJvh01HImn_!!1080040467.png", "val": "1", "width": "11", "height": "24", "offsetX": "4" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ApB1td1FJvh5OLO8Z_!!1080040467.png", "val": "2", "width": "21", "height": "24", "offsetX": "4" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01SSncv61FJvgwVaiwc_!!1080040467.png", "val": "3", "width": "23", "height": "24", "offsetX": "4" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN010VceA11FJvgq8R2JK_!!1080040467.png", "val": "4", "width": "23", "height": "24", "offsetX": "4" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01FA8XI41FJvh7DKGVr_!!1080040467.png", "val": "5", "width": "22", "height": "24", "offsetX": "4" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Wc3s3T1FJvh4DBeQ6_!!1080040467.png", "val": "6", "width": "22", "height": "24", "offsetX": "4" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01NPTKvx1FJvh65xQjs_!!1080040467.png", "val": "7", "width": "22", "height": "24", "offsetX": "4" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01euVjgb1FJvguwNKWr_!!1080040467.png", "val": "8", "width": "21", "height": "24", "offsetX": "4" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01r9lQf41FJvh5OIhmv_!!1080040467.png", "val": "9", "width": "21", "height": "24", "offsetX": "4" },
      ],
    }
  },
  onLoad() {
  },
  beginFun(e) {
    // 开始游戏 必须在游戏初始化完成之后开始
    this.gameComponent.onEvent("start");
  },
  stopFun() {
    this.gameComponent.onEvent("stop");
  },
  resetFun() {
    this.gameComponent.onEvent("init");
  },
  isShowFun() {
    this.setData({
      showGame: !this.data.showGame
    })
  },
  outFun() {
    this.gameComponent.onEvent("out");
  },

  onRef(game) {
    this.gameComponent = game;
    console.log("进入游戏")
  },
  onInitDone() {
    /* my.alert({
      content: "游戏初始化完成"
    }) */
    console.log("-----1")
  },
  onUpdate(res) {
    // res : {img,totalScore}
    console.log("吸收了：", res)
  },
  onGameOver(data) {
    console.log(data)
  },
  onPointOver() {
    // 配置的timePoint时间节点执行完回调方法
    this.outFun();
  },
  onOutCallback() {
    // 执行out方法时，out出去执行完回调方法
  }
});

• xaml

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