quepass_game/js/game.js

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"),
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)
	};
}