You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

101 lines
3.1 KiB
HTML

<!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: 2500 })
.promise().done(function(){
location.href='spring_river.html';
});
}, 1500);
}, 1000);
}, 1000);
});
</script>
<script type="text/javascript" src="index.js" ></script>
</body>