master
*anna* 3 years ago
parent 143d6beb3a
commit bab524cd3e

@ -119,7 +119,7 @@ var fluoride = 5;
var avatar = $("#player_img");
var weapon = $("#pill");
$(".figure1").click (function(){
$("#satan1").click (function(){
--fluoride;
console.log("fluoride:", fluoride);
weapon.hide();
@ -142,7 +142,7 @@ var fluoride = 5;
hit_ned();
});
$(".figure2").click (function(){
$("#satan2").click (function(){
--fluoride;
console.log("fluoride:", fluoride);
weapon.hide();
@ -165,7 +165,7 @@ var fluoride = 5;
hit_ned();
});
$(".figure3").click (function(){
$("#satan3").click (function(){
--fluoride;
console.log("fluoride:", fluoride);
weapon.hide();
@ -188,7 +188,7 @@ var fluoride = 5;
hit_ned();
});
$(".figure4").click (function(){
$("#satan4").click (function(){
--fluoride;
console.log("fluoride:", fluoride);
weapon.hide();
@ -211,7 +211,7 @@ var fluoride = 5;
hit_ned();
});
$(".figure5").click (function(){
$("#satan5").click (function(){
--fluoride;
console.log("fluoride:", fluoride);
weapon.hide();

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

@ -116,8 +116,8 @@ span.button_text{
position:fixed;
/* border: solid black 2px;*/
left:20%;
top:10%;
bottom:25%;
top:12%;
bottom:18%;
right:20%;
font-family: sinistre;
z-index:30;
@ -187,6 +187,17 @@ span.button_text{
/*baloons */
a {
color: #c94dff;
}
a:hover {
background-color:#c94dff;
color: white;
padding-left: 3px;
padding-right: 3px;
}
.baloons_all{
z-index:102;
@ -194,38 +205,40 @@ span.button_text{
.baloons{
font-family:sinistre;
font-size: 3.5vw;
color:#c94dff
color:#c94dff;
}
#baloon1 {
width: 20vw;
height: 4vw;
height: 7vw;
border:1px solid #c94dff;
background:white;
border-radius: 100vw;
font-size: 1vw;
text-align: center;
left: 15%;
top:5%;
right: 10%;
top:61%;
position:absolute;
z-index: 50;
}
#baloon2 {
width: 20vw;
height: 4vw;
height: 5.5vw;
padding: 5px;
border:1px solid #c94dff;
background:white;
border-radius: 100vw;
font-size: 1vw;
text-align: center;
right: 10%;
top:61%;
left: 15%;
top:4%;
position:absolute;
z-index: 50;
}
#baloon3 {
width: 20vw;
height: 4vw;
width: 22vw;
height: 6vw;
padding-top: 5px;
border:1px solid #c94dff;
background:white;
border-radius: 100vw;
@ -238,7 +251,7 @@ span.button_text{
}
#baloon4 {
width: 20vw;
height: 4vw;
height: 5vw;
border:1px solid #c94dff;
background:white;
border-radius: 100vw;

@ -13,25 +13,28 @@
<div class="baloons_all">
<div class="comment1stpage baloons"id="baloon1" style="display: none;">
<p class="text_baloon1">
It looks like the previous owner of the newspaper highlighted something
It looks like the previous owner of the newspaper highlighted something. <br>
They cannot be too far:<br> <a href="park_N.html"> look for them in the park ! </a>
</p>
</div>
<div class="comment1stpage baloons"id="baloon2" style="display: none;">
<p class="text_baloon1"></p>
Who is N.?
The situation at the school looks serious.
Who is this N. writing? <br>They might know what is going on.
</p>
</div>
<div class="comment2stpage baloons"id="baloon3" style="display: none;">
<p class="text_baloon3">
Amanda often volunteers for the cat shelter.<br>
Can this be the reason why she is late?
Can this be the reason why she is late?<br>
<a href="cat_shelter.html"> Look for her at the cat shelter! </a>
</p>
</div>
<div class="comment2stpage baloons"id="baloon4" style="display: none;">
<p class="text_baloon4"></p>
I hope Amanda will arrive soon, <br>
you still have to purchase the tickets!
you still have to purchase the tickets!
</p>
</div>
</div>
@ -129,12 +132,7 @@
Hello <span id="player_name"> </span> . It's Saturday morning. You are at the park waiting for your friend Amanda. She seems to be really late.
You spot a copy of today's newspaper on the bench close to you. Maybe you want to <button class="open_newspaper_index"><span class="button_text">give it a read</span></button> . You can also <button onclick="location.href='park_dream.html';"><span class="button_text">go for a little walk</span></button> or just <button class="wait_for_amanda"><span class="button_text">wait for Amanda</span></button>.
</div>
<div class="message2" style="display:none;">
The situation at the school looks serious. The person who left the annotated newspaper cannot be too far: they might know what is going on. <button onclick="location.href='park_N.html';"><span class="button_text">Look for them in the park</span></button> .
</div>
<div class="message3" style="display:none;">
You can try to <button onclick="location.href='cat_shelter.html';"><span class="button_text">look for Amanda at the cat shelter</span></button> . It can also be that she already went to purchase the tickets but she got stuck in the queue. It might be good to <button class="wait_for_amanda"><span class="button_text">wait for her</span></button> a bit longer.
</div>
<div class="message4" style="display:none;">
It looks like Amanda is not able to join you.
There is a nice kiosk close by: <button id="fries"><span class="button_text">go there to get fries</span></button> . You can still <button class="open_newspaper_index"><span class="button_text">have a look at the news</span></button> or <button onclick="location.href='park_dream.html';"><span class="button_text">go for a walk</span></button> .
@ -171,7 +169,8 @@
// open newspaper
$(".open_newspaper_index").click (function(){
$("#newspaper, .close").toggle();
$(".message1, .message4").hide();
$("#newspaper, .close").show();
//saves that u opened the newspaper in the local storage
window.localStorage.setItem("newspaper","opened")
console.log ("newspaper:",localStorage.newspaper)
@ -181,12 +180,12 @@
$("#arrow_go1").click (function(){
$(".index, .school1, .message1, .message4 ").hide();
$(".school2, .school3, #baloon1, #baloon2, .message2").show();
$(".school2, .school3, #baloon1, #baloon2").show();
});
$("#arrow_back1").click (function(){
$("#baloon1, #baloon2, #baloon3, #baloon4, .school2,.school3, .message2").hide();
$(".index, .school1, .message4").show();
$("#baloon1, #baloon2, #baloon3, #baloon4, .school2,.school3").hide();
$(".index, .school1").show();
});
@ -195,12 +194,10 @@
$(".school3").hide();
$("#baloon1").hide();
$("#baloon2").hide();
$(".message2").hide();
$(".school4").show();
$(".school5").show();
$("#baloon3").show();
$("#baloon4").show();
$(".message3").show();
});
$("#arrow_back2").click (function(){
@ -208,15 +205,13 @@
$(".school5").hide();
$("#baloon3").hide();
$("#baloon4").hide();
$(".message3").hide();
$(".school2").show();
$(".school3").show();
$("#baloon1").show();
$("#baloon2").show();
$(".message2").show();
});
$(".wait_for_amanda").click (function(){
$(".message3").hide();
$(".message1").hide();
$("#newspaper,#baloon1, #baloon2, #baloon3, #baloon4, .close").hide();
$(".message4").show();
@ -231,8 +226,6 @@
$("#baloon3").hide();
$("#baloon4").hide();
$(".message1").hide();
$(".message2").hide();
$(".message3").hide();
$(".message4").show();
});

@ -57,15 +57,8 @@
background: transparent;
}
div#player_img {
bottom: 20%;
left: 12%;
position:absolute ;
z-index: 3;
}
#ground_color {
width: 5100px;
width: 6100px;
height: 120%;
position:fixed;
margin:-100px;
@ -76,7 +69,7 @@
#ground{
position:absolute;
height:100%;
width:5000px;
width:6000px;
}
#groundline {
@ -85,7 +78,7 @@
height:0%;
width: 100%;
border-top: 1px solid;
z-index:1:
z-index:-10;
}
@ -125,38 +118,119 @@ span.button_text{
font-family: jolybolditalic;
}
/*army*/
div#player_img {
top: 40%;
left: 100%;
position:absolute ;
z-index: 3;
}
/*images*/
.army {
position: fixed;
left:2%;
top: 50px;
height: 380px;
width: 500px;
}
#bench {
bottom: 32%;
left: 6%;
#fighter1 {
top:50%;
left: 80%;
position: absolute;
z-index:2;
z-index:0;
}
#fighter2 {
top:5%;
left: 50%;
position: absolute;
z-index:0;
}
#fighter3 {
top:20%;
left: 30%;
position: absolute;
z-index:0;
}
#fighter4 {
top:100%;
left: 45%;
position: absolute;
z-index:0;
}
#fighter5 {
top:40%;
left: 50%;
position: absolute;
z-index:0;
}
#fighter6 {
top:70%;
left: 65%;
position: absolute;
z-index:0;
}
#fighter7 {
top:58%;
left: 40%;
position: absolute;
z-index:0;
}
#fighter8 {
top:50%;
left: 5%;
position: absolute;
z-index:0;
}
#fighter9 {
top:50%;
left: 5%;
position: absolute;
z-index:0;
}
/*images*/
#tree1 {
top:8%;
left: 10%;
top:30%;
left: 17%;
position: absolute;
z-index:0;
}
#tree2 {
bottom:40%;
left: 2.5%;
bottom:18%;
left: 10%;
position: absolute;
z-index:2;
}
#tree3 {
bottom:45%;
left: 18%;
left: 30%;
position: absolute;
z-index:2;
}
#tree4{
bottom: 20%;
left: 70%;
position: absolute;
z-index:4;
}
#tree5{
top: 10%;
right: 4%;
position: absolute;
z-index:1;
}
#tree6{
top: 10%;
left: 40%;
position: absolute;
z-index:1;
}
#flower1 {
@ -192,34 +266,6 @@ span.button_text{
z-index:0;
}
#grass1{
bottom: 15%;
left: 40%;
position: absolute;
z-index:4;
}
#grass2{
bottom: 15%;
left: 82%;
position: absolute;
z-index:4;
}
#statue{
top: 5%;
left: 60%;
position: absolute;
z-index:0;
}
#tree4{
bottom: 20%;
left: 70%;
position: absolute;
z-index:4;
}
#flower6{
bottom: 65%;
left: 80%;
@ -241,20 +287,6 @@ span.button_text{
z-index:1;
}
#dog{
bottom: 21%;
left: 38%;
position: absolute;
z-index:4;
cursor:pointer;
}
#tree5{
top: 10%;
right: 4%;
position: absolute;
z-index:1;
}
#flower9{
top: 23%;
left: 32%;
@ -264,393 +296,7 @@ span.button_text{
}
/* looking for ned scene*/
#woman{
top: 20%;
left: 30%;
position: absolute;
cursor: pointer;
z-index:0;
}
#newspaper_seller{
bottom: 55%;
left: 47%;
position: absolute;
cursor: pointer;
z-index:0;
}
#sport1{
bottom: 20%;
left: 66%;
position: absolute;
cursor: pointer;
z-index:5;
}
#sport2{
bottom: 65%;
left: 63%;
position: absolute;
cursor: pointer;
z-index:0;
}
#ned {
top: 25%;
right: 8%;
position: absolute;
cursor: pointer;
z-index:2;
}
.woman_bubble {
top:13%;
left: 31%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 135px;
height: 55px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index: 50;
}
.woman_bubble:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 24px 20px 0 0;
border-color: #ffffff transparent transparent transparent;
bottom: -24px;
left: 15%;
margin-left: -10px;
}
.woman_bubble:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-width: 25px 21px 0 0;
border-color: #000000 transparent transparent transparent;
bottom: -26px;
left: 15%;
margin-left: -11px;
display: block;
}
.dog_bubble {
bottom:33%;
left: 40%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
text-align: center;
width: 40px;
height: 18px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index: 50;
}
.dog_bubble:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 20px 15px 0 0;
border-color: #ffffff transparent transparent transparent;
bottom: -20px;
left: 42%;
margin-left: -7.5px;
}
.dog_bubble:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-width: 21px 16px 0 0;
border-color: #000000 transparent transparent transparent;
bottom: -22px;
left: 42%;
margin-left: -8.5px;
display: block;
}
.vendor_bubble {
bottom:75%;
left: 43%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 160px;
height: 55px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index: 50;
}
.vendor_bubble:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 0 20px 24px 0;
border-color: transparent #ffffff transparent transparent;
bottom: -24px;
left: 76%;
margin-left: -10px;
}
.vendor_bubble:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-width: 0 21px 25px 0;
border-color: transparent #000000 transparent transparent;
bottom: -26px;
left: 76%;
margin-left: -10px;
display: block;
}
.fit2_bubble {
bottom:30%;
left: 65%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
text-align: center;
width: 40px;
height: 18px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index: 50;
}
.fit2_bubble:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 0 15px 20px 0;
border-color: transparent #ffffff transparent transparent;
bottom: -20px;
left: 70%;
margin-left: -7.5px;
}
.fit2_bubble:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-width: 0 16px 21px 0;
border-color: transparent #000000 transparent transparent;
bottom: -22px;
left: 70%;
margin-left: -7.5px;
display: block;
}
.fit1_bubble {
bottom:75%;
left: 65%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
text-align: center;
width: 40px;
height: 18px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index: 50;
}
.fit1_bubble:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 20px 15px 0 0;
border-color: #ffffff transparent transparent transparent;
bottom: -20px;
left: 42%;
margin-left: -7.5px;
}
.fit1_bubble:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-width: 21px 16px 0 0;
border-color: #000000 transparent transparent transparent;
bottom: -22px;
left: 42%;
margin-left: -8.5px;
display: block;
}
.ned_bubble1 {
top:3%;
left: 88%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 150px;
height: 50px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index:50;
}
.ned_bubble1:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 0 15px 20px 0;
border-color: transparent #ffffff transparent transparent;
bottom: -20px;
left: 85%;
margin-left: -7.5px;
}
.ned_bubble1:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-width: 0 16px 21px 0;
border-color: transparent #000000 transparent transparent;
bottom: -22px;
left: 85%;
margin-left: -7.5px;
display: block;
}
.ned_bubble2 {
top:17%;
left: 84%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 200px;
height: 160px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index:50;
}
.ned_bubble2:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color: transparent #ffffff;
border-width: 15px 0 15px 25px;
top: 49%;
right: -25px;
margin-top: -15px;
}
.ned_bubble2:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-color: transparent #000000;
border-width: 16px 0 16px 26px;
top: 49%;
right: -26.5px;
margin-top: -16px;
display: block;
}
.ned_bubble3 {
top:50%;
left: 90%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 220px;
height: 140px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index:50;
}
.ned_bubble3:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color: #ffffff transparent;
border-width: 0 15px 25px;
top: -25px;
left: 14%;
margin-left: -15px;
}
.ned_bubble3:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-color: #000000 transparent;
border-width: 0 16px 26px;
top: -26.5px;
left: 14%;
margin-left: -16px;
display: block;
}
/* hide scroll bar */

