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