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.

197 lines
8.6 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
  1. <link rel="stylesheet" type="text/css" href="css/game1.css" />
  2. <div class="game1Index">
  3. <p class="bgm">
  4. <img src="img/game1/bgm.png" />
  5. <img src="img/game1/successBgm.png" />
  6. </p>
  7. <div class="box_wrap">
  8. <ul class="imgList">
  9. <li><img style="width: .96rem;" src="img/game1/lin1.png" />
  10. <p></p>
  11. </li>
  12. <li><img style="width: .92rem;" src="img/game1/lin2.png" />
  13. <p></p>
  14. </li>
  15. <li><img style="width: .94rem;" src="img/game1/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/game1/icon1.png"/></li>
  25. <li class="click2 click"><img src="img/game1/icon2.png"/></li>
  26. <li class="click3 click"><img src="img/game1/icon3.png" /></li>
  27. </ul>
  28. </div>
  29. </div>
  30. <div class="book_box">
  31. <div class="line">
  32. <div>
  33. <p class="leftIcon"><img src="img/leftIcon.png"/> </p>
  34. <p class="rightIcon"> <img src="img/rightIcon.png"/> </p>
  35. </div>
  36. </div>
  37. <div class="closeIcon"><img src="img/close.png" /></div>
  38. <div class="bookCont">
  39. <div class="leftImg">
  40. <div class="titleTip">
  41. <p>强渡乌江</p>
  42. <p class="img"><img src="img/img2.png" /></p>
  43. </div>
  44. <div class="imgList">
  45. <img src="img/img1.png" />
  46. </div>
  47. </div>
  48. <div class="rightCont">
  49. <div class="titleTip">
  50. <h2>故事原型</h2>
  51. <h5>强渡乌江</h5>
  52. </div>
  53. <ul class="textList">
  54. <!--<li>飞夺泸定桥:1935年5月,北上抗日的红军向天险大渡河挺进。大渡河水流湍急,两岸都是高山峻岭,只有一座铁索桥可以通过。这座铁索桥,就是红军北上必须夺取的泸定桥。国民党反动派派了两个团防守泸定桥,阻拦红军北上;后来又调了两个旅赶去增援,妄想把我红军消灭在桥头上。我军早就看穿了敌人的诡计。28日早上,红四团接到上级命令:“29日早晨夺下泸定桥!”时间只剩下20多个小时了</li>
  55. <li>红四团离泸定桥还有240里。敌人的两个旅援兵正在对岸向泸定桥行进。抢在敌人前头,是我军战胜敌人的关键。红四团翻山越岭,沿路击溃了好几股阻击的敌人,到晚上7点钟,离泸定桥还有110里。战士们一整天没顾得上吃饭。天又下起雨来,把他们都淋透了。战胜敌人的决心使他们忘记了饥饿和疲劳。在漆黑的夜里,他们冒着雨,踩着泥水继续前进。忽然对岸出现了无数火把,像一条长蛇向泸定桥的</li>
  56. <li>方向奔去,分明是敌人的增援部队。红四团的战士索性也点起火把,照亮了道路跟对岸的敌人赛跑。敌人看到了这边的火把,扯着嗓子喊:“你们是哪个部分的?”我们的战士高声答话:“是碰上红军撤下来的。”对岸的敌人并不疑心。两支军队像两条火龙,隔着大渡河走了二三十里。雨越下越猛,像瓢泼一样,把两岸的火把都浇灭了。对岸的敌人不能再走,只好停下来宿营。红四团仍旧摸黑冒雨前进,终于在</li>
  57. <li>29日清晨赶到了泸定桥,把增援的两个旅的敌人抛在后面了。</li>-->
  58. </ul>
  59. <p class="pageNum"><text>1</text>/<span>5</span></p>
  60. </div>
  61. </div>
  62. </div>
  63. <div class="maskBgm"></div>
  64. <!--下一关-->
  65. <div class="successBox">
  66. <!--<div class="shut"><img src="img/close.png" /></div>-->
  67. <!--<p class="above"><img src="img/aboveIcon.png" /></p>-->
  68. <p class="next game1Next"><img src="img/nextIcon.png" /></p>
  69. </div>
  70. </div>
  71. <script type="text/javascript">
  72. var num = [];
  73. var leftArr = ['2%', '12%', '22%'];
  74. var contList = [
  75. '1935年1月,按照猴场会议作出的决定,红军开始向黔北地区挺近。而此时,横亘在他们面前的,是被称为“天险”的千里乌江和黔军的严密布防,身后是国民党的中央军步步紧逼。过不过得了乌江,关系红军存亡。1月1号到2号,抢渡乌江的战斗,在江界河渡口、龙溪回龙场渡口和茶山关渡口3个地方打响。由于江边所有的渡船和整块的木板都已经被敌军搜走,负责抢渡江界河渡口的红一军团第二师只能组织大家赶制竹筏渡江。',
  76. '但敌军火力猛烈,一天之内的两次渡江都失败了。其中一条竹筏上的5名指战员失踪。眼看突出重围的时间越来越紧迫。3号上午,红军二师决定在渡口上游实行强渡。但让第一批渡江的3只竹筏上的战士感到奇怪的是,就在他们即将冲上对岸时,敌军突然不向他们开枪了,纷纷转向了阵地后方。原来,头一天晚上失踪的5名红军指战员在夜色的掩护下摸到了敌人阵地身后,这时候突然杀了出来,配合主力渡江。',
  77. '出其不意的攻击,为渡江部队创造了宝贵的机会,很快,一个营的红军迅速渡江,抢占了高地。经过激烈的战斗,红军终于完全控制了乌江北岸,搭起了浮桥,中央红军大部队开始陆续过江。与此同时,右路纵队的红一军团主力和红九军团在龙溪回龙场渡口,左路纵队的红三军团在茶山关渡口组织的强渡也都取得了成功。把国民党军甩在了乌江以东和以南地区。突破乌江战役是红军长征以来取得的第一个较大胜利,',
  78. '大大鼓舞了红军的战斗意志,一扫长征以来的被动局面,红军开始把战争的主动权掌握在自己手里。(来源:贵州网络广播电视台)',
  79. ]
  80. var liCont = '';
  81. var pageNum = 1;
  82. var total = contList.length
  83. for(var i = 0; i <= contList.length; i++) {
  84. liCont += '<li>' + contList[i] + '</i>'
  85. }
  86. $('.game1Index .textList').html(liCont)
  87. $('.game1Index .textList li').eq(0).show().siblings().hide()
  88. $('.game1Index .pageNum span').text(total)
  89. $('.game1Index .pageNum text').text(pageNum)
  90. $('.game1Index .leftIcon').click(function() {
  91. if(pageNum > 1) {
  92. pageNum--;
  93. $('.game1Index .pageNum text').text(pageNum)
  94. $('.game1Index .textList li').eq(pageNum - 1).show().siblings().hide()
  95. }
  96. })
  97. $('.game1Index .rightIcon').click(function() {
  98. if(pageNum < total) {
  99. pageNum++;
  100. $('.game1Index .pageNum text').text(pageNum)
  101. $('.game1Index .textList li').eq(pageNum - 1).show().siblings().hide()
  102. }
  103. if(pageNum == total) {
  104. setTimeout(function() {
  105. $('.game1Index .book_box').fadeOut()
  106. $('.game1Index .successBox').css('display', 'flex')
  107. }, 1500)
  108. }
  109. })
  110. $('.game1Index .click1').click(function() {
  111. $('.game1Index .click1 img').css('display','block')
  112. $('.game1Index .click1').animate({
  113. 'top': '3.5%',
  114. "left": '2%',
  115. 'transform': 'translate(-50%,-50%)'
  116. }, 1000)
  117. // setTimeout(function() {
  118. // $('.game1Index .click1').css('opacity', '0')
  119. // }, 1000)
  120. $('.game1Index .imgList li').eq(0).find('img').fadeOut(1500)
  121. if(num.indexOf('1')==-1){
  122. num.push('1');
  123. success();
  124. }
  125. })
  126. $('.game1Index .click2').click(function() {
  127. $('.game1Index .click2 img').css('display','block')
  128. $('.game1Index .click2').animate({
  129. 'top': '4%',
  130. "left": '12%',
  131. 'transform': 'translate(-50%,-50%)'
  132. }, 1000)
  133. // setTimeout(function() {
  134. // $('.game1Index .click2').css('opacity', '0')
  135. // }, 1000)
  136. $('.game1Index .imgList li').eq(1).find('img').fadeOut(1500)
  137. if(num.indexOf('2')==-1){
  138. num.push('2');
  139. success();
  140. }
  141. })
  142. $('.game1Index .click3').click(function() {
  143. $('.game1Index .click3 img').css('display','block')
  144. $('.game1Index .click3').animate({
  145. 'top': '10%',
  146. "left": '19%',
  147. 'transform': 'translate(-50%,-50%)',
  148. }, 1000)
  149. // setTimeout(function() {
  150. // $('.game1Index .click3').css('opacity', '0')
  151. // }, 1000)
  152. $('.game1Index .imgList li').eq(2).find('img').fadeOut(1500)
  153. if(num.indexOf('3')==-1){
  154. num.push('3');
  155. success();
  156. }
  157. })
  158. $('.game1Index .closeIcon').click(function() {
  159. $('.game1Index .book_box').fadeOut()
  160. $('.game1Index .successBox').css('display', 'flex')
  161. })
  162. function success() {
  163. if(num.length == 3) {
  164. console.log('成功')
  165. setTimeout(function() {
  166. // $('.game1Index p.bgm img').attr('src', 'img/game1/successBgm.png')
  167. $('.game1Index p.bgm img').eq(0).animate({
  168. 'opacity':'0'
  169. },1000)
  170. $('.game1Index p.bgm img').eq(1).animate({
  171. 'opacity':'1',
  172. 'z-index':'99'
  173. },1000)
  174. $('.game1Index .box_wrap').fadeOut();
  175. }, 1500)
  176. setTimeout(function() {
  177. $('.game1Index .book_box').fadeIn()
  178. $('.game1Index .maskBgm').fadeIn(1000)
  179. }, 3500)
  180. }
  181. }
  182. $('.game1Next').click(function(){
  183. $('.firstGame').css({'width':'0','height':'0'})
  184. $('#game1').css({'width':'0','height':'0'})
  185. $('.game1Index').remove();
  186. $('#game2').load('game2.html')
  187. $('.secondGame').css({'width':'100%','height':'100%'})
  188. $('#game2').css({'width':'100%','height':'100%'})
  189. })
  190. </script>