|
|
@ -10,11 +10,11 @@
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
<body >
|
|
|
|
<body >
|
|
|
|
|
|
|
|
|
|
|
|
<div id="ground_color" class="invert scroll-pane stop_invert"></div>
|
|
|
|
<div id="ground_color" class="invert scroll-pane stop_invert blur"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="groundline" class="invert scroll-pane stop_invert"></div>
|
|
|
|
<div id="groundline" class="invert scroll-pane stop_invert blur "></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="army">
|
|
|
|
<div class="army blur">
|
|
|
|
<div id="player_img"></div>
|
|
|
|
<div id="player_img"></div>
|
|
|
|
<img id="fighter1" src="imgs/spring_river/fighter1.gif" height="120px" >
|
|
|
|
<img id="fighter1" src="imgs/spring_river/fighter1.gif" height="120px" >
|
|
|
|
<img id="fighter2" src="imgs/spring_river/fighter2.gif" height="120px">
|
|
|
|
<img id="fighter2" src="imgs/spring_river/fighter2.gif" height="120px">
|
|
|
@ -28,67 +28,70 @@
|
|
|
|
|
|
|
|
|
|
|
|
<div id="ground" class="scroll-pane">
|
|
|
|
<div id="ground" class="scroll-pane">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="tree1">
|
|
|
|
<div class="tree1 blur">
|
|
|
|
<img id="tree1" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
<img id="tree1" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
<img id="tree_flipped1" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
|
|
<img id="tree_flipped1" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tree2">
|
|
|
|
<div class="tree2 blur">
|
|
|
|
<img id="tree2" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
<img id="tree2" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
<img id="tree_flipped2" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
|
|
<img id="tree_flipped2" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tree3">
|
|
|
|
<div class="tree3 blur">
|
|
|
|
<img id="tree3" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
<img id="tree3" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
<img id="tree_flipped3" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
|
|
<img id="tree_flipped3" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tree4">
|
|
|
|
<div class="tree4 blur">
|
|
|
|
<img id="tree4" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
<img id="tree4" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
<img id="tree_flipped4" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
|
|
<img id="tree_flipped4" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tree5">
|
|
|
|
<div class="tree5 blur">
|
|
|
|
<img id="tree5" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
<img id="tree5" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tree6">
|
|
|
|
<div class="tree6 blur">
|
|
|
|
<img id="tree6" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
<img id="tree6" src="imgs/spring_river/tree.gif" height="160px">
|
|
|
|
<img id="tree_flipped6" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
|
|
<img id="tree_flipped6" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="children1">
|
|
|
|
<div class="children1 blur">
|
|
|
|
<img id="cage1" class="bad" src="imgs/spring_river/children_cage_1.gif" height="200px">
|
|
|
|
<img id="cage1" class="bad" src="imgs/spring_river/children_cage_1.gif" height="200px">
|
|
|
|
<img id="free1" class="good"src="imgs/spring_river/children_free_1.gif" height="240px" style="display: none;">
|
|
|
|
<img id="free1" class="good"src="imgs/spring_river/children_free_1.gif" height="240px" style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="children2">
|
|
|
|
<div class="children2 blur">
|
|
|
|
<img id="cage2" class="bad" src="imgs/spring_river/children_cage_2.gif" height="250px">
|
|
|
|
<img id="cage2" class="bad" src="imgs/spring_river/children_cage_2.gif" height="250px">
|
|
|
|
<img id="free2" class="good" src="imgs/spring_river/children_free_2.gif" height="300px" style="display: none;">
|
|
|
|
<img id="free2" class="good" src="imgs/spring_river/children_free_2.gif" height="300px" style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="figure1">
|
|
|
|
<div class="figure1 blur">
|
|
|
|
<img id="satan1" class="bad" src="imgs/spring_river/satan1.gif" height="150px">
|
|
|
|
<img id="satan1" class="bad" src="imgs/spring_river/satan1.gif" height="150px">
|
|
|
|
<img id="teacher1" class="good" src="imgs/spring_river/teacher1.gif" height="100px" style="display: none;">
|
|
|
|
<img id="teacher1" class="good" src="imgs/spring_river/teacher1.gif" height="100px" style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="figure2">
|
|
|
|
<div class="figure2 blur">
|
|
|
|
<img id="satan2" class="bad" src="imgs/spring_river/satan2.gif" height="110px">
|
|
|
|
<img id="satan2" class="bad" src="imgs/spring_river/satan2.gif" height="110px">
|
|
|
|
<img id="teacher2" class="good" src="imgs/spring_river/teacher2.gif" height="110px" style="display: none;">
|
|
|
|
<img id="teacher2" class="good" src="imgs/spring_river/teacher2.gif" height="110px" style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="figure3">
|
|
|
|
<div class="figure3 blur">
|
|
|
|
<img id="satan3" class="bad" src="imgs/spring_river/satan3.gif" height="150px">
|
|
|
|
<img id="satan3" class="bad" src="imgs/spring_river/satan3.gif" height="150px">
|
|
|
|
<img id="teacher3" class="good" src="imgs/spring_river/teacher3.gif" height="125px" style="display: none;">
|
|
|
|
<img id="teacher3" class="good" src="imgs/spring_river/teacher3.gif" height="125px" style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="figure4">
|
|
|
|
<div class="figure4 blur">
|
|
|
|
<img id="satan4" class="bad" src="imgs/spring_river/satan4.gif" height="150px">
|
|
|
|
<img id="satan4" class="bad" src="imgs/spring_river/satan4.gif" height="150px">
|
|
|
|
<img id="teacher4" class="good" src="imgs/spring_river/teacher4.gif" height="100px" style="display: none;">
|
|
|
|
<img id="teacher4" class="good" src="imgs/spring_river/teacher4.gif" height="100px" style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="decoration">
|
|
|
|
<div class="decoration blur">
|
|
|
|
<img id="decoration_bad" class="bad" src="imgs/spring_river/decoration.gif" height="100px">
|
|
|
|
<img id="decoration_bad" class="bad" src="imgs/spring_river/decoration.gif" height="100px">
|
|
|
|
<img id="decoration_good" class="good" src="imgs/spring_river/decoration_good.gif" height="120px" style="display: none;">
|
|
|
|
<img id="decoration_good" class="good" src="imgs/spring_river/decoration_good.gif" height="120px" style="display: none;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<img class="shooting_place1 bad" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
|
|
<img class="shooting_place1 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
|
|
<img class="shooting_place2 bad" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
|
|
<img class="shooting_place2 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
|
|
<img class="shooting_place3 bad" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
|
|
<img class="shooting_place3 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
|
|
|
|
|
|
|
|
|
|
<img id="amanda" src="imgs/spring_river/amanda.gif" height="110px" style="display: none;">
|
|
|
|
<img id="amanda" src="imgs/spring_river/amanda.gif" height="110px" style="display: none;">
|
|
|
|
<div class="bubble1 invert stop_invert"style="display: none;"><span id="player_name"></span>, where have you been?</div>
|
|
|
|
<div class="bubble1 invert stop_invert" style="display: none;"><span id="player_name"></span>, where have you been? ✜</div>
|
|
|
|
<div class="bubble2 invert stop_invert"style="display: none;">Follow me, I think you made a colossal blunder here</div>
|
|
|
|
<div class="bubble2 invert stop_invert" style="display: none;">Follow me, I think you made a colossal blunder here ■</div>
|
|
|
|
|
|
|
|
<img id="cloud" src="imgs/saurian_headquarter/cloud2.gif" height="120px" style="display: none;">
|
|
|
|
|
|
|
|
<img id="cloud2" src="imgs/saurian_headquarter/cloud2.gif" height="120px" style="display: none;">
|
|
|
|
|
|
|
|
<img id="thunders" src="imgs/saurian_headquarter/thunder.gif" height="190px" style="display: none;">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="text_container invert stop_invert" >
|
|
|
|
<div class="text_container invert stop_invert" >
|
|
|
@ -185,6 +188,11 @@ $(document).keydown(function(e) {
|
|
|
|
$("#tree_flipped4").show();
|
|
|
|
$("#tree_flipped4").show();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (left_Percentage >= 70) {
|
|
|
|
|
|
|
|
$(".message1").hide();
|
|
|
|
|
|
|
|
$(".message2").show();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
switch (e.which) {
|
|
|
|
switch (e.which) {
|
|
|
|
case 37:
|
|
|
|
case 37:
|
|
|
|
offset.left -= 20;
|
|
|
|
offset.left -= 20;
|
|
|
@ -203,9 +211,10 @@ $(document).keydown(function(e) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (offset.left > $("#ground").width() - 1090) {
|
|
|
|
if (offset.left > $("#ground").width() - 1090) {
|
|
|
|
offset.left = $("#ground").width() - 1090;
|
|
|
|
offset.left = $("#ground").width() - 1090;
|
|
|
|
$(document).scrollLeft(4000);
|
|
|
|
/*$(document).scrollLeft(4000);
|
|
|
|
$(".message1").hide();
|
|
|
|
$(".message1").hide();
|
|
|
|
$(".message2").show();
|
|
|
|
$(".message2").show();
|
|
|
|
|
|
|
|
*/
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$div.css("left", offset.left);
|
|
|
|
$div.css("left", offset.left);
|
|
|
@ -247,28 +256,41 @@ $(document).keydown(function(e) {
|
|
|
|
|
|
|
|
|
|
|
|
function reach_counter() {
|
|
|
|
function reach_counter() {
|
|
|
|
if ( shooting_counter == 3 ) {
|
|
|
|
if ( shooting_counter == 3 ) {
|
|
|
|
|
|
|
|
$("#thunders").show();
|
|
|
|
|
|
|
|
setTimeout( function () {
|
|
|
|
|
|
|
|
$("#cloud, #cloud2").show();
|
|
|
|
|
|
|
|
setTimeout( function () {
|
|
|
|
|
|
|
|
$(".blur").addClass("blur_background");
|
|
|
|
$("#amanda").show();
|
|
|
|
$("#amanda").show();
|
|
|
|
$(".message2").hide();
|
|
|
|
$(".message2").hide();
|
|
|
|
$(".message3").show();
|
|
|
|
$(".message3").show();
|
|
|
|
setTimeout( function () {
|
|
|
|
setTimeout( function () {
|
|
|
|
$(".bubble1").show();
|
|
|
|
$(".bubble1").show();
|
|
|
|
setTimeout( function () {
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
}, 800);
|
|
|
|
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$(".bubble1").click(function() {
|
|
|
|
|
|
|
|
$(".bubble1").hide();
|
|
|
|
$(".bad").hide();
|
|
|
|
$(".bad").hide();
|
|
|
|
$(".good").show();
|
|
|
|
$(".good").show();
|
|
|
|
$(".stop_invert").removeClass("invert");
|
|
|
|
/*$(".stop_invert").removeClass("invert");*/
|
|
|
|
$('html').css({overflow: 'hidden'});
|
|
|
|
/*$('html').css({overflow: 'hidden'});*/
|
|
|
|
setTimeout( function () {
|
|
|
|
setTimeout( function () {
|
|
|
|
$(".bubble2").show();
|
|
|
|
$(".bubble2").show();
|
|
|
|
$(".message3").hide();
|
|
|
|
$(".message3").hide();
|
|
|
|
$(".message4").show();
|
|
|
|
$(".message4").show();
|
|
|
|
}, 2000);
|
|
|
|
setTimeout( function () {
|
|
|
|
}, 4000);
|
|
|
|
$(".blur").removeClass("blur_background");
|
|
|
|
}, 2000);
|
|
|
|
}, 500);
|
|
|
|
};
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$(".bubble2").click(function() {
|
|
|
|
|
|
|
|
$(".bubble2").hide();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|