连接跳转

begin.html

@@ -123,7 +123,9 @@
 
 		$('.btn').click(function() {
 			if(clickState) {
-				window.location.href = "game1.html?audioState=" + audioState
+//				window.location.href = "game1.html?audioState=" + audioState
+			window.location.replace("game1.html?audioState=" + audioState)
+//				window.open
 			}
 
 			//console.log(audioState)

css/begin.css

@@ -108,7 +108,7 @@ li {
 	align-items: center;
 	justify-content: center;
 	font-size: .45rem;
-	margin-right:2rem;
+	margin-right: 2rem;
 	margin-top: -.5rem;
 	height: 4.5rem;
 	font-weight: bold;
@@ -121,36 +121,64 @@ li {
 	display: none;
 }
 
+.word p.contWord::-webkit-scrollbar-track-piece {
+	background-color: #999;
+	border-left: 1px solid #999;
+}
+
+.word p.contWord::-webkit-scrollbar {
+	width: 1px;
+	height:.13rem;
+	-webkit-border-radius: 1px;
+	-moz-border-radius: 1px;
+	border-radius: 1px;
+}
+
+.word p.contWord::-webkit-scrollbar-thumb {
+	background-color: rgba(0, 0, 0, 0.5);
+	background-clip: padding-box;
+	-webkit-border-radius: 1px;
+	-moz-border-radius: 1px;
+	border-radius: 1px;
+	min-height: pxTorem(28px);
+}
+
+.word p.contWord::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(0, 0, 0, 0.5);
+	-webkit-border-radius: 1px;
+	-moz-border-radius: 1px;
+	border-radius: 1px;
+}
+
 .bookImg .btn1 {
 	position: absolute;
 	left: 50%;
 	bottom: 3%;
-	
 	z-index: 99999;
 	display: none;
 	transform: translateX(-50%);
 	/*background: url(../img/game2/titleIcon.png) no-repeat;*/
 }
-.bookImg .btn1 span{
+
+.bookImg .btn1 span {
 	font-size: .36rem;
 	color: #fff;
-        display: flex;
-    /* margin: 0 auto; */
-    justify-content: center;
-    align-items: flex-end;
-   width: 3.83rem;
+	display: flex;
+	/* margin: 0 auto; */
+	justify-content: center;
+	align-items: flex-end;
+	width: 3.83rem;
 	height: .72rem;
 	line-height: .72rem;
-    position: absolute;
-    border-radius: 12px;
-      left: 50%;
-    bottom: 0%;
-    background: rgba(0,0,0,0.5);
-    transform: translateX(-50%);
-	
-}
-.bookImg .btn1 p{
-	
+	position: absolute;
+	border-radius: 12px;
+	left: 50%;
+	bottom: 0%;
+	background: rgba(0, 0, 0, 0.5);
+	transform: translateX(-50%);
+}
+
+.bookImg .btn1 p {
 	width: 3.83rem;
 	height: .72rem;
 	background: #999;
@@ -161,6 +189,7 @@ li {
 	text-align: center;
 	line-height: .82rem;
 }
-.bookImg .btn1 p.active{
+
+.bookImg .btn1 p.active {
 	background: #E40006;
-}
+}

game1.html

@@ -344,7 +344,7 @@
 	$('.deepBtn').click(function () {
 		var url = location.href.split('?')[1]
 		console.log(url)
-		window.location.href = "game2.html?" + url
+		window.location.replace("game2.html?" + url)
 	})
 
 	$('.close').on('touchstart', function () {

game2.html

@@ -131,7 +131,7 @@
 			<div class="deepBtn">进入第三关</div>
 			<p class="imgIcon"><img src="img/success/suc2.png" /></p>
 		</div>
-		<audio id="bgmAudio" hidden="true" autoplay="autoplay">
+		<audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true">
 			<source src="img/audio/game2Bgm.mp3" type="audio/mp3" />
 		</audio>
 		<audio id="trueAudio" hidden="true">
@@ -332,9 +332,13 @@
 	newstarindex=null
 	newendindex=null
 	var count = 10;
-
+	var trueAudio = document.getElementById('trueAudio');
+	var falseAudio = document.getElementById('falseAudio');
 	function click() {
 		$('#start li').on('touchstart', function(evt) {
+			trueAudio.pause();
+			falseAudio.pause();
+			
 			newstarindex=$(this).attr("data-true")
 			$('.posTip p').fadeOut(500)
 			//			console.log("按下")
@@ -435,7 +439,7 @@
 			}
 			if(newstarindex==newendindex){
 			// if(firstPoint !== null && endIndex == trueArr[startIndex] - 1) {
-				var trueAudio = document.getElementById('trueAudio');
+				
 				trueAudio.play();
 				audioAutoPlay('trueAudio')
 				clickArr.push(startIndex);
@@ -497,7 +501,7 @@
 				//错误
 				if(startIndex || startIndex == 0) {
 					$('.tipList li').eq(startIndex).removeClass('active')
-					var falseAudio = document.getElementById('falseAudio');
+				
 					falseAudio.play();
 					audioAutoPlay('falseAudio')
 				}
@@ -625,7 +629,7 @@
 
 		$('.deepBtn').click(function() {
 			var url = location.href.split('?')[1];
-			window.location.href = "game3.html?" + url
+			window.location.replace("game3.html?" + url)
 		})
 		$('.close').on('touchstart', function() {
 			$('.mask').fadeOut();

game3.html

@@ -102,7 +102,7 @@
 			<div class="deepBtn">进入第四关</div>
 			<p class="imgIcon"><img src="img/success/suc33.png" /></p>
 		</div>
-		<audio id="bgmAudio" hidden="true" autoplay="autoplay">
+		<audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true">
 			<source src="img/audio/game3Bgm.mp3" type="audio/mp3" />
 			<!--您的浏览器不支持 audio 标签。-->
 		</audio>
@@ -449,7 +449,7 @@
 
 		$('.deepBtn').click(function() {
 			var url = location.href.split('?')[1];
-			window.location.href = "game4.html?" + url
+			window.location.replace("game4.html?" + url)
 		})
 		$('.close').on('touchstart', function() {
 			$('.mask').fadeOut();

game4.html

@@ -134,7 +134,7 @@
 			<div class="deepBtn">进入第五关</div>
 			<p class="imgIcon"><img src="img/success/suc44.png" /></p>
 		</div>
-		<audio id="bgmAudio" hidden="true" autoplay="autoplay">
+		<audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true">
 			<source src="img/audio/game4Bgm.mp3" type="audio/mp3" />
 			<!--您的浏览器不支持 audio 标签。-->
 		</audio>
@@ -441,7 +441,7 @@
 					}
 					$('.deepBtn').click(function() {
 						var url = location.href.split('?')[1];
-						window.location.href = "game5.html?" + url
+						window.location.replace("game5.html?" + url)
 					})
 					$('.close').on('touchstart', function() {
 						$('.mask').fadeOut();

game5.html

@@ -169,7 +169,7 @@
 			</div>
 		</div>
 		<div class="audio">
-			<audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true">
+			<audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true" loop="true">
 				<source src="img/audio/game5Bgm.mp3" type="audio/mp3" />
 				<!--您的浏览器不支持 audio 标签。-->
 			</audio>

index.html

@@ -8,6 +8,10 @@
 		<meta name="description" content="this is my page">
 		<meta name="content-type" content="text/html; charset=UTF-8">
 		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
+		
+
+
+		
 		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
 		<script src="js/comment.js" type="text/javascript" charset="utf-8"></script>
 		<link rel="stylesheet" type="text/css" href="css/style.css" />
@@ -151,8 +155,9 @@
 			<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 
 		</div>
-
 		<script>
+		
+			
 			$(document).ready(function() {
 				//翻书数组
 				var contIndex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 19, 17, 18, 19]
@@ -281,9 +286,13 @@
 					setTimeout(function() {
 						$('.gifs').fadeOut()
 						$('.bookImg').fadeIn()
-//						$('.gifImg img').attr('src', 'img/stopBook.png')
+						//						$('.gifImg img').attr('src', 'img/stopBook.png')
 						setTimeout(function() {
-							$('.word').css({'display': 'flex'},{'z-index': '9999999'});
+							$('.word').css({
+								'display': 'flex'
+							}, {
+								'z-index': '9999999'
+							});
 							$('.word p.contWord').css('z-index', '9999999');
 							$('.word p.contWord').slideDown(1000)
 						}, 0)
@@ -299,12 +308,12 @@
 						}, 1000)
 
 						function news() {
-							
+
 							if(timeNum == 0) {
 								clearInterval(sec);
 								$('.btn1 p').addClass('active')
 								$('.btn1').on('click', function() {
-									window.location.href = "begin.html"
+									window.location.replace("begin.html")
 								})
 								$('.btn1 span').fadeOut(1000)
 							}