game-3dball

game-3dball

游戏

安装

npm install game-3dball

使用

• json

{
    "usingComponents": {
        "game": "game-3dball/index"
    }
}

• mini.project.json

{
  "node_modules_es6_whitelist": [
    "game-3dball"
  ]
}

• js

Page({
  enterFun() {
    // 1.进场
    this.gameComponent.intro();
  },
  ballFun(e) {
    // 2.选择球
    let idx = e.currentTarget.dataset.idx;
    this.gameComponent.setBall(idx);
  },
  playFun() {
    // 开始游戏
    this.gameComponent.play();
  },
  stopFun() {
    // 停止游戏
    this.gameComponent.stop();
  },
  resetFun() {
    // 重置游戏
    this.gameComponent.reset();
  },
  leftFun() {
    // 左移
    this.gameComponent.goLeft();
  },
  rightFun() {
    // 右移
    this.gameComponent.goRight();
  },

  onInitDone(ref) {
    this.gameComponent = ref;
    console.log("场景加载完成...");
  },
  onUpdate(num) {
    console.error("穿过了房子:", num);
  },
})

• xaml

  <view class="pageBox">
    <game onInitDone="onInitDone" onUpdate="onUpdate" />
  </view>

  <view style="position:absolute;width:100vw;height:100vh;z-index:2;">
    <view onTap="enterFun" style="position:absolute;left: 10%;bottom: 100rpx;">进场</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="leftFun" style="position:absolute;left: 10%;bottom: 200rpx;">左移</view>
    <view onTap="ballFun" data-idx="1" style="position:absolute;left: 30%;bottom: 200rpx;">球1</view>
    <view onTap="ballFun" data-idx="2" style="position:absolute;left: 40%;bottom: 200rpx;">球2</view>
    <view onTap="ballFun" data-idx="3" style="position:absolute;left: 50%;bottom: 200rpx;">球3</view>
    <view onTap="rightFun" style="position:absolute;left: 80%;bottom: 200rpx;">右移</view>
  </view>

• acss

.pageBox{
  background-color: #e1edfb;
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 1;
}