changzheng-H5/game5.html

<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" />
	</p>
	<div class="box_wrap">
		<ul class="imgList">
			<li><img style="width: .96rem;" src="img/game5/lin1.png" />
				<p></p>
			</li>
			<li><img style="width: .92rem;" src="img/game5/lin2.png" />
				<p></p>
			</li>
			<li><img style="width: .94rem;" src="img/game5/lin3.png" />
				<p></p>
			</li>
			<!--<li></li>
			<li></li>
			<li></li>-->
		</ul>
		<div class="clickIcon">
			<ul>
				<li class="click1 click"><img src="img/game5/icon1.png"/></li>
				<li class="click2 click"><img src="img/game5/icon2.png"/></li>
				<li class="click3 click"><img src="img/game5/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/game5.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="video5" controls="controls">
						<source src="img/video/game5.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 game5Above"><img src="img/aboveIcon.png" /></p>-->
		<p class="next game5Next"><img src="img/game5/sure.png" /></p>
	</div>
</div>
<script type="text/javascript">
	var num5 = [];
var video5 = document.getElementById("video5"); 
　　video5.loop = false;
　　video5.addEventListener('ended', function () {
		$('.book_box').fadeOut()
		$('.successBox').css('display', 'flex')
　　//监听到播放结束后，在此处可调用自己的接口
		console.log('播放完毕5')


　　}, false);
	$('.game5Index .click1').click(function() {
		$('.game5Index .click1 img').css('display','block')
		$('.game5Index .click1').animate({
			'top': '1.5%',
			"right": '17.5%',
			'transform': 'translate(-50%,-50%)'
		}, 1000)
		$('.game5Index .imgList li').eq(0).find('img').fadeOut(1500)
		$('.game5Index .imgList li').eq(0).find('p').fadeOut(1000)
		if(num5.indexOf('1')==-1){
			num5.push('1');
			success5();
		}
	})
	$('.game5Index .click2').click(function() {
		$('.game5Index .click2 img').css('display','block')
		
		$('.game5Index .click2').animate({
			'top': '3%',
			"right": '11.5%',
			'transform': 'translate(-50%,-50%)'
		}, 1000)
		$('.game5Index .imgList li').eq(1).find('img').fadeOut(1500)
		$('.game5Index .imgList li').eq(1).find('p').fadeOut(1000)
		
		if(num5.indexOf('2')==-1){
			num5.push('2');
			success5();
		}
	})
	$('.game5Index .click3').click(function() {
		$('.game5Index .click3 img').css('display','block')
		$('.game5Index .click3').animate({
			'top': '3%',
			"right": '1.5%',
			'transform': 'translate(-50%,-50%)',

		}, 1000)
		$('.game5Index .imgList li').eq(2).find('img').fadeOut(1500)
		$('.game5Index .imgList li').eq(2).find('p').fadeOut(1000)
		
		if(num5.indexOf('3')==-1){
			num5.push('3');
			success5();
		}
	})
	$('.game5Index .closeIcon').click(function() {
		$('.book_box').fadeOut()
		$('.successBox').css('display', 'flex')
		video5.pause()
		
	})
	function success5() {
		if(num5.length == 3) {
			console.log('成功')
			setTimeout(function() {
				$('.game5Index p.bgm img').eq(0).animate({
					'opacity':'0'
				},1000)
				$('.game5Index p.bgm img').eq(1).animate({
					'opacity':'1',
					'z-index':'99'
				},1000)
				$('.game5Index .box_wrap').fadeOut();
			}, 1500)

			setTimeout(function() {
				$('.game5Index .book_box').fadeIn()
				$('.game5Index .maskBgm').fadeIn(1000)
				video5.play()
			}, 4500)
		}
	}	
	$('.game5Above').click(function(){
		$('#game4').load('game4.html');
		$('.game5Index').remove();
		
		$('.fiveGame').css({'width':'0','height':'0'})
		$('#game5').css({'width':'0','height':'0'})
		$('.fourGame').css({'width':'100%','height':'100%'})
		$('#game4').css({'width':'100%','height':'100%'})
		
	})
	$('.game5Next').click(function(){
		$('.game5Index').remove();
		$('#success').load('success.html');
		
		$('.fiveGame').css({'width':'0','height':'0'})
		$('#game5').css({'width':'0','height':'0'})
		$('.win').css({'width':'100%','height':'100%'})
		$('#success').css({'width':'100%','height':'100%'})
	})
</script>