JutarryWu_00
/
psychic_camera_school


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770
							<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>心灵照相机</title>
  <meta name="description"
    content="A website that learns to predict where you are looking at. Written in TensorFlow.js">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
  <style>
    .buttonArr button {
      position: fixed;
      width: 10px;
      height: 1px;
      /* opacity: 0.0; */
      z-index: 2000;
      color: #000000;
      border-radius: 10px;
      border: 0px;
    }

    .buttonArr {
      position: unset !important;
      width: 1px;
      height: 0px;
      opacity: 0.0;
      z-index: 2000;
      border-radius: 10px;
      border: 0px;
    }

    #num1 {
      position: absolute;
      left: 20px;
      top: 20px;
    }

    #num2 {
      position: absolute;
      left: 33%;
      top: 20px;
    }

    #num3 {
      position: absolute;
      left: 66%;
      top: 20px;
    }

    #num4 {
      position: absolute;
      right: 80px;
      top: 20px;
    }

    #num5 {
      position: absolute;
      left: 20px;
      top: 33%;
    }

    #num6 {
      position: absolute;
      left: 33%;
      top: 33%;
    }

    #num7 {
      position: absolute;
      left: 66%;
      top: 33%;
    }

    #num8 {
      position: absolute;
      right: 80px;
      top: 33%;
    }

    #num9 {
      position: absolute;
      left: 20px;
      top: 66%;
    }

    #num10 {
      position: absolute;
      left: 33%;
      top: 66%;
    }

    #num11 {
      position: absolute;
      left: 66%;
      top: 66%;
    }

    #num12 {
      position: absolute;
      right: 80px;
      top: 66%;
    }

    #num13 {
      position: absolute;
      left: 20px;
      bottom: 0px;
    }

    #num14 {
      position: absolute;
      left: 33%;
      bottom: 0px;
    }

    #num15 {
      position: absolute;
      left: 66%;
      bottom: 0px;
    }

    #num16 {
      position: absolute;
      right: 80px;
      bottom: 0px;
    }

    #targetMini {
      background-color: #00FF00;
      position: absolute;
      border-radius: 50%;
      height: 55px;
      width: 55px;
      /* z-index: 0; */
      opacity: 0.5;
      left: 0;
      bottom: 0;
      top: 0;
      right: 0;
      margin: auto;
      z-index: 999;
      transition: 1s;
      transition-timing-function: steps(1000, start);
      border: 2.5px solid #000000;
    }

    #target {
      /* text-align: center; */
      justify-content: center;
      background-image: url('calibrate.png');
      background-size: 120px 120px;
      /* background-color: lightgreen; */
      position: fixed;
      /* position: absolute; */

      border-radius: 50%;
      height: 120px;
      width: 120px;
      left: 0px;
      top: 0px;
      transition: left 0.01s, top 0.01s;
      box-shadow: 0 0 10px 5px white;
      opacity: 0.5;
      display: inline-block;
      z-index: 999;
    }

    #targetMini1 {
      background-color: #00FF00;
      /* position: absolute; */
      position: absolute;
      border-radius: 50%;
      height: 54px;
      width: 54px;
      /* z-index: 0; */
      opacity: 0.6;
      left: 0;
      bottom: 0;
      top: 0;
      right: 0;
      margin: auto;
      z-index: 999;
      transition: 1s;
      transition-timing-function: steps(1000, start);
      border: 3px solid #000000;
    }

    #target1 {
      /* text-align: center; */
      justify-content: center;
      background-image: url('calibrate.png');
      background-size: 60px 60px;
      /* background-color: lightgreen; */
      position: relative;
      /* position: absolute; */

      border-radius: 50%;
      height: 60px;
      width: 60px;
      left: 0px;
      top: 0px;
      transition: left 1s, top 1s;
      box-shadow: 0 0 10px 5px white;
      opacity: 0.9;
      display: inline-block;
      z-index: 999;
    }

    #refresh {
      width: 60px;
      font-size: 10px;
      position: fixed;
      top: 0px;
      left: 90%;
      display: inline-block;
      z-index: 999;
      margin-left: -40px;
      top: 2%;
      background-color: rgb(127, 178, 255);

      line-height: 30px;
      color: aliceblue;
      /* border: 1px solid; */
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
    }

    #exit {
      width: 60px;
      font-size: 10px;
      position: fixed;
      top: 0px;
      left: 98%;
      display: inline-block;
      z-index: 999;
      margin-left: -40px;
      top: 2%;
      background-color: rgb(127, 178, 255);

      line-height: 30px;
      color: aliceblue;
      /* border: 1px solid; */
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
      /* padding: 5px; */
    }

    #startCalibration {
      position: fixed;
      top: 0px;
      left: 50%;
      display: inline-block;
      margin-left: -40px;
      top: 30%;
      color: aliceblue;
      background-color: rgb(127, 178, 255);
      width: 80px;
      line-height: 40px;
      /* border: 1px solid; */
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
      padding: 5px;
    }

    #came {
      position: fixed;
      top: 5%;
      left: 50%;
      margin-left: -100px;
      color: #ffffff;
      /* font-size: 16px;
      right:0px;
      bottom:0; */
      background-color: #666666;
      padding-top: 5px;
      padding-left: 5px;
      padding-right: 5px;
      padding-bottom: 5px;
      border-radius: 5px;
      ;

      z-index: 9999
    }
  </style>
</head>

