update

js/game - ¸±±¾.js

@@ -0,0 +1,282 @@
+let $box = $("#figureBox"),
+	people = 0;
+let me = {
+	$id: null,
+	row: Math.floor(Math.random() * 3),
+	col: Math.floor(Math.random() * 15),
+	num: 0,
+
+}
+var arr = [
+	[],
+	[],
+	[]
+];
+var ans = [10, 200, 100];
+// 开始答题
+let $go = $("#go"),
+	$countDown = $("#countDown"),
+	$ques = $("#ques"),
+	$trap = $("#trapID"),
+	$num = $("#num"),
+	$renBox = $("#renBox");
+let quesData, quesLen, quesFlag = 0,
+	quesHtml, quesTimer, quesInter, quesCount = 2;
+$.get("./question.json", function(res) {
+	quesData = res.ques;
+	quesLen = quesData.length;
+});
+
+// 答题
+var $fail = $("#fail"),
+	$success = $("#success"),
+	$endBox = $("#endBox");
+
+var nowAns = -1;
+var baseUrl="http://47.108.130.28:9000";
+var ansPostUrl=baseUrl+"/api/quepass/ansPost";
+var wsCountUrl=baseUrl+"/ws/quepass/onlinecounter";
+function init() {
+	for (var i = 0; i < 3; i++) {
+		figureInit(ans[i], i);
+	}
+	me.$id=$("#ren"+me.num);
+	let timer = setTimeout(function() {
+		clearTimeout(timer);
+		for (let i = 0; i < 3; i++) {
+			var l = arr[i].length;
+			for (let j = 0; j < l; j++) {
+				var delay = arr[i][j].col * 100 + "ms";
+				getIn(arr[i][j], delay);
+			}
+		}
+	}, 100);
+
+	setTimeout(startQues, 3000);
+}
+
+function getIn(obj, delay) {
+	if (obj.$id) {
+		var $ren = obj.$id;
+	} else {
+		var $ren = $("#ren" + obj.num);
+		obj.$id = $ren;
+	}
+
+	$ren[0].className = obj.figure + " d" + obj.row + "-" + obj.col;
+	$ren.attr("style", "");
+	if (delay) {
+		$ren.css("transition-delay", delay);
+	}
+}
+
+function figureInit(num, flag) {
+	let html = "",
+		figure = "";
+	if (num > 36) num = 36;
+	for (let i = 0; i < num; i++) {
+		var left = Math.floor(Math.random() * 140) - 20 + "vw";
+		figure = "figure f" + Math.floor(Math.random() * 20 + 1);
+		html += `<div class="${figure}" id="ren${people+i}" style="left:${left}"></div>`;
+		arr[flag].push({
+			row: flag,
+			col: i,
+			figure,
+			num: people + i
+		});
+		if (flag == me.row && i == me.col) {
+			me.figure = figure + ` me`;
+			me.num = people + i;
+			arr[flag][i].figure+=" me";
+		}
+	}
+	people += num;
+	$box.append(html);
+}
+
+/* function answer(a1, a2, a3) {
+	if(a1>36) a1=36;
+	if(a2>36) a2=36;
+	a3=a3>36?36:a3;
+	arr[1] = Array(a1);
+	arr[2] = Array(a2);
+	arr[3]= Array(a3);
+	getAnswer(a1, arr[1], 0);
+	getAnswer(a2, arr[2], 1);
+	getAnswer(a3, arr[3], 2);
+	peopleArr = peopleArr.concat(arr[1], arr[2], arr[3]);
+}
+
+function getAnswer(num, arr, flag) {
+	var rand = 0,
+		$f, delay;
+	for (var i = 0; i < num; i++) {
+		if (flag == me.row && i == me.col) {
+			console.log(flag, i);
+			continue;
+		}
+		rand = Math.floor(Math.random() * peopleArr.length);
+		arr[i] = peopleArr.splice(rand, 1)[0];
+		$f = arr[i].$ren;
+		$f[0].className = arr[i].className + " row"+flag+" d" + flag + "-" + i;
+		delay = Math.floor(Math.random() * 3000) + "ms";
+		$f.css("transition-delay", delay)
+	}
+	if (flag == me.row) {
+		arr.splice(me.col, 1);
+	}
+} */
+
+$("#ansBox").on("click", ".ans", function() {
+	if (quesCount >= 0 && quesCount <= 15) {
+		var $this = $(this);
+		var dataId = $this.attr("data-id");
+		if (dataId != nowAns) {
+			$this.addClass("active").siblings().removeClass("active");
+			choiseAnswer(Number(dataId),nowAns);
+			nowAns = dataId;
+		}
+	}
+});
+
+function choiseAnswer(flag,prevAns) {
+	/* $.post(ansPostUrl,JSON.stringify({
+		qno:(quesFlag+1),
+		ans:flag,
+		iscorrect:quesData[quesFlag].right==ansArr[flag]
+	})); */
+	var rand = Math.floor(Math.random() * 15);
+	 rand=arr[flag].length>36?rand:arr[flag].length-1;
+	var prevR = me.row,
+		prevC = me.col;
+		console.log(prevR,prevC);
+		console.log(flag,rand);
+	var len = Math.floor((arr[flag].length - rand) / 3)+1;
+	for (var i = len - 1; i >= 0; i--) {
+		var col = rand + 3 * i;
+		if (i == 0) {
+			getTemp(arr[flag][col], me);
+			me={};
+			$.extend(true,me,arr[flag][col]);
+			console.log(me);
+		} 
+		if (i == len - 1) {
+			if(arr[prevAns].length>36){
+				getTemp(arr[prevR][prevC], arr[flag][col]);
+			}
+		} 
+		if(i>0 && i<len - 1){
+			getTemp(arr[flag][col], arr[flag][col - 3]);
+		}
+			
+	
+	}
+
+}
+
+function getTemp(obj1, obj2) {
+	obj1.$id = obj2.$id;
+	obj1.figure = obj2.figure;
+	obj1.num = obj2.num;
+	getIn(obj1);
+}
+
+function resetGame() {
+	nowAns = me.row;
+	quesCount = 2;
+	$countDown.html(quesCount);
+	$trap.html("").hide();
+	ansArr = ["A", "B", "C"];
+}
+
+function startQues() {
+	if (me.$id.hasClass("err")) {
+		fail();
+		return false;
+	}
+	resetGame();
+	if (quesLen != 0 && quesFlag < quesLen) {
+		$num.html(quesFlag + 1);
+		var ques = quesData[quesFlag];
+		quesHtml = ques.text;
+		if (ques.img) {
+			quesHtml += `<br/><img src="img/${ques.img}"/>`;
+		}
+		$ques.html(quesHtml);
+		$go.fadeIn(function() {
+			$renBox.fadeIn();
+		});
+
+		quesInter = setInterval(function() {
+			if (quesCount == 1) {
+				clearInterval(quesInter);
+				$go.fadeOut();
+				quesFlag++;
+				$renBox.fadeOut();
+				var tt = setTimeout(function() {
+					nextGame(ques);
+					clearTimeout(tt);
+				}, 2000);
+			}
+			quesCount--;
+			$countDown.html(quesCount);
+		}, 10000000);
+	} else {
+		clearTimeout(quesTimer);
+		success();
+	}
+}
+
+function fail() {
+	$endBox.remove($success).fadeIn(function() {
+		$fail.show();
+	})
+}
+
+function success() {
+	$endBox.remove($fail).fadeIn(function() {
+		$success.show();
+	})
+}
+
+function nextGame(ques) {
+	var trapHtml = "";
+	for (var i in ansArr) {
+		if (ansArr[i] == ques.right) {
+			peopleArr = arr[i];
+		} else {
+			var rand = Math.floor(Math.random() * 4) + 1;
+			trapHtml += `<div class="trap trap${rand} r${i}"></div>`;
+			$(".row" + i).attr("style", "").addClass("err");
+		}
+	}
+	$trap.html(trapHtml).show();
+	quesTimer = setTimeout(startQues, 2000);
+}
+function getAnswer(){
+	// var peopleArr=
+}
+// ws
+/* var ws = new WebSocket("ws://47.108.130.28:9000/ws/quepass/onlinewaiting");
+ws.onopen = function() {
+	console.log("open");
+}
+ws.onmessage = function(e) {
+	console.log(JSON.parse(e.data));
+}
+ws.onclose = function(e) {
+	console.log(e);
+}
+var ws1 = new WebSocket("ws://47.108.130.28:9000/ws/quepass/onlinecounter");
+ws1.onopen = function() {
+	console.log("open1");
+}
+ws1.onmessage = function(e) {
+	console.log(JSON.parse(e.data));
+}
+ws1.onclose = function(e) {
+	console.log(e);
+} */
+
+
+init();

