barn
*anna*
3 years ago
parent
f81c7089c8
commit
9b87e68046
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@ -0,0 +1,180 @@
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
::-moz-selection { /* Code for Firefox */
|
||||
background: transparent;
|
||||
}
|
||||
::selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: jolyregular;
|
||||
font-size: 1.8vw;
|
||||
|
||||
}
|
||||
|
||||
.instructions{
|
||||
font-family:jolyregularitalic
|
||||
|
||||
}
|
||||
|
||||
|
||||
#player_img {
|
||||
bottom: 20%;
|
||||
left: 15%;
|
||||
position:absolute ;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
|
||||
#ground {
|
||||
position: fixed;
|
||||
bottom:0px;
|
||||
height:83%;
|
||||
width: 100%;
|
||||
border-top: 0.1vw solid;
|
||||
}
|
||||
|
||||
|
||||
div.text_container {
|
||||
bottom: 2%;
|
||||
left:3%;
|
||||
right:3%;
|
||||
position:fixed;
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 1em;
|
||||
margin-inline-end: 1em;
|
||||
|
||||
}
|
||||
|
||||
button{
|
||||
-webkit-appearance: none;
|
||||
background-color: white;
|
||||
border: 0.11vw black solid;
|
||||
border-radius: 25vw;
|
||||
color:black;
|
||||
cursor:pointer;
|
||||
font-family: jolybolditalic;
|
||||
}
|
||||
|
||||
button:hover{
|
||||
border: 0.11vw transparent solid;
|
||||
-webkit-box-shadow: 0px 0px 8px 2px black;
|
||||
-moz-box-shadow: 0px 0px 8px 2px black;
|
||||
box-shadow: 0px 0px 8px 2px black;
|
||||
|
||||
}
|
||||
|
||||
span.button_text{
|
||||
font-size: 1.6vw;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#ned {
|
||||
bottom: 21%;
|
||||
left: 8%;
|
||||
position:absolute ;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
#barn {
|
||||
bottom: 60%;
|
||||
right: 10%;
|
||||
position:absolute ;
|
||||
z-index: 10;
|
||||
}
|
||||
#tree2 {
|
||||
bottom: 70%;
|
||||
right: 7%;
|
||||
position:absolute ;
|
||||
z-index: 5;
|
||||
}
|
||||
#tree1 {
|
||||
bottom: 47%;
|
||||
left: 8%;
|
||||
position:absolute ;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
#farmer {
|
||||
bottom: 75%;
|
||||
right: 8%;
|
||||
position:absolute ;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#mulino {
|
||||
bottom: 70%;
|
||||
left: 15%;
|
||||
position:absolute ;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.field{
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top:10%;
|
||||
left: 30%;
|
||||
right: 30%;
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
img.corn{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>Monteferro</title>
|
||||
<link rel="icon" href="imgs/park/flower2.gif">
|
||||
<link rel="stylesheet" href="monteferro.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<img id="barn" src="imgs/monteferro/barn.gif" height="18%">
|
||||
<img id="mulino" src="imgs/monteferro/mulino.gif" height="20%">
|
||||
<img id="tree1" src="imgs/monteferro/tree.gif" height="28%">
|
||||
<img id="tree2" src="imgs/monteferro/tree.gif" height="25%">
|
||||
|
||||
<div id="ground">
|
||||
|
||||
<div id="player_img"></div>
|
||||
<img id="ned" src="imgs/monteferro/ned.gif" height="15%">
|
||||
|
||||
<img id="farmer" src="imgs/monteferro/farmer1.gif" style="display: none;" height="15%">
|
||||
|
||||
<div class="field">
|
||||
<img id="corn1" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn2" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn3" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn4" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn5" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn6" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn7" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn8" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn9" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn10" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn11" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn12" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn13" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn14" class="corn" src="imgs/monteferro/corn.gif" >
|
||||
<img id="corn15" 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="corn18" 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" >
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text_container">
|
||||
<div class="message1">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="jquery.min.js"></script>
|
||||
<script>
|
||||
|
||||
// saves game step in the local storage
|
||||
window.onload = function() {
|
||||
window.localStorage.setItem("monteferro","opened")
|
||||
console.log ("monteferro:",localStorage.monteferro)
|
||||
}
|
||||
|
||||
//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);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="index.js" ></script>
|
||||
|
||||
|
||||
</body>
|
||||
Loading…
Reference in New Issue