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.
155 lines
4.6 KiB
HTML
155 lines
4.6 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 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> |