<!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 > river bank< / title >
< link rel = "icon" href = "imgs/river_bank/water.png" >
< link rel = "stylesheet" href = "river_bank.css" >
< / head >
< body >
< div id = "ground" class = "invert" > < / div >
<!-- <div class="ground_line invert"></div> -->
<!-- characters -->
< div id = "player_img" class = "player_land moving_duo" > < / div >
< img id = "army" src = "imgs/river_bank/army1.gif" height = "270px" >
< 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" >
< div class = "boat moving_duo" >
< img id = "boat_empty" src = "imgs/river_bank/boat.png" width = "440px" >
< img id = "boat_full" src = "imgs/river_bank/boat_people.gif" width = "440px" style = "display: none;" >
< / div >
<!-- baloons -->
< div class = "bubble invert" style = "display: none;" > !!!< / div >
< div class = "bubble2 invert" style = "display: none;" > !!!< / div >
<!-- bottom text -->
< div class = "text_container invert" >
< div class = "message1" >
You are now at the River Bank. According to the newspaper, this is where the school trip started. < br >
< span class = "instructions" > < span class = "instructions_arrow" > →< / span > Click on the ferryman to persuade him to show you the way to the Spring River Park and liberate the children!< / span >
< / div >
< / div >
< script src = "jquery.min.js" > < / script >
< script >
// saves game step in the local storage
window.onload = function() {
window.localStorage.setItem("river_bank","opened");
console.log ("river bank:",localStorage.river_bank);
$(".fighters").html("0");
}
//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);
// boat animation
$(".ferryman").click (function(){
console.log("ciao");
$(".bubble").show();
setTimeout( function() {
$("#ferryman_good").hide();
$(".bubble2,#ferryman_evil").show();
setTimeout( function() {
$(".bubble2,.bubble").hide();
setTimeout( function() {
$("#ferryman_evil").detach();
$("#boat_empty, #army").hide();
$("#boat_full").show();
$("#player_img").removeClass("player_land");
$("#player_img").hide();
$(".boat").animate({ left: "100%" }, {
duration: 3500 })
.promise().done(function(){
location.href='spring_river.html';
});
}, 1500);
}, 1000);
}, 1000);
});
< / script >
< script type = "text/javascript" src = "index.js" > < / script >
< / body >
