|
|
|
@ -0,0 +1,187 @@ |
|
|
|
<link rel="stylesheet" type="text/css" href="css/game2.css" /> |
|
|
|
<div class="game2Index"> |
|
|
|
<p class="bgm"><img src="img/game2/game2Bgm.png" /></p> |
|
|
|
<div class="box_wrap"> |
|
|
|
<ul class="imgList"> |
|
|
|
<li><img style="width: .96rem;" src="img/game2/lin1.png" /> |
|
|
|
<p></p> |
|
|
|
</li> |
|
|
|
<li><img style="width: .92rem;" src="img/game2/lin2.png" /> |
|
|
|
<p></p> |
|
|
|
</li> |
|
|
|
<li><img style="width: .94rem;" src="img/game2/lin3.png" /> |
|
|
|
<p></p> |
|
|
|
</li> |
|
|
|
<!--<li></li> |
|
|
|
<li></li> |
|
|
|
<li></li>--> |
|
|
|
</ul> |
|
|
|
<div class="clickIcon"> |
|
|
|
<ul> |
|
|
|
<li class="click1 click"><img src="img/game2/icon1.png" /></li> |
|
|
|
<li class="click2 click"><img src="img/game2/icon2.png" /></li> |
|
|
|
<li class="click3 click"><img src="img/game2/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/game2.png" /></p> |
|
|
|
</div> |
|
|
|
<div class="imgList"> |
|
|
|
<img src="img/img1.png" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="rightCont"> |
|
|
|
<div class="titleTip"> |
|
|
|
<h2>故事原型</h2> |
|
|
|
<h5>飞夺泸定桥</h5> |
|
|
|
</div> |
|
|
|
<ul class="textList"> |
|
|
|
<!--<li>飞夺泸定桥：1935年5月，北上抗日的红军向天险大渡河挺进。大渡河水流湍急，两岸都是高山峻岭，只有一座铁索桥可以通过。这座铁索桥，就是红军北上必须夺取的泸定桥。国民党反动派派了两个团防守泸定桥，阻拦红军北上；后来又调了两个旅赶去增援，妄想把我红军消灭在桥头上。我军早就看穿了敌人的诡计。28日早上，红四团接到上级命令：“29日早晨夺下泸定桥！”时间只剩下20多个小时了</li> |
|
|
|
<li>红四团离泸定桥还有240里。敌人的两个旅援兵正在对岸向泸定桥行进。抢在敌人前头，是我军战胜敌人的关键。红四团翻山越岭，沿路击溃了好几股阻击的敌人，到晚上7点钟，离泸定桥还有110里。战士们一整天没顾得上吃饭。天又下起雨来，把他们都淋透了。战胜敌人的决心使他们忘记了饥饿和疲劳。在漆黑的夜里，他们冒着雨，踩着泥水继续前进。忽然对岸出现了无数火把，像一条长蛇向泸定桥的</li> |
|
|
|
<li>方向奔去，分明是敌人的增援部队。红四团的战士索性也点起火把，照亮了道路跟对岸的敌人赛跑。敌人看到了这边的火把，扯着嗓子喊：“你们是哪个部分的？”我们的战士高声答话：“是碰上红军撤下来的。”对岸的敌人并不疑心。两支军队像两条火龙，隔着大渡河走了二三十里。雨越下越猛，像瓢泼一样，把两岸的火把都浇灭了。对岸的敌人不能再走，只好停下来宿营。红四团仍旧摸黑冒雨前进，终于在</li> |
|
|
|
<li>29日清晨赶到了泸定桥，把增援的两个旅的敌人抛在后面了。</li>--> |
|
|
|
</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 game2Above"><img src="img/aboveIcon.png" /></p> |
|
|
|
<p class="next game2Next"><img src="img/nextIcon.png" /></p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<script type="text/javascript"> |
|
|
|
var num2 = 0; |
|
|
|
var contList2 = [ |
|
|
|
'1935年5月，北上抗日的红军向天险大渡河挺进。大渡河水流湍急，两岸都是高山峻岭，只有一座铁索桥可以通过。这座铁索桥，就是红军北上必须夺取的泸定桥。国民党反动派派了两个团防守泸定桥，阻拦红军北上；后来又调了两个旅赶去增援，妄想把我红军消灭在桥头上。我军早就看穿了敌人的诡计。28日早上，红四团接到上级命令：“29日早晨夺下泸定桥！”时间只剩下20多个小时了，红四团离泸定桥还有240里。', |
|
|
|
'敌人的两个旅援兵正在对岸向泸定桥行进。抢在敌人前头，是我军战胜敌人的关键。红四团翻山越岭，沿路击溃了好几股阻击的敌人，到晚上7点钟，离泸定桥还有110里。战士们一整天没顾得上吃饭。天又下起雨来，把他们都淋透了。战胜敌人的决心使他们忘记了饥饿和疲劳。在漆黑的夜里，他们冒着雨，踩着泥水继续前进。忽然对岸出现了无数火把，像一条长蛇向泸定桥的方向奔去，分明是敌人的增援部队。', |
|
|
|
'红四团的战士索性也点起火把，照亮了道路跟对岸的敌人赛跑。敌人看到了这边的火把，扯着嗓子喊：“你们是哪个部分的？”我们的战士高声答话：“是碰上红军撤下来的。”对岸的敌人并不疑心。两支军队像两条火龙，隔着大渡河走了二三十里。雨越下越猛，像瓢泼一样，把两岸的火把都浇灭了。对岸的敌人不能再走，只好停下来宿营。红四团仍旧摸黑冒雨前进，终于在29日清晨赶到了泸定桥，把增援的两个旅的敌人抛在后面了。', |
|
|
|
'泸定桥离水面有好几丈高，是由13根铁链组成的:两边各有两根，算是桥栏;底下并排9根，铺上木板，就是桥面。人走在桥上摇摇晃晃，就像荡秋千似的。现在连木板也被敌人抽掉了，只剩下铁链。向桥下一看，真叫人心惊胆寒，红褐色的河水像瀑布一样，从上游的山峡里直泻下来，撞击在岩石上，溅起一丈多高的浪花，涛声震耳欲聋。桥对岸的泸定桥背靠着山，西门正对着桥头。守城的两个团的敌人早已在城墙和山坡上筑好工事，凭着天险，疯狂地向红军喊叫:“来吧，看你们飞过来吧!”', |
|
|
|
'红四团马上发起总攻。团长和政委亲自站在桥头上指挥战斗。号手们吹起冲锋号，所有武器一齐开火，枪炮声，喊杀声，霎时间震动山谷。二连担任突击队，22位英雄拿着短枪，背着马刀，带着手榴弹，冒着敌人密集的枪弹，攀着铁链向对岸冲去。跟在他们后面的是三连，战士们除了武器，每人带一块木板，一边前进一边铺桥。突击队刚刚冲到对岸，敌人就放起火来，桥头立刻被大火包围了。在这千钧一发的时刻，传来了团长和政委的喊声:“同志们!为了党的事业，为了最后的胜利，冲呀!”', |
|
|
|
'英雄们听到党的号召，更加奋不顾身，都箭一般地穿过熊熊大火，冲进城去，和城里的敌人展开了激烈的搏斗。激战了两个小时，守城的敌人被消灭了大半，其余的都狼狈地逃跑了。红四团英勇地夺下了泸定桥，取得了长征中的又一次决定性的胜利。红军的主力渡过了天险大渡河，浩浩荡荡地奔赴抗日的最前线。（来源：北师大版第七册课文）' |
|
|
|
] |
|
|
|
|
|
|
|
var liCont2 = ''; |
|
|
|
var pageNum2 = 1; |
|
|
|
var total2 = contList2.length |
|
|
|
for(var i = 0; i <= contList2.length; i++) { |
|
|
|
liCont2 += '<li>' + contList2[i] + '</i>' |
|
|
|
} |
|
|
|
$('.game2Index .textList').html(liCont2) |
|
|
|
$('.game2Index .textList li').eq(0).show().siblings().hide() |
|
|
|
$('.game2Index .pageNum span').text(total2) |
|
|
|
$('.game2Index .pageNum text').text(pageNum2) |
|
|
|
|
|
|
|
$('.game2Index .leftIcon').click(function() { |
|
|
|
if(pageNum2 > 1) { |
|
|
|
pageNum2--; |
|
|
|
$('.pageNum text').text(pageNum2) |
|
|
|
$('.textList li').eq(pageNum2 - 1).show().siblings().hide() |
|
|
|
} |
|
|
|
}) |
|
|
|
$('.game2Index .rightIcon').click(function() { |
|
|
|
if(pageNum2 < total2) { |
|
|
|
pageNum2++; |
|
|
|
$('.game2Index .pageNum text').text(pageNum2) |
|
|
|
$('.game2Index .textList li').eq(pageNum2 - 1).show().siblings().hide() |
|
|
|
} |
|
|
|
if(pageNum2 == total2) { |
|
|
|
setTimeout(function() { |
|
|
|
$('.game2Index .book_box').fadeOut() |
|
|
|
$('.game2Index .successBox').css('display', 'flex') |
|
|
|
}, 1500) |
|
|
|
} |
|
|
|
}) |
|
|
|
$('.game2Index .click1').click(function() { |
|
|
|
$('.game2Index .click1 img').css('display','block') |
|
|
|
$('.game2Index .click1').animate({ |
|
|
|
'top': '0.5%', |
|
|
|
"right": '21%', |
|
|
|
'transform': 'translate(-50%,-50%)' |
|
|
|
}, 1000) |
|
|
|
// setTimeout(function() { |
|
|
|
// $('.game2Index .click1').css('opacity', '0') |
|
|
|
// }, 1000) |
|
|
|
$('.game2Index .imgList li').eq(0).find('img').fadeOut(1500) |
|
|
|
num2++; |
|
|
|
success2(); |
|
|
|
}) |
|
|
|
$('.game2Index .click2').click(function() { |
|
|
|
$('.game2Index .click2 img').css('display','block') |
|
|
|
$('.game2Index .click2').animate({ |
|
|
|
'top': '4%', |
|
|
|
"right": '12%', |
|
|
|
'transform': 'translate(-50%,-50%)' |
|
|
|
}, 1000) |
|
|
|
// setTimeout(function() { |
|
|
|
// $('.game2Index .click2').css('opacity', '0') |
|
|
|
// }, 1000) |
|
|
|
$('.game2Index .imgList li').eq(1).find('img').fadeOut(1500) |
|
|
|
num2++; |
|
|
|
success2(); |
|
|
|
}) |
|
|
|
$('.game2Index .click3').click(function() { |
|
|
|
$('.game2Index .click3 img').css('display','block') |
|
|
|
$('.game2Index .click3').animate({ |
|
|
|
'top': '4%', |
|
|
|
"right": '0%', |
|
|
|
'transform': 'translate(-50%,-50%)', |
|
|
|
}, 1000) |
|
|
|
// setTimeout(function() { |
|
|
|
// $('.game2Index .click3').css('opacity', '0') |
|
|
|
// }, 1000) |
|
|
|
$('.game2Index .imgList li').eq(2).find('img').fadeOut(1500) |
|
|
|
num2++; |
|
|
|
success2(); |
|
|
|
}) |
|
|
|
$('.game2Index .closeIcon').click(function() { |
|
|
|
$('.game2Index .book_box').fadeOut() |
|
|
|
$('.game2Index .successBox').css('display', 'flex') |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
function success2() { |
|
|
|
if(num2 == 3) { |
|
|
|
console.log('成功') |
|
|
|
setTimeout(function() { |
|
|
|
$('.game2Index p.bgm img').attr('src', 'img/game2/successBgm.png') |
|
|
|
$('.game2Index .box_wrap').fadeOut(); |
|
|
|
}, 1500) |
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
|
$('.game2Index .book_box').fadeIn() |
|
|
|
$('.game2Index .maskBgm').fadeIn() |
|
|
|
}, 2500) |
|
|
|
} |
|
|
|
} |
|
|
|
$('.game2Above').click(function(){ |
|
|
|
$('.firstGame').css({'width':'100%','height':'100%'}) |
|
|
|
$('#game1').css({'width':'100%','height':'100%'}) |
|
|
|
$('.secondGame').css({'width':'0','height':'0'}) |
|
|
|
$('#game2').css({'width':'0','height':'0'}) |
|
|
|
$('#game1').load("game1.html") |
|
|
|
$('.game2Index').remove(); |
|
|
|
}) |
|
|
|
$('.game2Next').click(function(){ |
|
|
|
$('.game2Index').remove(); |
|
|
|
$('#game3').load('game3.html'); |
|
|
|
$('.secondGame').css({'width':'0','height':'0'}) |
|
|
|
$('#game2').css({'width':'0','height':'0'}) |
|
|
|
$('.thirdGame').css({'width':'100%','height':'100%'}) |
|
|
|
$('#game3').css({'width':'100%','height':'100%'}) |
|
|
|
}) |
|
|
|
</script> |
liuguowei
3 years ago
