common.js 11 KB

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