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.

202 lines
10 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
  1. <link rel="stylesheet" type="text/css" href="css/game2.css" />
  2. <div class="game2Index">
  3. <p class="bgm">
  4. <img src="img/game2/game2Bgm.png" />
  5. <img src="img/game2/successBgm.png"/>
  6. </p>
  7. <div class="box_wrap">
  8. <ul class="imgList">
  9. <li><img style="width: .96rem;" src="img/game2/lin1.png" />
  10. <p></p>
  11. </li>
  12. <li><img style="width: .92rem;" src="img/game2/lin2.png" />
  13. <p></p>
  14. </li>
  15. <li><img style="width: .94rem;" src="img/game2/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/game2/icon1.png" /></li>
  25. <li class="click2 click"><img src="img/game2/icon2.png" /></li>
  26. <li class="click3 click"><img src="img/game2/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/game2.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 game2Above"><img src="img/aboveIcon.png" /></p>
  68. <p class="next game2Next"><img src="img/nextIcon.png" /></p>
  69. </div>
  70. </div>
  71. <script type="text/javascript">
  72. var num2 = [];
  73. var contList2 = [
  74. '1935年5月,北上抗日的红军向天险大渡河挺进。大渡河水流湍急,两岸都是高山峻岭,只有一座铁索桥可以通过。这座铁索桥,就是红军北上必须夺取的泸定桥。国民党反动派派了两个团防守泸定桥,阻拦红军北上;后来又调了两个旅赶去增援,妄想把我红军消灭在桥头上。我军早就看穿了敌人的诡计。28日早上,红四团接到上级命令:“29日早晨夺下泸定桥!”时间只剩下20多个小时了,红四团离泸定桥还有240里。',
  75. '敌人的两个旅援兵正在对岸向泸定桥行进。抢在敌人前头,是我军战胜敌人的关键。红四团翻山越岭,沿路击溃了好几股阻击的敌人,到晚上7点钟,离泸定桥还有110里。战士们一整天没顾得上吃饭。天又下起雨来,把他们都淋透了。战胜敌人的决心使他们忘记了饥饿和疲劳。在漆黑的夜里,他们冒着雨,踩着泥水继续前进。忽然对岸出现了无数火把,像一条长蛇向泸定桥的方向奔去,分明是敌人的增援部队。',
  76. '红四团的战士索性也点起火把,照亮了道路跟对岸的敌人赛跑。敌人看到了这边的火把,扯着嗓子喊:“你们是哪个部分的?”我们的战士高声答话:“是碰上红军撤下来的。”对岸的敌人并不疑心。两支军队像两条火龙,隔着大渡河走了二三十里。雨越下越猛,像瓢泼一样,把两岸的火把都浇灭了。对岸的敌人不能再走,只好停下来宿营。红四团仍旧摸黑冒雨前进,终于在29日清晨赶到了泸定桥,把增援的两个旅的敌人抛在后面了。',
  77. '泸定桥离水面有好几丈高,是由13根铁链组成的:两边各有两根,算是桥栏;底下并排9根,铺上木板,就是桥面。人走在桥上摇摇晃晃,就像荡秋千似的。现在连木板也被敌人抽掉了,只剩下铁链。向桥下一看,真叫人心惊胆寒,红褐色的河水像瀑布一样,从上游的山峡里直泻下来,撞击在岩石上,溅起一丈多高的浪花,涛声震耳欲聋。桥对岸的泸定桥背靠着山,西门正对着桥头。守城的两个团的敌人早已在城墙和山坡上筑好工事,凭着天险,疯狂地向红军喊叫:“来吧,看你们飞过来吧!”',
  78. '红四团马上发起总攻。团长和政委亲自站在桥头上指挥战斗。号手们吹起冲锋号,所有武器一齐开火,枪炮声,喊杀声,霎时间震动山谷。二连担任突击队,22位英雄拿着短枪,背着马刀,带着手榴弹,冒着敌人密集的枪弹,攀着铁链向对岸冲去。跟在他们后面的是三连,战士们除了武器,每人带一块木板,一边前进一边铺桥。突击队刚刚冲到对岸,敌人就放起火来,桥头立刻被大火包围了。在这千钧一发的时刻,传来了团长和政委的喊声:“同志们!为了党的事业,为了最后的胜利,冲呀!”',
  79. '英雄们听到党的号召,更加奋不顾身,都箭一般地穿过熊熊大火,冲进城去,和城里的敌人展开了激烈的搏斗。激战了两个小时,守城的敌人被消灭了大半,其余的都狼狈地逃跑了。红四团英勇地夺下了泸定桥,取得了长征中的又一次决定性的胜利。红军的主力渡过了天险大渡河,浩浩荡荡地奔赴抗日的最前线。(来源:北师大版第七册课文)'
  80. ]
  81. var liCont2 = '';
  82. var pageNum2 = 1;
  83. var total2 = contList2.length
  84. for(var i = 0; i <= contList2.length; i++) {
  85. liCont2 += '<li>' + contList2[i] + '</i>'
  86. }
  87. $('.game2Index .textList').html(liCont2)
  88. $('.game2Index .textList li').eq(0).show().siblings().hide()
  89. $('.game2Index .pageNum span').text(total2)
  90. $('.game2Index .pageNum text').text(pageNum2)
  91. $('.game2Index .leftIcon').click(function() {
  92. if(pageNum2 > 1) {
  93. pageNum2--;
  94. $('.pageNum text').text(pageNum2)
  95. $('.textList li').eq(pageNum2 - 1).show().siblings().hide()
  96. }
  97. })
  98. $('.game2Index .rightIcon').click(function() {
  99. if(pageNum2 < total2) {
  100. pageNum2++;
  101. $('.game2Index .pageNum text').text(pageNum2)
  102. $('.game2Index .textList li').eq(pageNum2 - 1).show().siblings().hide()
  103. }
  104. if(pageNum2 == total2) {
  105. setTimeout(function() {
  106. $('.game2Index .book_box').fadeOut()
  107. $('.game2Index .successBox').css('display', 'flex')
  108. }, 1500)
  109. }
  110. })
  111. $('.game2Index .click1').click(function() {
  112. $('.game2Index .click1 img').css('display','block')
  113. $('.game2Index .click1').animate({
  114. 'top': '0.5%',
  115. "right": '21%',
  116. 'transform': 'translate(-50%,-50%)'
  117. }, 1000)
  118. // setTimeout(function() {
  119. // $('.game2Index .click1').css('opacity', '0')
  120. // }, 1000)
  121. $('.game2Index .imgList li').eq(0).find('img').fadeOut(1500)
  122. if(num2.indexOf('1')==-1){
  123. num2.push('1');
  124. success2();
  125. }
  126. })
  127. $('.game2Index .click2').click(function() {
  128. $('.game2Index .click2 img').css('display','block')
  129. $('.game2Index .click2').animate({
  130. 'top': '4%',
  131. "right": '12%',
  132. 'transform': 'translate(-50%,-50%)'
  133. }, 1000)
  134. // setTimeout(function() {
  135. // $('.game2Index .click2').css('opacity', '0')
  136. // }, 1000)
  137. $('.game2Index .imgList li').eq(1).find('img').fadeOut(1500)
  138. if(num2.indexOf('2')==-1){
  139. num2.push('2');
  140. success2();
  141. }
  142. })
  143. $('.game2Index .click3').click(function() {
  144. $('.game2Index .click3 img').css('display','block')
  145. $('.game2Index .click3').animate({
  146. 'top': '4%',
  147. "right": '0%',
  148. 'transform': 'translate(-50%,-50%)',
  149. }, 1000)
  150. // setTimeout(function() {
  151. // $('.game2Index .click3').css('opacity', '0')
  152. // }, 1000)
  153. $('.game2Index .imgList li').eq(2).find('img').fadeOut(1500)
  154. if(num2.indexOf('3')==-1){
  155. num2.push('3');
  156. success2();
  157. }
  158. })
  159. $('.game2Index .closeIcon').click(function() {
  160. $('.game2Index .book_box').fadeOut()
  161. $('.game2Index .successBox').css('display', 'flex')
  162. })
  163. function success2() {
  164. if(num2.length == 3) {
  165. console.log('成功')
  166. setTimeout(function() {
  167. $('.game2Index p.bgm img').eq(0).animate({
  168. 'opacity':'0'
  169. },1000)
  170. $('.game2Index p.bgm img').eq(1).animate({
  171. 'opacity':'1',
  172. 'z-index':'99'
  173. },1000)
  174. $('.game2Index .box_wrap').fadeOut();
  175. }, 1500)
  176. setTimeout(function() {
  177. $('.game2Index .book_box').fadeIn()
  178. $('.game2Index .maskBgm').fadeIn(1000)
  179. }, 3500)
  180. }
  181. }
  182. $('.game2Above').click(function(){
  183. $('.firstGame').css({'width':'100%','height':'100%'})
  184. $('#game1').css({'width':'100%','height':'100%'})
  185. $('.secondGame').css({'width':'0','height':'0'})
  186. $('#game2').css({'width':'0','height':'0'})
  187. $('#game1').load("game1.html")
  188. $('.game2Index').remove();
  189. })
  190. $('.game2Next').click(function(){
  191. $('.game2Index').remove();
  192. $('#game3').load('game3.html');
  193. $('.secondGame').css({'width':'0','height':'0'})
  194. $('#game2').css({'width':'0','height':'0'})
  195. $('.thirdGame').css({'width':'100%','height':'100%'})
  196. $('#game3').css({'width':'100%','height':'100%'})
  197. })
  198. </script>