hxt 2 years ago
parent
commit
fbf167c6f8
8 changed files with 213 additions and 124 deletions
  1. 3 2
      css/index.css
  2. 72 0
      css/over.css
  3. 2 64
      fail.html
  4. 0 5
      index.html
  5. 45 31
      js/game.js
  6. 15 4
      page.html
  7. 62 18
      question2.json
  8. 14 0
      success.html

+ 3 - 2
css/index.css

@@ -411,16 +411,17 @@ body {
 
 .ans-1 {
 	left: 5vw;
-	background-color: #f27d68;
+	background-color: #09874b;
 }
 
 .ans-2 {
 	left: 35vw;
+	background-color: #008aa2;
 }
 
 .ans-3 {
 	left: 65vw;
-	background-color: #008aa2;
+	background-color: #be4b46;
 }
 
 .trapbox {

+ 72 - 0
css/over.css

@@ -0,0 +1,72 @@
+html,
+			body,
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6,
+			p,
+			ul,
+			li,
+			div,
+			section {
+				padding: 0;
+				margin: 0;
+			}
+			
+			html,
+			body {
+				width: 100%;
+				height: 100%;
+				font-family: "微软雅黑";
+			}
+			
+			.full {
+				position: fixed;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				right: 0;
+			}
+			
+			.end-box {
+				background: rgba(0, 0, 0, 0.8);
+			}
+			
+			.end-box:before {
+				content: "";
+				position: absolute;
+				top: 20vh;
+				left: 10vw;
+				width: 80vw;
+				height: 5vh;
+				background: url(../img/qus-top.png) no-repeat center top;
+				background-size: auto 5vh;
+			}
+			
+			.end {
+				margin: 25vh auto 0;
+				background-color: #fede82;
+				height: 60vw;
+				width: 80vw;
+				border-radius: 5vw;
+				box-sizing: border-box;
+				padding: 20vw 5px;
+				line-height: 10vw;
+				font-size: 6vw;
+				text-align: center;
+				color: #FF5216;
+				font-weight: bold;
+			}
+			
+			.btn{
+			display:block;
+			width:50vw;
+			margin:20px auto;
+			}
+			.btn img{
+				display:block;
+				width:100%;
+				height:auto;
+			}

+ 2 - 64
fail.html

@@ -3,74 +3,12 @@
 	<head>
 		<meta charset="utf-8">
 		<title></title>
-		<style>
-			html,
-			body,
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6,
-			p,
-			ul,
-			li,
-			div,
-			section {
-				padding: 0;
-				margin: 0;
-			}
-			
-			html,
-			body {
-				width: 100%;
-				height: 100%;
-				font-family: "微软雅黑";
-			}
-			
-			.full {
-				position: fixed;
-				top: 0;
-				left: 0;
-				bottom: 0;
-				right: 0;
-			}
-			
-			.end-box {
-				background: rgba(0, 0, 0, 0.8);
-			}
-			
-			.end-box:before {
-				content: "";
-				position: absolute;
-				top: 20vh;
-				left: 10vw;
-				width: 80vw;
-				height: 5vh;
-				background: url(../img/qus-top.png) no-repeat center top;
-				background-size: auto 5vh;
-			}
-			
-			.end {
-				margin: 25vh auto 0;
-				background-color: #fede82;
-				height: 60vw;
-				width: 80vw;
-				border-radius: 5vw;
-				box-sizing: border-box;
-				padding: 20vw 5px;
-				line-height: 10vw;
-				font-size: 6vw;
-				text-align: center;
-				color: #FF5216;
-				font-weight: bold;
-			}
-			
-		</style>
+		<link rel="stylesheet" href="css/over.css">
 	</head>
 	<body>
 		<section class="end-box full" id="endBox">
 			<div class="end" id="fail">很遗憾<br/>你的答题之旅结束了!!!</div>
+			<a href="https://www.100t.com/gjnh/2022.php"class="btn"><img src="img/pbtn2.png"></a>
 		</section>
 	</body>
 </html>

+ 0 - 5
index.html

@@ -48,11 +48,6 @@
 				</section>
 			</section>
 			<section class="time-box"></section>
-			<!-- 答题结束 -->
-			<section class="end-box full" id="endBox">
-				<div class="end" id="success">恭喜你<br/>答题之王就是您!!!</div>
-				<div class="end" id="fail">很遗憾<br/>你的答题之旅结束了!!!</div>
-			</section>
 		</div>
 		<script src="js/jquery.js"></script>
 		<script src="js/jquery.transit.min.js"></script>

+ 45 - 31
js/game.js

@@ -25,10 +25,26 @@ var quesData, quesLen = 0,
 	quesHtml, quesTimer, quesInter, quesCount = quesEnd = 30,
 	isQuesEnd = false;
 
+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');
 var peopleArr = [];
-$.getJSON("question.json", function(res) {
+var questionUrl = "question.json";
+if (round_id == 2) {
+	questionUrl = "question2.json";
+} else if (round_id == 3) {
+	questionUrl = "question3.json";
+}
+$.getJSON(questionUrl, function(res) {
 	quesData = res.ques;
 	quesLen = quesData.length;
+	console.log(quesData);
 	$("#allQues").html(quesLen);
 });
 var ansArr = ["A", -1, "B"]
@@ -52,33 +68,24 @@ function preload(imgs, 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 = "http://www.100t.com/gjnh/2022.php";
+	window.location.href = "http://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() {
-		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() {
-			$load.fadeOut(function() {
-				$(this).remove();
-				init();
-			});
-		})
+		$load.fadeOut(function() {
+			$(this).remove();
+			init();
+		});
 	})
 }
 
@@ -133,6 +140,11 @@ function startQues() {
 		return false;
 	}
 	resetGame();
+	console.log(quesLen);
+	if(!quesLen){
+		alert("题目出现错误");
+		return false;
+	}
 	if (quesLen != 0 && quesFlag < quesLen && !isQuesEnd) {
 		$num.html(quesFlag + 1);
 		var ques = quesData[quesFlag];
@@ -194,7 +206,11 @@ function emptyRow(i) {
 	}, 2000, "linear", function() {
 		removePos($(this)).css("left", 40 + "vw");
 	})
-	var rand = Math.floor(Math.random() * 4) + 1;
+	if (i == 1) {
+		var rand = 4;
+	} else {
+		var rand = Math.floor(Math.random() * 3) + 1;
+	}
 	return '<div class="trap trap' + rand + ' r' + i + '"></div>';
 }
 
