kx_xiaochengxu/baikuai/pages/chan/chan.js

import util from '../../utils/util'
var app = getApp()
Page({
  data: {
    headUrl: "",
    GAMETIME: 60,
    time: 0,
    mark: 0,
    ratio: 0,//比分
    gaming: false,
    rows: [],
    modal: {
      hidden: true
    },
    lastTouchIndex: -1,
    playVoide: true,
    audios: [],
    audiosLength: 0,
    currentAudio: 0,
    innerAudioContext: null,
    speed: 2,
    redMark: 0,
    overColIndex: -1,
    overRowIndex: -1,
    showContinue: false,
    showContinueTimes: 0,
    showContinueTimesFlag: 1,
    timeOver: false,
    overSharedFlag: false,
    overFlag: false,
    errorFlag: false,
    timerFlag: false,
    continueMsg: "求群好友帮你复活～",
    shareMsg: "我离音乐大师一步之遥，快来帮我挑战吧～",
    userId: wx.getStorageSync('userId'),
  },
  onLoad: function () {
    var that = this;
    wx.getStorage({
      key: 'userId',
      success: function(res) {
        that.setData({
          userId: res.data
        })
      },
    })
    
    wx.showShareMenu({
      withShareTicket: true //要求小程序返回分享目标信息
    })
    var userInfo = wx.getStorageSync("userInfo");
    this.setData({
      headUrl: userInfo.avatarUrl
    })
    this.data.innerAudioContext = wx.createInnerAudioContext();
    console.log('进入游戏页面')
    this.initData()
  },
  onShow: function () {
    // this.initData();
  },
  /**
   * 初始化数据
   */
  initData() {
    var random = Math.floor(Math.random() * 5);
    var audiosData = app.data.audios[random];
    var audiosDataLengh = audiosData.length;
    // 初始化方格数据
    var rows = []
    for (let i = 0; i < 4; i++) {
      var row = {
        blackIndex: util.random(1, 4, true)
      }
      rows.push(row)
    }

    // // 初始化时间
    // var time = this.data.GAMETIME
    // this.setData({
    //   rows: rows,
    //   time: time,
    //   currentAudio: 0,
    //   mark: 0,
    //   audios: audiosData,
    //   audiosLength: audiosDataLengh
    // })

    // 初始化时间
    var time = this.data.GAMETIME
    this.setData({
      rows: rows,
      redMark: 0
    });
    if (!this.data.showContinue) {
      this.setData({
        time: time,
        currentAudio: 0,
        mark: 0,
        audios: audiosData,
        audiosLength: audiosDataLengh,
      });
    } else {
      this.setData({
        showContinue: false,
        gaming: false
      });
    }
  },

  next(event) {
    var rowIndex = event.currentTarget.dataset.rowIndex - 0
    var colIndex = event.currentTarget.dataset.colIndex - 0
    if (rowIndex !== this.data.rows.length - 1) {
      return true;
    }
    // 如果当前游戏还没有开始  则开始游戏
    if (!this.data.gaming) {
      this.startGame()
    }
    if(this.data.timerFlag){
      this.startGame();
    }
    if (this.data.playVoide) {
      this.play()
    }

    // 加一分
    var mark = this.data.mark + 1;
    this.setData({
      lastTouchIndex: colIndex,
      mark: mark
    })

    var rows = this.data.rows
    let newRow = {
      blackIndex: util.random(1, 4, true)
    }
    rows.unshift(newRow)
    rows.pop()

    this.setData({
      rows: rows
    })
    // console.log(event)
  },

  play() {
    var context = wx.createInnerAudioContext();

    context.autoplay = true;
    context.src = this.data.audios[this.data.currentAudio];
    context.onPlay(() => {
      console.log('开始播放')
    })
    context.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
    context.onEnded(() => {
      context.destroy();
    })
    var currentAudioMark = this.data.currentAudio + 1;
    if (currentAudioMark >= this.data.audiosLength) {
      currentAudioMark = 0;
    }
    this.setData({
      currentAudio: currentAudioMark
    })
  },
  //播放音乐回调
  onplay() {
    console.log('音效已经播放')
  },
  // 开始游戏
  startGame() {
    this.setData({
      gaming: true,
      timerFlag: false
    });
    this.tId = setInterval(() => {
      console.log(this.data.time);
      var time = this.data.time - 1
      this.setData({
        time: time
      })
      if (this.data.time === 0) {
        if (this.data.overSharedFlag){
            this.setData({
              overFlag: true,
            })
            this.gameOver()
        } else {
          this.setData({
            overSharedFlag: true,
            overFlag: false,
            errorFlag: true,
            timerFlag: true
          })
          this.gameOver()
          var timePlus = this.data.time + 10;
          if (timePlus >= this.data.GAMETIME) {
            timePlus = this.data.GAMETIME;
          }
          this.setData({
            showContinue: true,
            time: timePlus
          })
        }
      }
      var ratio = (this.data.GAMETIME - this.data.time) / this.data.GAMETIME;
      this.setData({
        ratio: ratio
      })
      this.onReady();
    }, 500)
  },
  //点击错误时间
  over(event) {
    if (!this.data.gaming) {
      return
    }
    var rowIndex = event.currentTarget.dataset.rowIndex - 0
    var colIndex = event.currentTarget.dataset.colIndex - 0
    this.setData({
      redMark: 1,
      overColIndex: colIndex,
      overRowIndex: rowIndex
    })
    if (this.data.errorFlag) {
      this.setData({
        overFlag: true,
      })
      this.gameOver()
    } else {
      this.setData({
        overSharedFlag: false,
        overFlag: false,
        errorFlag: true,
        timerFlag: true
      })
      this.gameOver()
      var timePlus = this.data.time + 10;
      if(timePlus >= this.data.GAMETIME){
          timePlus = this.data.GAMETIME;
      }
      this.setData({
        showContinue: true,
        time: timePlus
      })
    }
  },

  /**
   * 结束游戏
   */
  gameOver() {
    this.setData({
      gaming: false,
    })
    clearInterval(this.tId)
    this.onShowModal()
  },

  reStartGame() {
    this.setData({
      'modal.hidden': true,
      ratio: 0,
      currentAudio: 0
    })
    this.initData()
  },
  //答题错误
  onShowModal() {
    var that = this;
    this.setData({
      'modal.hidden': false,
    })
    wx.setStorage({
      key: 'chanOneScore',
      data: that.data.mark
    })
    wx.getStorage({
      key: 'chanScore',
      success: function (res) {
        if (res.data <= that.data.mark) {
          //更新最高成绩
          wx.setStorage({
            key: 'chanScore',
            data: that.data.mark
          })
          app.reportGameScore('chan',that.data.mark);
        };
        console.log("showModal"+that.data.overFlag)
        if (that.shareOverAndRedirect()) {
          return;
        }
        if (that.data.overFlag) {
          that.setData({
            showContinue: false
          })
          wx.redirectTo({
            url: '/pages/layer/layer',
          })
        } else {
          if (that.data.showContinueTimesFlag >= -1){
            that.setData({
              showContinue: true
            })
          } else {
            wx.redirectTo({
              url: '/pages/layer/layer',
            })
          }
        }
      },
      fail: function (res) {
        //更新最高成绩
        wx.setStorage({
          key: 'chanScore',
          data: that.data.mark
        })
        app.reportGameScore('chan',that.data.mark);
        console.log("showModal" + that.data.overFlag)
        if (that.shareOverAndRedirect()) {
          return;
        }
        if (that.data.overFlag) {
          that.setData({
            showContinue: false
          })
          wx.redirectTo({
            url: '/pages/layer/layer',
          })
        } else {
          if (that.data.showContinueTimesFlag >= -1) {
            that.setData({
              showContinue: true
            })
          } else {
            wx.redirectTo({
              url: '/pages/layer/layer',
            })
          }
        }
      }
    })
  },
  onReady: function () {

    // 页面渲染完成  
    var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。  
    cxt_arc.setLineWidth(6);
    cxt_arc.setStrokeStyle('#3ea6ff');
    cxt_arc.setLineCap('round')
    cxt_arc.beginPath();//开始一个新的路径  
    cxt_arc.arc(106, 53, 30, 0, 2 * Math.PI, false);//设置一个原点(106,106)，半径为100的圆的路径到当前路径  
    cxt_arc.stroke();//对当前路径进行描边  

    cxt_arc.setLineWidth(6);
    cxt_arc.setStrokeStyle('#d2d2d2');
    cxt_arc.setLineCap('round')
    cxt_arc.beginPath();//开始一个新的路径  
    cxt_arc.arc(106, 53, 30, -Math.PI * 1 / 2, -Math.PI * 1 / 2 + 2 * Math.PI * this.data.ratio, false);
    cxt_arc.stroke();//对当前路径进行描边  

    cxt_arc.draw();

  },
  //放弃
  giveUp: function () {
    wx.redirectTo({
      url: '/pages/layer/layer',
    });
  },
  //右上角转发
  onShareAppMessage() {
    var that = this;
    return {
      title: this.data.shareMsg,
      path: '/pages/home/home',
      imageUrl: app.data.shareIcon[1],
      success: function (res) {
        console.log(res)
        console.log(res.shareTickets)
        // 转发成功
        if (!res.shareTickets || res.shareTickets.length == 0) {
          wx.showToast({
            title: '找不到群好友～',
          })
        } else {
          wx.showToast({
            title: '复活成功～',
          })
          var continueTimes = that.data.showContinueTimesFlag - 1;
          if (continueTimes <= 0) {
            that.initData();
          }
          that.setData({
            showContinueTimesFlag: continueTimes
          })
        }
      }
    }
  },
  //判断弹窗次数，如果已经分享过一次，则不再弹出，直接跳转到结果页面
  shareOverAndRedirect: function() {
    console.log(this.data.showContinueTimesFlag + " " + this.data.overFlag)
    if (this.data.showContinueTimesFlag < 0 && this.data.overFlag){
      wx.redirectTo({
        url: '/pages/layer/layer',
      })
      return true;
    }
  },
  //上报成绩事件
  // reportGameScore: function() {
  //   var that = this;
  //   app.func.req('/blackwhite/reportGameScore', 'get', "userId=" + this.data.userId, {
  //     userId: that.data.userId,
  //     channel: app.data.channel,
  //     gameType: 'jingdian',
  //     score: 99
  //   },(res) => {
  //     console.log(res)
  //   })
  // }
})