master
*anna* 4 years ago
parent 9359800489
commit f06f9718e7

@ -46,8 +46,8 @@
<div class="fit2_bubble" style="display: none;">...</div> <div class="fit2_bubble" style="display: none;">...</div>
<div class="fit1_bubble" style="display: none;">...</div> <div class="fit1_bubble" style="display: none;">...</div>
<div class="ned_bubble1" style="display: none;">I was hoping that someone would find my newspaper.</div> <div class="ned_bubble1" style="display: none;">I was hoping that someone would find my newspaper.</div>
<div class="ned_bubble2" style="display: none;">My name is Ned, I used to be the school's janitor. I got fired last week because the school noticed I was investigating the kids' conditions. Believe me, the situation is shadier then it seems. Do you wanna know what I just found out?</div> <div class="ned_bubble2" style="display: none;">My name is Ned, I used to be the school's janitor. I got fired last week because the school noticed I was investigating the kids' conditions. Believe me, the situation is shadier than it looks. Do you wanna know what I just found out?</div>
<div class="ned_bubble3" style="display: none;">The school is involved in sinister activities: together with the Monteferro Food Enterprise they are poisoning the children's meals. Follow me to the enterprise's fields: I can show you the proof of what I'm saying. </div> <div class="ned_bubble3" style="display: none;">The school is involved in sinister activities: together with the Monteferro Food Enterprise they are poisoning the children's meals. Follow me to the enterprise's fields: I can show you the proof that what I'm saying is true. </div>
</div> </div>
@ -92,11 +92,6 @@
} }
//move the character //move the character
$(document).keydown(function(e) { $(document).keydown(function(e) {

@ -131,8 +131,8 @@ div#player_img {
position: absolute; position: absolute;
top:10%; top:10%;
left: 5%; left: 5%;
width: 450px; width: 350px;
height: 300px; height: 280px;
} }
@ -182,7 +182,7 @@ div#player_img {
top:50%; top:50%;
left: 5%; left: 5%;
position: absolute; position: absolute;
z-index:3; z-index:2;
} }
#fighter9 { #fighter9 {
top:50%; top:50%;
@ -193,7 +193,7 @@ div#player_img {
.children1 { .children1 {
top:5%; top:5%;
right: 8%; right: 6%;
position: absolute; position: absolute;
} }
@ -201,36 +201,69 @@ div#player_img {
top:40%; top:40%;
right: 2%; right: 2%;
position: absolute; position: absolute;
z-index:3;
} }
.decoration { .decoration {
top:35%; top:35%;
right: 13.5%; right: 10%;
position: absolute; position: absolute;
} }
.figure1{ .figure1{
top:15%; bottom: 60%;
right: 13%; right: 5%;
position: absolute; position: absolute;
z-index: 2;
cursor: pointer;
} }
.figure2{ .figure2{
top:40%; top:40%;
right: 8%; right: 6%;
position: absolute; position: absolute;
cursor: pointer;
} }
.figure3{ .figure3{
top:50%; top:50%;
right: 15%; right: 10%;
position: absolute; position: absolute;
cursor: pointer;
} }
.figure4{ .figure4{
top:30%; top:30%;
right: 3%; right: 3%;
position: absolute; position: absolute;
cursor: pointer;
} }
.shooting_place1{
top:60%;
right: 7%;
position: absolute;
z-index: 10;
}
.shooting_place2{
top:10%;
right: 2%;
position: absolute;
z-index: 10;
}
.shooting_place3{
top:15%;
right: 10%;
position: absolute;
z-index: 10;
}
#amanda{
right: 11.5%;
top:33%;
position: absolute;
z-index: 10;
}
/*images*/ /*images*/
@ -275,6 +308,96 @@ div#player_img {
z-index:1; z-index:1;
} }
/* amanda baloons*/
.bubble1 {
right: 8.5%;
top:12%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 140px;
height: 57px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index: 50;
}
.bubble1:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #ffffff transparent transparent transparent;
bottom: -20px;
left: 32%;
margin-left: -10px;
}
.bubble1:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-width: 21px 21px 0 0;
border-color: #000000 transparent transparent transparent;
bottom: -22px;
left: 32%;
margin-left: -11px;
display: block;
}
.bubble2 {
right: 13%;
top:10%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 188px;
height: 57px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index: 50;
}
.bubble2:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent #ffffff transparent transparent;
bottom: -20px;
left: 81%;
margin-left: -10px;
}
.bubble2:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-width: 0 21px 21px 0;
border-color: transparent #000000 transparent transparent;
bottom: -22px;
left: 81%;
margin-left: -10px;
display: block;
}
@ -299,3 +422,22 @@ div#player_img {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: black; background: black;
} }
.scrollbar {
overflow-x: hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: -100px !important;
}
.scrollbar::-webkit-scrollbar {
display: none;
}
.scroll-pane{
width: 100%;
height: 200px;
overflow: auto;
}

@ -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="240px"> <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">
<img id="cage2" class="bad" src="imgs/spring_river/children_cage_fire_2.gif" height="300px"> <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">
<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="130px" 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">
<img id="satan2" class="bad" src="imgs/spring_river/satan2.gif" height="140px"> <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="130px" 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">
<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="130px" 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">
<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="130px" 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">
<img id="decoration_bad" class="bad" src="imgs/spring_river/decoration.gif" height="110px"> <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="150px" style="display: none;"> <img id="decoration_good" class="good" src="imgs/spring_river/decoration_good.gif" height="120px" 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() - 1350) { if (offset.left > $("#ground").width() - 1090) {
offset.left = $("#ground").width() - 1350; offset.left = $("#ground").width() - 1090;
$(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>

@ -80,7 +80,7 @@
<span class="instructions"><span class="instructions_arrow"></span> Click on the villagers to share with them your findings!</span> <span class="instructions"><span class="instructions_arrow"></span> Click on the villagers to share with them your findings!</span>
</div> </div>
<div class="message2" style="display: none;" > <div class="message2" style="display: none;" >
It looks like you managed to reclute an impressive army: <button onclick="location.href='river_bank.html';"><span class="button_text"> Guide them to the river bank</span></button> and raise anchor to Spring River. It looks like you managed to reclute quite an impressive army: <button onclick="location.href='river_bank.html';"><span class="button_text"> guide them to the river bank</span></button> and raise anchor to Spring River.
</div> </div>
</div> </div>

Loading…
Cancel
Save