master
*anna* 4 years ago
parent 77060ec1a1
commit 52dd07c075

BIN
tree/imgs/.DS_Store vendored

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 404 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

Binary file not shown.

@ -47,33 +47,39 @@
} }
#player_img {
bottom: 20%;
left: 15%;
position:absolute ;
z-index: 20;
}
#ground { #ground {
position: fixed; position: fixed;
bottom:0px; top: 130px;
height:83%; bottom: 0px;
height: inherit;
width: 100%; width: 100%;
border-top: 0.1vw solid; border-top: 0.1vw solid;
z-index: -1;
} }
div.text_container { div.text_container {
bottom: 2%; bottom: 40px;
left:3%; left:40px;
right:3%; right:40px;
position:fixed; position:fixed;
margin-block-start: 1em; margin: auto;
margin-block-end: 1em; line-height: 1.4em;
margin-inline-start: 1em;
margin-inline-end: 1em; }
.game_bar {
top:40px;
right:80px;
position:fixed;
background-color: #ccb3ff;
border-radius: 25vw;
padding: 3px;
font-family: sinistre;
-webkit-box-shadow: 0px 0px 8px 8px #ccb3ff;
-moz-box-shadow: 0px 0px 8px 8px #ccb3ff;
box-shadow: 0px 0px 8px 8px #ccb3ff;
font-size: 1.6vw;
} }
button{ button{
@ -100,20 +106,29 @@ span.button_text{
} }
#ned { #ned {
bottom: 21%; bottom: 26%;
left: 13%;
position:absolute ;
z-index: 1;
}
#player_img {
bottom: 24%;
left: 8%; left: 8%;
position:absolute ; position:absolute ;
z-index: 20; z-index: 0;
} }
#barn { #barn {
bottom: 60%; bottom: 16%;
right: 10%; right: 4%;
position:absolute ; position:absolute ;
z-index: 10; z-index: 10;
} }
#tree2 { #tree2 {
bottom: 70%; bottom: 20%;
right: 7%; right: 7%;
position:absolute ; position:absolute ;
z-index: 5; z-index: 5;
@ -122,33 +137,87 @@ span.button_text{
bottom: 47%; bottom: 47%;
left: 8%; left: 8%;
position:absolute ; position:absolute ;
z-index: 11;
} }
#cow {
bottom: 25%;
right: 12%;
position:absolute ;
}
#farmer { #farmer_figure {
bottom: 75%; bottom: 30%;
right: 8%; right: 8%;
position:absolute ; position:absolute ;
}
#farmer_baloon {
bottom: 50%;
right: 18%;
position:absolute ;
z-index: 10; z-index: 10;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 50px;
height: 20px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
}
#farmer_baloon: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: 68%;
margin-left: -10px;
}
#farmer_baloon: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: 68%;
margin-left: -10px;
display: block;
} }
#mulino { #mulino {
bottom: 70%; bottom: 65%;
left: 15%; left: 22%;
position:absolute ; position:absolute ;
z-index: 10; z-index: 10;
} }
.field{ .field{
width: 40%; max-width: 30%;
height: 40%; max-height: 55%;
top:10%; top: 15%;
left: 30%; bottom: 10%;
right: 30%; left: 32.5%;
right: 32.5%;
position: absolute; position: absolute;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 25% 25% 25% 25% 25%;
grid-template-rows: 1fr 1fr 1fr 1fr; grid-template-rows: 25% 25% 25% 25%;
} }
img.corn{ img.corn{
max-width: 100%; max-width: 100%;
@ -156,6 +225,99 @@ img.corn{
margin: auto; margin: auto;
} }
.corn {
cursor: pointer;
}
/* baloons*/
.ned_baloon1 {
left: 5%;
bottom: 47%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 285px;
height: 135px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index:10;
}
.ned_baloon1:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color: #ffffff transparent;
border-width: 20px 20px 0;
bottom: -20px;
left: 60%;
margin-left: -20px;
}
.ned_baloon1:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-color: #000000 transparent;
border-width: 21px 21px 0;
bottom: -21.5px;
left: 60%;
margin-left: -21px;
display: block;
}
.ned_baloon2 {
bottom:23%;
left:26%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 285px;
height: 85px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index: 11;
}
.ned_baloon2: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;
}
.ned_baloon2: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;
}
/* hide scroll bar */ /* hide scroll bar */

