game-sdk/public/static/mini/wheel/js/main.js

import Player from './player/index'
import Enemy from './npc/enemy'
import BackGround from './runtime/background'
import GameInfo from './runtime/gameinfo'
import Music from './runtime/music'
import Sdk from './runtime/sdk'
import DataBus from './databus'
import huoSdk from '../libs/huosdk-1.0.3'

let ctx = canvas.getContext('2d')
let databus = new DataBus()

let qrCanvas = wx.createCanvas()
qrCanvas.width = window.innerWidth
qrCanvas.height = window.innerHeight

/**
 * 游戏主函数
 */
export default class Main {
  constructor() {
    // 维护当前requestAnimationFrame的id
    this.aniId = 0

    this.restart()

    this.sdk = new Sdk()

    let opts = wx.getLaunchOptionsSync()
    huoSdk.init({
      debug: true,
      app_id: 81234695,
      mp_id: 'wx57ee4c500a48fb52'
      // app_id: 81234700,
      // mp_id: 'wx1f44257e9b7b36a1'
    }).then(res => {
      console.log('init', res)

      huoSdk.login({
        data: {
          state: opts.query.state || opts.query.scene
        }
      }).then(res => {
        console.log('login', res)
        if (res.data.nickname !== undefined) {
          wx.showToast({
            title: '登录成功'
          })
          this.sdk.loginBtn.text = res.data.nickname
        }
        huoSdk.updateRole({
          data: {
            'role-event': 'offline',
            'role-server_id': '11',
            'role-server_name': '测试11区',
            'role-role_id': '1000005',
            'role-role_name': 'cx_test',
            'role-role_level': 150,
            'role-role_vip': 7,
            'role-onlineTime': 0,
            'role-scene': '背包',
            'role-axis': '(999,999,999)',
            'role-scene': '打开礼包'
          }
        }).then(res => {
          // do something
        }, err => {
          console.log('updateRole', err)
        })
        huoSdk.getShareInfo({
          data: {
            path: ''
          }
        }).then(res => {
          wx.onShareAppMessage(function () {
            return {
              title: res.data.title,
              imageUrl: res.data.image,
              query: `state=${res.data.state}`
            }
          })
          wx.showShareMenu()
        }, err => {
          console.log('getShareInfo', err)
        })
      }, err => {
        console.log('login', err)
      })

      huoSdk.reportAdClick({
        data: {
          click_id: opts.gdt_vid || opts.query.gdt_vid,
          url: '/'
        }
      }).then(res => {
        console.log(res)
      })

      // 敏感词检测
      huoSdk.checkMsg({
        data: {
          content: '特3456书yuuo莞6543李zxcz蒜7782法fgnv级'
        }
      }).then(res => {
        console.log(res)
      }, err => {
        console.log(err)
      })
      // 敏感图片检测
      wx.chooseImage({
        count: 1,
        success: res => {
          huoSdk.checkImg({
            data: {
              filePath: res.tempFilePaths[0]
            }
          }).then(res => {
            console.log(res)
          }, err => {
            console.log(err)
          })
        }
      })
    }, err => {
      console.log('init', err)
    })

    // huoSdk.midasPayQuery({
    //   data: {
    //     'order-order_id': 'g1541505495627000074'
    //   }
    // }).then(res => {
    // }, err => {
    // })

    wx.onShow(opts => {
      huoSdk.removeOffScreen()
      let orderId = wx.getStorageSync('orderId')
      if (opts.scene === 1038 && orderId) {
        huoSdk.mpPayQuery({
          data: {
            'order-order_id': orderId
          }
        }).then(res => {
          wx.showModal({
            content: res.data.status === 2 ? '充值成功' : '充值失败',
            showCancel: false
          })
        })
        wx.removeStorageSync('orderId')
      }
    })
  }

  restart() {
    databus.reset()

    canvas.removeEventListener(
      'touchstart',
      this.touchHandler
    )

    this.bg = new BackGround(ctx)
    this.player = new Player(ctx)
    this.gameinfo = new GameInfo()
    this.music = new Music()

    this.bindLoop = this.loop.bind(this)
    this.hasEventBind = false

    // 清除上一局的动画
    window.cancelAnimationFrame(this.aniId);

    this.aniId = window.requestAnimationFrame(
      this.bindLoop,
      canvas
    )
  }

  /**
   * 随着帧数变化的敌机生成逻辑
   * 帧数取模定义成生成的频率
   */
  enemyGenerate() {
    if (databus.frame % 30 === 0) {
      let enemy = databus.pool.getItemByClass('enemy', Enemy)
      enemy.init(6)
      databus.enemys.push(enemy)
    }
  }

  // 全局碰撞检测
  collisionDetection() {
    let that = this

    databus.bullets.forEach((bullet) => {
      for (let i = 0, il = databus.enemys.length; i < il; i++) {
        let enemy = databus.enemys[i]

        if (!enemy.isPlaying && enemy.isCollideWith(bullet)) {
          enemy.playAnimation()
          that.music.playExplosion()

          bullet.visible = false
          databus.score += 1

          break
        }
      }
    })

    for (let i = 0, il = databus.enemys.length; i < il; i++) {
      let enemy = databus.enemys[i]

      if (this.player.isCollideWith(enemy)) {
        databus.gameOver = true

        break
      }
    }
  }

  // 游戏结束后的触摸事件处理逻辑
  touchEventHandler(e) {
    e.preventDefault()

    let x = e.touches[0].clientX
    let y = e.touches[0].clientY

    let area = this.gameinfo.btnArea

    if (x >= area.startX
      && x <= area.endX
      && y >= area.startY
      && y <= area.endY)
      this.restart()
  }

