game.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. var baseUrl = "gj.100t.com";
  2. var registUrl = "http://" + baseUrl + "/api/quepass/regist";
  3. var ansPostUrl = "http://" + baseUrl + "/api/quepass/anspost";
  4. var wsCountUrl = "ws://" + baseUrl + "/ws/quepass/onlinecounter";
  5. var wsWaitUrl = "ws://" + baseUrl + "/ws/quepass/onlinewaiting";
  6. var $box = $("#figureBox"),
  7. people = 0;
  8. var me = {
  9. row: 1,
  10. col: 1
  11. };
  12. var $go = $("#go"),
  13. $countDown = $("#countDown"),
  14. $ques = $("#ques"),
  15. $trap = $("#trapID"),
  16. $num = $("#num"),
  17. $fail = $("#fail"),
  18. $success = $("#success"),
  19. $endBox = $("#endBox"),
  20. $ren = $("#ren");
  21. var quesData, quesLen = 0,
  22. quesFlag = 0,
  23. quesHtml, quesTimer, quesInter, quesCount = quesEnd = 30,
  24. isQuesEnd = false;
  25. var peopleArr = [];
  26. $.getJSON("question.json", function(res) {
  27. quesData = res.ques;
  28. quesLen = quesData.length;
  29. $("#allQues").html(quesLen);
  30. });
  31. var ansArr = ["A", -1, "B"]
  32. // 预加载
  33. var $load = $("#load"),
  34. images = new Array();
  35. function preload(imgs, callback) {
  36. var iCur = 0,
  37. i = 0;
  38. for (i = 0; i < imgs.length; i++) {
  39. images[i] = new Image();
  40. images[i].src = "img/" + imgs[i];
  41. images[i].onload = function() {
  42. iCur++;
  43. if (iCur == imgs.length) {
  44. console.log("加载完成");
  45. callback();
  46. }
  47. }
  48. }
  49. }
  50. function getQueryString(name) {
  51. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  52. var r = window.location.search.substr(1).match(reg);
  53. if (r != null) return unescape(r[2]);
  54. return null;
  55. }
  56. var uid = getQueryString('uid');
  57. var uname = getQueryString('uname');
  58. var round_id = getQueryString('round_id');
  59. if (!uid || !uname) {
  60. // window.location.href = "http://www.100t.com/gjnh/2022.php";
  61. } else {
  62. $.post(registUrl, JSON.stringify({
  63. uid,
  64. uname
  65. }), function(res) {})
  66. waiting(function() {
  67. preload(["bg.png", "figure.png", "img1.png", "img2.png", "img3.png", "line.png",
  68. "qus-top.png",
  69. "text-bg.png",
  70. "time-box.png", "trap1.png", "trap2.png", "trap3.png", "trap4.png"
  71. ], function() {
  72. $load.fadeOut(function() {
  73. $(this).remove();
  74. init();
  75. });
  76. })
  77. })
  78. }
  79. // 初始化
  80. function init() {
  81. var html = "",
  82. figure = "";
  83. for (var i = 0; i < 108; i++) {
  84. var left = Math.floor(Math.random() * 30) + 35 + "vw";
  85. figure = 'figure f' + Math.floor(Math.random() * 20 + 1);
  86. html += "<div class='" + figure + " row1' id='ren" + i + "' style='left:" + left + "'></div>";
  87. if (i == 1) {
  88. continue;
  89. }
  90. peopleArr.push("#ren" + i);
  91. }
  92. $box.append(html);
  93. me.$id = $("#ren1");
  94. var timer1 = setTimeout(function() {
  95. for (var j = 0; j < 36; j++) {
  96. if (peopleArr[j]) {
  97. var delay = j * 10 + "ms";
  98. me.$id.addClass("me");
  99. getIn(peopleArr[j], 1, j, delay);
  100. }
  101. }
  102. getIn(me.$id, 1, 1, "20ms");
  103. clearTimeout(timer1);
  104. }, 100);
  105. setTimeout(function() {
  106. startQues();
  107. }, 1000);
  108. }
  109. function getIn(str, i, j, delay) {
  110. var $ren = $(str);
  111. removePos($ren).addClass("d" + i + "-" + j).addClass("row" + i);
  112. $ren.removeAttr("style");
  113. if (delay) {
  114. $ren.css("transition-delay", delay);
  115. }
  116. }
  117. function startQues() {
  118. if (!me.$id.hasClass('row1')) {
  119. postAns(-1, 0, 30);
  120. fail();
  121. isQuesEnd = true;
  122. window.clearInterval(timer);
  123. return false;
  124. }
  125. resetGame();
  126. if (quesLen != 0 && quesFlag < quesLen && !isQuesEnd) {
  127. $num.html(quesFlag + 1);
  128. var ques = quesData[quesFlag];
  129. quesHtml = ques.text;
  130. $ques.html(quesHtml);
  131. $go.fadeIn();
  132. getRandAns();
  133. quesInter = setInterval(function() {
  134. if (quesCount == 1) {
  135. clearInterval(quesInter);
  136. $go.fadeOut();
  137. quesFlag++;
  138. var tt = setTimeout(function() {
  139. nextGame(ques);
  140. clearTimeout(tt);
  141. }, 2000);
  142. }
  143. quesCount--;
  144. $countDown.html(quesCount);
  145. }, 1000);
  146. } else {
  147. isQuesEnd = true;
  148. clearTimeout(quesTimer);
  149. window.clearInterval(timer);
  150. success();
  151. }
  152. }
  153. function nextGame(ques) {
  154. var trapHtml = "";
  155. trapHtml += emptyRow(1);
  156. $(".row1").removeClass("row1");
  157. if (ques.right == "A") {
  158. trapHtml += emptyRow(2);
  159. $(".row2").removeClass("row2");
  160. $(".row0").removeClass("row0").addClass("row1");
  161. } else {
  162. trapHtml += emptyRow(0);
  163. $(".row0").removeClass("row0");
  164. $(".row2").removeClass("row2").addClass("row1");
  165. }
  166. $trap.html(trapHtml).show();
  167. setTimeout(function() {
  168. var $rows = $(".row1"),
  169. rowsLen = $rows.length;
  170. for (var i = 0; i < rowsLen; i++) {
  171. var $k = $rows.eq(i);
  172. removePos($k).removeAttr("style").addClass("d1-" + i).addClass("row1");
  173. }
  174. }, 2000);
  175. quesTimer = setTimeout(startQues, 3000);
  176. }
  177. function emptyRow(i) {
  178. $(".row" + i).removeAttr("style").transition({
  179. y: "-100vh"
  180. }, 2000, "linear", function() {
  181. removePos($(this)).css("left", 40 + "vw");
  182. })
  183. var rand = Math.floor(Math.random() * 4) + 1;
  184. return '<div class="trap trap' + rand + ' r' + i + '"></div>';
  185. }
  186. function resetGame() {
  187. isAns = false;
  188. quesCount = quesEnd;
  189. $countDown.html(quesCount);
  190. $trap.html("").hide();
  191. $("#ansBox .ans").removeClass("active");
  192. }
  193. function fail() {
  194. window.location.href = "fail.html";
  195. }
  196. function success() {
  197. $fail.remove();
  198. $endBox.fadeIn(function() {
  199. $success.show();
  200. })
  201. }
  202. // 获取随机答案
  203. function getRandAns() {
  204. var tempPeople = peopleArr.concat();
  205. for (var i = 0; i < 3; i++) {
  206. for (var j = 0; j < 36; j++) {
  207. if (i == 1) {
  208. continue;
  209. }
  210. if (j == 1) {
  211. continue;
  212. }
  213. var rand = Math.floor(Math.random() * tempPeople.length);
  214. var id = tempPeople.splice(rand, 1)[0];
  215. delay = Math.floor(Math.random() * 3000) + "ms";
  216. if (id) {
  217. getIn(id, i, j, delay);
  218. } else {
  219. console.log(id);
  220. }
  221. }
  222. }
  223. }
  224. // 清除原来位置
  225. function removePos($obj) {
  226. if ($obj) {
  227. var c = $obj.attr("class");
  228. var match = c.match(/d\d\-\d{0,2}/);
  229. var m2 = c.match(/row\d{1}/);
  230. if (match) {
  231. $obj.removeClass(function() {
  232. return match[0];
  233. })
  234. }
  235. if (m2) {
  236. $obj.removeClass(function() {
  237. return m2[0];
  238. })
  239. }
  240. return $obj;
  241. }
  242. }
  243. // 选择答案
  244. var isAns = false;
  245. $("#ansBox").on("click", ".ans", function() {
  246. if (quesCount >= 0 && quesCount <= quesEnd) {
  247. if (!isAns) {
  248. var $this = $(this);
  249. var dataId = $this.attr("data-id");
  250. isAns = true;
  251. $this.addClass("active").siblings().removeClass("active");
  252. removePos(me.$id).removeAttr("style").addClass("d" + dataId + "-" + 1).addClass("row" + dataId);
  253. me.row = dataId;
  254. var ans = -1,
  255. time = quesEnd - quesCount,
  256. iscorrect = 0;
  257. if (quesData[quesFlag].right == "A") {
  258. ans = dataId == 0 ? 1 : 0;
  259. iscorrect = dataId == 0 ? 1 : 0;
  260. } else if (quesData[quesFlag].right == "B") {
  261. ans = dataId == 2 ? 0 : 1;
  262. iscorrect = dataId == 2 ? 1 : 0;
  263. }
  264. postAns(ans, iscorrect, time);
  265. }
  266. }
  267. });
  268. function postAns(ans, iscorrect, time) {
  269. $.post(ansPostUrl, JSON.stringify({
  270. round_id,
  271. uid,
  272. uname,
  273. qno: (quesFlag + 1),
  274. ans,
  275. iscorrect,
  276. time
  277. }));
  278. }
  279. // 重连
  280. var limitConnect = 5; // 断线重连次数
  281. var timeConnect = 0;
  282. function reconnect(service) {
  283. // lockReconnect加锁,防止onclose、onerror两次重连
  284. if (limitConnect > 0) {
  285. if (localStorage.getItem('lockReconnect') != true) {
  286. localStorage.setItem("lockReconnect", 1);
  287. limitConnect--;
  288. timeConnect++;
  289. console.log("第" + timeConnect + "次重连");
  290. // 进行重连
  291. setTimeout(function() {
  292. webSocketInit(service);
  293. localStorage.removeItem("lockReconnect");
  294. }, 2000);
  295. }
  296. } else {
  297. console.log("TCP连接已超时");
  298. }
  299. }
  300. var isWait = true;
  301. var timer = null;
  302. function waiting(callback) {
  303. var ws = new WebSocket(wsWaitUrl);
  304. ws.onopen = function() {
  305. console.log("open success");
  306. localStorage.removeItem("lockReconnect");
  307. //定时发送
  308. timer = window.setInterval(function() {
  309. ws.send(uid + "_" + uname)
  310. }, 1000)
  311. }
  312. ws.onmessage = function(e) {
  313. var res = JSON.parse(e.data);
  314. if (res.status == 1 && isWait&& res.game_status == 1) {
  315. window.location.href = "gameready.html";
  316. }
  317. if (res.status == 1 && isWait && res.game_status != 1) {
  318. isWait = false;
  319. callback();
  320. }
  321. if (res.status == 2 && !isWait && res.game_status == 1) {
  322. isQuesEnd = true;
  323. clearTimeout(quesTimer);
  324. success();
  325. }
  326. /* if(res.status == 1 && !isWait && res.data.length<100){
  327. isQuesEnd = true;
  328. clearTimeout(quesTimer);
  329. window.clearInterval(timer);
  330. success();
  331. } */
  332. $ren.html(res.data.length);
  333. }
  334. ws.onclose = function() {
  335. console.log("closed...")
  336. window.clearInterval(timer)
  337. //这里仿照page.html、
  338. ws.onerror = function(err) {
  339. window.clearInterval(timer)
  340. };
  341. }
  342. }