changzheng-H5/game4.html

<link rel="stylesheet" type="text/css" href="css/game4.css" />
<div class="game4Index">
	<p class="bgm"><img src="img/game4/game4Bgm.png" /></p>
	<div class="box_wrap">
		<ul class="imgList">
			<li><img style="width: .96rem;" 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 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 = 0;
//	var contList4 = [
//		'飞夺泸定桥：1935年5月，北上抗日的红军向天险大渡河挺进。大渡河水流湍急，两岸都是高山峻岭，只有一座铁索桥可以通过。这座铁索桥，就是红军北上必须夺取的泸定桥。国民党反动派派了两个团防守泸定桥，阻拦红军北上；后来又调了两个旅赶去增援，妄想把我红军消灭在桥头上。我军早就看穿了敌人的诡计。28日早上，红四团接到上级命令：“29日早晨夺下泸定桥！”时间只剩下20多个小时了',
//		'红四团离泸定桥还有240里。敌人的两个旅援兵正在对岸向泸定桥行进。抢在敌人前头，是我军战胜敌人的关键。红四团翻山越岭，沿路击溃了好几股阻击的敌人，到晚上7点钟，离泸定桥还有110里。战士们一整天没顾得上吃饭。天又下起雨来，把他们都淋透了。战胜敌人的决心使他们忘记了饥饿和疲劳。在漆黑的夜里，他们冒着雨，踩着泥水继续前进。忽然对岸出现了无数火把，像一条长蛇向泸定桥的',
//		'方向奔去，分明是敌人的增援部队。红四团的战士索性也点起火把，照亮了道路跟对岸的敌人赛跑。敌人看到了这边的火把，扯着嗓子喊：“你们是哪个部分的？”我们的战士高声答话：“是碰上红军撤下来的。”对岸的敌人并不疑心。两支军队像两条火龙，隔着大渡河走了二三十里。雨越下越猛，像瓢泼一样，把两岸的火把都浇灭了。对岸的敌人不能再走，只好停下来宿营。红四团仍旧摸黑冒雨前进，终于在',
//		'29日清晨赶到了泸定桥，把增援的两个旅的敌人抛在后面了。',
//	]

//	var liCont4 = '';
//	var pageNum4 = 1;
//	var total4= contList4.length
//	for(var i = 0; i <= contList4.length; i++) {
//		liCont4 += '<li>' + contList4[i] + '</i>'
//	}
//	$('.game4Index .textList').html(liCont4)
//	$('.game4Index .textList li').eq(0).show().siblings().hide()
//	$('.game4Index .pageNum span').text(total4)
//	$('.game4Index .pageNum text').text(pageNum4)

//	$('.game4Index  .leftIcon').click(function() {
//		if(pageNum4 > 1) {
//			pageNum4--;
//			$('.pageNum text').text(pageNum4)
//			$('.textList li').eq(pageNum4 - 1).show().siblings().hide()
//		}
//	})
//	$('.game4Index .rightIcon').click(function() {
//		if(pageNum4 < total4) {
//			pageNum4++;
//			$('.game4Index .pageNum text').text(pageNum4)
//			$('.game4Index .textList li').eq(pageNum4 - 1).show().siblings().hide()
//		}
//		if(pageNum4 == total4) {
//			setTimeout(function() {
//				$('.game4Index .book_box').fadeOut()
//				$('.game4Index .successBox').css('display', 'flex')
//			}, 1500)
//		}
//	})
	
	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": '25%',
			'transform': 'translate(-50%,-50%)'
		}, 1000)
//		setTimeout(function() {
//			$('.game4Index .click1').css('opacity', '0')
//		}, 1000)
		$('.game4Index .imgList li').eq(0).find('img').fadeOut(1500)
		num4++;
		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)
		num4++;
		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)
		num4++;
		success4();
	})
	$('.game4Index .closeIcon').click(function() {
		$('.book_box').fadeOut()
		$('.successBox').css('display', 'flex')
		video4.pause()
		

	})

	function success4() {
		if(num4 == 3) {
			console.log('成功')
			setTimeout(function() {
				$('.game4Index p.bgm img').attr('src', 'img/game4/successBgm.png')
				$('.game4Index .box_wrap').fadeOut();
			}, 1500)

			setTimeout(function() {
				$('.game4Index .book_box').fadeIn()
				$('.game4Index .maskBgm').fadeIn()
				video4.play()
			}, 3500)
		}
	}
	$('.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>