<body>
  <div id="content">
    <div class="buttonArr">
      <button id='num1'>&nbsp;</button><button id="num2">&nbsp;</button><button id="num3">&nbsp;</button><button
        id='num4'>&nbsp;</button><br>
      <button id='num5'>&nbsp;</button><button id='num6'>&nbsp;</button><button id='num7'>&nbsp;</button><button
        id='num8'>&nbsp;</button><br>
      <button id='num9'>&nbsp;</button> <button id='num10'>&nbsp;</button> <button id='num11'>&nbsp;</button> <button
        id='num12'>&nbsp;</button><br>
      <button id='num13'>&nbsp;</button> <button id='num14'>&nbsp;</button> <button id='num15'>&nbsp;</button> <button
        id='num16'>&nbsp;</button>
    </div>

    <div id="target">
      <div id="targetMini"></div>
    </div>
    <div id="target1">
      <div id="targetMini1"></div>
    </div>
    <canvas id="solar" width="900" height="auto" style="background:#000000;position: fixed; z-index:998"></canvas>
    <div id="came">摄像头初始化中稍后再试...</div>

    <!-- <div id="finishcalibration" margin-left:300px;position: fixed;top:60px
      style="position: fixed;top:20px;left:20px;display: inline-block;width: 80px;height: 17px;border:1px solid;text-align: center;border-radius: 5px;cursor: pointer;padding: 5px;">
      关闭校正</div> onclick="startCal()" -->
    <!-- <div id="startCalibration">
      开始校准</div> -->
    <div id="exit">
      切换游戏</div>
    <div id="refresh">
      重新校验</div>
    <canvas id="tracker-canvas"
      style="position: fixed;top:0px;left:50%;width:250px;height:200px;margin-left:-125px;"></canvas>
  </div>

  <!-- <script src="js/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script> -->
  <script src="js/jquery-3.3.1.min.js"></script>

  <script src="js/gazefilter.js"></script>
  <script src="js/aes.js" type="text/javascript" charset="utf-8"></script>
  <!--script src="js/calibration.js"></script-->
  <script>
    $('#came').hide()
    var soundSrc = 'sound/worm1.mp3'
    var mp3Url = soundSrc;
    var soundFlag = true;
    var cameraFlag = true
    var player = new Audio(mp3Url);

    //点击按钮声音
    var soundButtonSrc = 'sound/button.mp3'
    var mp3Button = soundButtonSrc
    var playerButton = new Audio(mp3Button);

    //打虫子音效
    var soundHitSrc = 'sound/wormHit.mp3'
    var mp3Hit = soundHitSrc
    var playerHit = new Audio(mp3Hit)

    //背景音乐
    var soundBgSrc = 'sound/wormMusicBg.mp3'
    var mp3Bg = soundBgSrc
    var playerBg = new Audio(mp3Bg)

    //总分
    var totalScore = 0;

    var key = CryptoJS.enc.Utf8.parse("Sp5biS+gX+#CqAFF");//密钥
    var iv = CryptoJS.enc.Utf8.parse('ud2E8l6wchltwIDA');
    //传输参数为字符串
    function Encrypt(word) {
      let srcs = CryptoJS.enc.Utf8.parse(word);
      let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
      return encrypted.ciphertext.toString().toUpperCase();
    }
    function Decrypt(word) {
      let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
      let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
      let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
      let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
      return decryptedStr.toString();
    }


    // levelFun(2, 20)
    //
    //传输关卡和得分的字符串
    function levelFun(level, score) {
      //1----获取userId
      // let userMi = sessionStorage.getItem('B922C64EC97B4FF08485886B2AAEF40C')
      // //解密userMi
      // let user = Decrypt(userMi)
      // //需要传输的参数
      // let userId = JSON.parse(user).id
      // //2----获取唯一标识
      // let associatedFlag = new Date().getTime() + '';
      // var params = {
      //   userId: userId,
      //   associatedFlag: associatedFlag,
      //   gameFlag: 'g_ydrzxlzcz',
      //   checkPoint: level,
      //   level: level,
      //   score: score,
      //   performance: {},
      //   data: {}
      // }
      // // Encrypt(JSON.stringify(params))
      // // console.log(Encrypt(JSON.stringify(params)))
      // //给参数加密
      // let paramsMi = Encrypt(JSON.stringify(params))
      // // console.log(Decrypt(paramsMi))
      // let tokenLin = Decrypt(sessionStorage.getItem(Encrypt('token'))) || '';
      // $.ajax({
      //   url: "https://child.jue-ming.com:8060/gameLevelRecord/saveResult",      //请求接口的地址
      //   type: "POST",
      //   contentType: "json/application",
      //   dataType: 'json',                                    //请求的方法GET/POST
      //   data: JSON.stringify({ data: paramsMi }),
      //   headers: {
      //     'Authorization': "Bearer " + tokenLin,
      //   },                                     //需要传递的参数
      //   success: function (res) {
      //     res = Decrypt(res)
      //     //调用解密方法                     //请求成功后的操作
      //     //在控制台输出返回结果
      //   },
      //   error: function (err) {                       //请求失败后的操作
      //     //请求失败在控制台输出22
      //   }
      // })
    }

    function saveResult(score) {
      //1----获取userId
      let userMi = sessionStorage.getItem('B922C64EC97B4FF08485886B2AAEF40C')
      //解密userMi
      let user = Decrypt(userMi)
      //需要传输的参数
      let userId = JSON.parse(user).id
      //2----获取唯一标识
      let associatedFlag = new Date().getTime() + '';
      var params = {
        userId: userId,
        associatedFlag: associatedFlag,
        gameFlag: 'g_ydrzxlzcz',
        totalScore: score,
        gameName: '眼动认知训练捉虫子'
      }
      let paramsMi = Encrypt(JSON.stringify(params))
      let tokenLin = Decrypt(sessionStorage.getItem(Encrypt('token'))) || '';
      $.ajax({
        url: "https://child.jue-ming.com:8060/gameRecord/saveResult",      //请求接口的地址
        type: "POST",
        contentType: "json/application",
        dataType: 'json',                                   //请求的方法GET/POST
        data: JSON.stringify({ data: paramsMi }),
        headers: {
          'Authorization': "Bearer " + tokenLin,
        },                                 //需要传递的参数
        success: function (res) {
          res = Decrypt(res)
          //调用解密方法                     //请求成功后的操作
          //在控制台输出返回结果
        },
        error: function (err) {                       //请求失败后的操作
          //请求失败在控制台输出22
        }
      })
    }

    //
    //切水果游戏变量
    let apple;
    let appleLeft;
    let appleRight;
    let banana;
    let bananaLeft;
    let bananaRight;
    let sandia;
    let sandiaLeft;
    let sandiaRight;
    let basaha;
    let basahaLeft;
    let basahaRight;
    let bg;
    let ctx;


    let widthLeft;
    //退出按钮
    let button1;
    let button2;
    //等于1时代表在水果游戏页面
    //等于2时代表在抓虫子页面
    let fruitFlag = 2;


    //水果下降的速度
    let y = [20, 20, 20, 20];
    let speed = [1, 1.5, 1.3, 1.4];
    let x = [100, 300, 500, 700]
    let rondom;
    let timer;
    //设置水果的起点
    let fruitStart = 10
    //设置说过的结尾
    let fruitEnd = 900;
    //是否隐藏
    let flag = [true, true, true, true]
    //苹果左右碎片
    let apple_x_left = x[0];
    let apple_x_right = x[0];

    let banana_x_left = x[1];
    let banana_x_right = x[1]

    let sandia_x_left = x[2];
    let sandia_x_right = x[2]

    let basaha_x_left = x[3];
    let basaha_x_right = x[3];

    let targ = [0, 0]

    let tempCanvasFruit;
    let tempCtxFruit;
    let patternFruit;

    //水果倒计时初始时间
    let startTimeFruit;
    //设置倒计时结束时间
    let endTimeFruit;
    let canvas = document.getElementById('solar');
    ctx = canvas.getContext("2d");
    window.addEventListener("resize", resizeCanvas, false);

    let countdownFlag = false;
    let diff = 1;
    let count = 0
    //第几关进行提示
    let diffFlag = false;
    //通关提示   
    //当passFlag默认为1为正常状态
    //当passFlag为2时为超时未通过状态
    //当passFlag为3时为已通关状态
    let passFlag = 1;

    //训练提示页flag
    let trainingFlag = 1
    //第一张训练图片
    let trainOne;
    let trainTwo;
    let trainThree;
    let trainFour;
    let onStep;
    let underStep;
    let startGame;
    let backMa;
    //canvas监听事件
    canvas.addEventListener("mouseup", clickButton);

    function resizeCanvas() {
      canvas.width = window.innerWidth;
      x = [canvas.width / 5, canvas.width / 5 * 2, canvas.width / 5 * 3, canvas.width / 5 * 4]

      xWorm = [canvas.width / 5, canvas.width / 5 * 2, canvas.width / 5 * 3, canvas.width / 5 * 4]
      //  canvas.height = window.innerHeight;
      canvas.height = window.innerHeight;
      fruitEnd = canvas.height
      wormStart = canvas.height

      //canvas.height = '100vh';
      apple_x_left = x[0];
      apple_x_right = x[0];

      banana_x_left = x[1];
      banana_x_right = x[1]

      sandia_x_left = x[2];
      sandia_x_right = x[2]

      basaha_x_left = x[3];
      basaha_x_right = x[3];
    }
    //获取
    //  initWorm()
    //初始化切水果的图

    //第几关2秒显示
    function middleFont() {
      diffFlag = true;
      setTimeout(() => {
        diffFlag = false;
      }, 2000);
    }
    function soundChange() {
      if (soundFlag) {
        soundOpen()

      } else {
        soundClose()
      }
    }
    function clickButton(event) {
      //鼠标在当前画布的位置
      // let x1 = event.clientX;
      // let y1 = event.clientY;

      let x = event.clientX - canvas.getBoundingClientRect().left;
      let y = event.clientY - canvas.getBoundingClientRect().top;
      //判断点是否在长方形内

      //当在第一步训练时 只有一个按钮下一步的按钮
      if (trainingFlag == 1) {
        if (x > (canvas.width / 2 - 80) && x < (canvas.width / 2 + 80) && y > (canvas.height / 2 + 100) && y < (canvas.height / 2 + +100 + 80)) {
          // ctx.drawImage(underStep, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          soundButtonOpen()
          soundSrc = 'sound/worm1.mp3'
          soundClose()
          if (soundFlag) {
            soundOpen()
          }
          trainingFlag = 2
        }
      } else if (trainingFlag == 2) {  //当在第二步训练时  有上一步下一步按钮
        //当是在点击声音播放声音时
        if (x > (canvas.width - widthLeft - 90) && x < (canvas.width - widthLeft - 58) && y > (30) && y < (76)) {
          // ctx.drawImage(underStep, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          soundButtonOpen()
          soundFlag = !soundFlag
          soundChange()

        }
        // 上一步按钮
        if (x > (canvas.width / 2 - 200) && x < (canvas.width / 2 + 40) && y > (canvas.height / 2 + 220) && y < (canvas.height / 2 + 220 + 80)) {
          // ctx.drawImage(underStep, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          soundButtonOpen()
          trainingFlag = 1
          soundClose()
        }

        // ctx.drawImage(onStep, canvas.width / 2 - 200, canvas.height / 2 + 100, 160, 80);
        // 下一步按钮
        if (x > (canvas.width / 2 + 40) && x < (canvas.width / 2 + 200) && y > (canvas.height / 2 + 220) && y < (canvas.height / 2 + 220 + 80)) {
          // ctx.drawImage(underStep, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          soundButtonOpen()
          trainingFlag = 3
          soundClose()
          soundSrc = 'sound/worm2.mp3'
          if (soundFlag) {
            soundOpen()
          }
        }
        // ctx.drawImage(underStep, canvas.width / 2 + 40, canvas.height / 2 + 100, 160, 80);
      } else if (trainingFlag == 3) {
        
        //当是在点击声音播放声音时
        if (x > (canvas.width - widthLeft - 90) && x < (canvas.width - widthLeft - 58) && y > (30) && y < (76)) {
          soundButtonOpen()
          soundFlag = !soundFlag
          soundChange()
          // ctx.drawImage(underStep, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          // soundOpen()
        }
        // 上一步按钮
        if (x > (canvas.width / 2 - 200) && x < (canvas.width / 2 + 40) && y > (canvas.height / 2 + 220) && y < (canvas.height / 2 + 220 + 80)) {
          // ctx.drawImage(underStep, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          soundButtonOpen()
          soundSrc = 'sound/worm1.mp3'
          soundClose()
          if (soundFlag) {
            soundOpen()
          }

          trainingFlag = 2
        }

        // ctx.drawImage(onStep, canvas.width / 2 - 200, canvas.height / 2 + 100, 160, 80);
        // 下一步按钮
        if (x > (canvas.width / 2 + 40) && x < (canvas.width / 2 + 200) && y > (canvas.height / 2 + 220) && y < (canvas.height / 2 + 220 + 80)) {
          // ctx.drawImage(underStep, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          // soundClose()
          // calibrationAccuracy()
          soundBgOpen() 
          soundButtonOpen()
          if (cameraFlag) {
            soundClose()
            calibrationAccuracy()
          } else {
            $('#came').show()
            setTimeout(() => {
              $('#came').hide()
            }, 2000);
          }

        }

      } else if (trainingFlag == 4) {
        if (x > (canvas.width / 2 - 80) && x < (canvas.width / 2 + 80) && y > (canvas.height / 2 + 220) && y < (canvas.height / 2 + 220 + 80)) {
          // ctx.drawImage(underStep, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          soundButtonOpen()
          soundBgClose()
          trainingFlag = 1
          $('#target').hide()
          // init()
        }
      }
      //ctx.drawImage(backMa, 20, 20, 40, 30);
      if (x > widthLeft + 40 && x < widthLeft + 98 && y > 30 && y < 76) {
        soundButtonOpen()
        //点击退出按钮就返回到感统综合页面即可
        // window.location.href = 'http://49.232.79.112:8088/home'
        //http://localhost:8084/gameRecord/saveResult
        // window.location.href = 'http://child.jue-ming.com/home'
        window.location.href = 'https://org.jue-ming.com/welcome/mainTable'
        
      }
    }
    function init() {

      middleFont()
      //第一张训练图片
      trainOne = new Image();
      trainTwo = new Image();
      trainThree = new Image();
      trainFour = new Image();
      onStep = new Image();
      underStep = new Image()
      startGame = new Image();
      backMa = new Image();


      button1 = new Image;
      //苹果
      apple = new Image();
      //苹果碎片
      appleLeft = new Image();
      appleRight = new Image();
      //香蕉
      banana = new Image();
      bananaLeft = new Image();
      bananaRight = new Image();
      //西瓜
      sandia = new Image();
      sandiaLeft = new Image();
      sandiaRight = new Image();
      //草莓
      basaha = new Image();
      basahaLeft = new Image();
      basahaRight = new Image();

      bg = new Image();
      trainOne.src = './image/fruit1.png'
      trainTwo.src = './image/fruit2.png'
      trainThree.src = './image/fruit3.png'
      trainFour.src = './image/fruit4.png'
      onStep.src = './image/onStep.png'
      underStep.src = './image/underStep.png'
      startGame.src = './image/startGame.png'
      backMa.src = './image/backMa.png'


      button1.src = './image/button1.png'
      apple.src = "./image/apple.png";
      appleLeft.src = './image/apple-1.png';
      appleRight.src = './image/apple-2.png';
      banana.src = './image/banana.png';
      bananaLeft.src = './image/banana-1.png';
      bananaRight.src = './image/banana-2.png';
      sandia.src = './image/sandia.png'
      sandiaLeft.src = './image/sandia-2.png'
      sandiaRight.src = './image/sandia-1.png'
      basaha.src = './image/basaha.png'
      basahaLeft.src = './image/basaha-2.png'
      basahaRight.src = './image/basaha-1.png'
      bg.src = './image/background.png'

      //canvas = 
      //let canvas = document.querySelector("#solar");
      apple.onload = function () {
        //设置初始时间 
        countdown()
        draw()
      }
      // bg.onload = imgFn;
    }
    //初始化虫子的变量
    //虫子1
    let wormOne;
    //虫子二
    let wormTwo;
    //虫子3
    let wormThree;
    //虫子4
    let wormFour;
    let bgtree;
    let timerWorm;
    //水果下降的速度
    let yWorm = [600, 600, 600, 600];
    let speedWorm = [1, 1.5, 1.3, 1.4];
    let xWorm = [100, 300, 500, 700]

    //设置虫子的起点
    let wormStart = 600
    //设置说过的结尾
    let wormEnd = 20;
    let tempCanvas;
    let tempCtx;
    let pattern
    //初始化抓虫子的图

    //声音的图片
    let soundImgClose;
    let soundImgOpen;
    //成功图片
    let success;
    function initWorm() {
      //第一张训练图片
      trainOne = new Image();
      trainTwo = new Image();
      trainThree = new Image();
      trainFour = new Image();
      onStep = new Image();
      underStep = new Image()
      startGame = new Image();
      backMa = new Image();
      soundImgClose = new Image();
      soundImgOpen = new Image();
      success = new Image()


      wormOne = new Image();
      wormTwo = new Image();
      wormThree = new Image();
      wormFour = new Image();
      bgtree = new Image();
      wormOne.src = './image/bug1.png';
      wormTwo.src = './image/bug2.png';
      wormThree.src = './image/bug3.png';
      wormFour.src = './image/bug4.png';
      bgtree.src = './image/tree.png'
      wormFlag = [true, true, true, true]
      trainOne.src = './image/worm1.png'
      trainTwo.src = './image/worm2.png'
      trainThree.src = './image/worm3.png'
      trainFour.src = './image/worm4.png'
      success.src = './image/success.png'
      onStep.src = './image/onStep.png'
      underStep.src = './image/underStep.png'
      startGame.src = './image/startGame.png'
      backMa.src = './image/backMa.png'
      soundImgClose.src = './image/close.png'
      soundImgOpen.src = './image/open.png'
      bgtree.onload = function () {
        countdown()
        //先把加载好的图片绘制在一个临时的画布上
        drawWorm()
      }
    }
    //画虫子
    function drawWorm() {
      widthLeft = (canvas.width - (1270 / 714 * canvas.height)) / 2
      if (trainingFlag == 1) {
        tempCanvasFruit = document.createElement('canvas');
        tempCanvasFruit.width = canvas.width;
        tempCanvasFruit.height = canvas.height;
        tempCtxFruit = tempCanvasFruit.getContext('2d');
        tempCtxFruit.drawImage(trainOne, widthLeft, 0, 1270 / 714 * canvas.height, canvas.height);
        patternFruit = ctx.createPattern(tempCanvasFruit, 'repeat');
        ctx.fillStyle = patternFruit;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        //增加下一步的按钮。点击后将trainningFlag设置2
        ctx.drawImage(underStep, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);

        //返回按钮
        //ctx.drawImage(backMa, 20, 20, 40, 30);
        ctx.drawImage(backMa, widthLeft + 40, 30, 58, 46);


      }
      if (trainingFlag == 2) {
        tempCanvasFruit = document.createElement('canvas');
        tempCanvasFruit.width = canvas.width;
        tempCanvasFruit.height = canvas.height;
        tempCtxFruit = tempCanvasFruit.getContext('2d');
        tempCtxFruit.drawImage(trainTwo, widthLeft, 0, 1270 / 714 * canvas.height, canvas.height);
        patternFruit = ctx.createPattern(tempCanvasFruit, 'repeat');
        ctx.fillStyle = patternFruit;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(trainThree, (canvas.width - (canvas.width / 2 + 200)) / 2, 80, canvas.width / 2 + 200, canvas.height / 2 + 130);
        // ctx.drawImage(trainThree, (canvas.width - canvas.width / 2) / 2, 100, canvas.width / 2, canvas.height / 2 + 100);
        //上一步按钮
        ctx.drawImage(onStep, canvas.width / 2 - 200, canvas.height / 2 + 220, 160, 80);
        //下一步按钮
        ctx.drawImage(underStep, canvas.width / 2 + 40, canvas.height / 2 + 220, 160, 80);
        //返回按钮
        ctx.drawImage(backMa, widthLeft + 40, 30, 58, 46);

        if (soundFlag) {
          ctx.drawImage(soundImgOpen, canvas.width - widthLeft - 90, 30, 58, 46);
          // ctx.drawImage(soundImgOpen, canvas.width - 60, 20, 40, 30);
        } else {
          //ctx.drawImage(soundImgClose, canvas.width - 60, 20, 40, 30);
          ctx.drawImage(soundImgClose, canvas.width - widthLeft - 90, 30, 58, 46);
        }


      }
      if (trainingFlag == 3) {
        tempCanvasFruit = document.createElement('canvas');
        tempCanvasFruit.width = canvas.width;
        tempCanvasFruit.height = canvas.height;
        tempCtxFruit = tempCanvasFruit.getContext('2d');
        tempCtxFruit.drawImage(trainTwo, widthLeft, 0, 1270 / 714 * canvas.height, canvas.height);
        patternFruit = ctx.createPattern(tempCanvasFruit, 'repeat');
        ctx.fillStyle = patternFruit;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(trainFour, (canvas.width - (canvas.width / 2 + 200)) / 2, 80, canvas.width / 2 + 200, canvas.height / 2 + 130);
        //ctx.drawImage(trainFour, (canvas.width - canvas.width / 2) / 2, 100, canvas.width / 2, canvas.height / 2 + 100);
        //上一步按钮
        ctx.drawImage(onStep, canvas.width / 2 - 200, canvas.height / 2 + 220, 160, 80);
        //下一步按钮countdownFlag
        ctx.drawImage(underStep, canvas.width / 2 + 40, canvas.height / 2 + 220, 160, 80);
        //返回按钮
        ctx.drawImage(backMa, widthLeft + 40, 30, 58, 46);
        // ctx.drawImage(soundImgOpen, canvas.width - 60, 20, 40, 30)
        if (soundFlag) {
          ctx.drawImage(soundImgOpen, canvas.width - widthLeft - 90, 30, 58, 46);
          // ctx.drawImage(soundImgOpen, canvas.width - 60, 20, 40, 30);
        } else {
          //ctx.drawImage(soundImgClose, canvas.width - 60, 20, 40, 30);
          ctx.drawImage(soundImgClose, canvas.width - widthLeft - 90, 30, 58, 46);
        }

      }
      if (trainingFlag == 4) {

        ctx.fillRect(0, 0, canvas.width, canvas.height)
        tempCanvas = document.createElement('canvas');
        tempCanvas.width = canvas.width;
        tempCanvas.height = canvas.height;
        tempCtx = tempCanvas.getContext('2d');
        tempCtx.drawImage(bgtree, 0, 0, canvas.width, canvas.height);
        pattern = ctx.createPattern(tempCanvas, 'repeat');
        ctx.fillStyle = pattern;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(backMa, widthLeft + 40, 30, 58, 46);
        var gradient = ctx.createLinearGradient(0, 0, 100, 0);
        if (countdownFlag) {
          gradient.addColorStop("1.0", "#D1BBFF");
          // Fill with gradient
          ctx.strokeStyle = gradient;

          ctx.font = "30px Arial";
          ctx.strokeText("倒计时:" + countdown(), canvas.width - 240, 100);

          gradient.addColorStop("1.0", "#D1BBFF");
          // Fill with gradient
          ctx.strokeStyle = gradient;

          ctx.font = "30px Arial";
          ctx.strokeText("第" + diff + '关', 100, 100);

          ctx.font = "30px Arial";
          ctx.strokeText("得分:" + count, canvas.width - 240, 150);
          ctx.drawImage(backMa, widthLeft + 40, 30, 58, 46);
          // ctx.fillText("Hello World", 10, 50);
          //切水果倒计时三分钟
          //初始化
        }
        if (diffFlag) {
          gradient.addColorStop("1.0", "#D1BBFF");
          // Fill with gradient
          ctx.strokeStyle = gradient;

          ctx.font = "80px Arial";
          ctx.strokeText("第 " + diff + ' 关', canvas.width / 2 - 120, canvas.height / 2 - 100);
        }
        if (passFlag == 2) {
          gradient.addColorStop("1.0", "red");
          // Fill with gradient
          ctx.strokeStyle = gradient;
          ctx.font = "20px Arial";
          ctx.strokeText("很遗憾您已超时，继续加油！", canvas.width / 2 - 100, canvas.height / 2 - 100);
          countdownFlag = false;
          diffFlag = false;
          //ctx.drawImage(startGame, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          ctx.drawImage(startGame, canvas.width / 2 - 80, canvas.height / 2 + 220, 160, 80);
          //重新开始按钮 //或返回主页
          // ctx.drawImage(button1, canvas.width / 2 - 200, canvas.height / 2 + 100, 60, 30);
        }
        if (passFlag == 3) {
          gradient.addColorStop("1.0", "#D1BBFF");
          // Fill with gradient
          ctx.strokeStyle = gradient;
          // ctx.font = "50px Arial";
          // ctx.strokeText("您已通关！！！", canvas.width / 2 - 120, canvas.height / 2 - 100);success
          ctx.drawImage(success, canvas.width / 2 - 325, 10);
          ctx.drawImage(startGame, canvas.width / 2 - 80, canvas.height / 2 + 220, 160, 80);
          //  ctx.drawImage(success, canvas.width / 2 - 120, canvas.height / 2 - 100);
          // ctx.drawImage(startGame, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          countdownFlag = false;
          diffFlag = false;
          //重新开始按钮 //或返回主页
          // ctx.drawImage(button1, canvas.width / 2 - 200, canvas.height / 2 + 100, 60, 30);
        }


        // ctx.font = "40px Arial";
        // ctx.strokeText("Hello World", 10, 50);
        // ctx.fillText("Hello World", 10, 50);
        //虫子1
        ctx.drawImage(wormOne, xWorm[0], yWorm[0], 60, 60);

        ctx.drawImage(wormTwo, xWorm[1], yWorm[1], 60, 60);

        //虫子三
        ctx.drawImage(wormThree, xWorm[2], yWorm[2], 60, 60);
        //虫子4
        ctx.drawImage(wormFour, xWorm[3], yWorm[3], 60, 60);
        let random = Math.random() + 1
        if (wormFlag[0]) {
          yWorm[0] = yWorm[0] - speedWorm[0] * random
        } else {
          yWorm[0] = yWorm[0] + speedWorm[0] * random * 1.5
        }
        if (yWorm[0] < wormEnd || yWorm[0] > wormStart) {
          yWorm[0] = wormStart
          wormFlag[0] = true
          random = Math.random() + 1
        }
        if (wormFlag[1]) {
          yWorm[1] = yWorm[1] - speedWorm[1] * random
        } else {
          yWorm[1] = yWorm[1] + speedWorm[1] * random * 1.5
        }
        //yWorm[1] = yWorm[1] - speedWorm[1] * random
        if (yWorm[1] < wormEnd || yWorm[1] > wormStart) {
          yWorm[1] = wormStart
          wormFlag[1] = true;
          random = Math.random() + 1
        }

        if (wormFlag[2]) {
          yWorm[2] = yWorm[2] - speedWorm[2] * random
        } else {
          yWorm[2] = yWorm[2] + speedWorm[2] * random * 1.5
        }
        //yWorm[2] = yWorm[2] - speedWorm[2] * random
        if (yWorm[2] < wormEnd || yWorm[2] > wormStart) {
          yWorm[2] = wormStart
          wormFlag[2] = true;
          random = Math.random() + 1
        }
        if (wormFlag[3]) {
          yWorm[3] = yWorm[3] - speedWorm[3] * random
        } else {
          yWorm[3] = yWorm[3] + speedWorm[3] * random * 1.5
        }

        if (yWorm[3] < wormEnd || yWorm[3] > wormStart) {
          yWorm[3] = wormStart
          wormFlag[3] = true;
          random = Math.random() + 1
        }
        let first = [xWorm[0] + 30, yWorm[0] + 30]
        //第二列中心点坐标
        let second = [xWorm[1] + 30, yWorm[1] + 30]
        let third = [xWorm[2] + 30, yWorm[2] + 30]
        let four = [xWorm[3] + 30, yWorm[3] + 30]
        collision(first, second, third, four)
      }
      timerWorm = requestAnimationFrame(drawWorm);
      if (fruitFlag !== 2) {
        window.cancelAnimationFrame(timerWorm)
        ctx.clearRect(0, 0, canvas.width, canvas.height); //清空所有的内容
      }
    }
    function soundClose() {
      player.pause()
    }

    function soundOpen() {
      mp3Url = soundSrc;
      player = new Audio(mp3Url);
      player.play()
    }
    //按钮点击音效
    function soundButtonOpen() {

      playerButton.play()
    }
    //捉虫子音效
    function soundHitOpen() {

      playerHit.play()
    }

    //背景音乐音效
    function soundBgOpen() {
      playerBg.play()
      playerBg.loop = true;
    }
    function soundBgClose() {
      playerBg.pause()
    }
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); //清空所有的内容
      // let a = ctx.createPattern(bg, 'repeat')
      // ctx.fillStyle = a;
      // ctx.fillRect(0, 0, canvas.width, canvas.height)
      /*绘制 太阳*/
      tempCanvasFruit = document.createElement('canvas');
      tempCanvasFruit.width = canvas.width;
      tempCanvasFruit.height = canvas.height;
      tempCtxFruit = tempCanvasFruit.getContext('2d');
      tempCtxFruit.drawImage(bg, 0, 0, canvas.width, canvas.height);
      patternFruit = ctx.createPattern(tempCanvasFruit, 'repeat');
      ctx.fillStyle = patternFruit;
      ctx.fillRect(0, 0, canvas.width, canvas.height);


      if (trainingFlag == 1) {
        tempCanvasFruit = document.createElement('canvas');
        tempCanvasFruit.width = canvas.width;
        tempCanvasFruit.height = canvas.height;
        tempCtxFruit = tempCanvasFruit.getContext('2d');
        tempCtxFruit.drawImage(trainOne, 0, 0, canvas.width, canvas.height);
        patternFruit = ctx.createPattern(tempCanvasFruit, 'repeat');
        ctx.fillStyle = patternFruit;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        //增加下一步的按钮。点击后将trainningFlag设置2
        ctx.drawImage(underStep, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);

        //返回按钮
        ctx.drawImage(backMa, 20, 20, 40, 30);


      }
      if (trainingFlag == 2) {
        tempCanvasFruit = document.createElement('canvas');
        tempCanvasFruit.width = canvas.width;
        tempCanvasFruit.height = canvas.height;
        tempCtxFruit = tempCanvasFruit.getContext('2d');
        tempCtxFruit.drawImage(trainTwo, 0, 0, canvas.width, canvas.height);
        patternFruit = ctx.createPattern(tempCanvasFruit, 'repeat');
        ctx.fillStyle = patternFruit;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.drawImage(trainThree, (canvas.width - canvas.width / 2) / 2, 100, canvas.width / 2, canvas.height / 2 + 100);
        //上一步按钮
        ctx.drawImage(onStep, canvas.width / 2 - 200, canvas.height / 2 + 100, 160, 80);
        //下一步按钮
        ctx.drawImage(underStep, canvas.width / 2 + 40, canvas.height / 2 + 100, 160, 80);
        //返回按钮
        ctx.drawImage(backMa, 20, 20, 40, 30);

      }
      if (trainingFlag == 3) {
        tempCanvasFruit = document.createElement('canvas');
        tempCanvasFruit.width = canvas.width;
        tempCanvasFruit.height = canvas.height;
        tempCtxFruit = tempCanvasFruit.getContext('2d');
        tempCtxFruit.drawImage(trainTwo, 0, 0, canvas.width, canvas.height);
        patternFruit = ctx.createPattern(tempCanvasFruit, 'repeat');
        ctx.fillStyle = patternFruit;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.drawImage(trainFour, (canvas.width - canvas.width / 2) / 2, 100, canvas.width / 2, canvas.height / 2 + 100);
        //上一步按钮
        ctx.drawImage(onStep, canvas.width / 2 - 200, canvas.height / 2 + 100, 160, 80);
        //下一步按钮
        ctx.drawImage(underStep, canvas.width / 2 + 40, canvas.height / 2 + 100, 160, 80);
        //返回按钮
        ctx.drawImage(backMa, 20, 20, 40, 30);

      }

      if (trainingFlag == 4) {
        var gradient = ctx.createLinearGradient(0, 0, 100, 0);
        //返回按钮
        ctx.drawImage(backMa, 20, 20, 40, 30);
        if (countdownFlag) {
          gradient.addColorStop("1.0", "#D1BBFF");
          // Fill with gradient
          ctx.strokeStyle = gradient;

          ctx.font = "30px Arial";
          ctx.strokeText("倒计时:" + countdown(), canvas.width - 240, 100);

          gradient.addColorStop("1.0", "#D1BBFF");
          // Fill with gradient
          ctx.strokeStyle = gradient;

          ctx.font = "30px Arial";
          ctx.strokeText("第" + diff + '关', 100, 100);

          ctx.font = "30px Arial";
          ctx.strokeText("得分:" + count, canvas.width - 240, 150);
          // ctx.fillText("Hello World", 10, 50);
          //切水果倒计时三分钟
          //初始化
        }
        if (diffFlag) {
          gradient.addColorStop("1.0", "yellow");
          // Fill with gradient
          ctx.strokeStyle = gradient;

          ctx.font = "80px Arial";
          ctx.strokeText("第 " + diff + ' 关', canvas.width / 2 - 120, canvas.height / 2 - 100);
        }
        if (passFlag == 2) {
          gradient.addColorStop("1.0", "red");
          // Fill with gradient
          ctx.strokeStyle = gradient;
          ctx.font = "20px Arial";
          ctx.strokeText("很遗憾您已超时，继续加油！", canvas.width / 2 - 100, canvas.height / 2 - 100);
          ctx.drawImage(startGame, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          countdownFlag = false;
          diffFlag = false;
          //重新开始按钮 //或返回主页
          //ctx.drawImage(button1, canvas.width / 2 - 200, canvas.height / 2 + 100, 60, 30);
        }
        if (passFlag == 3) {
          gradient.addColorStop("1.0", "yellow");
          // Fill with gradient
          ctx.strokeStyle = gradient;
          ctx.font = "20px Arial";
          ctx.strokeText("您已通关！！！", canvas.width / 2 - 100, canvas.height / 2 - 100);
          ctx.drawImage(startGame, canvas.width / 2 - 80, canvas.height / 2 + 100, 160, 80);
          countdownFlag = false;
          diffFlag = false;
          //重新开始按钮 //或返回主页
          // ctx.drawImage(button1, canvas.width / 2 - 200, canvas.height / 2 + 100, 60, 30);
        }

        // ctx.drawImage(button1, canvas.width / 2 - 100, canvas.height / 2 + 100, 100, 40);
        // ctx.drawImage(button1, canvas.width / 2 + 100, canvas.height / 2 + 100, 100, 40);
        if (flag[0]) {

          ctx.drawImage(apple, x[0], y[0], 60, 60);
          getColl()
        } else {
          apple_x_left += 0.5
          apple_x_right -= 0.5
          ctx.drawImage(appleLeft, apple_x_right, y[0], 60, 60);
          ctx.drawImage(appleRight, apple_x_left, y[0], 60, 60);
        }

        if (flag[1]) {
          ctx.drawImage(banana, x[1], y[1], 60, 30);
          getColl()
        } else {
          banana_x_left += 0.5
          banana_x_right -= 0.5
          ctx.drawImage(bananaLeft, banana_x_left, y[1], 60, 30);
          ctx.drawImage(bananaRight, banana_x_right, y[1], 60, 30);
        }

        if (flag[2]) {
          ctx.drawImage(sandia, x[2], y[2], 60, 60);
          getColl()
        } else {
          sandia_x_left += 0.5
          sandia_x_right -= 0.5
          ctx.drawImage(sandiaLeft, sandia_x_left, y[2], 60, 60);
          ctx.drawImage(sandiaRight, sandia_x_right, y[2], 60, 60);
        }
        if (flag[3]) {
          ctx.drawImage(basaha, x[3], y[3], 60, 60);
          getColl()
        } else {
          basaha_x_left += 0.5
          basaha_x_right -= 0.5
          ctx.drawImage(basahaLeft, basaha_x_left, y[3], 60, 60);
          ctx.drawImage(basahaRight, basaha_x_right, y[3], 60, 60);
        }


        random = Math.random() + 1
        y[0] = y[0] + speed[0] * random
        if (y[0] > fruitEnd) {
          y[0] = fruitStart
          flag[0] = true
          apple_x_left = x[0]
          apple_x_right = x[0]
        }
        random = Math.random() + 1
        y[1] = y[1] + speed[1] * random
        if (y[1] > fruitEnd) {
          y[1] = fruitStart
          flag[1] = true;
          banana_x_left = x[1];
          banana_x_right = x[1]
        }
        random = Math.random() + 1
        y[2] = y[2] + speed[2] * random
        if (y[2] > fruitEnd) {
          y[2] = fruitStart;
          flag[2] = true;
          sandia_x_left = x[2];
          sandia_x_right = x[2]
        }
        random = Math.random() + 1
        y[3] = y[3] + speed[3] * random
        if (y[3] > fruitEnd) {
          y[3] = fruitStart
          flag[3] = true;
          basaha_x_left = x[3]
          basaha_x_right = x[3]
        }
      }
      timer = requestAnimationFrame(draw);

      if (fruitFlag !== 1) {
        //取消循环
        window.cancelAnimationFrame(timer)
        ctx.clearRect(0, 0, 900, 900); //清空所有的内容
      }
      //    
    }
    //在合适的时机调用碰撞检测方法
    function getColl() {
      let first = [x[0] + 30, y[0] + 30]
      //第二列中心点坐标
      let second = [x[1] + 30, y[1] + 15]

      let third = [x[2] + 30, y[2] + 30]

      let four = [x[3] + 30, y[3] + 30]
      //碰撞检测方法
      collision(first, second, third, four)
    }
    //分数判断方法
    function countComputer() {
      if (diff == 1) {
        if (passFlag == 1) {
          count += 5
        }
      }
      if (diff == 2) {
        // resetTime()
        if (passFlag == 1) {
          count += 5
        }
      }
      if (diff == 3) {
        // resetTime()
        if (passFlag == 1) {
          count += 5
        }
      }
    }
    //水果的相交方法
    function collision(first, second, third, four) {

      //判断是否与第一个相交
      if (wormFlag[0]) {
        if ((Math.abs(targ[0] - (first[0])) <= (60 / 2 + 60 / 2)) && (Math.abs(targ[1] - (first[1])) <= (60 / 2 + 60 / 2))) {
          //两个面积相交了\
          soundHitOpen()
          wormFlag[0] = false
          countComputer()
        }
      }

      //第二条线相交
      if (wormFlag[1]) {
        if ((Math.abs(targ[0] - (second[0])) <= (60 / 2 + 60 / 2)) && (Math.abs(targ[1] - (second[1])) <= (60 / 2 + 60 / 2))) {
          //两个面积相交了
          soundHitOpen()
          wormFlag[1] = false
          countComputer()
        }
      }


      //第三条线相交
      if (wormFlag[2]) {
        if ((Math.abs(targ[0] - (third[0])) <= (60 / 2 + 60 / 2)) && (Math.abs(targ[1] - (third[1])) <= (60 / 2 + 60 / 2))) {
          //两个面积相交了
          soundHitOpen()
          wormFlag[2] = false
          countComputer()
        }
      }

      //第四条线相交
      //第三条线相交
      if (wormFlag[3]) {
        if ((Math.abs(targ[0] - (four[0])) <= (60 / 2 + 60 / 2)) && (Math.abs(targ[1] - (four[1])) <= (60 / 2 + 60 / 2))) {
          //两个面积相交了
          soundHitOpen()
          wormFlag[3] = false

          countComputer()
        }
      }

    }
    //虫子的相交方法
    function wormCollision(first, second, third, four) {

      //判断是否与第一个相交console

      if ((Math.abs(targ[0] - (first[0])) <= (60 / 2 + 60 / 2)) && (Math.abs(targ[1] - (first[1])) <= (60 / 2 + 60 / 2))) {
        //两个面积相交了

        wormFlag[0] = false
      }
      //第二条线相交
      if ((Math.abs(targ[0] - (second[0])) <= (60 / 2 + 60 / 2)) && (Math.abs(targ[1] - (second[1])) <= (60 / 2 + 60 / 2))) {
        //两个面积相交了

        wormFlag[1] = false
      }
      //第三条线相交
      if ((Math.abs(targ[0] - (third[0])) <= (60 / 2 + 60 / 2)) && (Math.abs(targ[1] - (third[1])) <= (60 / 2 + 60 / 2))) {
        //两个面积相交了

        wormFlag[2] = false
      }
      //第四条线相交
      //第三条线相交
      if ((Math.abs(targ[0] - (four[0])) <= (60 / 2 + 60 / 2)) && (Math.abs(targ[1] - (four[1])) <= (60 / 2 + 60 / 2))) {
        //两个面积相交了

        wormFlag[3] = false
      }
    }


    //倒计时方法
    function countdown() {
      startTimeFruit = new Date().getTime();
      let surplusTime = endTimeFruit - startTimeFruit;
      let th = Math.floor(surplusTime / (1000 * 60 * 60) % 24);
      let tm = Math.floor(surplusTime / (1000 * 60) % 60);
      let ts = Math.floor(surplusTime / 1000 % 60);
      if (ts < 10) {
        ts = '0' + ts
      }
      if (surplusTime >= 0) {
        if (!(passFlag == 2 || passFlag == 3)) {
          countdownFlag = true
        }
        return '0' + th + ':' + '0' + tm + ':' + ts
      } else {
        if (diff == 1) {
          if (count >= 90) {
            //执行保存结果
            levelFun(diff, count)
            totalScore += count;
            middleFont()
            speedWorm = [1.5, 2.0, 2.3, 2.4];
            //且进行将关卡设置为2
            diff = 2;
            count = 0
            //将时间重置为3分钟
            resetTime()
          } else {
            if (passFlag != 2) {
              levelFun(diff, count)
            }
            passFlag = 2
            //很遗憾失败了
          }
        } else if (diff == 2) {
          if (count >= 60) {
            middleFont()
            levelFun(diff, count)
            totalScore += count;
            speedWorm = [2.0, 2.5, 2.8, 3.1];
            diff = 3;
            count = 0
            //将时间重置为3分钟
            resetTime()
          } else {
            if (passFlag != 2) {
              levelFun(diff, count)
            }
            passFlag = 2
          }
        } else if (diff == 3) {
          if (count >= 45) {
            if (passFlag != 3) {
              totalScore += count;
              levelFun(diff, count)
              saveResult(totalScore)
            }
            passFlag = 3

          } else {
            if (passFlag != 2) {
              levelFun(diff, count)
            }
            passFlag = 2
          }
        }
        return '00' + ':' + '00' + ':' + '00'
      }
    }


    //捉虫子游戏变量
    $('#solar').hide();
    $('#exit').hide();
    $('#refresh').hide();


    let WASM_URL = "js/gazefilter.wasm";
    var buttonList = []
    $('#target').hide();
    $('#target1').hide();


    var record = {
      beforePoint: -1,
      currentPoint: 0,
    }

    //校准方法
    function calibrationAccuracy() {
      $('#solar').hide();
      handleFullScreen();
      getFun()
      $('#target1').show();
      $('#startCalibration').hide();
      switchTime()
      //初始化游戏
      $('#target1').hide()
      // $('#target').show()
      //clearInterval(time)
      //$('#solar').show();
      //$('#exit').show();
      //$('#refresh').show();

    }

    $("#startCalibration").click(function () {
      //  handleFullScreen();  //全屏
      handleFullScreen();
      getFun()
      $('#target1').show();
      $('#startCalibration').hide();
      //switchTime()
      //初始化游戏

      //
      $('#target1').hide()
      $('#target').show()
      clearInterval(time)
      $('#solar').show();
      //$('#exit').show();
      // $('#refresh').show();
      //init();
      //  $('.enterClass').css('display','none');
      //  $('.returnClass').css('display','block');
    });
    //切换游戏
    $('#exit').click(function () {
      //隐藏画布一
      // $('#exit').innerHtml()
      if (fruitFlag == 1) {
        setTimeout(() => {
          initWorm()
          fruitFlag = 2
        }, 30);
      } else {
        setTimeout(() => {
          // init()
          fruitFlag = 1
        }, 30);
      }
    })
    $('#refresh').click(function () {
      location.reload()
    })
    function handleFullScreen() {
      var de = document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.msRequestFullscreen) {
        de.msRequestFullscreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else {
        wtx.info("当前浏览器不支持全屏！");
      }
    }
    //重置通过状态
    function resetStatus() {
      //重置是否通过的状态
      passFlag = 1;
      //重置速度
      speedWorm = [1, 1.5, 1.3, 1.4];
    }
    //重置计时函数
    function resetTime() {
      startTimeFruit = new Date().getTime();
      endTimeFruit = startTimeFruit + 180000;
      countdownFlag = true
    }
    //重置难度重置关数
    function resetCount(val, value) {
      //设置难度为多少
      diff = val;
      //设置分数为多少
      count = value;
    }
    //轮询当前的图表
    var time = null;

    function switchTime() {
      let a = 0
      time = setInterval(() => {
        $('#target1').show()
        $('#targetMini').show()
        if (a == 16) {
          $('#target1').hide()
          $('#target').show()
          clearInterval(time)
          $('#solar').show();
          //$('#exit').show();
          // $('#refresh').show();
          trainingFlag = 4
          //重置计时函数
          resetTime()
          //重置分数和参数
          resetCount(1, 0)
          //都重置到初始状态
          resetStatus();

        } else {

          $('#targetMini1').css('transition', '0s');
          $('#targetMini1').css('width', 54 + 'px');
          $('#targetMini1').css('height', 54 + 'px');

          let x = buttonList[a].x1;
          x = Math.floor(x)
          let y = buttonList[a].y1;
          y = Math.floor(y)

          $('#target1').css('left', x + 'px');
          $('#target1').css('top', y + 'px');


          //  init();
          setTimeout(() => {
            $('#targetMini1').css('transition', '1s');
            $('#targetMini1').css('width', 20 + 'px');
            $('#targetMini1').css('height', 20 + 'px');
          }, 1000);
          setTimeout(() => {
            coordinates(x + 30, y + 30)

          }, 1500);
          setTimeout(() => {
            coordinates(x + 30, y + 30)

          }, 1840);
          setTimeout(() => {
            coordinates(x + 30, y + 30)

          }, 1940);
          a = a + 1
        }

      }, 2000)


    }
    function coordinates(x, y) {

      gazefilter.tracker.calibrate(    //校正,发送当前点击位置进行校正
        //event.timeStamp,
        window.performance.now(),
        //window.performance.now(),
        //mill,
        //1000,  // relative to performance.timeOrigin
        x,  // in pixels
        y,  // in pixels
        1.0  // see note below
      );
    }
    //获取各个按钮的left和top

    /**
     * 在屏幕上画出注视点
     * 是否画点，以及画点方式均可自定义
     **/
    function drawTargetOnScreen(position) {

      if (position != null && position.length == 2) {
        //判断是否是NAN如果是NAN则不执行
        //如果不是则需要判断当前点是否在第一个点中，如果在则执行settimeout函数1秒后改变改块状态
        //如果在第一个点中但第二次坐标出来的时候还在第一个坐标里那就没问题
        // $('#target').css('display', 'block');
        targ[0] = position[0] + 60;
        targ[1] = position[1] + 60;
        $('#target').css('left', position[0] + 'px');
        $('#target').css('top', position[1] + 'px');
        // $('#target').css('z-index', 100);
        //judge(position[0], position[1])
        // judge(position[0], position[1])

      }
    }
    //判断是否在第一个点中


    //获取全部的校验点
    function getFun() {
      for (let i = 0; i < 16; i++) {
        let a = document.getElementById('num' + (i + 1));

        buttonList.push({
          x1: a.getBoundingClientRect().left,
          y1: a.getBoundingClientRect().top
        })
      }
    }
    async function initGazefilter() {
      cameraFlag = false
      await gazefilter.init(WASM_URL);  //初始化
      await gazefilter.tracker.connect();  //连接摄像头
      let canvas = document.getElementById("tracker-canvas");
      await gazefilter.visualizer.setCanvas(canvas);  //绘制图像
      cameraFlag = true
      await gazefilter.tracker.addListener("calib", response => {

        //console.log(response.errorCode, event.errorValue);  //校验结果 errorCode 0: calibration is successfull;1: screen dimentions should be set;2: calibration sample cannot be created;3: not enough data to fit calibration model.
      });
    }

    function startTrace() {
      gazefilter.tracker.addListener("filter", event => { //注视点  
        drawTargetOnScreen(event.bestGazePoint());  //Best gaze point of left or right eye.  其他取点可参考https://beehiveor.gitlab.io/gazefilter/data.html，有不同类型的点 fixationPoint
      });
    }
    function hideSence() {
      //隐藏目标物
      $('#target').hide()
      $('#target1').hide()
      $('#targetMini').hide()
      //隐藏摄像头
      $('#solar').show()

    }
    $("#finishcalibration").click(function () {
      window.removeEventListener("click", onmouseclick);    //九点校正完成，取消鼠标事件，并开始绘制轨迹点
      $("#finishcalibration").hide();
    })
    $(document).ready(function () {
      //将canvas自适应屏幕
      resizeCanvas()
      //init()
      initWorm()
      hideSence()
      //将该隐藏的隐藏然后初始化游戏场景
      //初始华摄像头
      initGazefilter();
      startTrace();

    });

  </script>
</body>

</html>