master
*anna* 3 years ago
parent bab524cd3e
commit 79076b5d0e

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

@ -1,8 +1,8 @@
@font-face {
font-family: sinistre;
src: url(fonts/Sinistre-SCaroline.woff),
url(fonts/Sinistre-SCaroline.otf);
src: url(fonts/Sinistre-StCaroline.woff),
url(fonts/Sinistre-StCaroline.otf);
}
@font-face {
font-family: jolybolditalic;
@ -224,8 +224,20 @@ span.button_text{
display: grid;
grid-template-columns: 25% 25% 25% 25% 25%;
grid-template-rows: 25% 25% 25% 25%;
z-index: 1;
}
.field_cover {
max-width: 47%;
max-height: 55%;
top: 15%;
bottom: 10%;
left: 31%;
right: 32.5%;
position: absolute;
background-color:transparent;
z-index: 5;
}
img.corn{
max-width: 100%;
max-height: 100%;

@ -30,7 +30,7 @@
<div id="player_img"></div>
<img id="ned" src="imgs/monteferro/ned2.gif" height="110px">
<div class="field_cover"></div>
<div class="field no_touch">
<img id="corn1" class="corn" src="imgs/monteferro/corn.gif" >
<img id="corn2" class="corn" src="imgs/monteferro/corn.gif" >
@ -116,6 +116,7 @@
$("#start_button").click (function () {
$(".ned_baloon2,.ned_baloon1, .message1, .message2 ").hide();
$(".game_bar").show();
$(".field_cover").css("z-index",-10);
});
// fluoride game
@ -250,6 +251,7 @@ var loose_counter = 0;
function check_counters() {
if (fluoride_counter == 5) {
$(".field_cover").css("z-index",10);
console.log ("you won!");
fluoride_counter = 0;
loose_counter = 0;
@ -259,6 +261,7 @@ var loose_counter = 0;
}
if (loose_counter == 6) {
$(".field_cover").css("z-index",10);
console.log ("you lost!");
fluoride_counter = 0;
loose_counter = 0;
@ -268,6 +271,7 @@ var loose_counter = 0;
}
$("#try_again").click (function () {
$(".field_cover").css("z-index",-10);
$(".corn").attr('src', "imgs/monteferro/corn.gif");
$('.cobs_collected').html(fluoride_counter);
$(".message_lost, .farmer").hide();

@ -191,6 +191,10 @@ a {
color: #c94dff;
}
.blur_background {
filter: blur(20px);
}
a:hover {
background-color:#c94dff;
color: white;

@ -104,27 +104,27 @@
<div id="groundline"></div>
<div id="groundline" class="blur"></div>
<div id="ground">
<div id="player_img"></div>
<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="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="70px">
<img id="kiosk" src="imgs/park/stand3.gif" height="150px" style="display: none;">
<div id="player_img" class="blur"></div>
<img id="bench" class="blur" src="imgs/park/bench.gif" height="150px">
<img id="tree1" class="blur" src="imgs/park/tree1.gif" height="200px">
<img id="tree2" class="blur" src="imgs/park/tree4.gif" height="160px">
<img id="tree3" class="blur" src="imgs/park/tree4.gif" height="160px">
<img id="flower1" class="blur" src="imgs/park/flower1.gif" height="30px">
<img id="flower2" class="blur" src="imgs/park/flower3.gif" height="40px">
<img id="flower3" class="blur"src="imgs/park/flower3.1.gif" height="40px">
<img id="flower4" class="blur" src="imgs/park/flower1.1.gif" height="30px">
<img id="flower5" class="blur" src="imgs/park/flower1.gif" height="30px">
<img id="grass1" class="blur" src="imgs/park/grass1.gif" height="70px">
<img id="kiosk" class="blur" src="imgs/park/stand3.gif" height="150px" style="display: none;">
<div class="comic_div">
<div class="bubble1" style="display: none;" >Sorry, no fries today</div>
<div class="bubble2" style="display: none;" >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>
<div class="text_container">
@ -171,6 +171,7 @@
$(".open_newspaper_index").click (function(){
$(".message1, .message4").hide();
$("#newspaper, .close").show();
$(".blur"). addClass("blur_background");
//saves that u opened the newspaper in the local storage
window.localStorage.setItem("newspaper","opened")
console.log ("newspaper:",localStorage.newspaper)
@ -227,6 +228,7 @@
$("#baloon4").hide();
$(".message1").hide();
$(".message4").show();
$(".blur"). removeClass("blur_background");
});
$("#fries").click (function(){

@ -151,7 +151,7 @@ span.button_text{
z-index: 3;
}
#ferryman {
.ferryman {
top:46%;
left: 48%;
position: absolute;

@ -16,7 +16,10 @@
<div id="player_img" class="player_land moving_duo"></div>
<img id="army" src="imgs/river_bank/army1.gif" height="270px">
<img id="ferryman" src="imgs/river_bank/ferryman.gif" height="120px">
<div class="ferryman">
<img id="ferryman_good" src="imgs/river_bank/sailor1.gif" height="120px">
<img id="ferryman_evil" src="imgs/river_bank/ferryman.gif" height="120px"style="display: none;">
</div>
<img id="river" src="imgs/river_bank/water.png">
@ -62,25 +65,26 @@
// boat animation
$("#ferryman").click (function(){
$(".ferryman").click (function(){
console.log("ciao");
$(".bubble").show();
setTimeout( function() {
$(".bubble2").show();
$("#ferryman_good").hide();
$(".bubble2,#ferryman_evil").show();
setTimeout( function() {
$(".bubble2,.bubble").hide();
setTimeout( function() {
$("#boat_empty, #army, #ferryman").hide();
$("#ferryman_evil").detach();
$("#boat_empty, #army").hide();
$("#boat_full").show();
$("#player_img").removeClass("player_land");
//$("#player_img").addClass("player_boat");
$("#player_img").hide();
$(".boat").animate({ left: "100%" }, {
duration: 2500 })
.promise().done(function(){
location.href='spring_river.html';
});
}, 1000);
}, 1500);
}, 1000);
}, 1000);
});

@ -58,7 +58,7 @@
}
#ground_color {
width: 6100px;
width: 5100px;
height: 120%;
position:fixed;
margin:-100px;
@ -69,7 +69,7 @@
#ground{
position:absolute;
height:100%;
width:6000px;
width:5000px;
}
#groundline {
@ -128,11 +128,11 @@ div#player_img {
}
.army {
position: fixed;
left:2%;
top: 50px;
height: 380px;
width: 500px;
position: absolute;
top:10%;
left: 5%;
width: 450px;
height: 300px;
}
@ -195,15 +195,15 @@ div#player_img {
#tree1 {
top:30%;
top:6%;
left: 17%;
position: absolute;
z-index:0;
}
#tree2 {
bottom:18%;
left: 10%;
top:40%;
left: 14%;
position: absolute;
z-index:2;
}

@ -14,24 +14,19 @@
<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">
<img id="fighter2" src="imgs/spring_river/fighter2.gif" height="120px">
<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="160px">
<img id="fighter7" src="imgs/spring_river/fighter7.gif" height="120px">
<img id="fighter8" src="imgs/spring_river/fighter8.gif" height="120px">
</div>
<div class="army">
<div id="player_img" ></div>
<img id="fighter1" src="imgs/spring_river/fighter1.gif" height="120px">
<img id="fighter2" src="imgs/spring_river/fighter2.gif" height="120px">
<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="160px">
<img id="fighter7" src="imgs/spring_river/fighter7.gif" height="120px">
<img id="fighter8" src="imgs/spring_river/fighter8.gif" height="120px">
</div>
<div id="ground">
<img id="tree1" src="imgs/spring_river/tree4.gif" height="160px">
<img id="tree2" src="imgs/spring_river/tree4.gif" height="160px">
@ -39,40 +34,43 @@
<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>
<div class="text_container invert" >
<div class="message1">
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 class="text_container invert" >
<div class="message1">
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>
<div class="message3" style="display: none;">
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
// player moves
// saves game step in the local storage
window.onload = function() {
window.localStorage.setItem("spring_river","opened");
console.log ("spring river:",localStorage.spring_river);
}
//get player avatar from local storage
console.log (localStorage.myavatar)
var img = document.createElement("img");
img.src = localStorage.myavatar;
var player_img = document.querySelector("#player_img");
player_img.appendChild(img);
//adjust camera scroll
var $div = $('.army');
var screenLeftMin = 200;
var screenLeftMax = 870;
var $div = $('.army');
var screenLeftMin = 100;
var screenLeftMax = 780;
function adjustScroll() {
var playerLeft = parseInt($div.css("left"));
@ -90,26 +88,20 @@
}
//move the character
$(document).keydown(function(e) {
var offset = $div.position();
console.log("offset:", offset);
/* change z-index
var parent_height = $("#ground").height();
var top_val_px = $div.css('top');
var top_val_only = parseInt(top_val_px);
var top_Percentage = (top_val_only/parent_height) * 100;
console.log ("top %", top_Percentage);
// change z-index
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 (top_Percentage > 65) {
$div.css ("zIndex", 5)
}
@ -121,25 +113,17 @@ $(document).keydown(function(e) {
}
*/
switch (e.which) {
case 37:
offset.left -= 20;
console.log("left");
break;
case 38:
offset.top -= 20;
console.log("top");
break;
case 39:
offset.left += 20;
console.log("right");
break;
case 40:
offset.top += 20;
console.log("down");
break;
}
//check the offset and prevent the character to exceed the screen dimension
if (offset.left < 80) {
@ -149,40 +133,15 @@ $(document).keydown(function(e) {
offset.left = $("#ground").width() - 250;
}
if (offset.top < 50) {
offset.top = 50;
}
if (offset.top > $("#ground").height() - 50) {
offset.top = $("#ground").height() - 50;
}
$div.css("left", offset.left);
$div.css("top", offset.top);
e.preventDefault();
adjustScroll();
})
// saves game step in the local storage
window.onload = function() {
window.localStorage.setItem("spring_river","opened")
console.log ("Spring River:",localStorage.spring_river)
}
//get player avatar from local storage
console.log (localStorage.myavatar)
var img = document.createElement("img");
img.src = localStorage.myavatar;
var player_img = document.querySelector("#player_img");
player_img.appendChild(img);
//get player name from local storage
</script>
<script type="text/javascript" src="index.js" ></script>

Loading…
Cancel
Save