appv5.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685
  1. var Layers, btnImg, btnTapImg, goBtn, goBtnTap, header, kidney, subtitle, title;
  2. Layers = Framer.Importer.load("imported/suprise-framer");
  3. Layers.State_2.visible = false;
  4. Layers.State_3.visible = false;
  5. Layers.State_4.visible = false;
  6. goBtn = Layers.Go_Btn;
  7. goBtnTap = Layers.Go_Btn_Tapped;
  8. header = Layers.Header;
  9. subtitle = Layers.Subtitle;
  10. title = Layers.Title;
  11. kidney = Layers.Kidney;
  12. goBtnTap.visible = false;
  13. btnImg = goBtn.style.backgroundImage;
  14. btnTapImg = goBtnTap.style.backgroundImage;
  15. header.visible = false;
  16. title.scale = .8;
  17. var iID;
  18. var iID2;
  19. var correctImg;
  20. var normalImg;
  21. var wrongImg;
  22. var dataIndex = 0;
  23. var resultStatus = -1;
  24. var correctCount = 0;
  25. var errorCount = 0;
  26. var totalCount = 0;
  27. var totalTime = 0;
  28. var exercises = [];
  29. var cantocach = true;
  30. var currentIndex = 0;
  31. //超时后触发
  32. function timeoutFun() {
  33. if (resultStatus != -1)
  34. return;
  35. var stopWatch, stopWatchY, mask, over, thunder;
  36. timeup = Layers.Time_Up;
  37. over = Layers.Game_Over;
  38. thunder = Layers.Thunder;
  39. mask = Layers.Mask;
  40. timeupTitle = Layers.Time_Up_Title;
  41. stopWatch = Layers.Icon_Stopwatch_2;
  42. newHighScore = Layers.New_High_Score;
  43. stopWatchY = stopWatch.y;
  44. timeupy = timeupTitle.y;
  45. Layers.State_3.visible = false;
  46. Layers.State_4.visible = true;
  47. var shareBtn = Layers.Share_Btn;
  48. var aginBtn_mask = Layers.Again_Btn_On_Mask;
  49. var againBtn = Layers.Again_Btn;
  50. var shareBtnTap = Layers.Share_Btn_Tapped;
  51. var mask = Layers.Mask;
  52. var fun = Layers.Fun;
  53. fun.html = getEndGameTips();
  54. fun.style = {
  55. textAlign : 'center',
  56. color : '#312118',
  57. fontSize : 22,
  58. lineHeight : 1.2
  59. };
  60. var shareBtnImg = shareBtn.style.backgroundImage;
  61. var shareBtnTapImg = shareBtnTap.style.backgroundImage;
  62. shareBtn.on(Events.TouchStart, function() {
  63. return this.style.backgroundImage = shareBtnTapImg;
  64. });
  65. aginBtn_mask.on(Events.TouchEnd, function() {
  66. realyStart();
  67. });
  68. againBtn.on(Events.TouchEnd, function() {
  69. realyStart();
  70. });
  71. shareBtn.on(Events.TouchEnd, function() {
  72. this.style.backgroundImage = shareBtnImg;
  73. mask.visible = true;
  74. mask.animate({
  75. properties : {
  76. opacity : 1
  77. },
  78. time : 0.1
  79. });
  80. fun.style.color = '#4A4A4A';
  81. //realyStart();
  82. });
  83. //超时动画
  84. timeupTitle.y = -200;
  85. stopWatch.y = -200;
  86. timeup.visible = true;
  87. mask.visible = false;
  88. over.visible = false;
  89. thunder.visible = false;
  90. timeupTitle.animate({
  91. properties : {
  92. y : timeupy
  93. },
  94. time : 0.1
  95. });
  96. stopWatch.animate({
  97. properties : {
  98. y : stopWatchY,
  99. rotationZ : 720
  100. },
  101. time : 1
  102. });
  103. setScores();//统计
  104. //againBtn.visible=false;
  105. //aginBtn_mask.visible=false;
  106. resetBottomComps();
  107. }
  108. function setScores(){
  109. Layers.Mask.style={
  110. backgroundColor:"#000",
  111. backgroundImage:""
  112. };
  113. var score1,score2,score3,newHighScore;
  114. score1 = Layers.Score_1;
  115. score2 = Layers.Score_2;
  116. score3 = Layers.Score_3;
  117. scores = [score1, score2, score3];
  118. newHighScore = Layers.New_High_Score_Title;
  119. score1.html = correctCount + '题';
  120. var perTime = 0;
  121. errorCount++;
  122. perTime = parseInt(totalTime/(correctCount+errorCount) / 100) /10;
  123. score2.html = perTime+'秒';
  124. score3.html = getWinPercent(correctCount)+'%的人';
  125. newHighScore.style = {
  126. fontSize : 34,
  127. color : '#ED6917',
  128. };
  129. newHighScore.html = getMartalName(correctCount);
  130. newHighScore.rotationZ = -28;
  131. for ( i = _l = 0, _len3 = scores.length; _l < _len3; i = ++_l) {
  132. score = scores[i];
  133. score.style = {
  134. textAlign : 'center',
  135. color : '#0DACAC',
  136. fontSize : 48,
  137. fontWeight : 'bold',
  138. padding : '55px 0 0'
  139. };
  140. }
  141. resetShareContent();
  142. }
  143. header.on(Events.Click, function() {
  144. return this.style.display = 'none';
  145. });
  146. subtitle.animate({
  147. properties : {
  148. scale : 1
  149. },
  150. curve : 'spring',
  151. curveOptions : {
  152. friction : 20
  153. }
  154. });
  155. $(function(e) {
  156. var getDatas = function() {
  157. $.ajax({
  158. url : "getExercises.json",
  159. type : 'GET',
  160. cache : false,
  161. dataType : 'json',
  162. success : function(rsp) {
  163. if (rsp.result == true) {
  164. exercises = rsp.data;
  165. totalCount = exercises.length;
  166. goBtn.on(Events.TouchStart, function() {
  167. return goBtn.style.backgroundImage = btnTapImg;
  168. });
  169. } else {
  170. }
  171. },
  172. error : function(XMLHttpRequest, textStatus, errorThrown) {
  173. }
  174. });
  175. };
  176. getDatas();
  177. });
  178. function resetBottomComps(){
  179. var upheight = "-50px";
  180. $("div[name='Share_Btn']").css("margin-top",upheight);
  181. //$("div[name='Share_Btn']").css("margin-left","-120px");
  182. $("div[name='Share_Btn_Tapped']").css("margin-top",upheight);
  183. //$("div[name='Share_Btn_Tapped']").css("margin-left","-120px");
  184. $("div[name='Again_Btn']").css("margin-top",upheight);
  185. $("div[name='Fun']").css("margin-top",upheight);
  186. $("div[name='Again_Btn_On_Mask']").css("margin-top",upheight);
  187. $("div[name='Progressbar']").css("margin-top",upheight);
  188. $("div[name='Icon_Stopwatch']").css("margin-top",upheight);
  189. }
  190. goBtn.on(Events.TouchEnd, function() {
  191. var hingeAnimation, startAnimation;
  192. subtitle.originX = 0;
  193. subtitle.originY = 0;
  194. goBtn.style.backgroundImage = btnImg;
  195. title.animate({
  196. properties : {
  197. y : -80
  198. },
  199. time : 0.4
  200. });
  201. kidney.animate({
  202. properties : {
  203. opacity : 0
  204. },
  205. time : 0.3
  206. });
  207. goBtn.animate({
  208. properties : {
  209. y : 2000
  210. },
  211. time : 0.6
  212. });
  213. hingeAnimation = subtitle.animate({
  214. properties : {
  215. rotationZ : 45
  216. },
  217. curve : 'spring',
  218. curveOptions : {
  219. tension : 900,
  220. friction : 25,
  221. velocity : 30
  222. }
  223. });
  224. hingeAnimation.on('end', function() {
  225. var gl1, gl2, gl3, lights, one, start, three, two;
  226. subtitle.animate({
  227. properties : {
  228. y : 2000
  229. },
  230. curve : 'cubic-bezier',
  231. time : 0.6
  232. });
  233. lights = Layers.Lights;
  234. one = Layers.One;
  235. two = Layers.Two;
  236. three = Layers.Three;
  237. start = Layers.Start;
  238. gl1 = Layers.Green_Light;
  239. gl2 = Layers.Green_Light_2;
  240. gl3 = Layers.Green_Light_3;
  241. Layers.State_2.visible = true;
  242. one.visible = false;
  243. two.visible = false;
  244. start.visible = false;
  245. gl2.visible = false;
  246. gl3.visible = false;
  247. start.scale = 0;
  248. setTimeout((function() {
  249. three.visible = false;
  250. two.visible = true;
  251. return gl2.visible = true;
  252. }), 1000);
  253. setTimeout((function() {
  254. gl3.visible = true;
  255. two.visible = false;
  256. return one.visible = true;
  257. }), 2000);
  258. return setTimeout((function() {
  259. one.visible = false;
  260. realyStart();
  261. }), 3000);
  262. });
  263. function realyStart() {
  264. // 重新设置页面背景
  265. $("body").css("background-color","#6C4B3A");
  266. // 开始了就把灯去掉
  267. /*for(var i = 0; i < Layers.Lights.length;i++){
  268. var light = Layers.Lights[i];
  269. light.visible = false;
  270. }
  271. Layers.Green_Light.visible = false;
  272. Layers.Green_Light_2.visible = false;
  273. Layers.Green_Light_3.visible = false;*/
  274. $("div[name='Lights']").hide();
  275. cantocach = true;
  276. errorCount = 0;
  277. totalCount = 0;
  278. resultStatus = -1;
  279. correctCount = 0;
  280. totalTime = 0;
  281. currentIndex = 0;
  282. var bar, correct, correctAnimation, correctOpt, delay, hand, i, num, op2ox, op3ox, op4ox, opox, opt, opt2, opt3, opt4, option, optoins, progress, qox, question, quizOptions, timeLtd, wrong, wrongOpts, xvar, _i, _j, _len, _len1;
  283. var shareBtn = Layers.Share_Btn;
  284. var aginBtn_mask = Layers.Again_Btn_On_Mask;
  285. var againBtn = Layers.Again_Btn;
  286. shareBtn.removeAllListeners(Events.TouchEnd);
  287. againBtn.removeAllListeners(Events.TouchEnd);
  288. aginBtn_mask.removeAllListeners(Events.TouchEnd);
  289. Layers.State_2.visible = true;
  290. Layers.State_1.visible = false;
  291. Layers.State_4.visible = false;
  292. Layers.State_3.visible = true;
  293. timeLtd = 60;
  294. progress = Layers.Progress;
  295. bar = Layers.ProgressNum;
  296. hand = Layers.Hand_Rotate;
  297. bar.html = timeLtd+'s';
  298. resetBottomComps();
  299. //开始计时
  300. var theTime = timeLtd * 1000;
  301. clearInterval(iID);
  302. iID = setInterval(setTime, 1000);
  303. function setTime() {
  304. theTime = theTime - 1000;
  305. bar.html = (theTime / 1000) + 's';
  306. if (theTime <= 0) {
  307. timeoutFun();
  308. clearInterval(iID);
  309. }
  310. }
  311. bar.style = {
  312. fontSize : 36,
  313. fontWeight : 'bold',
  314. color : '#fff',
  315. textAlign : 'right',
  316. lineHeight : '48px',
  317. padding : '0 20px 0 0'
  318. };
  319. progress.style.backgroundPosition = 'right';
  320. progress.width = 511;
  321. progress.animate({
  322. properties : {
  323. width : 0
  324. },
  325. time : timeLtd
  326. });
  327. hand.animate({
  328. properties : {
  329. rotationZ : 360
  330. },
  331. time : timeLtd
  332. });
  333. question = Layers.Question;
  334. num = Layers.Question_Number;
  335. opt = Layers.Option;
  336. opt2 = Layers.Option_2;
  337. opt3 = Layers.Option_3;
  338. opt4 = Layers.Option_4;
  339. correct = Layers.Correct_Bubble;
  340. wrong = Layers.Wrong_Bubble;
  341. correct.visible = false;
  342. wrong.visible = false;
  343. if(!correctImg)
  344. correctImg = correct.style.backgroundImage;
  345. if(!normalImg)
  346. normalImg = opt.style.backgroundImage;
  347. if(!wrongImg)
  348. wrongImg = wrong.style.backgroundImage;
  349. qox = question.x;
  350. opox = opt.x;
  351. op2ox = opt2.x;
  352. op3ox = opt3.x;
  353. op4ox = opt4.x;
  354. question.x = 2000;
  355. opt.x = 2000;
  356. opt2.x = 2000;
  357. opt3.x = 2000;
  358. opt4.x = 2000;
  359. num.style = {
  360. textAlign : 'center',
  361. lineHeight : '67px',
  362. fontSize : 36,
  363. fontWeight : 'bold',
  364. color : '#855A43'
  365. };
  366. var initQuestions = function(){
  367. var exercise = exercises[dataIndex];
  368. currentIndex++;
  369. dataIndex++;
  370. if(dataIndex>exercises.length) dataIndex = 0;
  371. num.html = currentIndex;
  372. question.html = exercise.content;
  373. var opts = {};
  374. opt.html = exercise.options[0];
  375. opt2.html = exercise.options[1];
  376. opt3.html = exercise.options[2];
  377. opt4.html = exercise.options[3];
  378. opts["opt0"] = opt;
  379. opts["opt1"] = opt2;
  380. opts["opt2"] = opt3;
  381. opts["opt3"] = opt4;
  382. wrongOpts = [];
  383. quizOptions = [];
  384. for (var i = 0; i < exercise.options.length; i++) {
  385. var indexStr = "opt" + i;
  386. if (opts[indexStr].html == exercise.answer) {
  387. correctOpt = opts[indexStr];
  388. } else {
  389. wrongOpts.push(opts[indexStr]);
  390. }
  391. quizOptions.push(opts[indexStr]);
  392. }
  393. for ( i = _i = 0, _len = quizOptions.length; _i < _len; i = ++_i) {
  394. option = quizOptions[i];
  395. option.style = {
  396. fontSize : 30,
  397. color : '#604333',
  398. padding : '42px 0 0 36px',
  399. backgroundImage: normalImg
  400. };
  401. option.scale = 1;
  402. option.removeAllListeners(Events.TouchEnd);
  403. }
  404. //答对触发
  405. correctAnimation = correctOpt.on(Events.TouchEnd, function() {
  406. if(!cantocach)return;
  407. if(currentIndex>=exercises.length)
  408. {
  409. realyStart();
  410. return;
  411. }
  412. resultStatus = -1;
  413. this.style = {
  414. backgroundImage: correctImg,
  415. color: '#000'
  416. };
  417. cantocach = false;
  418. setTimeout(function(){
  419. cantocach = true;
  420. initQuestions();
  421. },500);
  422. correctCount++;
  423. });
  424. initWrongOpts();
  425. }
  426. clearInterval(iID2);
  427. iID2 = setInterval(countTime, 1000);
  428. function countTime() {
  429. totalTime+=1000;
  430. }
  431. question.style = {
  432. color : '#FFF5D4',
  433. fontSize : 28,
  434. lineHeight : '43px',
  435. padding : '22px 20px 22px 56px'
  436. };
  437. question.animate({
  438. properties : {
  439. x : qox
  440. },
  441. curve : 'cubic-bezier',
  442. curveOptions : {
  443. friction : 20
  444. }
  445. });
  446. initQuestions();
  447. delay = 0.05;
  448. for ( i = _j = 0, _len1 = quizOptions.length; _j < _len1; i = ++_j) {
  449. option = quizOptions[i];
  450. xvar = [opox, op2ox, op3ox, op4ox];
  451. option.animate({
  452. properties : {
  453. x : xvar[i]
  454. },
  455. curveOptions : {
  456. friction : 20
  457. },
  458. delay : delay * (i + 1)
  459. });
  460. option.on(Events.TouchStart, function() {
  461. return this.animate({
  462. properties : {
  463. scale : 0.9
  464. },
  465. curveOptions : {
  466. friction : 20,
  467. tension : 800
  468. },
  469. time : 0.1
  470. });
  471. });
  472. option.on(Events.TouchEnd, function() {
  473. return this.animate({
  474. properties : {
  475. scale : 1
  476. },
  477. curveOptions : {
  478. friction : 20,
  479. tensino : 800
  480. },
  481. time : 0.1,
  482. delay : 0.1
  483. });
  484. });
  485. }
  486. //答错触发
  487. function initWrongOpts() {
  488. var _k, _len2, _results;
  489. _results = [];
  490. for ( i = _k = 0, _len2 = wrongOpts.length; _k < _len2; i = ++_k) {
  491. option = wrongOpts[i];
  492. _results.push(option.on(Events.TouchEnd, function() {
  493. if(!cantocach)return;
  494. var abox, againBtn, dots, fun, highScore, mask, ooy, over, sbox, score, score1, score2, score3, scores, shareBtn, shareBtnImg, shareBtnTap, shareBtnTapImg, thunder, timeup, timeupTitle, toy, _l, _len3, timeupy;
  495. var stopWatch, stopWatchY;
  496. var aginBtn_mask,newHighScore;
  497. this.style = {
  498. backgroundImage : wrongImg,
  499. color : '#fff'
  500. };
  501. newHighScore = Layers.New_High_Score;
  502. mask = Layers.Mask;
  503. score = Layers.Scores;
  504. shareBtn = Layers.Share_Btn;
  505. aginBtn_mask = Layers.Again_Btn_On_Mask;
  506. shareBtnTap = Layers.Share_Btn_Tapped;
  507. againBtn = Layers.Again_Btn;
  508. over = Layers.Game_Over;
  509. timeup = Layers.Time_Up;
  510. timeupTitle = Layers.Time_Up_Title;
  511. stopWatch = Layers.Icon_Stopwatch_2;
  512. thunder = Layers.Thunder;
  513. dots = Layers.Bg_Dots;
  514. fun = Layers.Fun;
  515. shareBtnImg = shareBtn.style.backgroundImage;
  516. shareBtnTapImg = shareBtnTap.style.backgroundImage;
  517. sbox = shareBtn.x;
  518. abox = againBtn.x;
  519. ooy = over.y;
  520. stopWatchY = stopWatch.y;
  521. timeupy = timeupTitle.y;
  522. toy = thunder.y;
  523. mask.opacity = 0;
  524. //score.scale = 0;
  525. timeupTitle.y = -200;
  526. stopWatch.y = -200;
  527. over.y = -200;
  528. thunder.y = -200;
  529. shareBtn.x = -800;
  530. againBtn.x = 800;
  531. dots.scale = 0.3;
  532. mask.visible = false;
  533. resultStatus = 0;
  534. setScores();
  535. errorCount++;//答错+1
  536. if (resultStatus == 0) {
  537. timeup.visible = false;
  538. over.visible = true;
  539. }
  540. shareBtnTap.visible = false;
  541. cantocach = false;
  542. setTimeout((function() {
  543. cantocach = true;
  544. Layers.State_3.visible = false;
  545. Layers.State_4.visible = true;
  546. //答错 界面变化
  547. if (resultStatus == 0) {
  548. over.animate({
  549. properties : {
  550. y : ooy
  551. },
  552. time : 0.1
  553. });
  554. thunder.animate({
  555. properties : {
  556. y : toy,
  557. rotationZ : 720
  558. },
  559. time : 1
  560. });
  561. }
  562. /*score.animate({
  563. properties : {
  564. scale : 1
  565. },
  566. time : 0.2
  567. });*/
  568. dots.animate({
  569. properties : {
  570. scale : 1
  571. },
  572. delay : 0.15,
  573. time : 0.2
  574. });
  575. shareBtn.animate({
  576. properties : {
  577. x : sbox
  578. },
  579. delay : 0.3,
  580. time : 0.4
  581. });
  582. againBtn.animate({
  583. properties : {
  584. x : abox
  585. },
  586. delay : 0.3,
  587. time : 0.4
  588. });
  589. newHighScore.animate({
  590. properties : {
  591. scale : 1
  592. },
  593. delay : 0.8,
  594. time : 0.2
  595. });
  596. }), 500);
  597. fun.html = getEndGameTips();
  598. fun.style = {
  599. textAlign : 'center',
  600. color : '#312118',
  601. fontSize : 22,
  602. lineHeight : 1.2
  603. };
  604. shareBtn.on(Events.TouchStart, function() {
  605. clickMore();
  606. });
  607. aginBtn_mask.on(Events.TouchEnd, function() {
  608. realyStart();
  609. });
  610. againBtn.on(Events.TouchEnd, function() {
  611. realyStart();
  612. });
  613. //againBtn.visible=false;
  614. //aginBtn_mask.visible=false;
  615. resetBottomComps();
  616. return shareBtn.on(Events.TouchEnd, function() {
  617. this.style.backgroundImage = shareBtnImg;
  618. mask.visible = true;
  619. mask.animate({
  620. properties : {
  621. opacity : 1
  622. },
  623. time : 0.1
  624. });
  625. $("body").css("background-color","#000");
  626. return fun.style.color = '#4A4A4A';
  627. //realyStart();
  628. });
  629. }));
  630. }
  631. return _results;
  632. };
  633. return optoins = initWrongOpts();
  634. };
  635. window.realyStart=realyStart;
  636. });