@ -10,18 +10,26 @@
</head> </head>
<body> <body>
<img id="barn" src="imgs/monteferro/barn.gif" height="18%"> <!--<img id="barn" src="imgs/monteferro/barn2.png" height="150px">-->
<img id="mulino" src="imgs/monteferro/mulino.gif" height="20%"> <img id="mulino" src="imgs/monteferro/mulino.gif" height="140px">
<img id="tree1" src="imgs/monteferro/tree.gif" height="28%"> <img id="tree1" src="imgs/monteferro/tree.gif" height="220px">
<img id="tree2" src="imgs/monteferro/tree.gif" height="25%"> <img id="tree2" src="imgs/monteferro/bush.gif" height="80px">
<!--<img id="cow" src="imgs/monteferro/cow2.gif" height="140px">-->
<img class="farmer" id="farmer_figure" src="imgs/monteferro/farmer.gif" style="display: none;" height="120px">
<div class="farmer" id="farmer_baloon" style="display: none;" >*!!!*</div>
<div class="baloons">
<div class="ned_baloon1">I have reasons to suspect that the Monteferro Enterprise is poisoning the children's food with a substance called Fluoride. The drug is able to reduce an individual's power to resist domination by slowly calcifying the pineal gland. The school is using it to make children submissive and docile.</div>
<div class="ned_baloon2" style="display: none;" >The food coming from these fields has already been contaminated with the chemical: we should collect it and confront it with the one at the school canteen.</div>
</div>
<div id="ground"> <div id="ground">
<div id="player_img"></div> <div id="player_img"></div>
<img id="ned" src="imgs/monteferro/ned.gif" height="15%"> <img id="ned" src="imgs/monteferro/ned2.gif" height="120px">
<img id="farmer" src="imgs/monteferro/farmer1.gif" style="display: none;" height="15%">
<div class="field"> <div class="field">
<img id="corn1" class="corn" src="imgs/monteferro/corn.gif" > <img id="corn1" class="corn" src="imgs/monteferro/corn.gif" >
<img id="corn2" class="corn" src="imgs/monteferro/corn.gif" > <img id="corn2" class="corn" src="imgs/monteferro/corn.gif" >
@ -41,19 +49,31 @@
<img id="corn16" class="corn" src="imgs/monteferro/corn.gif" > <img id="corn16" class="corn" src="imgs/monteferro/corn.gif" >
<img id="corn17" class="corn" src="imgs/monteferro/corn.gif" > <img id="corn17" class="corn" src="imgs/monteferro/corn.gif" >
<img id="corn18" class="corn" src="imgs/monteferro/corn.gif" > <img id="corn18" class="corn" src="imgs/monteferro/corn.gif" >
<img id="corn19" class="corn" src="imgs/monteferro/corn.gif" > <img id="corn19" class="corn" src="imgs/monteferro/corn.gif" >
<img id="corn20" class="corn" src="imgs/monteferro/corn.gif" > <img id="corn20" class="corn" src="imgs/monteferro/corn.gif" >
</div> </div>
</div> </div>
<div class="text_container"> <div class="text_container">
<div class="message1"> <div class="message1">
Oh lord, it's horrible! What can you do to <button id="ned_more"><span class="button_text">stop this terrible abuse</span></button> ?
</div>
<div class="message2 instructions" style="display: none;">
Click on the veggies to get the proofs you need: you must collect at least 5 poisoned corn cobs before the Monteferro's employees see you!
<button id="start_button"><span class="button_text">Start now!</span></button>
</div>
<div class="message_won" style="display: none;">
You managed to collect enough fluoride! <button onclick="location.href='canteen.html';"><span class="button_text">Go to the school canteen</span></button> to confront the substances.
</div>
<div class="message_lost" style="display: none;">
On no! You got busted by the farmer! You should <button id="try_again"><span class="button_text">try again</span></button> .
</div> </div>
</div> <div class="game_bar" style="display: none;">
fluoride: <span class="cobs_collected"></span> / 5
</div>
<script src="jquery.min.js"></script> <script src="jquery.min.js"></script>
@ -61,8 +81,10 @@
// saves game step in the local storage // saves game step in the local storage
window.onload = function() { window.onload = function() {
window.localStorage.setItem("monteferro","opened") window.localStorage.setItem("monteferro","opened");
console.log ("monteferro:",localStorage.monteferro) console.log ("monteferro:",localStorage.monteferro);
$('.cobs_collected').html("0");
} }
//get player avatar from local storage //get player avatar from local storage
@ -71,9 +93,174 @@
img.src = localStorage.myavatar; img.src = localStorage.myavatar;
var player_img = document.querySelector("#player_img"); var player_img = document.querySelector("#player_img");
player_img.appendChild(img); player_img.appendChild(img);
/*ned baloons */
$("#ned_more").click (function () {
$(".ned_baloon2").show();
$(".message1").hide();
$(".message2").show();
});
$("#start_button").click (function () {
$(".ned_baloon2,.ned_baloon1, .message1, .message2 ").hide();
$(".game_bar").show();
});
// fluoride game
var fluoride_counter = 0;
var loose_counter = 0;
$("#corn1").click (function () {
$("#corn1").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
$("#corn2").click (function () {
$("#corn2").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
$("#corn3").click (function () {
loose_counter ++;
check_counters();
});
$("#corn4").click (function () {
loose_counter ++;
check_counters();
});
$("#corn5").click (function () {
loose_counter ++;
check_counters();
});
$("#corn6").click (function () {
$("#corn6").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
$("#corn7").click (function () {
loose_counter ++;
check_counters();
});
$("#corn8").click (function () {
$("#corn8").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
$("#corn9").click (function () {
$("#corn9").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
$("#corn10").click (function () {
$("#corn10").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
$("#corn11").click (function () {
$("#corn11").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
$("#corn12").click (function () {
loose_counter ++;
check_counters();
});
$("#corn13").click (function () {
loose_counter ++;
check_counters();
});
$("#corn14").click (function () {
$("#corn14").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
$("#corn15").click (function () {
$("#corn15").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
$("#corn16").click (function () {
$("#corn1").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
$("#corn17").click (function () {
loose_counter ++;
check_counters();
});
$("#corn18").click (function () {
loose_counter ++;
check_counters();
});
$("#corn19").click (function () {
$("#corn19").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
$("#corn20").click (function () {
$("#corn20").attr('src', "imgs/monteferro/pill.gif");
fluoride_counter ++;
$('.cobs_collected').html(fluoride_counter);
check_counters();
});
function check_counters() {
if (fluoride_counter == 5) {
console.log ("you won!");
fluoride_counter = 0;
loose_counter = 0;
$(".ned_baloon2,.ned_baloon1, .message1, .message2 ").hide();
$(".message_won").show();
$('.cobs_collected').html("5");
}
if (loose_counter == 6) {
console.log ("you lost!");
$(".message_won").hide();
$(".message_lost, .farmer").show();
}
}
$("#try_again").click (function () {
fluoride_counter = 0;
loose_counter = 0;
$(".corn").attr('src', "imgs/monteferro/corn.gif");
$('.cobs_collected').html(fluoride_counter);
$(".message_lost, .farmer").hide();
});

@ -119,7 +119,7 @@
<div class="comic_div" style="display: none;" > <div class="comic_div" style="display: none;" >
<div class="bubble1">Sorry, no fries today</div> <div class="bubble1">Sorry, no fries today</div>
<div class="bubble2">I went to the market this early morning but it seems like someone had already bought all the potatoes</div> </div> <div class="bubble2">I went to the market this early morning but by the time I was there someone already bought all the potatoes. </div> </div>
</div> </div>

Loading…
Cancel
Save