@@ -203,7 +219,7 @@ function resetGame() {
 	quesCount = quesEnd;
 	$countDown.html(quesCount);
 	$trap.html("").hide();
-	$("#ansBox .ans").removeClass("active");
+	$("#ansBox .ans").show().removeClass("active");
 }
 
 function fail() {
@@ -211,10 +227,8 @@ function fail() {
 }
 
 function success() {
-	$fail.remove();
-	$endBox.fadeIn(function() {
-		$success.show();
-	})
+	// window.location.href = "success.html";
+	console.log("success");
 }
 // 获取随机答案
 function getRandAns() {
@@ -229,7 +243,7 @@ function getRandAns() {
 			}
 			var rand = Math.floor(Math.random() * tempPeople.length);
 			var id = tempPeople.splice(rand, 1)[0];
-			delay = Math.floor(Math.random() * 3000) + "ms";
+			delay = Math.floor(Math.random() * 15000) + "ms";
 			if (id) {
 				getIn(id, i, j, delay);
 			} else {
@@ -269,7 +283,7 @@ $("#ansBox").on("click", ".ans", function() {
 			var $this = $(this);
 			var dataId = $this.attr("data-id");
 			isAns = true;
-			$this.addClass("active").siblings().removeClass("active");
+			$this.addClass("active").siblings().fadeOut();
 			removePos(me.$id).removeAttr("style").addClass("d" + dataId + "-" + 1).addClass("row" + dataId);
 			me.row = dataId;
 			var ans = -1,
@@ -336,14 +350,14 @@ function waiting(callback) {
 	}
 	ws.onmessage = function(e) {
 		var res = JSON.parse(e.data);
-		if (res.status == 1 && isWait&& res.game_status == 1) {
+		if (res.status == 1 && isWait && res.game_status == 1) {
 			window.location.href = "gameready.html";
 		}
 		if (res.status == 1 && isWait && res.game_status != 1) {
 			isWait = false;
 			callback();
 		}
-		if (res.status == 2 && !isWait &&  res.game_status == 1) {
+		if (res.status == 2 && !isWait && res.game_status == 1) {
 			isQuesEnd = true;
 			clearTimeout(quesTimer);
 			success();

+ 15 - 4
page.html

@@ -45,13 +45,12 @@
 			color: #fff;
 
 			margin: 200px auto 50px;
-			width: 50%;
+			width: 900px;
 		}
 
 		.btn-box {
 			margin: 0 auto;
-			width: 50%;
-
+			width: 900px;
 			display: flex;
 			justify-content: space-around;
 		}
@@ -59,6 +58,11 @@
 		.btn-box a {
 			display: block;
 		}
+		.btn-box img{
+			display: block;
+			width:274px;
+			height:auto;
+		}
 	</style>
 </head>
 
@@ -132,8 +136,15 @@
 		var ws = webSocketInit(wsWaitUrl)
 
 		// 开始或结束游戏
+		var flag=true;
 		function setStatus(num) {
-			$.post(startGameUrl, JSON.stringify({ action: num }));
+			if(flag){
+				flag=false;
+				$.post(startGameUrl, JSON.stringify({ action: num }),function(){
+					flag=true;
+				});
+			}
+			
 		}
 	</script>
 </body>

+ 62 - 18
question2.json

@@ -1,20 +1,64 @@
 {
-	"ques":[
-		{"text":"本届冬奥会的吉祥物是福娃<br>A.正确<br>B.错误","right":"B"},
-		{"text":"北京是奥运会历史上第一个举办过夏季奥运会和冬季奥运会的城市<br>A.正确<br>B.错误","right":"A"},
-		{"text":"国际足球赛的常规比赛时间是90分钟。<br>A.正确<br>B.错误","right":"A"},
-		{"text":"最大的动物是蓝鲸。<br>A.正确<br>B.错误","right":"A"},
-		{"text":"五岳之一的中岳是指华山。<br>A.正确<br>B.错误","right":"B"},
-		{"text":"现代奥林匹克之父是顾拜旦。<br>A.正确<br>B.错误","right":"A"},
-		{"text":"最早的宗教是佛教。<br>A.正确<br>B.错误","right":"A"},
-		{"text":"外国债券的特点是债券发行人、债券的面值货币和发行市场同属于一个国家<br>A.正确<br>B.错误","right":"B"},
-		{"text":"有限责任公司设立监事会,其成员不得少于5人。<br>A.正确<br>B.错误","right":"B"},
-		{"text":"证券市场对中国经济更具消极作用。<br>A.正确<br>B.错误","right":"B"},
-		{"text":"资产负债比率是资产总额除以负债总额的百分比。<br>A.正确<br>B.错误","right":"B"},
-		{"text":"买进期货或期权同样都有权利和义务。<br>A.正确<br>B.错误","right":"B"},
-		{"text":"公司各业务部门、分支机构及子公司()作为风险管理第一责任人,应全面了解并在决策中充分考虑与业务相关的各类风险,及时识别、评估、监控、应对、报告相关风险,完善相关风险管理制度,并承担风险管理有效性的直接责任<br>A.负责人<br>B.合规风控岗","right":"A"},
-		{"text":"操作风险是指()<br>A.公司无法以合理成本及时获得充足资金,以偿付到期债务、履行其他支付义务和满足正常业务开展的资金需求的风险<br>B.由不完善或有问题的内部程序、员工及系统或外部事件所造成损失的风险","right":"B"},
-		{"text":"下列哪个说法是错误的?<br>A.证券从业人员不得直接或者间接利用他人提供或主动获取的内幕信息、未公开信息、商业秘密和客户信息谋取利益,谋取不正当利益<br>B.证券从业人员可以利用职权为近亲属或者其他利益关系人从事营利性经营活动提供便利条件","right":"B"},
-		
+	"ques": [{
+			"text": "本届冬奥会的吉祥物是福娃<br>A.正确<br>B.错误",
+			"right": "B"
+		},
+		{
+			"text": "北京是奥运会历史上第一个举办过夏季奥运会和冬季奥运会的城市<br>A.正确<br>B.错误",
+			"right": "A"
+		},
+		{
+			"text": "国际足球赛的常规比赛时间是90分钟。<br>A.正确<br>B.错误",
+			"right": "A"
+		},
+		{
+			"text": "最大的动物是蓝鲸。<br>A.正确<br>B.错误",
+			"right": "A"
+		},
+		{
+			"text": "五岳之一的中岳是指华山。<br>A.正确<br>B.错误",
+			"right": "B"
+		},
+		{
+			"text": "现代奥林匹克之父是顾拜旦。<br>A.正确<br>B.错误",
+			"right": "A"
+		},
+		{
+			"text": "最早的宗教是佛教。<br>A.正确<br>B.错误",
+			"right": "A"
+		},
+		{
+			"text": "外国债券的特点是债券发行人、债券的面值货币和发行市场同属于一个国家<br>A.正确<br>B.错误",
+			"right": "B"
+		},
+		{
+			"text": "有限责任公司设立监事会,其成员不得少于5人。<br>A.正确<br>B.错误",
+			"right": "B"
+		},
+		{
+			"text": "证券市场对中国经济更具消极作用。<br>A.正确<br>B.错误",
+			"right": "B"
+		},
+		{
+			"text": "资产负债比率是资产总额除以负债总额的百分比。<br>A.正确<br>B.错误",
+			"right": "B"
+		},
+		{
+			"text": "买进期货或期权同样都有权利和义务。<br>A.正确<br>B.错误",
+			"right": "B"
+		},
+		{
+			"text": "公司各业务部门、分支机构及子公司()作为风险管理第一责任人,应全面了解并在决策中充分考虑与业务相关的各类风险,及时识别、评估、监控、应对、报告相关风险,完善相关风险管理制度,并承担风险管理有效性的直接责任<br>A.负责人<br>B.合规风控岗",
+			"right": "A"
+		},
+		{
+			"text": "操作风险是指()<br>A.公司无法以合理成本及时获得充足资金,以偿付到期债务、履行其他支付义务和满足正常业务开展的资金需求的风险<br>B.由不完善或有问题的内部程序、员工及系统或外部事件所造成损失的风险",
+			"right": "B"
+		},
+		{
+			"text": "下列哪个说法是错误的?<br>A.证券从业人员不得直接或者间接利用他人提供或主动获取的内幕信息、未公开信息、商业秘密和客户信息谋取利益,谋取不正当利益<br>B.证券从业人员可以利用职权为近亲属或者其他利益关系人从事营利性经营活动提供便利条件",
+			"right": "B"
+		}
+
 	]
-}
+}

+ 14 - 0
success.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<link rel="stylesheet" href="css/over.css">
+	</head>
+	<body>
+		<section class="end-box full" id="endBox">
+			<div class="end" id="success">恭喜你<br/>答题之王就是您!!!</div>
+			<a href="https://www.100t.com/gjnh/2022.php"class="btn"><img src="img/pbtn2.png"></a>
+		</section>
+	</body>
+</html>