You found him!
Hear more from Ned .
@@ -122,19 +122,23 @@ $(document).keydown(function(e) {
offset.left -= 20;
console.log("left");
$div.addClass("flipped");
+ $(".message1").hide();
break;
case 38:
offset.top -= 20;
console.log("top");
+ $(".message1").hide();
break;
case 39:
offset.left += 20;
console.log("right");
$div.removeClass("flipped");
+ $(".message1").hide();
break;
case 40:
offset.top += 20;
console.log("down");
+ $(".message1").hide();
break;
}
//check the offset and prevent the character to exceed the screen dimension
diff --git a/tree/park_N_clues.css b/tree/park_N_clues.css
new file mode 100644
index 0000000..8f8138a
--- /dev/null
+++ b/tree/park_N_clues.css
@@ -0,0 +1,740 @@
+
+@font-face {
+ font-family: sinistre;
+ src: url(fonts/Sinistre-S†Caroline.woff),
+ url(fonts/Sinistre-S†Caroline.otf);
+}
+@font-face {
+ font-family: jolybolditalic;
+ src: url(fonts/JolyDisplay-BoldDisplayItalic.woff),
+ url(fonts/JolyDisplay-BoldDisplayItalic.otf);
+}
+
+@font-face {
+ font-family: jolyregularitalic;
+ src: url(fonts/JolyDisplay-RegularDisplayItalic.woff),
+ url(fonts/JolyDisplay-RegularDisplayItalic.otf);
+}
+@font-face {
+ font-family: jolyregular;
+ src: url(fonts/JolyDisplay-RegularDisplay.woff),
+ url(fonts/JolyDisplay-RegularDisplay.otf);
+}
+
+@font-face {
+ font-family: jolybold;
+ src: url(fonts/JolyDisplay-BoldDisplay.woff),
+ url(fonts/JolyDisplay-BoldDisplay.otf);
+}
+
+ body {
+ font-family: jolyregular;
+ font-size: 1.8vw;
+ overflow-y: hidden;
+
+ }
+
+ .instructions{
+ font-family:jolyregularitalic;
+
+ }
+ span.instructions_arrow{
+ padding-left:40px;
+ font-size: 2.4vw;
+ font-family:jolybolditalic;
+}
+
+
+
+ ::-moz-selection { /* Code for Firefox */
+ background: transparent;
+ }
+ ::selection {
+ background: transparent;
+ }
+
+ div#player_img {
+ bottom: 20%;
+ left: 12%;
+ position:absolute ;
+ z-index: 3;
+ }
+
+
+
+#ground{
+ position:absolute;
+ height:100%;
+ width:5000px;
+
+
+}
+
+#groundline {
+ position: fixed;
+ top:130px;
+ height:0%;
+ width: 100%;
+ border-top: 1px solid;
+}
+
+
+div.text_container {
+ bottom: 40px;
+ left:40px;
+ right:40px;
+ position:fixed;
+ margin: auto;
+ line-height: 1.4em;
+}
+
+button{
+ -webkit-appearance: none;
+ background-color: white;
+ border: 0.1em black solid;
+ border-radius: 25em;
+ color:black;
+ cursor:pointer;
+ font-family: jolybolditalic;
+}
+
+button:hover{
+border: 0.1em transparent solid;
+-webkit-box-shadow: 0px 0px 8px 1px black;
+-moz-box-shadow: 0px 0px 8px 1px black;
+box-shadow: 0px 0px 8px 1px black;
+
+}
+
+span.button_text{
+ font-size: 1.6vw;
+ padding: 8px;
+}
+
+#player_name{
+ font-family: jolybolditalic;
+}
+
+
+
+/*images*/
+
+
+
+#bench {
+ bottom: 32%;
+ left: 6%;
+ position: absolute;
+ z-index:2;
+}
+
+#tree1 {
+ top:8%;
+ left: 10%;
+ position: absolute;
+ z-index:0;
+
+}
+#tree2 {
+ bottom:40%;
+ left: 2.5%;
+ position: absolute;
+ z-index:2;
+}
+#tree3 {
+ bottom:45%;
+ left: 18%;
+ position: absolute;
+ z-index:2;
+}
+#tree3_5 {
+ bottom:45%;
+ left: 35%;
+ position: absolute;
+ z-index:2;
+}
+
+
+#flower1 {
+ bottom:68%;
+ left: 5%;
+ position: absolute;
+ z-index:0;
+}
+
+#flower2{
+ bottom: 28%;
+ left: 1.5%;
+ position: absolute;
+ z-index:17;
+}
+
+#flower3{
+ bottom: 50%;
+ left: 13%;
+ position: absolute;
+ z-index:2;
+}
+#flower4{
+ bottom: 35%;
+ left: 22%;
+ position: absolute;
+ z-index:2;
+}
+#flower5{
+ bottom: 65%;
+ left: 17%;
+ position: absolute;
+ 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;
+}
+#cat{
+ bottom: 20%;
+ left: 70%;
+ position: absolute;
+ z-index:3;
+}
+#snake{
+ bottom:44%;
+ left: 18%;
+ position: absolute;
+ z-index:2;
+}
+
+#flower6{
+ bottom: 65%;
+ left: 80%;
+ position: absolute;
+ z-index:2;
+}
+
+#flower7{
+ bottom: 50%;
+ left: 55%;
+ position: absolute;
+ z-index:0;
+}
+
+#flower8{
+ bottom: 30%;
+ left: 97%;
+ position: absolute;
+ 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%;
+ position: absolute;
+ cursor: pointer;
+ z-index:0;
+}
+
+
+/* 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;
+ }
+ #woman2{
+ bottom: 20%;
+ left: 55%;
+ position: absolute;
+ cursor: pointer;
+ z-index:5;
+ }
+
+ #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.5%;
+ position: absolute;
+ background: #ffffff;
+ color: #000000;
+ font-family: sinistre;
+ font-size: 16px;
+ line-height: 17px;
+ text-align: center;
+ width: 250px;
+ height: 75px;
+ 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-color: transparent #ffffff;
+ border-width: 20px 20px 20px 0;
+ top: 50%;
+ left: -20px;
+ margin-top: -20px;
+ }
+ .woman_bubble:before {
+ content: '';
+ position: absolute;
+ width: 0;
+ z-index: 0;
+ border-style: solid;
+ border-color: transparent #000000;
+ border-width: 21px 21px 21px 0;
+ top: 50%;
+ left: -21.5px;
+ margin-top: -21px;
+ display: block;
+ }
+ .dog_bubble {
+ bottom:33%;
+ left: 40%;
+ position: absolute;
+ background: #ffffff;
+ color: #000000;
+ font-family: sinistre;
+ font-size: 16px;
+ text-align: center;
+ width:130px;
+ height: 39px;
+ 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: 65px;
+ 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;
+ }
+ .woman2_bubble {
+ bottom:38%;
+ left: 52%;
+ position: absolute;
+ background: #ffffff;
+ color: #000000;
+ font-family: sinistre;
+ font-size: 16px;
+ text-align: center;
+ width: 150px;
+ height: 70px;
+ border-radius: 10px;
+ padding: 18px;
+ border: #000000 solid 1px;
+ z-index: 50;
+ }
+ .woman2_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;
+ }
+ .woman2_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;
+ }
+
+ .fit2_bubble {
+ bottom:31%;
+ left: 64%;
+ position: absolute;
+ background: #ffffff;
+ color: #000000;
+ font-family: sinistre;
+ font-size: 16px;
+ text-align: center;
+ width: 150px;
+ height: 55px;
+ 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:76.5%;
+ left: 62.5%;
+ position: absolute;
+ background: #ffffff;
+ color: #000000;
+ font-family: sinistre;
+ font-size: 16px;
+ text-align: center;
+ width: 150px;
+ height: 80px;
+ 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: 140px;
+ 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;
+}
+.flipped {
+ transform: scale(-1, 1);
+ -moz-transform: scale(-1, 1);
+ -webkit-transform: scale(-1, 1);
+ -o-transform: scale(-1, 1);
+ -khtml-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+}
+
+
+/* hide scroll bar */
+/* width */
+::-webkit-scrollbar {
+ color:white;
+ }
+
+ /* Track */
+ ::-webkit-scrollbar-track {
+ background: white;
+ }
+
+ /* Handle */
+ ::-webkit-scrollbar-thumb {
+ background: white;
+ }
+
+ /* Handle on hover */
+ ::-webkit-scrollbar-thumb:hover {
+ background: white;
+ }
\ No newline at end of file
diff --git a/tree/park_N copy.html b/tree/park_N_clues.html
similarity index 68%
rename from tree/park_N copy.html
rename to tree/park_N_clues.html
index 7563b5d..86ce5bb 100644
--- a/tree/park_N copy.html
+++ b/tree/park_N_clues.html
@@ -3,9 +3,9 @@
-
looking for
+
walk
-
+
@@ -15,10 +15,13 @@
+
+
+
@@ -33,27 +36,29 @@
-
-
+
+
+
-
-
+
+
-
I don't know, you should try to ask the news vendor.
-
woof
-
I sold a copy to a guy not so long ago. He must be still around.
-
...
-
...
-
I was hoping that someone would find my newspaper.
-
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?
-
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.
+
Have you heard about the food poisoning at the school? My son is out for the trip this week-end. I hope everything will be fine.
+
I'm so glad my grandchildren are away for the weekend.
+
I would talk to Ned if I were you.
+
Did you read today's news? Crazy stuff is happening in the valley.
+
I heard that someone is already investigating.
+
The truth will come out, they are keeping an eye on Monteferro.
+
Do you wanna hear what I jound found out?
+
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.
+
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.
- Move around the park with the arrows ←↑↓→ and click on the people to ask them if they saw the newspaper's owner.
+ → Move around the park with the arrows ←↑↓→
You found him!
Hear more from Ned .
@@ -91,12 +96,7 @@
}
-
-
-
-
-
-
+
//move the character
$(document).keydown(function(e) {
@@ -110,6 +110,30 @@ $(document).keydown(function(e) {
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: "120%" }, {
+ duration: 2000
+ }).promise().done(function(){
+ $("#cat").hide();
+ });
+ }
+
if (top_Percentage > 65) {
$div.css ("zIndex", 5)
}
@@ -126,18 +150,24 @@ $(document).keydown(function(e) {
case 37:
offset.left -= 20;
console.log("left");
+ $div.addClass("flipped");
+ $(".message1").hide();
break;
case 38:
offset.top -= 20;
console.log("top");
+ $(".message1").hide();
break;
case 39:
offset.left += 20;
console.log("right");
+ $div.removeClass("flipped");
+ $(".message1").hide();
break;
case 40:
offset.top += 20;
console.log("down");
+ $(".message1").hide();
break;
}
//check the offset and prevent the character to exceed the screen dimension
@@ -198,6 +228,10 @@ $(document).keydown(function(e) {
$(".woman_bubble").toggle();
});
+ $("#woman2").click (function(){
+ $(".woman2_bubble").toggle();
+ });
+
$("#dog").click (function(){
$(".dog_bubble").toggle();
});
@@ -215,23 +249,23 @@ $(document).keydown(function(e) {
});
$("#ned").click (function(){
- $(".ned_bubble1").toggle();
+ $(".ned_bubble2").toggle();
$(".message1").hide();
setTimeout (function () {
- $(".ned_bubble2").show();
- setTimeout (function () {
- $(".message2").show();
- },2000);
- },2000);
+ $(".ned_bubble3").show();
+ setTimeout (function () {
+ $(".message3").show();
+ },2000);
+ },2000);
});
-
+/*
$(".ned_more").click (function(){
$(".ned_bubble3").toggle();
$(".message2,.ned_bubble1, .ned_bubble2").hide();
setTimeout (function () {
$(".message3").show();
},3000);
- });
+ });*/
diff --git a/tree/park_dream.html b/tree/park_dream.html
deleted file mode 100644
index 19202e9..0000000
--- a/tree/park_dream.html
+++ /dev/null
@@ -1,218 +0,0 @@
-
-
-
-
-
-
park_dream
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file