gangben-paopaolong v0.0.20

gangben-paopaolong

游戏

安装

npm install gangben-paopaolong

使用

必须开启 "enableSkia": "true"

• json

{
    "usingComponents": {
        "game": "gangben-paopaolong/paopaolong"
    }
}

• mini.project.json

{
  "node_modules_es6_whitelist": [
    "gangben-paopaolong"
  ]
}

• js

Page({
  data: {
    gameSource: {
      // 游戏元素
      speed: 26,//飞行速度
      MAX_ANGLE: 70,//最大角度
      MIN_ANGLE: -70,//最小角度
      firstBottomLineType: "max",//第一行是大行
      rowMaxNum: 7,//大行最大球球个数
      baseScore: 0,//基础分数
      firstRowNum: 3,//初始化渲染多少行
      padding: {
        left: 0,
        right: 0,
      },
      items: [
        {
          src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01Rs3xlk1EUdM19jNy0_!!2185320355.png",
          val: 10,
          width: 93,
          height: 93,
          probability: 1,//出现概率
          bzType: "3",//标识唯一类型 类型相同，则可以消除
          // 爆炸动画序列帧
          srcArr: [
            { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01nP97Ns1FJvaQm5lMf_!!1080040467.png", width: 1280, height: 1280 },
          ],
          boomScale: 1,//爆炸动画缩放，相对精灵尺寸，默认为1
          boomSpeed: 0.5,// 爆炸动画速度 值越大，速度越快
        },
        {
          src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01RDATUU1EUdLuiAWcg_!!2185320355.png",
          val: 110,
          noSend: true,//不出现在发射球位置
          width: 93,
          height: 93,
          probability: 1,//出现概率
          bzType: "1",//标识唯一类型 类型相同，则可以消除
          // 爆炸动画序列帧
          srcArr: [
            { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01ZMJGZb1FJvaRPRlW4_!!1080040467.png", width: 1280, height: 1280 },
          ],
          boomSpeed: 0.5,// 爆炸动画速度 值越大，速度越快
        },
        {
          src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01P3uCf81EUdMAfFjFU_!!2185320355.png",
          val: 110,
          // noSend: true,
          width: 93,
          height: 93,
          probability: 1,//出现概率
          bzType: "2",
          // 爆炸动画序列帧
          srcArr: [
            { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01ZMJGZb1FJvaRPRlW4_!!1080040467.png", width: 1280, height: 1280 },
          ],
          boomSpeed: 0.5,// 爆炸动画速度 值越大，速度越快
        },
      ],
      pao: {
        src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01c2dCfs1FJvdnGgdUB_!!1080040467.png",
        width: 102,
        height: 102,
        isHide: true,//true:不显示直接处理成贴着底部
        x: 750 / 2,
        y: 1000 - 100
      },
      line: {
        src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01VWMP521FJvdm58r5L_!!1080040467.png",
        width: 750,
        height: 61,
        bottom: 199,
        showAllWidth: true
      },
      helpLine: {
        // src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01RrwVBL1FJvdnXcDWX_!!1080040467.png",
        // width: 48,
        // height: 298,
        src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN011hpEIo1EUdM9SC6Rs_!!2185320355.png",
        width: 9,
        height: 246
      }
    },
  },
  onLoad() { },
  onRef(game) {
    this.gameComponent = game;
    console.log("进入游戏")
  },
  onInitDone() {
    // my.alert({
    //   content: "游戏初始化完成"
    // })
    this.beginFun();
  },
  onRenderPlay(img) {
    // 发射求发生变化回调
    console.log("当前发射求：", img)
  },
  onUpdate(item) {
    // curDestroyObj:{}本次消除元素对象个数 key:name_${img.bzType}_${img.probability}
    // totalDestroyObj本局消除元素对象个数
    // score本局游戏分数
    // totalScore本局总分数
    console.log(item)
    // this.addLineFun();
  },
  onGameOver(totalScore) {
    console.log(totalScore)
    my.alert({
      content: "游戏结束"
    })
  },


  beginFun() {
    this.gameComponent.onEvent("start");
  },
  overFun() {
    this.gameComponent.onEvent("gameOver");
  },
  resetFun() {
    this.gameComponent.onEvent("reset");
  },
  addLineFun() {
    // 添加一行
    this.gameComponent.onEvent("addLine");
  },
  renderNextFun() {
    // 刷新
    this.gameComponent.onEvent("renderSendBall");//刷新当前发射求
    // this.gameComponent.onEvent("nextBall");//刷新下一个
  },
  helpFun() {
    // 开启辅助线
    this.gameComponent.onEvent("showHelpLine", 3);
  },
  closeFun() {
    // 关闭辅助线
    this.gameComponent.onEvent("triggerHelpLine", !true);
  },
  fadeLineFun() {
    // 消除指定行
    if (this.gameComponent.onEvent("getSpriteCount").length <= 0) {
      my.showToast({
        content: "没有泡泡，无法使用"
      });
      return false;
    }
    this.gameComponent.onEvent("fadeLineFun");
  },
  fadeEndLineFun() {
    // 消除最后一行
    if (this.gameComponent.onEvent("getSpriteCount").length <= 0) {
      my.showToast({
        content: "没有泡泡，无法使用"
      });
      return false;
    }
    this.gameComponent.onEvent("fadeLineFun", "end");
  },
  boomFun() {
    // 技能求
    this.gameComponent.onEvent("boomFun", {
      num: 3,
      notGo: true,
      callback: (isSuccess) => {
        if (isSuccess) {
          console.log("等待接口返回成功就执行...")
          setTimeout(() => {
            this.gameComponent.onEvent("boomFun", { num: 3, });
          }, 3000);
        } else {
          console.log("----------不能生成炸弹")
        }
      }
    });
  },
});

• xaml

  <view>
    <view style="height: 5vh;">总分数：{{totalScore || 0}} 本次消除分数：{{curScore|| 0}} 剩余泡泡：{{gameSource.totalBall}} 特殊泡泡：{{special}}</view>
    <view style="width: 750rpx;height: 1000rpx;margin:0 auto;position:relative;background:#ccc;">
      <game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onRenderPlay="onRenderPlay" onUpdate="onUpdate" onGameOver="onGameOver" />
    </view>

    <view onTap="renderNextFun" style="position:absolute;left: 300rpx;bottom: 100rpx;">生成下一个</view>
    <view onTap="closeFun" style="position:absolute;left: 500rpx;bottom: 100rpx;">关闭辅助线</view>

    <view onTap="fadeLineFun" style="position:absolute;left: 100rpx;bottom: 50rpx;">消除指定行</view>
    <view onTap="boomFun" style="position:absolute;left: 300rpx;bottom: 50rpx;">生成炸弹</view>
    <view onTap="fadeEndLineFun" style="position:absolute;left: 500rpx;bottom: 50rpx;">消除最后一行</view>

    <view onTap="beginFun" style="position:absolute;left: 100rpx;bottom: 0;">开始</view>
    <view onTap="overFun" style="position:absolute;left: 200rpx;bottom: 0;">停止</view>
    <view onTap="resetFun" style="position:absolute;left: 300rpx;bottom: 0;">重置</view>
    <view onTap="addLineFun" style="position:absolute;left: 400rpx;bottom: 0;">再生成一行</view>
    <view onTap="helpFun" style="position:absolute;left: 550rpx;bottom: 0;">开启辅助线</view>
  </view>