quepass_game/js/game.js

var baseUrl = "47.108.130.28:9000";
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"),
	people = 0;
let me = {
	row: Math.floor(Math.random() * 3),
	col: Math.floor(Math.random() * 15)
};
var arr = [
	new Array(36),
	new Array(36),
	new Array(36)
];
var ans = [100,100,100];
// 开始答题
let $go = $("#go"),
	$countDown = $("#countDown"),
	$ques = $("#ques"),
	$trap = $("#trapID"),
	$num = $("#num"),
	// $renBox = $("#renBox"),
	$rens = [$("#people1"), $("#people2"), $("#people3")];
let quesData, quesLen=0, quesFlag = 0,
	quesHtml, quesTimer, quesInter, quesCount = quesEnd =30,isQuesEnd=false;

$.getJSON("question.json", function(res) {
	quesData = res.ques;
	quesLen = quesData.length;
	$("#allQues").html(quesLen);
});

// 答题
var $fail = $("#fail"),
	$success = $("#success"),
	$endBox = $("#endBox");

var nowAns = -1;

var peopleArr = [];
//?? peopleArr一直都是全部的ren 删减#ren时才改变
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++) {
			for (let j = 0; j < 36; j++) {
				if (arr[i][j]) {
					var delay = j * 100 + "ms";
					getIn(arr[i][j], i, j, delay);
				}
			}
		}
	}, 100);
	setTimeout(function(){
		startQues();
		getCounter();
	}, 5000);
}

function getIn(str, i, j, delay) {
	var $ren = $(str);
	$ren.addClass("d" + i + "-" + j);
	if (str == me.id) {
		$ren.addClass("me");
	}
	$ren.removeAttr("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][i] = "#ren" + (people + i);
		peopleArr.push(arr[flag][i]);
		if (flag == me.row && i == me.col) {
			me.id = arr[flag][i];
			peopleArr.pop();
		}
	}
	people += num;
	$box.append(html);
}

$("#ansBox").on("click", ".ans", function() {
	if (quesCount >= 0 && quesCount <= quesEnd) {
		var $this = $(this);
		var dataId = $this.attr("data-id");
		$this.addClass("active").siblings().removeClass("active");
		if (dataId != nowAns) {
			// $this.addClass("active").siblings().removeClass("active");
			choiseAnswer(Number(dataId));
			nowAns = dataId;
		}
	}
});

function choiseAnswer(flag) {
	$.post(ansPostUrl, JSON.stringify({
		uid,
		uname,
		qno: (quesFlag + 1),
		ans: flag,
		iscorrect: quesData[quesFlag].right == ansArr[flag]
	}));
	var rand = Math.floor(Math.random() * 15);
	rand = arr[flag].length > 15 ? rand : arr[flag].length - 1;
	var prevR = me.row,
		prevC = me.col;
	arr[prevR][prevC] = null;
	// 当新位置有值时
	if (arr[flag][rand]) {
		var id = arr[flag][rand];
		var $id = $(id);
		// 当前行选择多于等于36时，需要将当前位置的元素移除
		if (ans[flag] >= 36) {
			$id.css("z-index", 11).transition({
				y: "-100vh"
			}, 1000, function() {
				$id.remove();
				var num = peopleArr.indexOf(id);
				if (num >= 0) {
					peopleArr.splice(num, 1);
				}
			})
		} else {
			// 当前行选择少于36时，将元素放到最后一个位置上
			arr[flag][ans[flag]] = id;
			removePos($id).addClass("d" + flag + "-" + ans[flag]);
		}
	}
	// 当旧位置多于36个时，需要添加新元素
	if (ans[prevR] > 36) {
		people++;
		var left = 10 + 30 * prevR + "vw";
		figure = "figure f" + Math.floor(Math.random() * 20 + 1);
		var html = `<div class="${figure}" id="ren${people}" style="left:${left}"></div>`;
		$box.append(html);
		arr[prevR][prevC] = "#ren" + people;
		peopleArr.push(arr[prevR][prevC]);
		var timer = setTimeout(function() {
			$(arr[prevR][prevC]).removeAttr("style").addClass("d" + prevR + "-" + prevC);
		}, 100);

	}

	arr[flag][rand] = me.id;
	removePos($(me.id)).removeAttr("style").addClass("d" + flag + "-" + rand);
	me.row = flag;
	me.col = rand;
}

function removePos($obj) {
	let match = $obj.attr("class").match(/d\d\-\d{0,2}/);
	if (match) {
		return $obj.removeClass(function() {
			return match[0];
		})
	} else {
		return $obj
	}

}

function getTemp(obj1, obj2) {
	obj1.$id = obj2.$id;
	obj1.figure = obj2.figure;
	obj1.num = obj2.num;
	getIn(obj1);
}

