import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';

import {
  Label,
  MySprite, tweenChange,ShapeRect,LineRect

} from './Unit';
import {res, resAudio} from './resources';

import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';

import TWEEN from '@tweenjs/tween.js';

import {
  Exercises
} from './Exercises'


@Component({
  selector: 'app-play',
  templateUrl: './play.component.html',
  styleUrls: ['./play.component.css']
})
export class PlayComponent implements OnInit, OnDestroy {

  @ViewChild('canvas', {static: true }) canvas: ElementRef;
  @ViewChild('wrap', {static: true }) wrap: ElementRef;

  // 数据
  data;

  ctx;

  canvasWidth = 1280; // canvas实际宽度
  canvasHeight = 720; // canvas实际高度

  canvasBaseW = 1280; // canvas 资源预设宽度
  canvasBaseH = 720;  // canvas 资源预设高度

  mx; // 点击x坐标
  my; // 点击y坐标


  // 资源
  rawImages = new Map(res);
  rawAudios = new Map(resAudio);

  images = new Map();

  animationId: any;
  winResizeEventStream = new Subject();

  audioObj = {};

  renderArr;
  mapScale = 1;

  canvasLeft;
  canvasTop;

  saveKey = 'YM-22';

  /**标题背景 */
  titleBg;

  btnPlay;
  btnStop;

  canTouch = true;

  /**音频播放状态 */
  playStatus = false;

  isListenAudio = false;

  /**当前播放的curAudio */
  curAudio;

  /**练习题数组 */
  exercisesArr = []

  /**练习题坐标*/
  exercisesPosArr = [];

  /**练习题背景宽度 */
  exercisesBgWidth;

  /**练习题背景高度 */
  exercisesBgHeight;

