common.js 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. common={
  2. data:{
  3. baseurl:"http://183.234.61.252:8090/",
  4. getUserInfo:"Home/User/Info",
  5. WebSocket:"ws://183.234.61.252:8282",
  6. bdSocket:"Home/User/Bind",
  7. Join:"Home/User/Join",
  8. Answer:"Home/Game/Answer",
  9. Join:"Home/Game/Join",
  10. uid:"",
  11. },userInfo:{
  12. },GET: function (name) {
  13. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  14. var r = window.location.search.substr(1).match(reg);
  15. if (r != null) return unescape(r[2]);
  16. return null;
  17. },getUserInfo:function(fn){
  18. var _this=this;
  19. $.ajax({
  20. type: "GET",
  21. url: this.data.baseurl+this.data.getUserInfo,
  22. data: {user_id:this.data.uid , mt:this.data.mt },
  23. dataType: "json",
  24. success: function(data){
  25. fn&&fn(data);
  26. }
  27. });
  28. },bdSocket:function(fn){
  29. var _this=this;
  30. $.ajax({
  31. type: "POST",
  32. url: this.data.baseurl+this.data.bdSocket,
  33. data: {client_id:this.data.client_id },
  34. dataType: "json",
  35. success: function(data){
  36. fn&&fn(data);
  37. }
  38. });
  39. },Join:function(fn){
  40. var _this=this;
  41. $.ajax({
  42. type: "GET",
  43. url: this.data.baseurl+this.data.Join,
  44. dataType: "json",
  45. success: function(data){
  46. fn&&fn(data);
  47. }
  48. });
  49. },Answer:function(fn){
  50. var _this=this;
  51. $.ajax({
  52. type: "POST",
  53. url: this.data.baseurl+this.data.Answer,
  54. data:{question_id:_this.data.question_id,option_id:_this.data.option_id},
  55. dataType: "json",
  56. success: function(data){
  57. fn&&fn(data);
  58. }
  59. });
  60. },player_join:function(data){
  61. var _this=this;
  62. // if(responsedata.info.user){
  63. // $("#username").html(responsedata.info.user.name);
  64. // $("#avatar").html('<img src="' + responsedata.info.user.avatar + '" class="layui-circle">');
  65. // }
  66. // if(data.info.user.user_id){
  67. // $("#py1_avatar").html('<img src="' + data.info.user.avatar+ '" class="layui-circle">');
  68. // $("#py1_username").html(data.info.user.name + '(我)');
  69. // }
  70. this.tips(data.info.user.name+"加入了房间")
  71. if(data.info.user.user_id!=this.userInfo.user_id){
  72. $("#py2_avatar").html('<img src="' + data.info.user.avatar+ '" class="layui-circle">');
  73. $("#py2_username").html(data.info.user.name);
  74. _this.userInfo.playerId=data.info.user.user_id;
  75. }
  76. },round_end:function(data){
  77. var _this=this;
  78. // if(data.info.anwser==_this.data.option_id){
  79. // $(".cur_answer").addClass("cur_true");
  80. // }
  81. for (var i = 0; i < data.info.players_answer.length; i++) {
  82. if(data.info.players_answer[i].user_id==_this.userInfo.playerId){
  83. //对方的答案id
  84. _this.data.player_answerId=data.info.players_answer[i].option_id;
  85. }
  86. }
  87. $("#question .item").each(function(){
  88. if($(this).attr("data-option_id")==data.info.anwser){
  89. $(this).addClass("cur_true");
  90. }
  91. if($(this).attr("data-option_id")!=data.info.anwser&&$(this).hasClass("cur_answer")){
  92. $(this).addClass("cur_error");
  93. }
  94. if($(this).attr("data-option_id")==_this.data.player_answerId&&$(this).attr("data-option_id")==data.info.anwser){
  95. //对方答案
  96. $(this).addClass("player_true");
  97. }
  98. if($(this).attr("data-option_id")==_this.data.player_answerId&&$(this).attr("data-option_id")!=data.info.anwser){
  99. //对方答案
  100. $(this).addClass("player_error");
  101. }
  102. })
  103. clearInterval(this.data.ts);
  104. },onSocket:function(e){
  105. var data=JSON.parse(e.data);
  106. var _this=this;
  107. var type=data.type;
  108. switch(type){
  109. case 'init':
  110. _this.data.client_id=data.client_id;
  111. _this.bdSocket(function(res){
  112. _this.data.isReady=1;
  113. console.log(res.msg);
  114. });
  115. break;
  116. case 'player_join':
  117. _this.player_join(data);
  118. break;
  119. case 'question':
  120. _this.loadQuestion(data);
  121. break;
  122. case 'round_end':
  123. _this.round_end(data);
  124. console.log("答题结束");
  125. break;
  126. case "answer":
  127. if(_this.userInfo.user_id==data.user_id){
  128. _this.increment($("#py1_score"),data.score);
  129. }else if(_this.userInfo.playerId==data.user_id){
  130. _this.increment($("#py2_score"),data.score);
  131. }
  132. break;
  133. case 'game_end':
  134. $(".g-doc .g-inner").addClass("end");
  135. $("#Jvs").hide();
  136. console.log("游戏结束");
  137. break;
  138. }
  139. //_this.data.question_id
  140. },startGame:function(){
  141. if(this.data.isReady=="1")
  142. this.Join(function(res){
  143. $(".welcome").hide();
  144. $(".gstart").show();
  145. common.tips(res.msg);
  146. });
  147. else this.tips("登录失败");
  148. },initSocket:function(){
  149. var _this=this;
  150. var ws = new WebSocket(this.data.WebSocket);
  151. ws.onmessage=function(e){
  152. _this.onSocket(e);
  153. }
  154. },loadQuestion(responsedata) {
  155. console.log(responsedata);
  156. var _this=this;
  157. _this.data.isAnswer=false;
  158. _this.data.question_id= responsedata.info.question.question_id;
  159. $("#Jqtitle").html(responsedata.info.question.title );
  160. var question="";
  161. var answers = responsedata.info.options
  162. for(var i in answers){
  163. question += '<li class="btn-2 item item'+i+' answer layui-btn layui-btn-primary" data-option_id="'+answers[i].option_id+'"><em></em>'+answers[i].title+'</li>';
  164. }
  165. $("#question").html(question);
  166. $("#Jpage").html(responsedata.info.questions_count+"/5");
  167. $(".g-doc .g-inner").addClass("doing");
  168. // is_end = responsedata.info.question.is_end;
  169. this.daoshu();
  170. $("#question .item").on("touchend",function(){
  171. var l = $("#question .item.cur_answer").length;
  172. if(l>0)return;
  173. $(this).addClass("cur_answer");
  174. _this.data.option_id=$(this).attr("data-option_id");
  175. if(!_this.data.isAnswer){
  176. _this.data.isAnswer=true;
  177. _this.Answer(function(){
  178. });
  179. }
  180. })
  181. },listen:function(){
  182. var _this=this;
  183. $(".rulebtn").on("touchend",function(){
  184. $(".popwind,.popbg").fadeIn(200);
  185. })
  186. $(".close").on("touchend",function(){
  187. $(".popwind,.popbg").fadeOut(200);
  188. })
  189. $("#start_game").on("touchend",function(){
  190. _this.startGame();
  191. })
  192. $("#Jagain").on("touchend",function(){
  193. window.location.href=window.location.href;
  194. })
  195. },increment:function(obj,num){
  196. var text=obj.text();
  197. obj.prop('Counter',text).animate({
  198. Counter: num
  199. },{
  200. duration: 1500,
  201. easing: 'swing',
  202. step: function (now){
  203. $(this).text(Math.ceil(now));
  204. }
  205. });
  206. },daoshu:function(argument) {
  207. var _this=this;
  208. clearInterval(this.data.ts);
  209. this.data.sum = 9;
  210. this.data.angle = 0;
  211. var leftContent = document.querySelector(".left-content");
  212. var rightContent = document.querySelector(".right-content");
  213. var textCircle = document.querySelector(".text-circle");
  214. leftContent.setAttribute('style', 'transform: rotate(0deg)');
  215. rightContent.setAttribute('style', 'transform: rotate(0deg)');
  216. this.data.ts = setInterval(function() {
  217. if (_this.data.sum >= 0) textCircle.innerHTML = _this.data.sum;
  218. _this.data.sum = _this.data.sum - 1;
  219. $("#Jvs .con").show();
  220. $("#Jvs .tit").html("抢答中");
  221. _this.data.angle += 36;
  222. if (_this.data.angle <= 360) {
  223. if (_this.data.angle > 180) {
  224. rightContent.setAttribute('style', 'transform: rotate(' + (_this.data.angle - 180) + 'deg)')
  225. } else {
  226. leftContent.setAttribute('style', 'transform: rotate(' + _this.data.angle + 'deg)')
  227. }
  228. }
  229. if(_this.data.sum<3){
  230. $(".text-circle").addClass("rubberBand");
  231. $(".text-circle").addClass("animated");
  232. setTimeout(function(){
  233. $(".text-circle").removeClass("rubberBand");
  234. $(".text-circle").removeClass("animated");
  235. },900)
  236. }
  237. if (_this.data.sum < -1) {
  238. if(!_this.data.isAnswer)
  239. _this.Answer();
  240. _this.data.sum = 9;
  241. _this.data.angle = 0;
  242. leftContent.setAttribute('style', 'transform: rotate(0deg)');
  243. rightContent.setAttribute('style', 'transform: rotate(0deg)')
  244. }
  245. }, 1000)
  246. }, tips: function (text, time) {
  247. //弹窗工具
  248. time = time ? time : 1500;
  249. var para = document.createElement("p"); //创建新的<p> 元素
  250. para.innerHTML = text;
  251. para.setAttribute("class", "poptis");
  252. document.body.appendChild(para);
  253. para.style.marginLeft = -para.offsetWidth / 2+"px";
  254. setTimeout(function () {
  255. document.body.removeChild(para);
  256. }, time);
  257. },init:function(){
  258. var _this=this;
  259. this.listen();
  260. var ycy =this.GET("ycy");
  261. if(ycy){
  262. var b64 = new Base64();
  263. ycy=b64.decode(ycy);
  264. ycy=decodeURIComponent(ycy);
  265. ycy= JSON.parse(ycy);
  266. this.data.uid=ycy.uid;
  267. this.data.mt=ycy.mt;
  268. }
  269. if( this.GET("user_id")){
  270. this.data.uid=this.GET("user_id");
  271. this.data.mt=this.GET("mt");
  272. }
  273. this.getUserInfo(function(res){
  274. _this.userInfo=res.info;
  275. $("#py1_username").html(res.info.name);
  276. $("#py1_avatar").html('<img src="' + res.info.avatar + '" class="layui-circle">');
  277. _this.initSocket();
  278. })
  279. }
  280. }
  281. window.common=common;