function resetGame() {
	nowAns = me.row;
	quesCount = quesEnd;
	$countDown.html(quesCount);
	$trap.html("").hide();
	ansArr = ["A", "B", "C"];
	$(".figure").removeAttr("data-err");
}

function startQues() {
	if ($(me.id).attr("data-err")) {
		fail();
		isQuesEnd=true;
		return false;
	}
	resetGame();
	if (quesLen != 0 && quesFlag < quesLen && !isQuesEnd) {
		$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();
		// 需要删除
		/* ans = [10, 50, 10];
		getAnswer(); */
		quesInter = setInterval(function() {
			if (quesCount == 1) {
				clearInterval(quesInter);
				$go.fadeOut();
				quesFlag++;
				var tt = setTimeout(function() {
					nextGame(ques);
					clearTimeout(tt);
				}, 2000);
			}
			quesCount--;
			$countDown.html(quesCount);
		}, 1000);
	} else {
		isQuesEnd=true;
		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 = "";
	var rightNum = ansArr.indexOf(ques.right);
	for (var i in ansArr) {
		// 回答错误
		if (ansArr[i] != ques.right) {
			var rand = Math.floor(Math.random() * 4) + 1;
			trapHtml += `<div class="trap trap${rand} r${i}"></div>`;
			if(arr[i].length>0){
			for (var k in arr[i]) {
				if(arr[i][k]){
				var $k = $(arr[i][k]);
				$k.removeAttr("style").attr("data-err", 1).transition({
					y: "-100vh"
				}, 2000, "linear", function() {
					removePos($k).css("left", rightNum * 30 + 10 + "vw");
				})
				}
			}}
		}
	}
	$trap.html(trapHtml).show();
		quesTimer = setTimeout(startQues, 3000);
	
}
function getTempPeople(){
	var tempArr=[];
	for(var i=0;i<3;i++){
		for(var j=0;j<36;j++){
			if(arr[i][j]){
				tempArr.push(arr[i][j]);
			}
		}
	}
	return tempArr;
}
function getAnswer(res) {
	var tempPeople = peopleArr.concat();
	if(ans[0].length<36 && ans[1].length<36 && ans[2].length<36){
		tempPeople=getTempPeople();
	}
	var temp = [new Array(36), new Array(36), new Array(36)];
	temp[me.row][me.col]=me.id;
	for (var i = 0; i < 3; i++) {
		var a = ans[i] > 36 ? 36 : ans[i];
		if(i==me.row){
			a=a>=36?36:a-1;
		}
		$rens[i].html(ans[i]);
		for (var j = 0; j < a; j++) {
			if (i == me.row && j == me.col) {
				temp[i][j] = me.id;
				continue;
			}
			var rand = Math.floor(Math.random() * tempPeople.length);
			temp[i][j] = tempPeople.splice(rand, 1)[0];
			if (temp[i][j]) {
				$temp = $(temp[i][j]);
				removePos($temp).removeAttr("style").addClass("d" + i + "-" + j);
			} else {
				console.log(temp[i][j]);
			}
		}
	}
	var len = tempPeople.length;
	for (var i = 0; i < len; i++) {
		removePos($(tempPeople[i])).removeAttr("style");
	}
	arr = temp.concat();
}
// ws

function getCounter(){
	var ws1 = new WebSocket(wsCountUrl);
	var tempAns=new Array(3);
	var isSame=true;
	var $ren=$("#ren");
	var rens=0;
    ws1.onopen = function(e){
        ws1.send("getcounter")     
    }
	ws1.onmessage = function(e) {
		var res = JSON.parse(e.data);
        console.log(res,4444444444444)
		rens=0;
		for (var i = 0; i < res.length; i++) {
			var len=res[i].data.length;
			switch (res[i].ans) {
				case 0:
					tempAns[0] = len;
					break;
				case 1:
					tempAns[1] = len;
					break;
				case 2:
					tempAns[2] = len;
					break;
			}
			rens+=len;
		}
		for(var i=0;i<3;i++){
			if(tempAns[i]!=ans[i]){
				isSame=false;
				break;
			}
		}
		if(!isSame){
			$ren.html(rens);
			ans=tempAns.concat();
			ans=[0,30,0];
			getAnswer();
		}
		
	}
}



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();				
			}
		}
	}
}
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);
		if(res.status==1 && isWait){
			isWait=false;
			callback();
		}
		if(res.status==2 && !isWait){
			isQuesEnd=true;
			clearTimeout(quesTimer);
			success();
		}
	}
	ws.onclose = function () {
		console.log("closed...")
		window.clearInterval(timer)
		//这里仿照page.html添加上重连机制
	}
	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;
}
var uid=getQueryString('uid');
var uname=getQueryString('uname');
if(!uid || !uname){
	window.location.href="https://www.100t.com/gjnh/2022.php";
}else{
	$.post(registUrl,JSON.stringify({uid,uname}),function(res){
		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();
				});
			})
		})
	})
}