master
*anna* 4 years ago
parent 3bc6eb04e2
commit 9d453a223c

@ -15,10 +15,13 @@
<div id="ground">
<div id="player_img"></div>
<div id="player_img"></div>
<img id="cat" src="imgs/park/cat.gif" height="40px" style="display: none;">
<img id="snake" src="imgs/park/snake.gif" height="40px" style="display: none;">
<img id="bench" src="imgs/park/bench.gif" height="150px">
<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="tree3_5" src="imgs/park/tree1.gif" height="200px">
<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">
@ -41,12 +44,13 @@
<img id="grass2" src="imgs/park/grass1.gif" height="90px">
<div class="woman_bubble" style="display: none;">I don't know, you should try to ask the news vendor.</div>
<div class="dog_bubble" style="display: none;">woof</div>
<div class="dog_bubble" style="display: none;">Have you heard what happened to the cats? [...]</div>
<div class="dog_bubble2" style="display: none;">It looks like they ran away from the cat shelter tonight.</div>
<div class="vendor_bubble" style="display: none;">I sold a copy to a guy not so long ago. He must be still around.</div>
<div class="fit2_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_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_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 that what I'm saying is true. </div>
</div>
@ -55,8 +59,11 @@
<div class="message1 instructions">
<span class="instructions_arrow"></span> Move around the park with the arrows ←↑↓→
</div>
<div class="message_dog" style="display: none;">
Amanda might be at the cat shelter. <button onclick="location.href='cat_shelter.html';"><span class="button_text">Go there to check it out !</span></button>
</div>
<div class="message2" style="display: none;">
You found him! <button class="ned_more"><span class="button_text">Hear more from Ned</span></button> .
You found him!
</div>
<div class="message3" style="display: none;">
It looks intriguing: <button onclick="location.href='monteferro.html';"><span class="button_text">go to the Monteferro Food Enterprise</span></button> with Ned.
@ -104,6 +111,29 @@ $(document).keydown(function(e) {
var top_val_only = parseInt(top_val_px);
var top_Percentage = (top_val_only/parent_height) * 100;
console.log ("top %", top_Percentage);
var parent_width = $("#ground").width();
var left_val_px = $div.css('left');
var left_val_only = parseInt(left_val_px);
var left_Percentage = (left_val_only/parent_width) * 100;
console.log ("left %", left_Percentage);
if (left_Percentage > 20) {
$("#snake").show();
$("#snake").animate({ top: "120%" }, {
duration: 2000
}).promise().done(function(){
$("#snake").hide();
});
}
if (left_Percentage > 80) {
$("#cat").show();
$("#cat").animate({ left: "110%" }, {
duration: 2500
}).promise().done(function(){
$("#cat").hide();
});
}
if (top_Percentage > 65) {
$div.css ("zIndex", 5)
@ -165,19 +195,6 @@ $(document).keydown(function(e) {
})
/* manipulate the z-index of the character
var offset_percent = offset
if (offset */
// saves game step in the local storage
window.onload = function() {
@ -203,6 +220,14 @@ $(document).keydown(function(e) {
$(".dog_bubble").toggle();
});
$(".dog_bubble").click (function(){
$(".message1").hide();
$(".dog_bubble2, .message_dog").toggle();
setTimeout ( function() {
$(".dog_bubble2, .message_dog").hide();
}, 5000)
});
$("#newspaper_seller").click (function(){
$(".vendor_bubble").toggle();
});
@ -217,18 +242,16 @@ $(document).keydown(function(e) {
$("#ned").click (function(){
$(".ned_bubble1").toggle();
$(".message2").show();
$(".message1").hide();
setTimeout (function () {
$(".ned_bubble2").show();
setTimeout (function () {
$(".message2").show();
},2000);
},2000);
});
$(".ned_more").click (function(){
$(".ned_bubble2").click (function(){
$(".ned_bubble3").toggle();
$(".message2,.ned_bubble1, .ned_bubble2").hide();
$(".message2").hide();
setTimeout (function () {
$(".message3").show();
},3000);

@ -203,12 +203,31 @@ span.button_text{
z-index:0;
}
#tree3_5 {
bottom:45%;
left: 35%;
position: absolute;
z-index:2;
}
#tree4{
bottom: 20%;
left: 70%;
position: absolute;
z-index:4;
}
#cat{
bottom: 20%;
left: 70%;
position: absolute;
z-index:3;
}
#snake{
bottom:44%;
left: 18%;
position: absolute;
z-index:2;
}
#flower6{
bottom: 65%;
@ -347,11 +366,12 @@ span.button_text{
font-family: sinistre;
font-size: 16px;
text-align: center;
width: 40px;
height: 18px;
width: 120px;
height: 55px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
cursor:pointer;
z-index: 50;
}
.dog_bubble:after {
@ -380,6 +400,49 @@ span.button_text{
margin-left: -8.5px;
display: block;
}
.dog_bubble2 {
bottom:35%;
left: 35%;
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;
}
.dog_bubble2: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;
}
.dog_bubble2: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;
}
.vendor_bubble {
bottom:75%;
@ -511,8 +574,8 @@ span.button_text{
}
.ned_bubble1 {
top:3%;
left: 88%;
top:7%;
left: 87%;
position: absolute;
background: #ffffff;
color: #000000;
@ -555,7 +618,7 @@ span.button_text{
}
.ned_bubble2 {
top:17%;
top:21%;
left: 84%;
position: absolute;
background: #ffffff;
@ -570,6 +633,7 @@ span.button_text{
padding: 18px;
border: #000000 solid 1px;
z-index:50;
cursor:pointer;
}
.ned_bubble2:after {
content: '';

Loading…
Cancel
Save