update

js/game.js

@@ -4,7 +4,8 @@ var ansPostUrl = "http://" + baseUrl + "/api/quepass/anspost";
 var wsCountUrl = "ws://" + baseUrl + "/ws/quepass/onlinecounter";
 var wsWaitUrl = "ws://" + baseUrl + "/ws/quepass/onlinewaiting";
 var $box = $("#figureBox"),
-	people = 0;
+people = 0;
+
 var me = {
 	row: 1,
 	col: 1

js/game.js.bak

@@ -0,0 +1,366 @@
+<<<<<<< HEAD
+var baseUrl = "gj.100t.com/";
+var registUrl = "http://" + baseUrl + "/api/quepass/regist";
+var ansPostUrl = "http://" + baseUrl + "/api/quepass/anspost";
+var wsCountUrl = "ws://" + baseUrl + "/ws/quepass/onlinecounter";
+var wsWaitUrl = "ws://" + baseUrl + "/ws/quepass/onlinewaiting";
+var $box = $("#figureBox"),
+=======
+// var baseUrl = "47.108.130.28:9000";
+var baseUrl = "gj.100t.com";
+var registUrl="http://"+baseUrl+"/api/quepass/regist";
+var ansPostUrl = "http://"+baseUrl + "/api/quepass/anspost";
+var wsCountUrl = "ws://"+baseUrl + "/ws/quepass/onlinecounter";
+var wsWaitUrl="ws://"+baseUrl+"/ws/quepass/onlinewaiting";
+let $box = $("#figureBox"),
+>>>>>>> d462cabf4bdcf099b0d39a2c375c1a893143b7a9
+	people = 0;
+var me = {
+	row: 1,
+	col: 1
+};
+var $go = $("#go"),
+	$countDown = $("#countDown"),
+	$ques = $("#ques"),
+	$trap = $("#trapID"),
+	$num = $("#num"),
+	$fail = $("#fail"),
+	$success = $("#success"),
+	$endBox = $("#endBox"),
+	$ren=$("#ren");
+var quesData, quesLen = 0,
+	quesFlag = 0,
+	quesHtml, quesTimer, quesInter, quesCount = quesEnd = 30,
+	isQuesEnd = false;
+
+var peopleArr = [];
+$.getJSON("question.json", function(res) {
+	quesData = res.ques;
+	quesLen = quesData.length;
+	$("#allQues").html(quesLen);
+});
+var ansArr = ["A", -1, "B"]
+// 预加载
+var $load = $("#load"),
+	images = new Array();
+
+function preload(imgs, callback) {
+	var iCur = 0,
+		i = 0;
+	for (i = 0; i < imgs.length; i++) {
+		images[i] = new Image();
+		images[i].src = "img/" + imgs[i];
+		images[i].onload = function() {
+			iCur++;
+			if (iCur == imgs.length) {
+				console.log("加载完成");
+				callback();
+			}
+		}
+	}
+}
+
+function getQueryString(name) {
+	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+	var r = window.location.search.substr(1).match(reg);
+	if (r != null) return unescape(r[2]);
+	return null;
+}
+var uid = getQueryString('uid');
+var uname = getQueryString('uname');
+var round_id = getQueryString('round_id');
+if (!uid || !uname) {
+	window.location.href = "https://www.100t.com/gjnh/2022.php";
+} else {
+	$.post(registUrl, JSON.stringify({
+		uid,
+		uname
+	}), function(res) {
+		if (res.status == 0 && res.game_status == 0) {
+			preload(["bg.png", "figure.png", "img1.png", "img2.png", "img3.png", "line.png", "qus-top.png",
+				"text-bg.png",
+				"time-box.png", "trap1.png", "trap2.png", "trap3.png", "trap4.png"
+			], function() {
+				waiting(function() {
+					$load.fadeOut(function() {
+						$(this).remove();
+						init();
+						$ren.html(res.data.length);
+					});
+				})
+			})
+		}
+	})
+}
+
+// 初始化
+function init() {
+	var html = "",
+		figure = "";
+	for (var i = 0; i < 108; i++) {
+		var left = Math.floor(Math.random() * 30) + 35 + "vw";
+		figure = 'figure f' + Math.floor(Math.random() * 20 + 1);
+		html += "<div class='" + figure + " row1' id='ren" + i + "' style='left:" + left + "'></div>";
+		if (i == 1) {
+			continue;
+		}
+		peopleArr.push("#ren" + i);
+	}
+	$box.append(html);
+	me.$id = $("#ren1");
+	var timer = setTimeout(function() {
+		for (var j = 0; j < 36; j++) {
+			if (peopleArr[j]) {
+				var delay = j * 10 + "ms";
+				me.$id.addClass("me");
+				getIn(peopleArr[j], 1, j, delay);
+			}
+		}
+
+		getIn(me.$id, 1, 1, "20ms");
+		console.log(peopleArr);
+		clearTimeout(timer);
+	}, 100);
+	
+	setTimeout(function() {
+		startQues();
+		// getCounter();
+	}, 1000);
+}
+
+function getIn(str, i, j, delay) {
+	var $ren = $(str);
+	removePos($ren).addClass("d" + i + "-" + j).addClass("row" + i);
+	$ren.removeAttr("style");
+	if (delay) {
+		$ren.css("transition-delay", delay);
+	}
+}
+
+function startQues() {
+	if (!me.$id.hasClass('row1')) {
+		postAns(-1,0,30);
+		console.log("失败");
+		fail();
+		isQuesEnd = true;
+		return false;
+	}
+	resetGame();
+	if (quesLen != 0 && quesFlag < quesLen && !isQuesEnd) {
+		$num.html(quesFlag + 1);
+		var ques = quesData[quesFlag];
+		quesHtml = ques.text;
+		$ques.html(quesHtml);
+		$go.fadeIn();
+		getRandAns();
+		quesInter = setInterval(function() {
+			if (quesCount == 1) {
+				clearInterval(quesInter);
+				$go.fadeOut();
+				quesFlag++;
+				var tt = setTimeout(function() {
+					nextGame(ques);
+					clearTimeout(tt);
+				}, 2000);
+			}
+			quesCount--;
+			$countDown.html(quesCount);
+		}, 100);
+	} else {
+		isQuesEnd = true;
+		clearTimeout(quesTimer);
+		success();
+	}
+
+}
+
+function nextGame(ques) {
+	var trapHtml = "";
+	trapHtml += emptyRow(1);
+	$(".row1").removeClass("row1");
+	if (ques.right == "A") {
+		trapHtml += emptyRow(2);
+		$(".row2").removeClass("row2");
+		$(".row0").removeClass("row0").addClass("row1");
+	} else {
+		trapHtml += emptyRow(0);
+		$(".row0").removeClass("row0");
+		$(".row2").removeClass("row2").addClass("row1");
+	}
+	console.log(trapHtml);
+	$trap.html(trapHtml).show();
+	setTimeout(function() {
+		var $rows = $(".row1"),
+			rowsLen = $rows.length;
+		for (var i = 0; i < rowsLen; i++) {
+			var $k = $rows.eq(i);
+			removePos($k).removeAttr("style").addClass("d1-" + i).addClass("row1");
+		}
+	}, 2000);
+	quesTimer = setTimeout(startQues, 3000);
+
+}
+
+function emptyRow(i) {
+	$(".row" + i).removeAttr("style").transition({
+		y: "-100vh"
+	}, 2000, "linear", function() {
+		removePos($(this)).css("left", 40 + "vw");
+	})
+	var rand = Math.floor(Math.random() * 4) + 1;
+	return '<div class="trap trap' + rand + ' r' + i + '"></div>';
+}
+
+function resetGame() {
+	isAns = false;
+	quesCount = quesEnd;
+	$countDown.html(quesCount);
+	$trap.html("").hide();
+	$("#ansBox .ans").removeClass("active");
+}
+
+function fail() {
+	window.location.href = "fail.html";
+}
+
+function success() {
+	$fail.remove();
+	$endBox.fadeIn(function() {
+		$success.show();
+	})
+}
+// 获取随机答案
+function getRandAns() {
+	var tempPeople = peopleArr.concat();
+	for (var i = 0; i < 3; i++) {
+		for (var j = 0; j < 36; j++) {
+			if (j == 1) {
+				continue;
+			}
+			var rand = Math.floor(Math.random() * tempPeople.length);
+			console.log(rand, tempPeople[rand]);
+			var id = tempPeople.splice(rand, 1)[0];
+			delay = Math.floor(Math.random() * 3000) + "ms";
+			if (id) {
+				getIn(id, i, j, delay);
+			} else {
+				console.log(id);
+			}
+
+		}
+	}
+
+}
+
+// 清除原来位置
+function removePos($obj) {
+	if ($obj) {
+		var c = $obj.attr("class");
+		var match = c.match(/d\d\-\d{0,2}/);
+		var m2 = c.match(/row\d{1}/);
+		if (match) {
+			$obj.removeClass(function() {
+				return match[0];
+			})
+		}
+		if (m2) {
+			$obj.removeClass(function() {
+				return m2[0];
+			})
+		}
+		return $obj;
+	}
+
+}
+// 选择答案
+var isAns = false;
+$("#ansBox").on("click", ".ans", function() {
+	if (quesCount >= 0 && quesCount <= quesEnd) {
+		if (!isAns) {
+			var $this = $(this);
+			var dataId = $this.attr("data-id");
+			isAns = true;
+			$this.addClass("active").siblings().removeClass("active");
+			removePos(me.$id).removeAttr("style").addClass("d" + dataId + "-" + 1).addClass("row" + dataId);
+			me.row = dataId;
+			var iscorrect = -1,time=quesEnd-quesCount;
+			if (quesData[quesFlag].right == "A") {
+				iscorrect = dataId == 0 ? 1 : 0;
+			} else if (quesData[quesFlag].right == "A") {
+				iscorrect = dataId == 2 ? 0 : 1;
+			}
+			postAns(ans,iscorrect,time);
+		}
+	}
+});
+
+function postAns(ans, iscorrect,time) {
+	$.post(ansPostUrl, JSON.stringify({
+		round_id,
+		uid,
+		uname,
+		qno: (quesFlag + 1),
+		ans,
+		iscorrect,
+		time
+	}));
+}
+
+// 重连
+var limitConnect = 5; // 断线重连次数
+var timeConnect = 0;
+
+function reconnect(service) {
+	// lockReconnect加锁，防止onclose、onerror两次重连
+	if (limitConnect > 0) {
+		if (localStorage.getItem('lockReconnect') != true) {
+			localStorage.setItem("lockReconnect", 1);
+			limitConnect--;
+			timeConnect++;
+			console.log("第" + timeConnect + "次重连");
+			// 进行重连
+			setTimeout(function() {
+				webSocketInit(service);
+				localStorage.removeItem("lockReconnect");
+			}, 2000);
+		}
+	} else {
+		console.log("TCP连接已超时");
+	}
+}
+var isWait = true;
+
+function waiting(callback) {
+	var ws = new WebSocket(wsWaitUrl);
+	var timer = null
+	ws.onopen = function() {
+		console.log("open success");
+		localStorage.removeItem("lockReconnect");
+		//定时发送 
+		timer = window.setInterval(function() {
+			ws.send(uid + "_" + uname)
+		}, 1000)
+	}
+	ws.onmessage = function(e) {
+		var res = JSON.parse(e.data);
+		if (res.status == 1 && isWait) {
+			isWait = false;
+			callback();
+		}
+		if (res.status == 2 && !isWait && game_status != 1) {
+			isQuesEnd = true;
+			clearTimeout(quesTimer);
+			success();
+		}
+		$ren.html(res.data.length);
+	}
+	ws.onclose = function() {
+		console.log("closed...")
+		window.clearInterval(timer)
+		//这里仿照page.html添加上重连机制
+		reconnect(wsWaitUrl)
+	}
+	ws.onerror = function(err) {
+		window.clearInterval(timer)
+	};
+}

page.html

@@ -74,7 +74,7 @@
 	<script>
 		var limitConnect = 3;  // 断线重连次数
 		var timeConnect = 0;
-		var baseUrl = "47.108.130.28:9000";
+		var baseUrl = "gj.100t.com";
 		var wsWaitUrl = "ws://" + baseUrl + "/ws/quepass/onlinewaiting";
 
 		function webSocketInit(service) {
@@ -132,7 +132,7 @@
 
 		// 开始或结束游戏
 		function setStatus(num) {
-			$.post("http://47.108.130.28:9000/api/quepass/status", JSON.stringify({ action: num }));
+			$.post("http://gj.100t.com/api/quepass/status", JSON.stringify({ action: num }));
 		}
 	</script>
 </body>