master
*anna* 4 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-face {
font-family: sinistre; font-family: sinistre;
src: url(fonts/Sinistre-SCaroline.woff), src: url(fonts/Sinistre-StCaroline.woff),
url(fonts/Sinistre-SCaroline.otf); url(fonts/Sinistre-StCaroline.otf);
} }
@font-face { @font-face {
font-family: jolybolditalic; font-family: jolybolditalic;
@ -224,8 +224,20 @@ span.button_text{
display: grid; display: grid;
grid-template-columns: 25% 25% 25% 25% 25%; grid-template-columns: 25% 25% 25% 25% 25%;
grid-template-rows: 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{ img.corn{
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;

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

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

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

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

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

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

@ -14,24 +14,19 @@
<div id="groundline" class="invert"></div> <div id="groundline" class="invert"></div>
<div id="ground"> <div class="army">
<div class="army"> <div id="player_img" ></div>
<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="fighter1" src="imgs/spring_river/fighter1.gif" height="120px"> <img id="fighter3" src="imgs/spring_river/fighter3.gif" height="120px">
<img id="fighter2" src="imgs/spring_river/fighter2.gif" height="120px"> <img id="fighter4" src="imgs/spring_river/fighter4.gif" height="120px">
<img id="fighter3" src="imgs/spring_river/fighter3.gif" height="120px"> <img id="fighter5" src="imgs/spring_river/fighter5.gif" height="120px">
<img id="fighter4" src="imgs/spring_river/fighter4.gif" height="120px"> <img id="fighter6" src="imgs/spring_river/fighter6.gif" height="160px">
<img id="fighter5" src="imgs/spring_river/fighter5.gif" height="120px"> <img id="fighter7" src="imgs/spring_river/fighter7.gif" height="120px">
<img id="fighter6" src="imgs/spring_river/fighter6.gif" height="160px"> <img id="fighter8" src="imgs/spring_river/fighter8.gif" height="120px">
<img id="fighter7" src="imgs/spring_river/fighter7.gif" height="120px"> </div>
<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="tree1" src="imgs/spring_river/tree4.gif" height="160px">
<img id="tree2" 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="tree4" src="imgs/spring_river/tree4.gif" height="160px">
<img id="tree5" 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"> <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="text_container invert" >
<div class="message1">
You and your army arrived at the Spring River Natural Park.<br> <div class="message1">
<span class="instructions"><span class="instructions_arrow"></span> Move with the right arrow to find the children!</span> 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>
<div class="message2" style="display: none;"> <div class="message2" style="display: none;">
</div> </div>
<div class="message3" style="display: none;"> <div class="message3" style="display: none;">
</div> </div>
</div> </div>
<script src="jquery.min.js"></script> <script src="jquery.min.js"></script>
<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 //adjust camera scroll
var $div = $('.army'); var $div = $('.army');
var screenLeftMin = 200; var screenLeftMin = 100;
var screenLeftMax = 870; var screenLeftMax = 780;
function adjustScroll() { function adjustScroll() {
var playerLeft = parseInt($div.css("left")); var playerLeft = parseInt($div.css("left"));
@ -90,26 +88,20 @@
} }
//move the character //move the character
$(document).keydown(function(e) { $(document).keydown(function(e) {
var offset = $div.position(); var offset = $div.position();
console.log("offset:", offset); console.log("offset:", offset);
/* change z-index // change z-index
var parent_height = $("#ground").height(); var parent_width = $("#ground").width();
var top_val_px = $div.css('top'); var left_val_px = $div.css('left');
var top_val_only = parseInt(top_val_px); var left_val_only = parseInt(left_val_px);
var top_Percentage = (top_val_only/parent_height) * 100; var left_Percentage = (left_val_only/parent_width) * 100;
console.log ("top %", top_Percentage); console.log ("left %", left_Percentage);
/*
if (top_Percentage > 65) { if (top_Percentage > 65) {
$div.css ("zIndex", 5) $div.css ("zIndex", 5)
} }
@ -121,25 +113,17 @@ $(document).keydown(function(e) {
} }
*/ */
switch (e.which) { switch (e.which) {
case 37: case 37:
offset.left -= 20; offset.left -= 20;
console.log("left"); console.log("left");
break; break;
case 38:
offset.top -= 20;
console.log("top");
break;
case 39: case 39:
offset.left += 20; offset.left += 20;
console.log("right"); console.log("right");
break; break;
case 40:
offset.top += 20;
console.log("down");
break;
} }
//check the offset and prevent the character to exceed the screen dimension //check the offset and prevent the character to exceed the screen dimension
if (offset.left < 80) { if (offset.left < 80) {
@ -149,40 +133,15 @@ $(document).keydown(function(e) {
offset.left = $("#ground").width() - 250; 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("left", offset.left);
$div.css("top", offset.top); $div.css("top", offset.top);
e.preventDefault(); e.preventDefault();
adjustScroll(); 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>
<script type="text/javascript" src="index.js" ></script> <script type="text/javascript" src="index.js" ></script>

Loading…
Cancel
Save