@ -15,6 +15,7 @@
<div id="groundline" class="invert"></div>
<div id="ground">
<div class="army">
<div id="player_img"></div>
<img id="fighter1" src="imgs/spring_river/fighter1.gif" height="120px">
@ -22,35 +23,39 @@
<img id="fighter3" src="imgs/spring_river/fighter3.gif" height="120px">
<img id="fighter4" src="imgs/spring_river/fighter4.gif" height="120px">
<img id="fighter5" src="imgs/spring_river/fighter5.gif" height="120px">
<img id="fighter6" src="imgs/spring_river/fighter6.gif" height="120px">
<img id="fighter6" src="imgs/spring_river/fighter6.gif" height="160px">
<img id="fighter7" src="imgs/spring_river/fighter7.gif" height="120px">
<img id="fighter8" src="imgs/spring_river/fighter8.gif" height="120px">
</div>
<img id="tree1" src="imgs/park/tree1.gif" height="200px">
<img id="tree2" src="imgs/park/tree4.gif" height="160px">
<img id="tree3" src="imgs/park/tree4.gif" height="160px">
<img id="flower1" src="imgs/park/flower1.gif" height="30px">
<img id="flower2" src="imgs/park/flower3.gif" height="40px">
<img id="flower3" src="imgs/park/flower3.1.gif" height="40px">
<img id="flower4" src="imgs/park/flower1.1.gif" height="30px">
<img id="flower5" src="imgs/park/flower1.gif" height="30px">
<img id="grass1" src="imgs/park/grass1.gif" height="90px">
<img id="tree4" src="imgs/park/tree4.gif" height="160px">
<img id="flower6" src="imgs/park/flower1.1.gif" height="30px">
<img id="flower7" src="imgs/park/flower3.1.gif" height="40px">
<img id="flower8" src="imgs/park/flower3.1.gif" height="40px">
<img id="tree5" src="imgs/park/tree1.gif" height="230px">
<img id="tree1" src="imgs/spring_river/tree4.gif" height="160px">
<img id="tree2" src="imgs/spring_river/tree4.gif" height="160px">
<img id="tree3" src="imgs/spring_river/tree4.gif" height="160px">
<img id="tree4" src="imgs/spring_river/tree4.gif" height="160px">
<img id="tree5" src="imgs/spring_river/tree4.gif" height="160px">
<img id="tree6" src="imgs/spring_river/tree4.gif" height="160px">
<!-- flowers
<img id="flower1" src="imgs/spring_river/flower1.gif" height="30px">
<img id="flower2" src="imgs/spring_river/flower3.gif" height="40px">
<img id="flower3" src="imgs/spring_river/flower3.1.gif" height="40px">
<img id="flower4" src="imgs/spring_river/flower1.1.gif" height="30px">
<img id="flower5" src="imgs/spring_river/flower1.gif" height="30px">
<img id="flower6" src="imgs/spring_river/flower1.1.gif" height="30px">
<img id="flower7" src="imgs/spring_river/flower3.1.gif" height="40px">
<img id="flower8" src="imgs/spring_river/flower3.1.gif" height="40px">
-->
</div>
<div class="text_container invert" >
<div class="message1">
not yet :(
You and your army arrived at the Spring River Natural Park.<br>
<span class="instructions"><span class="instructions_arrow"></span> Move with the right arrow to find the children!</span>
</div>
<div class="message2" style="display: none;">
</div>
@ -65,7 +70,7 @@
// player moves
//adjust camera scroll
var $div = $('#player_img');
var $div = $('.army');
var screenLeftMin = 200;
var screenLeftMax = 870;
@ -145,11 +150,11 @@ $(document).keydown(function(e) {
}
if (offset.top < 130) {
offset.top = 130;
if (offset.top < 50) {
offset.top = 50;
}
if (offset.top > $("#ground").height() - 250) {
offset.top = $("#ground").height() - 250;
if (offset.top > $("#ground").height() - 50) {
offset.top = $("#ground").height() - 50;
}

Loading…
Cancel
Save