master
annasandri 4 years ago
parent 2045f3d7a2
commit f4b6a44e05

@ -8,22 +8,11 @@
<link rel="stylesheet" href="park.css"> <link rel="stylesheet" href="park.css">
</head> </head>
<style>
</style>
<body> <body>
<div id="groundline"></div> <div id="groundline"></div>
<!--<div id="player_img"></div>-->
<div id="ground"> <div id="ground">
<div id="player_img"></div> <div id="player_img"></div>
<img id="bench" src="imgs/park/bench1.gif" height="20%"> <img id="bench" src="imgs/park/bench1.gif" height="20%">
<img id="tree1" src="imgs/park/tree1.gif" height="30%"> <img id="tree1" src="imgs/park/tree1.gif" height="30%">
@ -37,16 +26,28 @@
<img id="flower5" src="imgs/park/flower1.gif" height="5%"> <img id="flower5" src="imgs/park/flower1.gif" height="5%">
<img id="grass1" src="imgs/park/grass1.gif" height="75vw"> <img id="grass1" src="imgs/park/grass1.gif" height="75vw">
<img id="grass2" src="imgs/park/grass1.gif" height="75vw"> <img id="grass2" src="imgs/park/grass1.gif" height="75vw">
<img id="statue" src="imgs/park/statue.gif" height="22%">
<img id="tree4" src="imgs/park/tree4.gif" height="25%">
<img id="flower6" src="imgs/park/flower1.1.gif" height="5%">
<img id="flower7" src="imgs/park/flower3.1.gif" height="6%">
<img id="flower8" src="imgs/park/flower3.1.gif" height="6%">
<img id="tree5" src="imgs/park/tree1.gif" height="30%">
<!-- <img id="dog_guy" src="imgs/park/guy_dog.gif" height="13%">-->
<img id="sport1" src="imgs/park/fitness1.gif" height="10%">
<img id="sport2" src="imgs/park/fitness2.gif" height="10%">
<img id="newspaper_seller" src="imgs/park/newspaper_seller.gif" height="15%">
<img id="woman" src="imgs/park/woman.gif" height="19%">
<img id="ned" src="imgs/park/ned.gif" height="15%">
<div class="woman_bubble" style="display: none;">I don't know, you should try to ask the news vendor.</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> </div>
<div class="text_container"> <div class="text_container">
move <div class="message1 instructions">
Move around the park with the arrows ←↑↓→ and click on the people to ask them if they saw who left the newspaper on the bench.
</div>
</div> </div>
@ -56,7 +57,7 @@ move
// player moves // player moves
var $div = $('#player_img'); var $div = $('#player_img');
var screenLeftMin = 0; var screenLeftMin = 200;
var screenLeftMax = 870; var screenLeftMax = 870;
function adjustScroll() { function adjustScroll() {
@ -78,26 +79,56 @@ move
$(document).keydown(function(e) { $(document).keydown(function(e) {
var offset = $div.position();
console.log("offset:", offset);
switch (e.which) { switch (e.which) {
case 37: case 37:
$div.css('left', $div.offset().left - 20); /* $div.css('left', $div.offset().left - 20);*/
e.preventDefault(); offset.left -= 20;
adjustScroll(); console.log("left");
break; break;
case 38: case 38:
$div.css('top', $div.offset().top - 20); // $div.css('top', $div.offset().top - 20);
offset.top -= 20;
console.log("top");
break; break;
case 39: case 39:
$div.css('left', $div.offset().left + 20); //$div.css('left', $div.offset().left + 20);
e.preventDefault(); offset.left += 20;
adjustScroll(); console.log("right");
break; break;
case 40: case 40:
$div.css('top', $div.offset().top + 20); //$div.css('top', $div.offset().top + 20);
offset.top += 20;
console.log("down");
break; break;
} }
//check the offset
if (offset.left < 0) {
offset.left = 0;
}
if (offset.left > $("#ground").width() - 50) {
offset.left = $("#ground").width() - 50;
}
if (offset.top < 0) {
offset.top = 0;
}
if (offset.top > $("#ground").height() - 100) {
offset.top = $("#ground").height() - 100;
}
$div.css("left", offset.left);
$div.css("top", offset.top);
e.preventDefault();
adjustScroll();
}) })
// saves game step in the local storage // saves game step in the local storage
window.onload = function() { window.onload = function() {
window.localStorage.setItem("looking_for_N","opened") window.localStorage.setItem("looking_for_N","opened")
@ -112,13 +143,20 @@ $(document).keydown(function(e) {
player_img.appendChild(img); player_img.appendChild(img);
//get player name from local storage //get player name from local storage
document.querySelector('#player_name').innerHTML =localStorage.playerName;
$("#woman").click (function(){
$(".woman_bubble").toggle();
});
$("#newspaper_seller").click (function(){
$(".vendor_bubble").toggle();
});
</script> </script>
<script type="text/javascript" src="index.js" ></script> <script type="text/javascript" src="index.js" ></script>
</body> </body>

@ -41,25 +41,13 @@
<div class="woman_bubble" style="display: none;">I don't know, you should try to ask the news vendor.</div> <div class="woman_bubble" style="display: none;">I don't know, you should try to ask the news vendor.</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="vendor_bubble" style="display: none;">I sold a copy to a guy not so long ago. He must be still around.</div>
<div class="fit1_bubble" style="display: none;" >...</div>
<div class="fit2_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 carrying on some investigations on the kid's conditions there. Believe me, the situation is shadier than it seems. 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 headquarter: I can show you the proof of what I'm saying</div>
</div> </div>
<div class="text_container"> <div class="text_container">
<div class="message1 instructions"> <div class="message1 instructions">
Move around the park with the arrows ←↑↓→ and click on the people to ask them if they saw the owner of the newspaper. Move around the park with the arrows ←↑↓→ and click on the people to ask them if they saw who left the newspaper on the bench.
</div> </div>
<div class="message2" style="display: none;">
You found him! <button class="ned1"><span class="button_text">Hear more from Ned</span></button> .
</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.
</div>
</div> </div>
@ -91,30 +79,56 @@
$(document).keydown(function(e) { $(document).keydown(function(e) {
var offset = $div.position();
console.log("offset:", offset);
switch (e.which) { switch (e.which) {
case 37: case 37:
$div.css('left', $div.offset().left - 20); /* $div.css('left', $div.offset().left - 20);*/
e.preventDefault(); offset.left -= 20;
adjustScroll(); console.log("left");
break; break;
case 38: case 38:
$div.css('top', $div.offset().top - 20); // $div.css('top', $div.offset().top - 20);
e.preventDefault(); offset.top -= 20;
adjustScroll(); console.log("top");
break; break;
case 39: case 39:
$div.css('left', $div.offset().left + 20); //$div.css('left', $div.offset().left + 20);
e.preventDefault(); offset.left += 20;
adjustScroll(); console.log("right");
break; break;
case 40: case 40:
$div.css('top', $div.offset().top + 20); //$div.css('top', $div.offset().top + 20);
e.preventDefault(); offset.top += 20;
adjustScroll(); console.log("down");
break; break;
} }
//check the offset
if (offset.left < 0) {
offset.left = 0;
}
if (offset.left > $("#ground").width() - 50) {
offset.left = $("#ground").width() - 50;
}
if (offset.top < 0) {
offset.top = 0;
}
if (offset.top > $("#ground").height() - 100) {
offset.top = $("#ground").height() - 100;
}
$div.css("left", offset.left);
$div.css("top", offset.top);
e.preventDefault();
adjustScroll();
}) })
// saves game step in the local storage // saves game step in the local storage
window.onload = function() { window.onload = function() {
window.localStorage.setItem("looking_for_N","opened") window.localStorage.setItem("looking_for_N","opened")
@ -139,25 +153,6 @@ $(document).keydown(function(e) {
$(".vendor_bubble").toggle(); $(".vendor_bubble").toggle();
}); });
$("#sport1").click (function(){
$(".fit2_bubble").toggle();
});
$("#sport2").click (function(){
$(".fit1_bubble").toggle();
});
$("#ned").click (function(){
$(".ned_bubble1, .ned_bubble2").toggle();
$(".message1").hide();
$(".message2").show();
});
$(".ned1").click (function(){
$(".message2").hide();
$(".ned_bubble3,.message3 ").show();
});
</script> </script>

Loading…
Cancel
Save