@ -4,15 +4,15 @@
< meta charset = "utf-8" / >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=yes" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=yes" / >
< title > spring river< / title >
< title > spring river< / title >
< link rel = "icon" href = "imgs/park/tree4.gif" " >
< link rel = "icon" href = "imgs/park/tree4.gif" >
< link rel = "stylesheet" href = "spring_river.css" >
< link rel = "stylesheet" href = "spring_river.css" >
< / head >
< / head >
< body >
< body >
< div id = "ground_color" class = "invert "> < / div >
< div id = "ground_color" class = "invert scroll-pane stop_invert "> < / div >
< div id = "groundline" class = "invert "> < / div >
< div id = "groundline" class = "invert scroll-pane stop_invert "> < / div >
< div class = "army" >
< div class = "army" >
< div id = "player_img" > < / div >
< div id = "player_img" > < / div >
@ -26,7 +26,7 @@
< img id = "fighter8" src = "imgs/spring_river/fighter8.gif" height = "150px" >
< img id = "fighter8" src = "imgs/spring_river/fighter8.gif" height = "150px" >
< / div >
< / div >
< div id = "ground" >
< div id = "ground" class = "scroll-pane" >
< div class = "tree1" >
< div class = "tree1" >
< 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;" >
@ -52,44 +52,59 @@
< / div >
< / div >
< div class = "children1" >
< div class = "children1" >
< img id = "cage1" class = "bad" src = "imgs/spring_river/children_cage_ fire_1.gif" height = "24 0px">
< img id = "cage1" class = "bad" src = "imgs/spring_river/children_cage_ 1.gif" height = "20 0px">
< 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" >
< img id = "cage2" class = "bad" src = "imgs/spring_river/children_cage_ fire_2.gif" height = "30 0px">
< img id = "cage2" class = "bad" src = "imgs/spring_river/children_cage_ 2.gif" height = "25 0px">
< 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" >
< 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 = "1 3 0px" style = "display: none;" >
< img id = "teacher1" class = "good" src = "imgs/spring_river/teacher1.gif" height = "1 0 0px" style = "display: none;" >
< / div >
< / div >
< div class = "figure2" >
< div class = "figure2" >
< img id = "satan2" class = "bad" src = "imgs/spring_river/satan2.gif" height = "1 4 0px">
< img id = "satan2" class = "bad" src = "imgs/spring_river/satan2.gif" height = "1 1 0px">
< img id = "teacher2" class = "good" src = "imgs/spring_river/teacher2.gif" height = "1 3 0px" style = "display: none;" >
< img id = "teacher2" class = "good" src = "imgs/spring_river/teacher2.gif" height = "1 1 0px" style = "display: none;" >
< / div >
< / div >
< div class = "figure3" >
< div class = "figure3" >
< 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 = "1 30 px" style = "display: none;" >
< img id = "teacher3" class = "good" src = "imgs/spring_river/teacher3.gif" height = "1 25 px" style = "display: none;" >
< / div >
< / div >
< div class = "figure4" >
< div class = "figure4" >
< 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 = "1 3 0px" style = "display: none;" >
< img id = "teacher4" class = "good" src = "imgs/spring_river/teacher4.gif" height = "1 0 0px" style = "display: none;" >
< / div >
< / div >
< div class = "decoration" >
< div class = "decoration" >
< img id = "decoration_bad" class = "bad" src = "imgs/spring_river/decoration.gif" height = "1 1 0px">
< img id = "decoration_bad" class = "bad" src = "imgs/spring_river/decoration.gif" height = "1 0 0px">
< img id = "decoration_good" class = "good" src = "imgs/spring_river/decoration_good.gif" height = "1 5 0px" style = "display: none;" >
< img id = "decoration_good" class = "good" src = "imgs/spring_river/decoration_good.gif" height = "1 2 0px" style = "display: none;" >
< / div >
< / div >
< div class = "text_container invert" >
< img class = "shooting_place1 bad" 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_place3 bad" 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;" >
< div class = "bubble1 invert stop_invert" style = "display: none;" > < span id = "player_name" > < / span > , I think you made a colossal blunder here< / div >
< div class = "bubble2 invert stop_invert" style = "display: none;" > Follow me, you need to understand how you ended up here< / div >
< div class = "text_container invert stop_invert" >
< div class = "message1" >
< div class = "message1" >
You and your army arrived at the Spring River Natural Park.< br >
You and your army arrived at the Spring River Natural Park.< br >
< span class = "instructions" > < span class = "instructions_arrow" > →< / span > Move around with your army to find the children!< / span >
< span class = "instructions" > < span class = "instructions_arrow" > →< / span > Move around with your army to find the children!< / span >
< / div >
< / div >
< div class = "message2" style = "display: none;" >
< div class = "message2" style = "display: none;" >
Damn! Your premonition actually came true, Ned was right since the beginning.< br >
You need to put an end to this evil depravation now!
< / div >
< / div >
< div class = "message3" style = "display: none;" >
< div class = "message3" style = "display: none;" >
Is this... Amanda?
< / div >
< div class = "message4" style = "display: none;" >
You really should < button onclick = "location.href='final.html';" > < span class = "button_text" > follow Amanda< / span > < / button > .
< / div >
< / div >
< / div >
< / div >
@ -101,6 +116,7 @@
window.onload = function() {
window.onload = function() {
window.localStorage.setItem("spring_river","opened");
window.localStorage.setItem("spring_river","opened");
console.log ("spring river:",localStorage.spring_river);
console.log ("spring river:",localStorage.spring_river);
$('.scroll-pane').jScrollPane();
}
}
//get player avatar from local storage
//get player avatar from local storage
@ -110,6 +126,9 @@
var player_img = document.querySelector("#player_img");
var player_img = document.querySelector("#player_img");
player_img.appendChild(img);
player_img.appendChild(img);
//get player name from local storage
document.querySelector('#player_name').innerHTML = localStorage.playerName;
//adjust camera scroll
//adjust camera scroll
var $div = $('.army');
var $div = $('.army');
@ -165,15 +184,6 @@ $(document).keydown(function(e) {
$("#tree_flipped4").show();
$("#tree_flipped4").show();
}
}
/*
if (left_Percentage < 55 & & top_Percentage > 39) {
}
if (left_Percentage < 39 ) {
}*/
switch (e.which) {
switch (e.which) {
case 37:
case 37:
offset.left -= 20;
offset.left -= 20;
@ -190,15 +200,13 @@ $(document).keydown(function(e) {
if (offset.left < 80 ) {
if (offset.left < 80 ) {
offset.left = 80;
offset.left = 80;
}
}
if (offset.left > $("#ground").width() - 135 0) {
if (offset.left > $("#ground").width() - 109 0) {
offset.left = $("#ground").width() - 135 0;
offset.left = $("#ground").width() - 109 0;
$(document).scrollLeft(4000);
$(document).scrollLeft(4000);
$(".message1").hide();
/* maybe here add message end*/
$(".message2").show();
}
}
$div.css("left", offset.left);
$div.css("left", offset.left);
$div.css("top", offset.top);
$div.css("top", offset.top);
e.preventDefault();
e.preventDefault();
@ -206,6 +214,61 @@ $(document).keydown(function(e) {
})
})
var shooting_counter = 0;
$("#figure1").click(function () {
shooting_counter ++;
console.log(shooting_counter);
$(".shooting_place1").show();
reach_counter()
});
$(".figure2").click(function () {
shooting_counter ++;
console.log(shooting_counter);
$(".shooting_place2").show();
reach_counter()
});
$(".figure3").click(function () {
shooting_counter ++;
console.log(shooting_counter);
$(".shooting_place3").show();
reach_counter()
});
$(".figure4").click(function () {
shooting_counter ++;
console.log(shooting_counter);
$(".shooting_place1").show();
reach_counter()
});
function reach_counter() {
if ( shooting_counter == 3 ) {
$("#amanda").show();
$(".message2").hide();
$(".message3").show();
setTimeout( function () {
$(".bubble1").show();
setTimeout( function () {
$(".bubble2").show();
$(".bad").hide();
$(".good").show();
$(".stop_invert").removeClass("invert");
setTimeout( function () {
$(".message3").hide();
$(".message4").show();
}, 2000);
}, 3000);
}, 2000);
};
}
< / script >
< / script >