js/game.js

@@ -319,12 +319,12 @@ function getCounter(){
 	var isSame=true;
 	var $ren=$("#ren");
 	var rens=0;
-    ws1.onopen = function(e){
-        ws1.send("getcounter")     
-    }
+    ws1.onopen = function(e){
+        ws1.send("getcounter")     
+    }
 	ws1.onmessage = function(e) {
 		var res = JSON.parse(e.data);
-        console.log(res,4444444444444)
+        console.log(res,4444444444444)
 		rens=0;
 		for (var i = 0; i < res.length; i++) {
 			var len=res[i].data.length;
@@ -376,14 +376,23 @@ function preload(imgs, callback) {
 	}
 }
 var isWait=true;
+var uid=getQueryString('uid');
+var uname=getQueryString('uname');
+
 function waiting(callback){
 	var ws = new WebSocket(wsWaitUrl);
+	var timer = null
 	ws.onopen = function() {
 		console.log("正在等待");
+		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);
-		console.log(res,11111111111);
 		if(res.status==1 && isWait){
 			isWait=false;
 			callback();
@@ -394,12 +403,19 @@ function waiting(callback){
 			success();
 		}
 	}
+	ws.onclose = function () {
+		console.log("closed...")
+		window.clearInterval(timer)
+	}
+	ws.onerror = function (err) {
+		window.clearInterval(timer)
+	};
 }
-
-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;
+
+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');

page.html

@@ -1,82 +1,140 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title>大屏首页</title>
-		<style>
-			body,p,a{
-				margin:0;
-				padding:0;
-			}
-			body{
-				background:#ab0b0b url(img/pbg.jpg) no-repeat center top;
-				background-size:100% auto;
-			}
-			html,body{
-				width:100%;height:100%;
-			}
-			.full{
-				position:absolute;
-				top:0;
-				left:0;
-				right:0;
-				bottom:0;
-				background-color:rgba(0,0,0,0.6);
-			}
-			.p-top{
-				width:80%;
-				height:auto;
-				display:block;
-				margin:50px auto;
-			}
-			.text{
-				font-size:20px;
-				color:#fff;
-				
-					margin:200px auto 50px;
-					width:50%;
-			}
-			.btn-box{
-				margin:0 auto;
-				width:50%;
-				
-					display: flex;
-					justify-content: space-around;
-			}
-			.btn-box a{
-				display:block;
-			}
-		</style>
-	</head>
-	<body>
-		<div class="full">
-			<!-- <img src="img/ptop.png"  class="p-top" alt=""> -->
-			<p class="text">当前在线人数：<span id="nowWait">20</span></p>
-			<div class="btn-box">
-				<a onclick="setStatus(1)" class="btn1"><img src="img/pbtn.png" ></a>
-				<a onclick="setStatus(0)" class="btn2"><img src="img/pbtn2.png" ></a>
-			</div>
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<title>大屏首页</title>
+	<style>
+		body,
+		p,
+		a {
+			margin: 0;
+			padding: 0;
+		}
+
+		body {
+			background: #ab0b0b url(img/pbg.jpg) no-repeat center top;
+			background-size: 100% auto;
+		}
+
+		html,
+		body {
+			width: 100%;
+			height: 100%;
+		}
+
+		.full {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background-color: rgba(0, 0, 0, 0.6);
+		}
+
+		.p-top {
+			width: 80%;
+			height: auto;
+			display: block;
+			margin: 50px auto;
+		}
+
+		.text {
+			font-size: 20px;
+			color: #fff;
+
+			margin: 200px auto 50px;
+			width: 50%;
+		}
+
+		.btn-box {
+			margin: 0 auto;
+			width: 50%;
+
+			display: flex;
+			justify-content: space-around;
+		}
+
+		.btn-box a {
+			display: block;
+		}
+	</style>
+</head>
+
+<body>
+	<div class="full">
+		<!-- <img src="img/ptop.png"  class="p-top" alt=""> -->
+		<p class="text">当前在线人数：<span id="nowWait"></span></p>
+		<div class="btn-box">
+			<a onclick="setStatus(1)" class="btn1"><img src="img/pbtn.png"></a>
+			<a onclick="setStatus(0)" class="btn2"><img src="img/pbtn2.png"></a>
 		</div>
-		<script src="js/jquery.js"></script>
-		<script>
+	</div>
+	<script src="js/jquery.js"></script>
+	<script>
+		var limitConnect = 3;  // 断线重连次数
+		var timeConnect = 0;
 		var baseUrl = "47.108.130.28:9000";
-		var wsWaitUrl="ws://"+baseUrl+"/ws/quepass/onlinewaiting";
-			function setStatus(num){
-				$.post("http://47.108.130.28:9000/api/quepass/status",JSON.stringify({action:num}));
-			}
-			var ws = new WebSocket(wsWaitUrl);
-			ws.onopen = function() {
-				console.log("正在等待");
+		var wsWaitUrl = "ws://" + baseUrl + "/ws/quepass/onlinewaiting";
+
+		function webSocketInit(service) {
+			var ws = new WebSocket(service);
+			var timer = null
+			ws.onopen = function () {
+				console.log("open success");
+				localStorage.removeItem("lockReconnect");
+				//定时发送 
+				timer = window.setInterval(function () {
+					ws.send("hello")
+				}, 1000)
 			}
-			var $nowWait=$("#nowWait");
-			ws.onmessage = function(e) {
-				var res=JSON.parse(e.data);
-                console.log(res,222222222222222)
-				var len=res.data.length;
-				if(len>=0){
+			var $nowWait = $("#nowWait");
+			ws.onmessage = function (e) {
+				var res = JSON.parse(e.data);
+				var len = res.data?res.data.length:0;
+				if (len >= 0) {
 					$nowWait.html(len);
 				}
 			}
-		</script>
-	</body>
-</html>
+			ws.onclose = function () {
+				console.log("closed...")
+				window.clearInterval(timer)
+				reconnect(service)
+			}
+			ws.onerror = function (err) {
+				window.clearInterval(timer)
+				reconnect(service);
+			};
+			return ws
+		}
+
+		// 重连
+		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连接已超时");
+			}
+		}
+		// 初始化ws
+		var ws = webSocketInit(wsWaitUrl)
+
+		// 开始或结束游戏
+		function setStatus(num) {
+			$.post("http://47.108.130.28:9000/api/quepass/status", JSON.stringify({ action: num }));
+		}
+	</script>
+</body>
+
+</html>