ptwUI.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. function PtwUI () {
  2. }
  3. PtwUI.stage;
  4. PtwUI.menuUI;
  5. PtwUI.inGameUI;
  6. PtwUI.loadingUI;
  7. PtwUI.helpUI;
  8. PtwUI.questionUIs;
  9. PtwUI.currentQuestionUI;
  10. PtwUI.currentLevel;
  11. PtwUI.answer;
  12. PtwUI.animationList;
  13. PtwUI.timeout;
  14. PtwUI.controller;
  15. PtwUI.touchStart;
  16. PtwUI.touchEnd;
  17. PtwUI.prototype.init = function() {
  18. this.stage = $('body');
  19. this.menuUI = this.stage.find('#page-start');
  20. this.loadingUI = this.stage.find('#page-preload');
  21. this.inGameUI = this.stage.find('#page-play');
  22. this.questionUIs = this.inGameUI.find('.question');
  23. this.successUI = this.inGameUI.find('#play-success');
  24. this.morePannel = this.stage.find('#pannel-overlay');
  25. this.finishUI = this.stage.find("#page-finish");
  26. this.answer = '';
  27. this.animationList = [];
  28. var that = this;
  29. $('body').on('selectstart,drag',function(e){
  30. e.preventDefault();
  31. });
  32. $('body').on('touchmove', function(e) {
  33. //e.preventDefault();
  34. });
  35. if ( is_touch_device() ) {
  36. if ( is_ie_mobile() ) {
  37. this.touchStart = 'MSPointerDown';
  38. this.touchEnd = 'MSPointerUp';
  39. } else {
  40. this.touchStart = 'touchstart';
  41. this.touchEnd = 'touchend';
  42. }
  43. } else {
  44. this.touchStart = 'click';
  45. this.touchEnd = 'click';
  46. }
  47. detectWeixinApi(function(){
  48. $('.weixin').show();
  49. });
  50. this.stage.find('.btn-openHelpPannel').on(this.touchEnd, function(){
  51. // that.morePannel.show();
  52. // that.morePannel.find('.pannel').animate({left:'20%'});
  53. //alert(qikeContentPreSet.endShareContentPreFix + controller.currentQuestionLevel + qikeContentPreSet.endShareContentSuffix)
  54. var str = qikeContentPreSet.endShareContentPreFix + controller.currentQuestionLevel + qikeContentPreSet.endShareContentSuffix;
  55. try{parent.__4399finishgame(str);}catch(e){}
  56. });
  57. this.morePannel.on(this.touchStart, function() {
  58. that.morePannel.find('.pannel').animate({left:'100%'},'fast','swing',function(){
  59. that.morePannel.hide();
  60. });
  61. });
  62. this.morePannel.find('.pannel').on(this.touchStart, function(e) {
  63. stopBubble(e);
  64. });
  65. this.stage.find('.btnCopyUrl').on('click', function(e) {
  66. if (!!qike) {
  67. qikeContentPreSet.shareContent.title = qikeContentPreSet.endShareContentTitle;
  68. // gameLevel指代游戏里面存储玩的关卡或者杀敌数等成绩的一个数值变量
  69. qikeContentPreSet.shareContent.desc = qikeContentPreSet.endShareContentPreFix + controller.currentQuestionLevel + qikeContentPreSet.endShareContentSuffix;
  70. // 发布分享触发的消息
  71. qike.util.subscribeModel.fire('share-popup-action-show');
  72. }else{
  73. copyToClipboard('http://play68.com');
  74. }
  75. });
  76. this.successUI.find('#play-success-next').on(this.touchEnd, function(){
  77. if ( that.controller.needPreload == true ) {
  78. SM.SetStateByName("preload");
  79. } else {
  80. that.showCurrentQuestion();
  81. }
  82. });
  83. }
  84. PtwUI.prototype.switchPageTo = function( $targetPage ) {
  85. var $currentPage = $('.current-page');
  86. //hide all other pages and clear class
  87. $('.page').not('current-page').attr('class','page none');
  88. $currentPage.attr('class','page').addClass('animated bounceOutLeft');
  89. setTimeout(function(){
  90. $currentPage.attr('class','page none');
  91. }, 1000);
  92. $targetPage.attr('class','page none current-page').addClass('animated bounceInRight').removeClass('none');
  93. setTimeout(function(){
  94. $targetPage.attr('class','page current-page');
  95. }, 1000);
  96. }
  97. PtwUI.prototype.showMenuUI = function () {
  98. if (window.location.href.indexOf("openid") > -1 && window.location.href.indexOf("openkey") > -1) {
  99. this.menuUI.find(".btn-hide").removeClass("btn-hide");
  100. this.inGameUI.find(".btn-hide").removeClass("btn-hide");
  101. this.finishUI.find(".btn-hide").removeClass("btn-hide");
  102. this.inGameUI.find("#play-success-share").css("display","none");
  103. }
  104. this.menuUI.find('.loading').removeClass('loading');
  105. $('#start-level').html(this.controller.currentQuestionLevel);
  106. this.addAnimation('#start-btnPlay', 'bounceInUp', 500, null);
  107. this.addAnimation('#start-level', 'bounceIn', 500, null);
  108. this.playAnimationsFrom(0);
  109. }
  110. PtwUI.prototype.showInGameUI= function(){
  111. this.switchPageTo(this.inGameUI);
  112. }
  113. PtwUI.prototype.showFinishUI = function() {
  114. this.switchPageTo(this.finishUI);
  115. }
  116. PtwUI.prototype.onFailed = function () {
  117. this.currentQuestionUI.find('.answer-key').addClass('error animated shake');
  118. }
  119. PtwUI.prototype.setQuestionLevelText = function() {
  120. this.inGameUI.find('#play-level').html(this.controller.currentQuestionLevel);
  121. }
  122. PtwUI.prototype.updateAnswerText = function() {
  123. var answerText = '';
  124. this.currentQuestionUI.find('.answer-key').filter(function () {
  125. return $(this).attr("data-key") != "";
  126. }).each(function (index, elem) {
  127. answerText += elem.getAttribute("data-key");
  128. });
  129. this.answer = answerText;
  130. }
  131. PtwUI.prototype.showSuccessUI= function(){
  132. myFlag=0;
  133. this.successUI.find('#play-success-level').html(this.controller.currentQuestionLevel - 1);
  134. this.successUI.find('#play-success-answer').html(this.answer);
  135. this.successUI.show();
  136. window.level=this.controller.currentQuestionLevel - 1;
  137. if(window.level==40){
  138. setTimeout(function(){
  139. $('#page-play').css('display','none');
  140. $('#page-finish').css('display','block');
  141. },2000);
  142. //updateShare(window.level);
  143. //Play68.setRankingScoreDesc(window.level);
  144. }else{
  145. //updateShare(window.level);
  146. //Play68.setRankingScoreDesc(window.level,Play68.rankingShowType.RANKING_SHOW_NO);
  147. }
  148. this.addAnimation('#play-success-title', 'bounceIn', 500, null);
  149. this.addAnimation('#play-success-level', 'bounceIn', 500, null);
  150. this.addAnimation('#play-success-answer', 'bounceIn', 500, null);
  151. this.addAnimation('#play-success-action', 'bounceIn', 500, null);
  152. this.playAnimationsFrom(0);
  153. }
  154. PtwUI.prototype.hideSuccessUI = function() {
  155. this.successUI.hide();
  156. this.successUI.find('#play-success-title,#play-success-level,#play-success-answer,#play-success-action').css('visibility','hidden').attr('class','');
  157. }
  158. PtwUI.prototype.showCurrentQuestion = function () {
  159. myFlag=1;
  160. this.answer = '';
  161. var currentId = this.controller.currentQuestionId;
  162. for(var i=0;i<this.controller.questions.length;i++)
  163. if(this.controller.questions[i].ID==this.controller.currentQuestionId)
  164. {
  165. myAnswer=this.controller.questions[i].answer;
  166. }
  167. this.hideSuccessUI();
  168. $('.question').attr('class','question').hide();
  169. this.setQuestionLevelText();
  170. if ( this.currentQuestionUI ) {
  171. this.currentQuestionUI = $('#question-' + currentId).addClass('animated bounceInRight').show();
  172. } else {
  173. this.currentQuestionUI = $('#question-' + currentId).show();
  174. }
  175. this.setAnswerBoxPosition(this.currentQuestionUI);
  176. }
  177. PtwUI.prototype.setAnswerBoxPosition = function(currentQuestion) {
  178. var width = 0, answerBox = currentQuestion.find('.question-answer');
  179. answerBox.find('li').each(function(){
  180. width += parseInt($(this).outerWidth());
  181. });
  182. answerBox.css('width',(width+30) + 'px')
  183. .css('margin-left', '-' + (width/2) + 'px');
  184. }
  185. PtwUI.prototype.showLoadingUI= function(){
  186. this.hideSuccessUI();
  187. this.switchPageTo(this.loadingUI);
  188. $(".ui-progress").css("width", "0%").css("display", "block").find(".ui-label").css("display", "block");
  189. }
  190. PtwUI.prototype.showLoadingUIProgress = function (event) {
  191. $(".ui-progress").css("width", event.loaded * 100 + "%").find(".value").html(parseInt(event.loaded * 100) + "%");
  192. }
  193. PtwUI.prototype.showHelpUI= function(){
  194. }
  195. PtwUI.prototype.appendCharactor= function(answer_spot, question_spot){
  196. answer_spot.attr("data-key", question_spot.attr("data-key")).html(question_spot.attr("data-key"));
  197. question_spot.css('visibility','hidden');
  198. answer_spot.attr('data-index', question_spot.attr('data-index'));
  199. this.updateAnswerText();
  200. }
  201. PtwUI.prototype.removeCharactor = function (remove_spot) {
  202. remove_spot.attr("data-key", '').html('');
  203. $('.question-key[data-index="'+remove_spot.attr("data-index") +'"]').css('visibility','visible');
  204. this.updateAnswerText();
  205. }
  206. PtwUI.prototype.addQuestion = function (question) {
  207. question.update();
  208. $("#questions").append(question.questionUI);
  209. }
  210. PtwUI.prototype.addAnimation = function(id, animationType, duration, callback) {
  211. this.animationList.push({'id':id, 'animationType':animationType, 'duration':duration, 'callback':callback });
  212. }
  213. PtwUI.prototype.playAnimationsFrom = function(startIndex) {
  214. var animation, target, that, length = this.animationList.length;
  215. if ( length > 0 ) {
  216. animation = this.animationList[startIndex];
  217. target = $(animation.id);
  218. if (target.css('visibility') == 'hidden') {
  219. target.css('visibility', 'visible');
  220. }
  221. target.addClass('animated ' + animation.animationType);
  222. clearTimeout(this.timeout);
  223. startIndex++;
  224. that = this;
  225. if ( startIndex < length ) {
  226. that.timeout = setTimeout(function(){
  227. that.playAnimationsFrom(startIndex);
  228. if (animation.callback) {
  229. animation.callback.apply(this);
  230. }
  231. }, animation.duration);
  232. } else {
  233. this.animationList = [];
  234. }
  235. }
  236. }
  237. var ptwUI = new PtwUI();