game-wawa v0.0.9

game-wawa

游戏

安装

npm install game-wawa

使用

必须开启 "enableSkia": "true"

• json

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

• mini.project.json

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

• js

Page({
  data: {
    gameSource: {
      // 爪子
      claw: {
        // 爪子位置
        posX: { min: 0, max: 500 },
        // offsetTop:杆收起长度
        gan: { src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01rN7Kaa1EUdNyPaRr0_!!2185320355.png", offsetTop: 346, clawCenterY: 20, x: 120 },
        // 爪子抓的角度
        angule: 30,
        hasBallAngule: 26,//抓中球抓手收的角度
        aniTime: 0.5,//爪子抓的时间
        left: { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01K5TRU21EUdNtZ6diF_!!2185320355.png", anchor: { x: 1.267, y: 0.05 }, offset: { x: -4, y: 4 } },
        right: { src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01fvU5rJ1EUdNuUMRNC_!!2185320355.png", anchor: { x: -0.267, y: 0.05 }, offset: { x: 4, y: 4 } },
        // 爪子移动速度
        moveSpeed: 3,
        // 球球掉落速度
        ballDownSpeed: 3,
        // 抓取后移动到指定位置扔
        throwX: 120,
        // 爪子下抓时间
        downTime: 1,
        // 爪子下抓球球时，偏移y值，默认是爪子底部就收起来
        drawOffsetY: 0,
        // 匹配是否抓中 在球的一半宽度基础上增加drawBallOffsetW距离（值越大越容易抓中）
        drawBallOffsetW: -30,
      },
      // 球摆放位置 idx:对应ball下标，-1则随机
      fixPos: [
        { idx: 0, x: 220, y: 280 },
        { idx: 1, x: 300, y: 240 },
        { idx: 2, x: 370, y: 290 },
        { idx: 3, x: 446, y: 240 },
        { idx: 4, x: 206, y: 386 },
        { idx: 5, x: 290, y: 344 },
        { idx: 6, x: 360, y: 386 },
        { idx: 7, x: 445, y: 344 },
      ],
      // 球
      ball: [
        { "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN0100Yqpu1EUdNz0OHgA_!!2185320355.png", "idx": 0, "width": "90", "height": "90" },
        { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN016IIMQE1EUdNtKSNXA_!!2185320355.png", "idx": 1, "width": "93", "height": "92" },
        { "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01jHNyNq1EUdNqZA6uE_!!2185320355.png", "idx": 2, "width": "98", "height": "95" },
        { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN011Vxw7d1EUdNyACwDg_!!2185320355.png", "idx": 3, "width": "95", "height": "94" },
        { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01RKHrE41EUdNrYkNgl_!!2185320355.png", "idx": 4, "width": "90", "height": "90" },
        { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01JkHSqB1EUdNuFl8Q8_!!2185320355.png", "idx": 5, "width": "97", "height": "95" },
        { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01ma1Vga1EUdNqZAqdm_!!2185320355.png", "idx": 6, "width": "90", "height": "90" },
        { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN012qXG561EUdNtKTzKV_!!2185320355.png", "idx": 7, "width": "90", "height": "90" },
      ]
    },
  },
  startFun() {
    this.gameComponent.onEvent("start")
  },
  resetFun() {
    this.gameComponent.onEvent("reset")
  },
  moveFun(e) {
    let { currentTarget: { dataset: { dir } } } = e;
    // 移动
    this.gameComponent.onEvent("move", dir);
  },
  stopFun() {
    this.gameComponent.onEvent("move", 0);
  },
  drawFun() {
    this.gameComponent.onEvent("draw");
  },

  /**游戏初始化完成*/
  onInitDone(e) {
    this.gameComponent = e.ref;
    console.log("initDone...", e)
  },
  onDrawCallback(obj) {
    console.log("等待指令执行抓取")
    console.log("本次会碰撞到的球:", obj)
    // obj:返回本次会碰到的球，为空则不会碰到球
    // 抓取回调 此方法主要预判本次抓取到什么类型的球，是否能抓中
    // 抓中情况，如果需要松开本次抓取的球，则调用方法通知松开
    this.gameComponent.onEvent("drawEmpty", 1);//此方法会在爪子下拉抓取的时候判断是否抓中本次球，0：不抓起来，1：抓起来
  },
  onBallOutCallback(obj) {
    // obj对象如果有值，则代表抓中了，返回ball对应数据对象
    // 球球调出容器回调，如果没有抓中，就是松开爪子时回调
    console.log("球球已经移除屏幕外了")
  }
});

• xaml

<view class="game-box">
  <game gameSource="{{gameSource}}" onInitDone="onInitDone" onDrawCallback="onDrawCallback" onBallOutCallback="onBallOutCallback" />
</view>
<view class="btn-box2">
  <view class="btn_css" onTap="startFun">开始</view>
  <view class="btn_css" onTap="resetFun">重置</view>
</view>
<view class="btn-box">
  <view class="btn_css" onTouchStart="moveFun" onTouchEnd="stopFun" data-dir="-1">左</view>
  <view class="btn_css" onTouchStart="moveFun" onTouchEnd="stopFun" data-dir="1">右</view>
  <view class="btn_css" onTap="drawFun">抓</view>
</view>

• xass

.game-box {
  width: 490rpx;
  height: 440rpx;
  position: absolute;
  left: 130rpx;
  top: 200rpx;
  background-color: #ccc;
  /* background: url(https://img.alicdn.com/imgextra/i1/2185320355/O1CN01KMElK21EUdNzEYwD2_!!2185320355.jpg) no-repeat center -92rpx;
  background-size: 750rpx auto; */
}

.btn-box2 {
  width: 100vw;
  height: 50px;
  position: fixed;
  left: 0;
  bottom: 50px;
  display: flex;
}
.btn-box {
  width: 100vw;
  height: 50px;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
}

.btn_css {
  width: 40%;
  height: 15px;
  padding: 10px;
  margin: 7px 10px;
  text-align: center;
  background-color: #ccc;
}