修改动图

begin.html

@@ -154,7 +154,7 @@
 				</ul>
 			</div>
 			<div class="countDown">
-				<text>10</text>（s）
+				<text>5</text>（s）
 			</div>
 		</div>
 	</div>
@@ -166,6 +166,8 @@
 	<div class="mask"></div>
 </div>
 <script type="text/javascript">
+	 var allTime = 0;
+	 var timeSet ;
 	$('.close').click(function(){
 		$('.mask').fadeOut();
 		$('.guizBox').fadeOut()
@@ -179,6 +181,10 @@
 		$('.begin').fadeOut(100)
 		$('.loading').fadeOut(100)
 		$('#game1').fadeIn(500)
+		timeSet= setInterval(function(){
+	 		allTime++
+	 	},1000)
+		
 	})
 	//倒计时
 	

css/game1.css

@@ -53,8 +53,8 @@
 	width: 1rem;
 	height: 1rem;
 	position: absolute;
-	left: 0;
-	top: 0;
+	/*left: 0;
+	top: 0;*/
 	/*background: #000000;
 	opacity: .5;*/
 }
@@ -65,10 +65,10 @@
 }
 
 .game1Index .clickIcon li.click2 {
-	top: 16%;
-	left: 46%;
-	width: .5rem;
-	height: .5rem;
+	bottom: 23%;
+    left: 40%;
+    width: 1.5rem;
+    height: 1rem;
 }
 
 .game1Index .clickIcon img {

css/game2.css

@@ -45,7 +45,7 @@
 }
 .game2Index .clickIcon li.click1{
 	top: 6%;
-    right: 52%;
+    left: 32%;
     background-size: 100% 100%;
 }
 .game2Index .clickIcon li img{
@@ -53,9 +53,11 @@
 	display: none;
 }
 .game2Index .clickIcon li.click2{
-	top: 9%;
-    right:67%;
+	top: 34%;
+    right: 66%;
     background-size: 100% 100%;
+    /*background: rgba(0,0,0,.5);*/
+    width: 1.5rem;
 }
 .game2Index .clickIcon li.click3{
 	top: 78%;

css/game4.css

@@ -5,6 +5,12 @@
 
 .snowList {
 	/*display: none;*/
+	width: 100%;
+	 height: 100%;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
 }
 .snow {
 	font-family: icon;

css/game5.css

@@ -221,4 +221,17 @@
 	align-items: flex-end;
 	display: none;
 	z-index: 99;
-}
+}
+/*历时时间*/
+.game5Index  .timeNum{
+	font-size: .72rem;
+    font-weight: bold;
+    font-stretch: normal;
+    /* letter-spacing: 5px; */
+    color: #ffffff;
+    -webkit-text-stroke: 2px #306169;
+    position: absolute;
+    left: 61.5%;
+    top: 56%;
+    transform: translate(-50%, -50%);
+}

game1.html

@@ -1,8 +1,8 @@
 <link rel="stylesheet" type="text/css" href="css/game1.css" />
 <div class="game1Index">
 	<p class="bgm">
-		<img src="img/game1/bgm.png" />
-		<img src="img/game1/successBgm.png" />
+		<img src="img/game1/bgm.gif" />
+		<img src="img/game1/successBgm.gif" />
 	</p>
 	
 	<div class="box_wrap">

game2.html

@@ -1,8 +1,8 @@
 <link rel="stylesheet" type="text/css" href="css/game2.css" />
 <div class="game2Index">
 	<p class="bgm">
-		<img src="img/game2/game2Bgm.png" />
-		<img src="img/game2/successBgm.png"/>
+		<img src="img/game2/game2Bgm.gif" />
+		<img src="img/game2/successBgm.gif"/>
 	</p>
 	<div class="box_wrap">
 		<ul class="imgList">
@@ -113,8 +113,8 @@
 	$('.game2Index .click1').click(function() {
 		$('.game2Index .click1 img').css('display','block')
 		$('.game2Index .click1').animate({
-			'top': '0.5%',
-			"right": '21%',
+			'top': '1.5%',
+			"left": '71%',
 			'transform': 'translate(-50%,-50%)'
 		}, 1000)
 //		setTimeout(function() {
@@ -131,8 +131,8 @@
 	$('.game2Index .click2').click(function() {
 		$('.game2Index .click2 img').css('display','block')
 		$('.game2Index .click2').animate({
-			'top': '4%',
-			"right": '12%',
+			'top': '3%',
+			"right": '8%',
 			'transform': 'translate(-50%,-50%)'
 		}, 1000)
 //		setTimeout(function() {

game3.html

@@ -1,8 +1,8 @@
 <link rel="stylesheet" type="text/css" href="css/game3.css" />
 <div class="game3Index">
 	<p class="bgm">
-		<img src="img/game3/bgm.png" />
-		<img src="img/game3/successBgm.png" />
+		<img src="img/game3/bgm.gif" />
+		<img src="img/game3/successBgm.gif" />
 	</p>
 	<div class="box_wrap">
 		<ul class="imgList">

game4.html

@@ -3,7 +3,7 @@
 	<div class="snowList"></div>
 	<p class="bgm">
 		<img src="img/game4/game4Bgm.png" />
-		<img src="img/game4/successBgm.png" />
+		<img src="img/game4/successBgm.gif" />
 	</p>
 	<div class="box_wrap">
 		<ul class="imgList">

game5.html

@@ -1,8 +1,8 @@
 <link rel="stylesheet" type="text/css" href="css/game5.css" />
 <div class="game5Index">
 	<p class="bgm">
-		<img src="img/game5/bgm.png" />
-		<img src="img/game5/successBgm.png" />
+		<img src="img/game5/bgm.gif" />
+		<img src="img/game5/successBgm.gif" />
 	</p>
 	<div class="box_wrap">
 		<ul class="imgList">
@@ -61,6 +61,7 @@
 	<div class="maskBgm"></div>
 	<!--下一关-->
 	<div class="successBox">
+		<p class="timeNum"></p>
 		<!--<div class="shut"><img src="img/close.png" /></div>-->
 		<!--<p class="above game5Above"><img src="img/aboveIcon.png" /></p>-->
 		<p class="next game5Next"><img src="img/game5/sure.png" /></p>
@@ -132,6 +133,12 @@ var video5 = document.getElementById("video5");
 	})
 	function success5() {
 		if(num5.length == 3) {
+			if(allTime>999){
+				$('.timeNum').text('999                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ')
+			}else{
+				$('.timeNum').text(allTime)
+			}
+			
 			console.log('成功')
 			setTimeout(function() {
 				$('.game5Index p.bgm img').eq(0).animate({

index.html

@@ -93,7 +93,7 @@
 					$('.flex-center').fadeOut(10)
 					//					$('.begin').fadeIn(100)
 					$('.load').attr('src', 'img/begin.png')
-					var num = 3;
+					var num = 5;
 	
 					var timeDown = setInterval(function(){
 						console.log(num--)