  // 支付事件
  sdkEventHandler (e) {
    e.preventDefault()

    let { clientX: x, clientY: y } = e.touches[0]
    let { payBtn, paying, balanceBtn, getBalance, navigatorBtn, hasNavigator } = this.sdk

    if (x >= payBtn.startX && x <= payBtn.endX && y >= payBtn.startY && y <= payBtn.endY && !paying) {
      this.sdk.paying = true
      setTimeout(() => {
        this.sdk.paying = false
      }, 1000)

      huoSdk.checkPay({
        data: {
          'order-currency': 'CNY',
          'order-cp_order_id': '10001',
          'order-product_price': 1,
          'order-product_id': '1000000001',
          'order-product_cnt': 10,
          'order-product_name': '金币',
          'order-product_desc': '金币',
          'order-ext': '',
          'role-event': '',
          'role-server_id': '11',
          'role-server_name': '测试11服',
          'role-combat_num': 99,
          'role-role_id': '',
          'role-role_name': '',
          'role-role_level': 0,
          'role-role_vip': 0
        },
        canvas,
        offscreen: qrCanvas
      }).then(res => {
        console.log('pay', res)

        wx.setStorageSync('orderId', res.data.order_id)

        // if (res.data.mp_id && res.data.path) {
        //   wx.showLoading({
        //     mask: true,
        //     title: '跳转中'
        //   })
        //   wx.navigateToMiniProgram({
        //     appId: res.data.mp_id,
        //     path: res.data.path,
        //     complete: function (res) {
        //       wx.hideLoading()
        //     }
        //   })
        // }

        this.sdk.paying = false
      }, err => {
        console.log('pay', err)
        this.sdk.paying = false
      })
    }

    // if (x >= balanceBtn.startX && x <= balanceBtn.endX && y >= balanceBtn.startY && y <= balanceBtn.endY && !getBalance) {
    //   this.sdk.getBalance = true
    //   setTimeout(() => {
    //     this.sdk.getBalance = false
    //   }, 1000)
    //   huoSdk.midasPayQuery().then(res => {
    //     console.log('balance', res)
    //     this.sdk.getBalance = false
    //   }, err => {
    //     console.log('balance', err)
    //     this.sdk.getBalance = false
    //   })
    // }

    // if (x >= navigatorBtn.startX && x <= navigatorBtn.endX && y >= navigatorBtn.startY && y <= navigatorBtn.endY && !hasNavigator) {
    //   this.sdk.hasNavigator = true
    //   setTimeout(() => {
    //     this.sdk.hasNavigator = false
    //   }, 1000)
    //   wx.showLoading({
    //     mask: true,
    //     title: '跳转中'
    //   })

    //   huoSdk.preOrder({
    //     data: {
    //       'order-currency': 'CNY',
    //       'order-cp_order_id': '10001',
    //       'order-product_price': 1,
    //       'order-product_id': '1000000001',
    //       'order-product_cnt': 10,
    //       'order-product_name': '金币',
    //       'order-product_desc': '金币',
    //       'order-ext': '',
    //       'role-event': '',
    //       'role-server_id': '',
    //       'role-server_name': '',
    //       'role-role_id': '',
    //       'role-role_name': '',
    //       'role-role_level': 0,
    //       'role-role_vip': 0
    //     }
    //   }).then(res => {
    //     console.log('pre order', res)

    //     wx.navigateToMiniProgram({
    //       appId: 'wx3535cdf616ef205a',
    //       path: `pages/pay/index?orderId=${res.data.order_id}`,
    //       extraData: {
    //         mem_id: wx.getStorageSync('userInfo').mem_id,
    //         price: 200
    //       },
    //       complete: function (res) {
    //         wx.hideLoading()
    //       }
    //     })
    //   }, err => {
    //     console.log('pre order', err)
    //   })
    // }
  }

  /**
   * canvas重绘函数
   * 每一帧重新绘制所有的需要展示的元素
   */
  render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    this.bg.render(ctx)

    // 展示支付按钮
    this.sdk.renderBtn(ctx)
    canvas.addEventListener('touchstart', this.sdkEventHandler.bind(this))

    databus.bullets
      .concat(databus.enemys)
      .forEach((item) => {
        item.drawToCanvas(ctx)
      })

    this.player.drawToCanvas(ctx)

    databus.animations.forEach((ani) => {
      if (ani.isPlaying) {
        ani.aniRender(ctx)
      }
    })

    this.gameinfo.renderGameScore(ctx, databus.score)

    // 游戏结束停止帧循环
    if (databus.gameOver) {
      this.gameinfo.renderGameOver(ctx, databus.score)

      if (!this.hasEventBind) {
        this.hasEventBind = true
        this.touchHandler = this.touchEventHandler.bind(this)
        canvas.addEventListener('touchstart', this.touchHandler)
      }
    }

    ctx.drawImage(qrCanvas, 0, 0)
  }

  // 游戏逻辑更新主函数
  update() {
    if (databus.gameOver)
      return;

    this.bg.update()

    databus.bullets
      .concat(databus.enemys)
      .forEach((item) => {
        item.update()
      })

    this.enemyGenerate()

    this.collisionDetection()

    if (databus.frame % 20 === 0) {
      this.player.shoot()
      this.music.playShoot()
    }
  }

  // 实现游戏帧循环
  loop() {
    databus.frame++

    this.update()
    this.render()

    this.aniId = window.requestAnimationFrame(
      this.bindLoop,
      canvas
    )
  }
}