changzheng-H5/game4.html

<link rel="stylesheet" type="text/css" href="css/game4.css" />
<div class="game4Index">
	<div class="snowList"></div>
	<p class="bgm">
		<img src="img/game4/game4Bgm.png" />
		<img src="img/game4/successBgm.gif" />
	</p>
	<div class="box_wrap">
		<ul class="imgList">
			<li><img style="width: .7rem;" src="img/game4/lin1.png" />
				<p></p>
			</li>
			<li><img style="width: .92rem;" src="img/game4/lin2.png" />
				<p></p>
			</li>
			<li><img style="width: .94rem;" src="img/game4/lin3.png" />
				<p></p>
			</li>
			<!--<li></li>
			<li></li>
			<li></li>-->
		</ul>
		<div class="clickIcon">
			<ul>
				<li class="click1 click"><img style="width: .7rem;" src="img/game4/icon1.png"/></li>
				<li class="click2 click"><img src="img/game4/icon2.png"/></li>
				<li class="click3 click"><img src="img/game4/icon3.png"/></li>
			</ul>
		</div>
	</div>
	<div class="book_box">
		<div class="line">
			<!--<p class="leftIcon">
				< </p>
					<p class="rightIcon"> > </p>-->
		</div>
		<div class="closeIcon"><img src="img/close.png" /></div>
		<div class="bookCont">
			<div class="leftImg">
				<div class="titleTip">
					<p>飞跃夹金山</p>
					<p class="img"><img src="img/img2.png" /></p>
				</div>
				<div class="imgList">
					<img src="img/game4.png" />
				</div>
			</div>
			<div class="rightCont">
				<div class="titleTip">
					<h2>故事原型</h2>
					<h5>飞跃夹金山</h5>
				</div>
				<ul class="textList">
					<video width="210" height="150" style="object-fit: fill;" id="video4" controls="controls">
						<source src="img/video/game4.mp4" type="video/mp4"></source>
					</video>
				</ul>
				<!--<p class="pageNum"><text>1</text>/<span>5</span></p>-->
			</div>
		</div>
	</div>
	<div class="maskBgm"></div>
	<!--下一关-->
	<div class="successBox">
		<!--<div class="shut"><img src="img/close.png" /></div>-->
		<p class="above game4Above"><img src="img/aboveIcon.png" /></p>
		<p class="next game4Next"><img src="img/nextIcon.png" /></p>
	</div>
</div>
<script type="text/javascript">
	var num4 = [];
	$(function(){
		$('.snowList').fadeIn(1000)
	})
	
	var video4 = document.getElementById("video4"); 
　　video4.loop = false;
　　video4.addEventListener('ended', function () {
		$('.book_box').fadeOut()
		$('.successBox').css('display', 'flex')
　　			//监听到播放结束后，在此处可调用自己的接口
		console.log('播放完毕')
　　}, false);
	
	
	$('.game4Index .click1').click(function() {
		$('.game4Index .click1 img').css('display','block')
		$('.game4Index .click1').animate({
			'top': '2.5%',
			"right": '24%',
			'transform': 'translate(-50%,-50%)'
		}, 1000)
		
//		setTimeout(function() {
//			$('.game4Index .click1').css('opacity', '0')
//		}, 1000)
		$('.game4Index .imgList li').eq(0).find('img').fadeOut(1500)
		$('.game4Index .imgList li').eq(0).find('p').fadeOut(1000)
		if(num4.indexOf('1')==-1){
			num4.push('1');
			success4();
		}
	})
	$('.game4Index .click2').click(function() {
		$('.game4Index .click2 img').css('display','block')
		
		$('.game4Index .click2').animate({
			'top': '5%',
			"right": '11.5%',
			'transform': 'translate(-50%,-50%)'
		}, 1000)
//		setTimeout(function() {
//			$('.game4Index .click2').css('opacity', '0')
//		}, 1000)
		$('.game4Index .imgList li').eq(1).find('img').fadeOut(1500)
		$('.game4Index .imgList li').eq(1).find('p').fadeOut(1000)
		
		if(num4.indexOf('2')==-1){
			num4.push('2');
			success4();
		}
	})
	$('.game4Index .click3').click(function() {
		$('.game4Index .click3 img').css('display','block')
		$('.game4Index .click3').animate({
			'top': '2%',
			"right": '4.5%',
			'transform': 'translate(-50%,-50%)',

		}, 1000)
//		setTimeout(function() {
//			$('.game4Index .click3').css('opacity', '0')
//		}, 1000)
		$('.game4Index .imgList li').eq(2).find('img').fadeOut(1500)
		$('.game4Index .imgList li').eq(2).find('p').fadeOut(1000)
		
		if(num4.indexOf('3')==-1){
			num4.push('3');
			success4();
		}
	})
	$('.game4Index .closeIcon').click(function() {
		$('.book_box').fadeOut()
		$('.successBox').css('display', 'flex')
		video4.pause()
		

	})

	function success4() {
		if(num4.length == 3) {
			console.log('成功')
			setTimeout(function() {
				$('.game4Index p.bgm img').eq(0).animate({
					'opacity':'0'
				},1000)
				$('.game4Index p.bgm img').eq(1).animate({
					'opacity':'1',
					'z-index':'99'
				},1000)
				$('.game4Index .box_wrap').fadeOut();
			}, 1500)

			setTimeout(function() {
				$('.snowList').remove()
				$('.game4Index .book_box').fadeIn()
				$('.game4Index .maskBgm').fadeIn(1000)
				video4.play()
			}, 4500)
		}
	}
	$('.game4Above').click(function(){
		$('#game3').load('game3.html');
		$('.game4Index').remove();
		
		$('.thirdGame').css({'width':'100%','height':'100%'})
		$('#game3').css({'width':'100%','height':'100%'})
		$('.fourGame').css({'width':'0','height':'0'})
		$('#game4').css({'width':'0','height':'0'})
		
	})
	$('.game4Next').click(function(){
		$('.game4Index').remove();
		$('#game5').load('game5.html');
		
		$('.fourGame').css({'width':'0','height':'0'})
		$('#game4').css({'width':'0','height':'0'})
		$('.fiveGame').css({'width':'100%','height':'100%'})
		$('#game5').css({'width':'100%','height':'100%'})
	})
</script>