You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

179 lines
7.0 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. <link rel="stylesheet" type="text/css" href="css/game5.css" />
  2. <div class="game5Index">
  3. <p class="bgm">
  4. <img src="img/game5/bgm.gif" />
  5. <img src="img/game5/successBgm.gif" />
  6. </p>
  7. <div class="box_wrap">
  8. <ul class="imgList">
  9. <li><img style="width: .96rem;" src="img/game5/lin1.png" />
  10. <p></p>
  11. </li>
  12. <li><img style="width: .92rem;" src="img/game5/lin2.png" />
  13. <p></p>
  14. </li>
  15. <li><img style="width: .94rem;" src="img/game5/lin3.png" />
  16. <p></p>
  17. </li>
  18. <!--<li></li>
  19. <li></li>
  20. <li></li>-->
  21. </ul>
  22. <div class="clickIcon">
  23. <ul>
  24. <li class="click1 click"><img src="img/game5/icon1.png"/></li>
  25. <li class="click2 click"><img src="img/game5/icon2.png"/></li>
  26. <li class="click3 click"><img src="img/game5/icon3.png"/></li>
  27. </ul>
  28. </div>
  29. </div>
  30. <div class="book_box">
  31. <div class="line">
  32. <!--<p class="leftIcon">
  33. < </p>
  34. <p class="rightIcon"> > </p>-->
  35. </div>
  36. <div class="closeIcon"><img src="img/close.png" /></div>
  37. <div class="bookCont">
  38. <div class="leftImg">
  39. <div class="titleTip">
  40. <p>九个炊事员</p>
  41. <p class="img"><img src="img/img2.png" /></p>
  42. </div>
  43. <div class="imgList">
  44. <img src="img/game5.png" />
  45. </div>
  46. </div>
  47. <div class="rightCont">
  48. <div class="titleTip">
  49. <h2>故事原型</h2>
  50. <h5>九个炊事员</h5>
  51. </div>
  52. <ul class="textList">
  53. <video width="210" height="150" style="object-fit: fill;" id="video5" controls="controls">
  54. <source src="img/video/game5.mp4" type="video/mp4"></source>
  55. </video>
  56. </ul>
  57. <!--<p class="pageNum"><text>1</text>/<span>5</span></p>-->
  58. </div>
  59. </div>
  60. </div>
  61. <div class="maskBgm"></div>
  62. <!--下一关-->
  63. <div class="successBox">
  64. <p class="timeNum"></p>
  65. <!--<div class="shut"><img src="img/close.png" /></div>-->
  66. <!--<p class="above game5Above"><img src="img/aboveIcon.png" /></p>-->
  67. <p class="next game5Next" ><img src="img/game5/sure.png" /></p>
  68. </div>
  69. </div>
  70. <script type="text/javascript">
  71. var num5 = [];
  72. var video5 = document.getElementById("video5");
  73.   video5.loop = false;
  74.   video5.addEventListener('ended', function () {
  75. $('.book_box').fadeOut()
  76. $('.successBox').css('display', 'flex')
  77.   //监听到播放结束后,在此处可调用自己的接口
  78. console.log('播放完毕5')
  79.   }, false);
  80. $('.game5Index .click1').click(function() {
  81. $('.game5Index .click1 img').css('display','block')
  82. $('.game5Index .click1').animate({
  83. 'top': '1.5%',
  84. "right": '17.5%',
  85. 'transform': 'translate(-50%,-50%)'
  86. }, 1000)
  87. $('.game5Index .imgList li').eq(0).find('img').fadeOut(1500)
  88. $('.game5Index .imgList li').eq(0).find('p').fadeOut(1000)
  89. if(num5.indexOf('1')==-1){
  90. num5.push('1');
  91. success5();
  92. }
  93. })
  94. $('.game5Index .click2').click(function() {
  95. $('.game5Index .click2 img').css('display','block')
  96. $('.game5Index .click2').animate({
  97. 'top': '3%',
  98. "right": '11.5%',
  99. 'transform': 'translate(-50%,-50%)'
  100. }, 1000)
  101. $('.game5Index .imgList li').eq(1).find('img').fadeOut(1500)
  102. $('.game5Index .imgList li').eq(1).find('p').fadeOut(1000)
  103. if(num5.indexOf('2')==-1){
  104. num5.push('2');
  105. success5();
  106. }
  107. })
  108. $('.game5Index .click3').click(function() {
  109. $('.game5Index .click3 img').css('display','block')
  110. $('.game5Index .click3').animate({
  111. 'top': '3%',
  112. "right": '1.5%',
  113. 'transform': 'translate(-50%,-50%)',
  114. }, 1000)
  115. $('.game5Index .imgList li').eq(2).find('img').fadeOut(1500)
  116. $('.game5Index .imgList li').eq(2).find('p').fadeOut(1000)
  117. if(num5.indexOf('3')==-1){
  118. num5.push('3');
  119. success5();
  120. }
  121. })
  122. $('.game5Index .closeIcon').click(function() {
  123. $('.book_box').fadeOut()
  124. $('.successBox').css('display', 'flex')
  125. video5.pause()
  126. })
  127. function success5() {
  128. if(num5.length == 3) {
  129. if(allTime>999){
  130. $('.timeNum').text('999 ')
  131. }else{
  132. $('.timeNum').text(allTime)
  133. }
  134. console.log('成功')
  135. setTimeout(function() {
  136. $('.game5Index p.bgm img').eq(0).animate({
  137. 'opacity':'0'
  138. },1000)
  139. $('.game5Index p.bgm img').eq(1).animate({
  140. 'opacity':'1',
  141. 'z-index':'99'
  142. },1000)
  143. $('.game5Index .box_wrap').fadeOut();
  144. }, 1500)
  145. setTimeout(function() {
  146. $('.game5Index .book_box').fadeIn()
  147. $('.game5Index .maskBgm').fadeIn(1000)
  148. video5.play()
  149. }, 4500)
  150. }
  151. }
  152. $('.game5Above').click(function(){
  153. $('#game4').load('game4.html');
  154. $('.game5Index').remove();
  155. $('.fiveGame').css({'width':'0','height':'0'})
  156. $('#game5').css({'width':'0','height':'0'})
  157. $('.fourGame').css({'width':'100%','height':'100%'})
  158. $('#game4').css({'width':'100%','height':'100%'})
  159. })
  160. $('.game5Next').click(function(){
  161. $('.game5Index').remove();
  162. $('#success').load('success.html');
  163. $('.fiveGame').css({'width':'0','height':'0'})
  164. $('#game5').css({'width':'0','height':'0'})
  165. $('.win').css({'width':'100%','height':'100%'})
  166. $('#success').css({'width':'100%','height':'100%'})
  167. })
  168. </script>