<!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 class = "back" style = "display: none;" >
Do you want to start from the beginning?< br >
< button id = "go_to_start" class = "button_back" > yes < / button > / < button id = "stay" class = "button_back" > no < / button >
< / div >
< audio loop = "loop" id = "theme3" preload = "auto" > < source src = "sound/theme3_danger.mp3" type = "audio/mp3" > < / audio >
< audio id = "comic" > < source src = "sound/baloon_intense.wav" type = "audio/wav" > < / audio >
< audio id = "click" > < source src = "sound/click.wav" type = "audio/wav" > < / audio >
< audio id = "water" > < source src = "sound/click.wav" type = "audio/wav" > < / audio >
< audio id = "smoke" > < source src = "sound/smoke.wav" type = "audio/wav" > < / audio >
< 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 >
//audio
var theme = document.querySelector("#theme3");
var comic = document.querySelector("#comic");
var click = document.querySelector("#click");
var water = document.querySelector("#water");
var smoke = document.querySelector("#smoke");
theme.volume= 1;
click.volume= 0.5;
comic.volume=0.5;
$("body").hover( function() {
theme.play();
theme.addEventListener('paused',function() {
theme.play();
},false);
})
//go back to start
$(document).keydown(function(e) {
e.preventDefault();
switch (e.which) {
case 83:
$(".back").show();
}
});
$("#go_to_start").click( function (){
window.location.href="index.html";
click.play();
});
$("#stay").click( function (){
$(".back").hide();
click.play();
});
// saves game step in the local storage
window.onload = function() {
theme.play();
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();
comic.play();
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();
smoke.play();
$("#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 >
