@ -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 = 1 00;
var screenLeftMax = 870;
var screenLeftMax = 78 0;
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 lef t_val_px = $div.css('lef t');
var top _val_only = parseInt(top _val_px);
var lef t_val_only = parseInt(lef t_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 ("lef t %", lef t_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 >