  /**当前显示答案 */
  nextShowAnser;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.winResizeEventStream.next();
  }


  ngOnInit() {

    this.data = {};

    // 获取数据
    const getData = (<any> window).courseware.getData;
    getData((data) => {

      if (data && typeof data == 'object') {
        this.data = data;
      }
      console.log('data:' , data);

      // 初始化 各事件监听
      this.initListener();

      // 若无数据 则为预览模式 需要填充一些默认数据用来显示
      this.initDefaultData();

      // 初始化 音频资源
      this.initAudio();
      // 初始化 图片资源
      this.initImg();
      // 开始预加载资源
      this.load();

    }, this.saveKey);

  }

  ngOnDestroy() {
    window['curCtx'] = null;
    window.cancelAnimationFrame(this.animationId);
  }


  load() {

    // 预加载资源
    this.loadResources().then(() => {
      window["air"].hideAirClassLoading(this.saveKey, this.data);
      this.init();
      this.update();
    });
  }


  init() {

    this.initCtx();
    this.initData();
    this.initView();
  }

  initCtx() {
    this.canvasWidth = this.wrap.nativeElement.clientWidth;
    this.canvasHeight = this.wrap.nativeElement.clientHeight;
    this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
    this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;


    this.ctx = this.canvas.nativeElement.getContext('2d');
    this.canvas.nativeElement.width = this.canvasWidth;
    this.canvas.nativeElement.height = this.canvasHeight;

    window['curCtx'] = this.ctx;
  }






  updateItem(item) {
    if (item) {
      item.update();
    }
  }

  updateArr(arr) {
    if (!arr) {
      return;
    }
    for (let i = 0; i < arr.length; i++) {
      arr[i].update(this);
    }
  }







  initListener() {

    this.winResizeEventStream
      .pipe(debounceTime(500))
      .subscribe(data => {
        this.renderAfterResize();
      });


    // ---------------------------------------------
    const setParentOffset = () => {
      const rect = this.canvas.nativeElement.getBoundingClientRect();
      this.canvasLeft = rect.left;
      this.canvasTop = rect.top;
    };
    const setMxMyByTouch = (event) => {
      if (event.touches.length <= 0) {
        return;
      }
      if (this.canvasLeft == null) {
        setParentOffset();
      }
      this.mx = event.touches[0].pageX - this.canvasLeft;
      this.my = event.touches[0].pageY - this.canvasTop;
    };

    const setMxMyByMouse = (event) => {
      this.mx = event.offsetX;
      this.my = event.offsetY;
    };
    // ---------------------------------------------


    let firstTouch = true;

    const touchDownFunc = (e) => {
      if (firstTouch) {
        firstTouch = false;
        removeMouseListener();
      }
      setMxMyByTouch(e);
      this.mapDown(e);
    };
    const touchMoveFunc = (e) => {
      setMxMyByTouch(e);
      this.mapMove(e);
    };
    const touchUpFunc = (e) => {
      setMxMyByTouch(e);
      this.mapUp(e);
    };

    const mouseDownFunc = (e) => {
      if (firstTouch) {
        firstTouch = false;
        removeTouchListener();
      }
      setMxMyByMouse(e);
      this.mapDown(e);
    };
    const mouseMoveFunc = (e) => {
      setMxMyByMouse(e);
      this.mapMove(e);
    };
    const mouseUpFunc = (e) => {
      setMxMyByMouse(e);
      this.mapUp(e);
    };


    const element = this.canvas.nativeElement;

    const addTouchListener = () => {
      element.addEventListener('touchstart', touchDownFunc);
      element.addEventListener('touchmove', touchMoveFunc);
      element.addEventListener('touchend', touchUpFunc);
      element.addEventListener('touchcancel', touchUpFunc);
    };
    const removeTouchListener = () => {
      element.removeEventListener('touchstart', touchDownFunc);
      element.removeEventListener('touchmove', touchMoveFunc);
      element.removeEventListener('touchend', touchUpFunc);
      element.removeEventListener('touchcancel', touchUpFunc);
    };

    const addMouseListener = () => {
      element.addEventListener('mousedown', mouseDownFunc);
      element.addEventListener('mousemove', mouseMoveFunc);
      element.addEventListener('mouseup', mouseUpFunc);
    };
    const removeMouseListener = () => {
      element.removeEventListener('mousedown', mouseDownFunc);
      element.removeEventListener('mousemove', mouseMoveFunc);
      element.removeEventListener('mouseup', mouseUpFunc);
    };

    addMouseListener();
    addTouchListener();
  }


  playAudio(key, now = false, callback = null) {

    const audio = this.audioObj[key];
    if (audio) {
      this.curAudio = audio;
      if (now) {
        audio.pause();
        audio.currentTime = 0;
      }

      if (callback) {
        audio.onended = () => {
          callback();
        };
      }
      audio.play();
    }
  }

  pauseAudio(key, callback = null){

    const audio = this.audioObj[key];
    if (audio) {

      if (callback) {
        audio.onended = () => {
          callback();
        };
      }
      audio.pause();
    }
  }



  loadResources() {
    const pr = [];
    this.rawImages.forEach((value, key) => {// 预加载图片

      const p = this.preload(value)
        .then(img => {
          this.images.set(key, img);
        })
        .catch(err => console.log(err));

      pr.push(p);
    });

    this.rawAudios.forEach((value, key) => {// 预加载音频

      const a = this.preloadAudio(value)
        .then(() => {
          // this.images.set(key, img);
        })
        .catch(err => console.log(err));

      pr.push(a);
    });
    return Promise.all(pr);
  }

  preload(url) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      // img.crossOrigin = "anonymous";
      img.onload = () => resolve(img);
      img.onerror = reject;
      img.src = url;
    });
  }

  preloadAudio(url) {
    return new Promise((resolve, reject) => {
      const audio = new Audio();
      audio.oncanplay = (a) => {
        resolve();
      };
      audio.onerror = () => {
        reject();
      };
      audio.src = url;
      audio.load();
    });
  }


  renderAfterResize() {
    this.canvasWidth = this.wrap.nativeElement.clientWidth;
    this.canvasHeight = this.wrap.nativeElement.clientHeight;
    this.init();
  }





  checkClickTarget(target) {

    if(!target){
      return;
    }

    const rect = target.getBoundingBox();

    if (this.checkPointInRect(this.mx, this.my, rect)) {
      return true;
    }
    return false;
  }

  getWorlRect(target) {

    let rect = target.getBoundingBox();

    if (target.parent) {

      const pRect = this.getWorlRect(target.parent);
      rect.x += pRect.x;
      rect.y += pRect.y;
    }
    return rect;
  }

  checkPointInRect(x, y, rect) {
    if (x >= rect.x && x <= rect.x + rect.width) {
      if (y >= rect.y && y <= rect.y + rect.height) {
        return true;
      }
    }
    return false;
  }





  addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {

    if(!key){
      return;
    }

    const audioObj = this.audioObj;

    if (url == null) {
      url = key;
    }

    this.rawAudios.set(key, url);

    const audio = new Audio();
    audio.src = url;
    audio.load();
    audio.loop = loop;
    audio.volume = vlomue;

    audioObj[key] = audio;

    if (callback) {
      audio.onended = () => {
        callback();
      };
    }
  }

  addUrlToImages(url) {
    if(url){
      this.rawImages.set(url, url);
    }
    
  }






  // ======================================================编写区域==========================================================================





  /**
   * 添加默认数据 便于无数据时的展示
   */
  initDefaultData() {

    if(!this.data.title){
      this.data.title = {};

      this.data.title.val1 = 'C';

      this.data.title.val2 = 'Write, listen and number';

      if(!this.data.exercisesArr){
        this.data.exercisesArr = [];
  
        //初始化四道练习题
        for(let i = 0; i < 4; ++ i){
  
          let exercises = this.getDefaultExercises();
  
          exercises.answerIndex = i + 1;
  
          exercises.world = 'world'
  
          this.data.exercisesArr.push(exercises);
        }
        
      }
    }
    
  }

  /**
   * 获取默认练习题
   */
  getDefaultExercises(){
    let exercises = {
      audioUrl:'',
      picUrl:'',
      world:'',
      answerIndex:null,
      letterCombinations:{
        val:'',
        audioUrl:''
      },
      letters:[{
        val:'Li',
        isFill:'0'
      },{
        val:'o',
        isFill:'0'
      },{
        val:'n',
        isFill:'0'
      }]
    };

    return exercises;
  }


  /**
   * 添加预加载图片
   */
  initImg() {

    //单词图片
    for (let i = 0; i < this.data.exercisesArr.length; ++i) {

      let exercises = this.data.exercisesArr[i];

      if(exercises.picUrl){
        this.addUrlToImages(exercises.picUrl);
      }
      
    }

  }

  /**
   * 添加预加载音频
   */
  initAudio() {

    // 音效
    this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);

    //标题发音
    this.addUrlToAudioObj('titleAudio', this.data.title.audioUrl);

    //听力材料
    this.addUrlToAudioObj('listenAudio', this.data.listenAudioUrl);

    //单词音效
    for (let i = 0; i < this.data.exercisesArr.length; ++i) {

      let exercises = this.data.exercisesArr[i];

      this.addUrlToAudioObj('exercises' + i, exercises.audioUrl);

      this.addUrlToAudioObj('exercises_letter' + i, exercises.letterCombinations.audioUrl);

    }
  }



  /**
   * 初始化数据
   */
  initData() {

    const sx = this.canvasWidth / this.canvasBaseW;
    const sy = this.canvasHeight / this.canvasBaseH;
    const s = Math.min(sx, sy);
    this.mapScale = s;

    // this.mapScale = sx;
    // this.mapScale = sy;


    this.renderArr = [];

    this.exercisesPosArr = [];

    this.exercisesArr = [];

    this.nextShowAnser = 1;

    this.canTouch = false;

    //计算练习题中习坐标
    this.initExercisesPos();

  }

  /**
   * 初始练习题坐标
   */
  initExercisesPos(){

    let x1 = this.canvasWidth / 3;

    let x2 = x1 * 2;

    //练习题背景最大宽度
    let maxWidth = 492 * this.mapScale;
    this.exercisesBgWidth = maxWidth;
    let totalWidth = maxWidth * 2 + 45 * this.mapScale;

    //练习题背景最大高度
    let maxHeight = 258 * this.mapScale;
    this.exercisesBgHeight = maxHeight;
    let totalHeight = maxHeight * 2 + 45 * this.mapScale;
    //离顶部间隔
    let marginTop = 85 * this.mapScale;


    let startY =  (this.canvasHeight - totalHeight - marginTop) / 2 + marginTop / 2;

    let startX = (this.canvasWidth - totalWidth) / 2;
    let tempStartX = startX;
    
    for(let i = 0; i < 4; ++ i){

      let x = startX;

      let y = startY;

      if((i + 1) % 2 == 1){
        startX = startX +  45 * this.mapScale + maxWidth;
      }
      else if((i + 1) % 2 == 0){

        startX = tempStartX;

        //到下一行增加高度
        startY = startY + maxHeight + 45 * this.mapScale;
      }

      let pos = {x: x, y:y};

      //console.log(pos);

      this.exercisesPosArr.push(pos);
    }
  }

  /**
   * 初始化试图
   */
  initView() {


    this.initPic();

    this.initBottomPart();

    this.initExercises();

    this.canTouch = true;
  }

  initBottomPart() {

    const btnPlay = new MySprite();
    btnPlay.init(this.images.get('play'));
    btnPlay.setScaleXY(this.mapScale);
    btnPlay.x = this.canvasWidth - btnPlay.getBoundingBox().width/2- 8 * this.mapScale;
    btnPlay.y = this.canvasHeight - btnPlay.getBoundingBox().height/2 - 8 * this.mapScale;

    

    this.renderArr.push(btnPlay);

    this.btnPlay = btnPlay;



    const btnStop = new MySprite();
    btnStop.init(this.images.get('stop'));
    btnStop.x = btnPlay.x;
    btnStop.y = btnPlay.y;
    btnStop.alpha = 0;
    btnStop.setScaleXY(this.mapScale);

    this.renderArr.push(btnStop);

    this.btnStop = btnStop;
  }

  initPic() {
    
    //初始化标题
    const titePart1Bg = new MySprite();
    titePart1Bg.init(this.images.get('titlePart1Bg'));
    titePart1Bg.x = 60 + titePart1Bg.width / 2;
    titePart1Bg.y = titePart1Bg.height / 2;
    
    //标题1内容
    const part1 = new Label();
    part1.text = this.data.title.val1;
    part1.textAlign = 'middle';
    part1.fontSize = 48;
    part1.fontName = "BRLNSDB";
    part1.fontColor = "#F7CB47";
    part1.refreshSize();
    part1.x = - part1.getBoundingBox().width / 2;
    titePart1Bg.addChild(part1);

    //标题2内容
    const part2 = new Label();
    part2.text = this.data.title.val2;
    part2.fontSize = 44;
    part2.fontName = "FUTURAB";
    part2.fontColor = "#000000";
    part2.refreshSize();
    part2.x = titePart1Bg.width + 10 * this.mapScale + 60;
    part2.y = titePart1Bg.height / 2;
    
    let bgWidth = titePart1Bg.width + part2.getBoundingBox().width + 10 * this.mapScale;
    let bgHeight = titePart1Bg.height;

    let titleBg = new ShapeRect();
    titleBg.setSize(bgWidth, bgHeight);
    titleBg.setScaleXY(this.mapScale);
    titleBg.x = 60 * this.mapScale;
    titleBg.y = 0;
    titleBg.alpha = 0;

    titleBg.addChild(titePart1Bg);
    titleBg.addChild(part2);

    this.titleBg = titleBg;

    this.renderArr.push(titleBg);
  }

  /**
   * 初始化练习题
   */
  initExercises(){



    for(let i = 0; i < this.data.exercisesArr.length; ++ i){

      const exercisesObj = new Exercises();

      let exercisesBg = new ShapeRect();
      exercisesBg.setSize(this.exercisesBgWidth, this.exercisesBgHeight);
      exercisesBg.x = this.exercisesPosArr[i].x;
      exercisesBg.y = this.exercisesPosArr[i].y;
      exercisesBg.alpha = 0;

      exercisesObj.bg = exercisesBg; 

      exercisesObj.wordAudioKey = "exercises" + i;

      exercisesObj.letterAudioKey = 'exercises_letter' + i;

      //单词图片
      this.initWordPic(this.data.exercisesArr[i], exercisesObj);

      this.renderArr.push(exercisesBg);
      this.exercisesArr.push(exercisesObj);
    }


  }

  initWordPic(exercises, exercisesObj: Exercises) {


    //最短
    let sWidth = 120;

    //中等
    let mWidth = 230;

    //最长
    let lWidth = 340;

    const letterBg = new ShapeRect();
    letterBg.alpha = 0;
    this.initSplitWord(letterBg, exercises, exercisesObj);

    let wordWidth = letterBg.getBoundingBox().width;

    const wordBg = new MySprite();

    if (wordWidth <= 120) {
      wordBg.init(this.images.get('wordBgS'));
    }
    else if (120 < wordWidth && wordWidth < mWidth) {
      wordBg.init(this.images.get('wordBgM'));
    }
    else {
      wordBg.init(this.images.get('wordBgL'));

      if (wordWidth > 340) {
        letterBg.setScaleXY(340 / letterBg.width);
      }
    }

    //单词坐标
    letterBg.x = (wordBg.width - 106) / 2 - (wordBg.width / 2 - 80) - letterBg.getBoundingBox().width / 2;
    letterBg.y = - letterBg.getBoundingBox().height / 2
    wordBg.addChild(letterBg);

    exercisesObj.wordSplitPic = letterBg;

    wordBg.setScaleXY(this.mapScale);
    wordBg.x = this.exercisesBgWidth / 2;

    wordBg.y = this.exercisesBgHeight - wordBg.getBoundingBox().height / 2;
    exercisesObj.bg.addChild(wordBg);
    exercisesObj.wordBg = wordBg;


    //图片
    const wordPic = new MySprite();
    wordPic.init(this.images.get(exercises.picUrl));

    let scaleX = this.exercisesBgWidth / wordPic.width;

    let scaleY = (this.exercisesBgHeight - wordBg.getBoundingBox().height) / wordPic.height;

    let mapScale = Math.min(scaleX, scaleY);
    //如果超过最大，则进行缩小
    if (mapScale < 1) {
      wordPic.setScaleXY(mapScale);
    }
    wordPic.x = wordBg.x;
    wordPic.y = this.exercisesBgHeight - wordBg.getBoundingBox().height - wordPic.getBoundingBox().height / 2;
    exercisesObj.bg.addChild(wordPic);
    exercisesObj.wordPic = wordPic;


    //如果录入值 ，则初始化单词组合
    if (exercises.letterCombinations.val) {


      const letterBg = new MySprite();
      letterBg.init(this.images.get('letter'));
      letterBg.setScaleXY(this.mapScale);
      letterBg.x = wordBg.x;
      letterBg.y = this.exercisesBgHeight + 10 * this.mapScale;
      exercisesObj.bg.addChild(letterBg);
      exercisesObj.letterCombinations = letterBg;

      const letter = new Label();
      letter.text = exercises.letterCombinations.val;
      letter.fontSize = 36
      letter.fontName = "BRLNSDB";
      letter.fontColor = "#AB5A23";
      letter.refreshSize();
      letter.setMaxSize(letterBg.width);
      letter.x = -letter.getBoundingBox().width / 2;
      letterBg.addChild(letter);
    }

    const answerBg = new MySprite();
    answerBg.init(this.images.get('answer'));
    
    answerBg.x = -wordBg.width / 2 + answerBg.width / 2 + 13 ;
    answerBg.y = - 5 * this.mapScale;
    answerBg.alpha = 0;
    exercisesObj.answerBg = answerBg;
    wordBg.addChild(answerBg);

    //答案顺序
    const answerIndex = new Label();
    answerIndex.text = exercises.answerIndex;
    answerIndex.fontSize = 64
    answerIndex.fontName = "BRLNSDB";
    answerIndex.fontColor = "#000000";
    answerIndex.refreshSize();
    answerIndex.alpha = 0;
    answerIndex.y = 0;
    answerIndex.x = - answerIndex.getBoundingBox().width/2 + 5 * this.mapScale;
    answerBg.addChild(answerIndex);
    //answerBg.setScaleXY(this.mapScale);
    exercisesObj.answerIndexLabel = answerIndex;
  }

  /**
   * 初始拆分字母
   * @param letterBg 
   * @param exercises 
   * @param exercisesObj 
   */
  initSplitWord(letterBg: ShapeRect, exercises, exercisesObj: Exercises) {

    let letters = exercises.letters;

    let startX = 0;

    let defaultWidth = 30 * this.mapScale;

    let totalWidth = 0;

    let height = 0;

    for (let i = 0; i < letters.length; ++i) {
      let letter = letters[i];

      const l_letter = new Label();
      l_letter.text = letter.val;
      l_letter.fontSize = 64;
      l_letter.fontName = "MMTextBook-Bold";
      l_letter.fontColor = "#E2E2E2";
      l_letter.refreshSize();
      l_letter.x = startX;
      l_letter.y = l_letter.getBoundingBox().height / 2 - 5 * this.mapScale;

      if (l_letter.getBoundingBox().width > defaultWidth) {
        defaultWidth = l_letter.getBoundingBox().width;
      }

      //如果是填空，则添加下划线
      if (letter.isFill == '1') {

        //设置不显示
        l_letter.alpha = 0;

        const underline = new LineRect();
        underline.setSize(defaultWidth - 8 * this.mapScale, 0.2);
        underline.lineColor = "#000000";
        underline.lineWidth = 4;
        underline.x = l_letter.x + 4 * this.mapScale;
        underline.y = l_letter.y + l_letter.getBoundingBox().height / 2;
        letterBg.addChild(underline);

        //单词居中
        l_letter.x = startX + (defaultWidth - l_letter.getBoundingBox().width) / 2;
        startX = startX + defaultWidth;

        totalWidth = totalWidth + defaultWidth;
      }
      else {
        startX = startX + l_letter.getBoundingBox().width;

        totalWidth += l_letter.getBoundingBox().width;
      }

      defaultWidth = 38 * this.mapScale;

      letterBg.addChild(l_letter);

      height = l_letter.getBoundingBox().height;

      exercisesObj.letterArr.push(l_letter);
    }

    letterBg.setSize(totalWidth, height);
  }

  btnPlayClicked() {

    if(this.curAudio){
      this.curAudio.pause();
    }
    this.isListenAudio = true;
   this.setListenPlayStatus();
  }

  btnStopClicked() {

    this.setListenPlayStatus();
  }

  /**
   * 设置听力材料播放状态
   */
  setListenPlayStatus(){

    if(this.playStatus){
      this.playStatus = false;
      this.pauseAudio('listenAudio');
  
      this.btnPlay.alpha = 1;
  
      this.btnStop.alpha = 0;
    }
    else{


      this.playAudio('listenAudio', false, ()=>{

        this.playStatus = false;

        this.btnPlay.alpha = 1;
  
        this.btnStop.alpha = 0;
      });

      this.playStatus = true;
   
      this.btnPlay.alpha = 0;
   
      this.btnStop.alpha = 1;
    }
  }




  mapDown(event) {

    if (!this.canTouch) {
      return;
    }

    //如果不是播放听力材料，则暂停当前播放音频
    if(this.curAudio){
        
      if(!this.isListenAudio){
        this.curAudio.pause();
        this.curAudio.currentTime = 0;
      }
       
    }

    if (this.checkClickTarget(this.btnPlay) && !this.playStatus) {
      this.btnPlayClicked();
      return;
    }

    if (this.checkClickTarget(this.btnStop) && this.playStatus) {
      this.btnStopClicked();
      return;
    }

    //点击标题
    if (this.checkClickTarget(this.titleBg)) {

      //播放发音
      this.playOtherAudio('titleAudio');
      return;
    }

    //循环判断是否被点击
    for(let i = 0; i < this.exercisesArr.length; ++ i){

      let exercises = this.exercisesArr[i];

      console.log('click word');
      //点击图片
      if(this.checkClickTarget(exercises.wordPic)){

        this.playOtherAudio(exercises.wordAudioKey);
        return;
      }

      //点击圆圈
      if(this.checkClickTarget(exercises.letterCombinations)){

        this.playOtherAudio(exercises.letterAudioKey);
        return;
      }

      //点击单词
      if(this.checkClickTarget(exercises.wordSplitPic)){
        
        //如果未加载，则加载
        if(exercises.showed){

          this.playOtherAudio(exercises.wordAudioKey);
          return;
        }
        else{
          exercises.setShow();
          return;
        }
      }

      //点击灰色部分,判断是否显示答案
      if(this.checkClickTarget(exercises.answerBg)){

        if(exercises.answerIndexLabel.text){
          if(this.nextShowAnser == exercises.answerIndexLabel.text){

            if(!exercises.answerShowed){
              exercises.answerIndexLabel.alpha = 1;
              this.nextShowAnser ++;
            }
            
          }
        }
        return;
      }
    }

  }

  mapMove(event) {

  }

  mapUp(event) {

  }

  playOtherAudio(key, callback = null){

    

    if(this.playStatus){
      this.setListenPlayStatus();
    }
    this.isListenAudio = false;
    this.playAudio(key, callback);
  }


  update() {

    // ----------------------------------------------------------
    this.animationId = window.requestAnimationFrame(this.update.bind(this));
    // 清除画布内容
    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    // tween 更新动画
    TWEEN.update();
    // ----------------------------------------------------------



    this.updateArr(this.renderArr);


  }



}
