common.js 13 KB

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