move
parent
a9d84f883a
commit
3edb1297a9
@ -0,0 +1,104 @@
|
|||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font: 18px monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
background-color: white;
|
||||||
|
border: 2px black;
|
||||||
|
width: 70%;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 13%;
|
||||||
|
right:13%;
|
||||||
|
position:fixed;
|
||||||
|
padding: 2% 2% 2% 2%;
|
||||||
|
margin-bottom: 2%;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iframes park */
|
||||||
|
|
||||||
|
#readme_1 {
|
||||||
|
position:absolute;
|
||||||
|
z-index: 0;
|
||||||
|
left: 13%;
|
||||||
|
top:5%;
|
||||||
|
|
||||||
|
}
|
||||||
|
#readme_1:hover {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#readme_2 {
|
||||||
|
position:absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 25%;
|
||||||
|
top:15%;
|
||||||
|
}
|
||||||
|
#readme_2:hover {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#readme_3 {
|
||||||
|
position:absolute;
|
||||||
|
z-index: 2;
|
||||||
|
left: 40%;
|
||||||
|
top:25%;
|
||||||
|
}
|
||||||
|
#readme_3:hover {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#readme_4 {
|
||||||
|
position:absolute;
|
||||||
|
z-index: 3;
|
||||||
|
right:13%;
|
||||||
|
top:35%;
|
||||||
|
}
|
||||||
|
#readme_4:hover {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.readme{
|
||||||
|
background-color: white;
|
||||||
|
color:red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pink{
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.readme::selection{
|
||||||
|
background-color: fuchsia;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* garden/walk*/
|
||||||
|
|
||||||
|
#gardenSpace {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color:violet;
|
||||||
|
position:absolute;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#pane {
|
||||||
|
position:relative;
|
||||||
|
width:900px;
|
||||||
|
height:700px;
|
||||||
|
border:2px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#square {
|
||||||
|
position: absolute;
|
||||||
|
width: 70px;
|
||||||
|
height: 115px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<title>readme</title>
|
||||||
|
<link rel="stylesheet" href="../style_1.css">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="readme">
|
||||||
|
<div class="readme">
|
||||||
|
Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="../script.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
|
||||||
|
|
||||||
|
// all jQuery stuff here
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
//newspaper passage iframes
|
||||||
|
$(document).on('click', '#paper_1', function(){
|
||||||
|
$("#readme_1").show();
|
||||||
|
});
|
||||||
|
$(document).on('click', '#paper_2', function(){
|
||||||
|
$("#readme_2").show();
|
||||||
|
});
|
||||||
|
$(document).on('click', '#paper_3', function(){
|
||||||
|
$("#readme_3").show();
|
||||||
|
});
|
||||||
|
$(document).on('click', '#paper_4', function(){
|
||||||
|
$("#readme_4").show();
|
||||||
|
});
|
||||||
|
|
||||||
|
});;
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
//switch story divs
|
||||||
|
$("#switchTo2_newspaper").click (function(){
|
||||||
|
$("#2_park_newspaper").show();
|
||||||
|
$("#1_park").hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#switchTo1_news").click (function(){
|
||||||
|
$("#1_park").show();
|
||||||
|
$("#2_park_newspaper").hide();
|
||||||
|
$("#readme_1,#readme_2,#readme_3,#readme_4").hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#switchTo2_walk").click (function(){
|
||||||
|
$("#2_park_walk").show();
|
||||||
|
$("#1_park").hide();
|
||||||
|
$("#gardenSpace").show();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#switchTo1_walk").click (function(){
|
||||||
|
$("#2_park_walk").hide();
|
||||||
|
$("#1_park").show();
|
||||||
|
$("#gardenSpace").hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
//readme 1 salmonRoll
|
||||||
|
$('.readme').hover(
|
||||||
|
function(){ $('.salmonRoll1').addClass('pink')},
|
||||||
|
function(){ $('.salmonRoll1').removeClass('pink')
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// garden moving box
|
||||||
|
var pane = $('#pane'),
|
||||||
|
box = $('#square'),
|
||||||
|
w = pane.width() - box.width(),
|
||||||
|
d = {},
|
||||||
|
x = 3;
|
||||||
|
|
||||||
|
function newv(v,a,b) {
|
||||||
|
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
|
||||||
|
return n < 0 ? 0 : n > w ? w : n;
|
||||||
|
}
|
||||||
|
|
||||||
|
$(window).keydown(function(e) { d[e.which] = true; });
|
||||||
|
$(window).keyup(function(e) { d[e.which] = false; });
|
||||||
|
|
||||||
|
setInterval(function() {
|
||||||
|
box.css({
|
||||||
|
left: function(i,v) { return newv(v, 37, 39); },
|
||||||
|
top: function(i,v) { return newv(v, 38, 40); }
|
||||||
|
});
|
||||||
|
}, 20);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});;
|
||||||
|
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font: 18px monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
background-color: white;
|
||||||
|
border: 2px black;
|
||||||
|
width: 70%;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 13%;
|
||||||
|
right:13%;
|
||||||
|
position:fixed;
|
||||||
|
padding: 2% 2% 2% 2%;
|
||||||
|
margin-bottom: 2%;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iframes park */
|
||||||
|
|
||||||
|
#readme_1 {
|
||||||
|
position:absolute;
|
||||||
|
z-index: 0;
|
||||||
|
left: 13%;
|
||||||
|
top:5%;
|
||||||
|
|
||||||
|
}
|
||||||
|
#readme_1:hover {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#readme_2 {
|
||||||
|
position:absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 25%;
|
||||||
|
top:15%;
|
||||||
|
}
|
||||||
|
#readme_2:hover {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#readme_3 {
|
||||||
|
position:absolute;
|
||||||
|
z-index: 2;
|
||||||
|
left: 40%;
|
||||||
|
top:25%;
|
||||||
|
}
|
||||||
|
#readme_3:hover {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#readme_4 {
|
||||||
|
position:absolute;
|
||||||
|
z-index: 3;
|
||||||
|
right:13%;
|
||||||
|
top:35%;
|
||||||
|
}
|
||||||
|
#readme_4:hover {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.readme{
|
||||||
|
background-color: white;
|
||||||
|
color:red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pink{
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.readme::selection{
|
||||||
|
background-color: fuchsia;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* garden/walk*/
|
||||||
|
|
||||||
|
#gardenSpace {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color:violet;
|
||||||
|
position:absolute;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#pane {
|
||||||
|
position:relative;
|
||||||
|
width:900px;
|
||||||
|
height:700px;
|
||||||
|
border:2px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#square {
|
||||||
|
position: absolute;
|
||||||
|
width: 70px;
|
||||||
|
height: 115px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,327 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: sinistre;
|
||||||
|
src: url(fonts/Sinistre-S†Caroline.otf);
|
||||||
|
}
|
||||||
|
@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: jolyheavyitalic;
|
||||||
|
src: url(fonts/JolyDisplay-HeavyDisplayItalic.woff),
|
||||||
|
url(fonts/JolyDisplay-HeavyDisplayItalic.otf);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: jolyregular;
|
||||||
|
font-size: 1.8vw;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection { /* Code for Firefox */
|
||||||
|
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
::selection {
|
||||||
|
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player_img {
|
||||||
|
bottom: 35%;
|
||||||
|
left: 35%;
|
||||||
|
position:absolute ;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#ground{
|
||||||
|
position:relative ;
|
||||||
|
height:100vh;
|
||||||
|
width:4000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#groundline {
|
||||||
|
position: fixed;
|
||||||
|
bottom:0px;
|
||||||
|
height:83%;
|
||||||
|
width: 100%;
|
||||||
|
border-top: 0.1vw solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
div.text_container {
|
||||||
|
bottom: 2%;
|
||||||
|
left:3%;
|
||||||
|
right:3%;
|
||||||
|
position:fixed;
|
||||||
|
/*border: 1px solid;*/
|
||||||
|
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.1vw black solid;
|
||||||
|
border-radius: 25vw;
|
||||||
|
color:black;
|
||||||
|
cursor:pointer;
|
||||||
|
font-family: jolybolditalic;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.button_text{
|
||||||
|
font-size: 1.6vw;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player_name{
|
||||||
|
font-family: jolybolditalic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#close_news{
|
||||||
|
position:fixed;
|
||||||
|
top:4%;
|
||||||
|
right:15%;
|
||||||
|
}
|
||||||
|
#newspaper{
|
||||||
|
position:fixed;
|
||||||
|
/* border: solid black 2px;*/
|
||||||
|
left:20%;
|
||||||
|
top:10%;
|
||||||
|
bottom:25%;
|
||||||
|
right:20%;
|
||||||
|
font-family: sinistre;
|
||||||
|
z-index:30;
|
||||||
|
font-size: 1.1vw;
|
||||||
|
max-height:80vw;
|
||||||
|
border: 1px solid black;
|
||||||
|
-webkit-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
|
||||||
|
-moz-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
|
||||||
|
box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.news_title_index{
|
||||||
|
font-size: 2vw;
|
||||||
|
font-family: jolyboldItalic;
|
||||||
|
text-decoration: underline 2px solid;
|
||||||
|
|
||||||
|
}
|
||||||
|
.news_title{
|
||||||
|
font-size: 1.5vw;
|
||||||
|
font-family: jolyboldItalic;
|
||||||
|
}
|
||||||
|
.news_author{
|
||||||
|
text-decoration: underline 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clues{
|
||||||
|
text-decoration: underline double 2px #ccb3ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.left_page{
|
||||||
|
float:left;
|
||||||
|
max-width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, white 95%, black 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.index, .school1 , .school2, .school3,.school4, .school5 {
|
||||||
|
padding: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right_page{
|
||||||
|
float:right;
|
||||||
|
max-width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(270deg, white 90%,black 100%);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#arrow_go1, #arrow_go2 {
|
||||||
|
bottom:2%;
|
||||||
|
right:2%;
|
||||||
|
position:absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 2.5vw;
|
||||||
|
font-family:jolybolditalic;
|
||||||
|
|
||||||
|
}
|
||||||
|
#arrow_back1, #arrow_back2 {
|
||||||
|
bottom:2%;
|
||||||
|
left:2%;
|
||||||
|
position:absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 2.5vw;
|
||||||
|
font-family:jolybolditalic;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*baloons */
|
||||||
|
.baloons{
|
||||||
|
font-family:sinistre;
|
||||||
|
font-size: 3.5vw;
|
||||||
|
|
||||||
|
}
|
||||||
|
#baloon1 {
|
||||||
|
width: 20vw;
|
||||||
|
height: 4vw;
|
||||||
|
border:1px solid black;
|
||||||
|
background:white;
|
||||||
|
border-radius: 100vw;
|
||||||
|
font-size: 1vw;
|
||||||
|
text-align: center;
|
||||||
|
left: 15%;
|
||||||
|
top:5%;
|
||||||
|
position:absolute;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
#baloon2 {
|
||||||
|
width: 20vw;
|
||||||
|
height: 4vw;
|
||||||
|
border:1px solid black;
|
||||||
|
background:white;
|
||||||
|
border-radius: 100vw;
|
||||||
|
font-size: 1vw;
|
||||||
|
text-align: center;
|
||||||
|
right: 10%;
|
||||||
|
top:61%;
|
||||||
|
position:absolute;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
#baloon3 {
|
||||||
|
width: 20vw;
|
||||||
|
height: 4vw;
|
||||||
|
border:1px solid black;
|
||||||
|
background:white;
|
||||||
|
border-radius: 100vw;
|
||||||
|
font-size: 1vw;
|
||||||
|
text-align: center;
|
||||||
|
left: 10%;
|
||||||
|
top:60%;
|
||||||
|
position:absolute;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
#baloon4 {
|
||||||
|
width: 20vw;
|
||||||
|
height: 4vw;
|
||||||
|
border:1px solid black;
|
||||||
|
background:white;
|
||||||
|
border-radius: 100vw;
|
||||||
|
font-size: 1vw;
|
||||||
|
text-align: center;
|
||||||
|
right: 8%;
|
||||||
|
top:52%;
|
||||||
|
position:absolute;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*images*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#bench {
|
||||||
|
bottom: 35%;
|
||||||
|
left: 20%;
|
||||||
|
position: absolute;
|
||||||
|
z-index:18;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tree1 {
|
||||||
|
top:5%;
|
||||||
|
left: 28%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
}
|
||||||
|
#tree2 {
|
||||||
|
bottom:45%;
|
||||||
|
left: 8%;
|
||||||
|
position: absolute;
|
||||||
|
z-index:16;
|
||||||
|
}
|
||||||
|
#tree3 {
|
||||||
|
bottom:50%;
|
||||||
|
left: 55%;
|
||||||
|
position: absolute;
|
||||||
|
z-index:2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#newspaperimg {
|
||||||
|
bottom: 42%;
|
||||||
|
left: 25%;
|
||||||
|
position: absolute;
|
||||||
|
z-index:19;
|
||||||
|
}
|
||||||
|
|
||||||
|
#flower1 {
|
||||||
|
bottom:75%;
|
||||||
|
left: 17%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#flower2{
|
||||||
|
bottom: 38%;
|
||||||
|
left: 8%;
|
||||||
|
position: absolute;
|
||||||
|
z-index:17;
|
||||||
|
}
|
||||||
|
|
||||||
|
#flower3{
|
||||||
|
bottom: 80%;
|
||||||
|
left: 65%;
|
||||||
|
position: absolute;
|
||||||
|
z-index:17;
|
||||||
|
}
|
||||||
|
#flower4{
|
||||||
|
bottom: 48%;
|
||||||
|
left: 48%;
|
||||||
|
position: absolute;
|
||||||
|
z-index:17;
|
||||||
|
}
|
||||||
|
#flower5{
|
||||||
|
bottom: 60%;
|
||||||
|
right: 14%;
|
||||||
|
position: absolute;
|
||||||
|
z-index:17;
|
||||||
|
}
|
||||||
|
|
||||||
|
#grass1{
|
||||||
|
bottom: 30%;
|
||||||
|
right: 20%;
|
||||||
|
position: absolute;
|
||||||
|
z-index:17;
|
||||||
|
}
|
||||||
|
#grass2{
|
||||||
|
bottom: 80%;
|
||||||
|
left: 2000px;
|
||||||
|
position: absolute;
|
||||||
|
z-index:17;
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
<!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>park</title>
|
||||||
|
<link rel="icon" href="imgs/park/flower2.gif">
|
||||||
|
<link rel="stylesheet" href="park.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--<div id="groundline"></div>-->
|
||||||
|
<div id="newspaper_index" style="display: none;">
|
||||||
|
<div class="index_content">
|
||||||
|
Juicy Local News<br><br>
|
||||||
|
News from the school:<br>
|
||||||
|
-----Our annual trip to the Spring River National Park <br><br>
|
||||||
|
suspected food poisoning at primary school
|
||||||
|
*<br>
|
||||||
|
*<br>
|
||||||
|
*<br>
|
||||||
|
*<br>
|
||||||
|
*<br>
|
||||||
|
*<br>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="player_img"></div>
|
||||||
|
<img id="bench" src="imgs/park/bench1.gif" height="20%">
|
||||||
|
<img id="tree1" src="imgs/park/tree1.gif" height="35%">
|
||||||
|
<img id="tree2" src="imgs/park/tree4.gif" height="25%">
|
||||||
|
<img id="tree3" src="imgs/park/tree4.gif" height="25%">
|
||||||
|
<img id="tree4" src="imgs/park/tree1.gif" height="25%">
|
||||||
|
<!--<img id="gardener1" src="imgs/park/gardener1.gif" height="180px">-->
|
||||||
|
<img id="fountain" src="imgs/park/pond.gif" height="80px">
|
||||||
|
<img id="sun" src="imgs/park/sun1.gif" height="10%">
|
||||||
|
|
||||||
|
<img id="newspaper" src="imgs/park/newspaper2.gif" height="7%">
|
||||||
|
<img id="flower1" src="imgs/park/flower1.gif" height="5%">
|
||||||
|
<img id="flower2" src="imgs/park/flower2.gif" height="7%">
|
||||||
|
<!--<img id="grass" src="imgs/park/grass.gif">-->
|
||||||
|
|
||||||
|
<p class="text_container"> Hello <span id="player_name"> </span>. It's Saturday morning. You are at the park waiting for your friend Amanda. She seems to be really late.
|
||||||
|
You spot a copy of today's newspaper on the bench close to you. Maybe you want to <button id="open_newspaper_index">give it a read</button>. You can <a href="1_walk.html">go for a little walk</a> or just <a href="1_amanda.html">wait for Amanda</a> if you feel like it. </p>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script>
|
||||||
|
//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
|
||||||
|
document.querySelector('#player_name').innerHTML =localStorage.playerName;
|
||||||
|
|
||||||
|
$("#open_newspaper_index").click (function(){
|
||||||
|
$("#newspaper_index").toggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
<!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>looking for</title>
|
||||||
|
<link rel="icon" href="imgs/park/flower2.gif">
|
||||||
|
<link rel="stylesheet" href="park.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="groundline"></div>
|
||||||
|
|
||||||
|
<!--<div id="player_img"></div>-->
|
||||||
|
|
||||||
|
<div id="ground">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="player_img"></div>
|
||||||
|
<img id="bench" src="imgs/park/bench1.gif" height="20%">
|
||||||
|
<img id="tree1" src="imgs/park/tree1.gif" height="30%">
|
||||||
|
<img id="tree2" src="imgs/park/tree4.gif" height="25%">
|
||||||
|
<img id="tree3" src="imgs/park/tree4.gif" height="25%">
|
||||||
|
<img id="newspaperimg" src="imgs/park/newspaper2.gif" height="7%">
|
||||||
|
<img id="flower1" src="imgs/park/flower1.gif" height="5%">
|
||||||
|
<img id="flower2" src="imgs/park/flower3.gif" height="7%">
|
||||||
|
<img id="flower3" src="imgs/park/flower3.1.gif" height="6%">
|
||||||
|
<img id="flower4" src="imgs/park/flower1.1.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="grass2" src="imgs/park/grass1.gif" height="75vw">
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="text_container">
|
||||||
|
move
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// player moves
|
||||||
|
|
||||||
|
var $div = $('#player_img');
|
||||||
|
var screenLeftMin = 0;
|
||||||
|
var screenLeftMax = 870;
|
||||||
|
|
||||||
|
function adjustScroll() {
|
||||||
|
var playerLeft = parseInt($div.css("left"));
|
||||||
|
var scrollLeft = $(document).scrollLeft();
|
||||||
|
var screenLeft = playerLeft - scrollLeft;
|
||||||
|
console.log ("screenleft:", screenLeft);
|
||||||
|
|
||||||
|
if (screenLeft > screenLeftMax ) {
|
||||||
|
$(document).scrollLeft(playerLeft - screenLeftMax)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (screenLeft < screenLeftMin ) {
|
||||||
|
$(document).scrollLeft(playerLeft - screenLeftMin)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$(document).keydown(function(e) {
|
||||||
|
switch (e.which) {
|
||||||
|
case 37:
|
||||||
|
$div.css('left', $div.offset().left - 20);
|
||||||
|
e.preventDefault();
|
||||||
|
adjustScroll();
|
||||||
|
break;
|
||||||
|
case 38:
|
||||||
|
$div.css('top', $div.offset().top - 20);
|
||||||
|
break;
|
||||||
|
case 39:
|
||||||
|
$div.css('left', $div.offset().left + 20);
|
||||||
|
e.preventDefault();
|
||||||
|
adjustScroll();
|
||||||
|
break;
|
||||||
|
case 40:
|
||||||
|
$div.css('top', $div.offset().top + 20);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// saves game step in the local storage
|
||||||
|
window.onload = function() {
|
||||||
|
window.localStorage.setItem("looking_for_N","opened")
|
||||||
|
console.log ("looking for N:",localStorage.looking_for_N)
|
||||||
|
}
|
||||||
|
|
||||||
|
//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
|
||||||
|
document.querySelector('#player_name').innerHTML =localStorage.playerName;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
Loading…
Reference in New Issue