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.
395 lines
14 KiB
HTML
395 lines
14 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>spring river</title>
|
|
<link rel="icon" href="imgs/park/tree4.gif">
|
|
<link rel="stylesheet" href="spring_river.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="theme6" preload="auto"><source src="sound/theme6_march.wav" type="audio/wav"></audio>
|
|
<audio loop="loop" id="theme_amanda" preload="auto"><source src="sound/amanda_theme.wav" type="audio/wav"></audio>
|
|
<audio id="click"><source src="sound/click.wav" type="audio/wav"></audio>
|
|
<audio id="comic"><source src="sound/speech.wav" type="audio/wav"></audio>
|
|
<audio id="shot"><source src="sound/shot.wav" type="audio/wav"></audio>
|
|
<audio id="appear"><source src="sound/shot.wav" type="audio/wav"></audio>
|
|
<audio id="explosion"><source src="sound/explosion.wav" type="audio/wav"></audio>
|
|
|
|
|
|
<div id="ground_color" class="invert scroll-pane stop_invert"></div>
|
|
<div id="groundline" class="invert scroll-pane stop_invert blur"></div>
|
|
|
|
<div class="army blur">
|
|
<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="fighter3" src="imgs/spring_river/fighter3.gif" height="120px">
|
|
<img id="fighter4" src="imgs/spring_river/fighter4.gif" height="120px">
|
|
<img id="fighter5" src="imgs/spring_river/fighter5.gif" height="120px">
|
|
<img id="fighter6" src="imgs/spring_river/fighter6.gif" height="160px">
|
|
<img id="fighter7" src="imgs/spring_river/fighter7.gif" height="120px">
|
|
<img id="fighter8" src="imgs/spring_river/fighter8.gif" height="150px">
|
|
</div>
|
|
|
|
<div id="ground" class="scroll-pane">
|
|
|
|
<div class="tree1 blur">
|
|
<img id="tree1" src="imgs/spring_river/tree.gif" height="160px">
|
|
<img id="tree_flipped1" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
</div>
|
|
<div class="tree2 blur">
|
|
<img id="tree2" src="imgs/spring_river/tree.gif" height="160px">
|
|
<img id="tree_flipped2" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
</div>
|
|
<div class="tree3 blur">
|
|
<img id="tree3" src="imgs/spring_river/tree.gif" height="160px">
|
|
<img id="tree_flipped3" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
</div>
|
|
<div class="tree4 blur">
|
|
<img id="tree4" src="imgs/spring_river/tree.gif" height="160px">
|
|
<img id="tree_flipped4" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
</div>
|
|
<div class="tree5 blur">
|
|
<img id="tree5" src="imgs/spring_river/tree.gif" height="160px">
|
|
</div>
|
|
<div class="tree6 blur">
|
|
<img id="tree6" src="imgs/spring_river/tree.gif" height="160px">
|
|
<img id="tree_flipped6" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
</div>
|
|
<div class="tree7 blur">
|
|
<img id="tree7" src="imgs/spring_river/tree.gif" height="160px">
|
|
<img id="tree_flipped7" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
</div>
|
|
<div class="tree8 blur">
|
|
<img class="good" id="tree8" src="imgs/spring_river/tree.gif" height="160px">
|
|
<img class="bad" id="tree_flipped8" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
</div>
|
|
<div class="tree9 blur">
|
|
<img class="good" id="tree9" src="imgs/spring_river/tree.gif" height="160px">
|
|
<img class="bad" id="tree_flipped9" src="imgs/spring_river/tree_rotate.gif" height="160px"style="display: none;">
|
|
</div>
|
|
|
|
<div class="children1 blur">
|
|
<img id="cage1" class="bad" src="imgs/spring_river/children_cage_1.gif" height="200px">
|
|
<img id="free1" class="good"src="imgs/spring_river/children_free_1.gif" height="240px" style="display: none;">
|
|
</div>
|
|
<div class="children2 blur">
|
|
<img id="cage2" class="bad" src="imgs/spring_river/children_cage_2.gif" height="250px">
|
|
<img id="free2" class="good" src="imgs/spring_river/children_free_2.gif" height="300px" style="display: none;">
|
|
</div>
|
|
<div class="children3 blur">
|
|
<img id="cage3" class="bad" src="imgs/spring_river/children_cage_1.gif" height="250px">
|
|
<img id="free3" class="good" src="imgs/spring_river/children_free_1.gif" height="300px" style="display: none;">
|
|
</div>
|
|
|
|
<div class="figure1 blur">
|
|
<img id="satan1" class="bad" src="imgs/spring_river/satan1.gif" height="150px">
|
|
<img id="teacher1" class="good" src="imgs/spring_river/teacher1.gif" height="100px" style="display: none;">
|
|
</div>
|
|
<div class="figure2 blur">
|
|
<img id="satan2" class="bad" src="imgs/spring_river/satan2.gif" height="110px">
|
|
<img id="teacher2" class="good" src="imgs/spring_river/teacher2.gif" height="110px" style="display: none;">
|
|
</div>
|
|
<div class="figure3 blur">
|
|
<img id="satan3" class="bad" src="imgs/spring_river/satan3.gif" height="150px">
|
|
<img id="teacher3" class="good" src="imgs/spring_river/teacher3.gif" height="125px" style="display: none;">
|
|
</div>
|
|
<div class="figure4 blur">
|
|
<img id="satan4" class="bad" src="imgs/spring_river/satan4.gif" height="150px">
|
|
<img id="teacher4" class="good" src="imgs/spring_river/teacher4.gif" height="100px" style="display: none;">
|
|
</div>
|
|
<div class="decoration blur">
|
|
<img id="decoration_bad" class="bad" src="imgs/spring_river/decoration.gif" height="100px">
|
|
<img id="decoration_good" class="good" src="imgs/spring_river/decoration_good.gif" height="120px" style="display: none;">
|
|
</div>
|
|
|
|
<img class="shooting_place1 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
<img class="shooting_place2 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
<img class="shooting_place3 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
<img class="shooting_place4 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
<img class="shooting_place5 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
<img class="shooting_place6 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
<img class="shooting_place7 bad blur" src="imgs/spring_river/fire2.gif" height="130px" style="display: none;">
|
|
|
|
<img id="amanda" src="imgs/spring_river/amanda.gif" height="110px" style="display: none;">
|
|
<div class="bubble1 invert stop_invert" style="display: none;"><span id="player_name"></span>, where have you been? ✜</div>
|
|
<div class="bubble2 invert stop_invert" style="display: none;">Follow me, I think you made a colossal blunder here ■</div>
|
|
<img id="cloud" src="imgs/saurian_headquarter/cloud2.gif" height="120px" style="display: none;">
|
|
<img id="cloud2" src="imgs/saurian_headquarter/cloud2.gif" height="120px" style="display: none;">
|
|
<img id="thunders" src="imgs/saurian_headquarter/thunder.gif" height="190px" style="display: none;">
|
|
|
|
|
|
<div class="text_container invert stop_invert" >
|
|
|
|
<div class="message1">
|
|
You and your army arrived at the Spring River Natural Park.<br>
|
|
<span class="instructions"><span class="instructions_arrow">→</span> Move around with your army to find the children!</span>
|
|
</div>
|
|
<div class="message2" style="display: none;">
|
|
Damn! Your premonition actually came true, Ned was right since the beginning.<br>
|
|
<span class="instructions"><span class="instructions_arrow">→</span> You need to put an end to this evil depravation now!</span>
|
|
</div>
|
|
<div class="message3" style="display: none;">
|
|
Is this... Amanda?
|
|
</div>
|
|
<div class="message4" style="display: none;">
|
|
You really should <button onclick="location.href='final.html';"><span class="button_text">follow Amanda</span></button> .
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="jquery.min.js"></script>
|
|
<script>
|
|
|
|
//audio
|
|
|
|
var theme = document.querySelector("#theme6");
|
|
var amanda = document.querySelector("#theme_amanda");
|
|
var click = document.querySelector("#click");
|
|
var shot = document.querySelector("#shot");
|
|
var comic = document.querySelector("#comic");
|
|
var appear = document.querySelector("#appear");
|
|
var explosion = document.querySelector("#explosion");
|
|
|
|
amanda.volume= 0.4;
|
|
explosion.volume= 0.2;
|
|
theme.volume= 0.1;
|
|
click.volume= 0.5;
|
|
|
|
|
|
$("body").hover( function() {
|
|
if ( shooting_counter < 8 ){
|
|
theme.play();
|
|
theme.addEventListener('paused',function() {
|
|
theme.play();
|
|
},false);
|
|
}
|
|
})
|
|
|
|
// saves game step in the local storage
|
|
window.onload = function() {
|
|
theme.play();
|
|
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
|
|
document.querySelector('#player_name').innerHTML = localStorage.playerName;
|
|
|
|
|
|
//adjust camera scroll
|
|
var $div = $('.army');
|
|
var screenLeftMin = 50;
|
|
var screenLeftMax = 400;
|
|
|
|
function adjustScroll() {
|
|
var playerLeft = parseInt($div.css("left"));
|
|
var scrollLeft = $(document).scrollLeft();
|
|
var screenLeft = playerLeft - scrollLeft;
|
|
console.log ("screenleft:", screenLeft);
|
|
|
|
if (screenLeft > screenLeftMax ) {
|
|
$(document).scrollLeft(playerLeft - screenLeftMax)
|
|
}
|
|
|
|
if (screenLeft < screenLeftMin ) {
|
|
$(document).scrollLeft(playerLeft - screenLeftMin)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
//move the character
|
|
|
|
$(document).keydown(function(e) {
|
|
var offset = $div.position();
|
|
console.log("offset:", offset);
|
|
|
|
// change z-index
|
|
var parent_width = $("#ground").width();
|
|
var left_val_px = $div.css('left');
|
|
var left_val_only = parseInt(left_val_px);
|
|
var left_Percentage = (left_val_only/parent_width) * 100;
|
|
console.log ("left %", left_Percentage);
|
|
|
|
if (left_Percentage >= 9) {
|
|
$("#tree1,#tree2").hide();
|
|
$("#tree_flipped1, #tree_flipped2").show();
|
|
}
|
|
|
|
if (left_Percentage == 9) {
|
|
explosion.play();
|
|
console.log("explode!");
|
|
}
|
|
|
|
if (left_Percentage >= 22) {
|
|
$("#tree3").hide();
|
|
$("#tree_flipped3").show();
|
|
}
|
|
|
|
if (left_Percentage >= 33) {
|
|
$("#tree6").hide();
|
|
$("#tree_flipped6").show();
|
|
}
|
|
if (left_Percentage >= 42) {
|
|
$("#tree4").hide();
|
|
$("#tree_flipped4").show();
|
|
}
|
|
if (left_Percentage >= 51) {
|
|
$("#tree7, #tree8").hide();
|
|
$("#tree_flipped7,#tree_flipped8 ").show();
|
|
}
|
|
|
|
if (left_Percentage >= 70) {
|
|
$("#tree9").hide();
|
|
$("#tree_flipped9").show();
|
|
$(document).scrollLeft(8000);
|
|
$(".message1").hide();
|
|
$(".message2").show();
|
|
}
|
|
|
|
switch (e.which) {
|
|
case 83:
|
|
$(".back").show();
|
|
break;
|
|
case 37:
|
|
offset.left -= 20;
|
|
console.log("left");
|
|
break;
|
|
|
|
case 39:
|
|
offset.left += 20;
|
|
console.log("right");
|
|
break;
|
|
|
|
}
|
|
//check the offset and prevent the character to exceed the screen dimension
|
|
if (offset.left < 80) {
|
|
offset.left = 80;
|
|
}
|
|
if (offset.left > $("#ground").width() - 1090) {
|
|
offset.left = $("#ground").width() - 1090;
|
|
/*$(document).scrollLeft(4000);
|
|
$(".message1").hide();
|
|
$(".message2").show();
|
|
*/
|
|
}
|
|
|
|
$div.css("left", offset.left);
|
|
$div.css("top", offset.top);
|
|
e.preventDefault();
|
|
adjustScroll();
|
|
|
|
})
|
|
|
|
$("#go_to_start").click( function (){
|
|
window.location.href="index.html";
|
|
click.play();
|
|
});
|
|
|
|
$("#stay").click( function (){
|
|
$(".back").hide();
|
|
click.play();
|
|
});
|
|
|
|
var shooting_counter = 0;
|
|
|
|
$("#figure1").click(function () {
|
|
explosion.play();
|
|
shooting_counter ++;
|
|
console.log(shooting_counter);
|
|
$(".shooting_place1, .shooting_place4").show();
|
|
reach_counter()
|
|
});
|
|
|
|
$(".figure2").click(function () {
|
|
explosion.play();
|
|
shooting_counter ++;
|
|
console.log(shooting_counter);
|
|
$(".shooting_place2, .shooting_place5").show();
|
|
reach_counter()
|
|
});
|
|
|
|
$(".figure3").click(function () {
|
|
explosion.play();
|
|
shooting_counter ++;
|
|
console.log(shooting_counter);
|
|
$(".shooting_place3, .shooting_place6, .shooting_place7").show();
|
|
reach_counter()
|
|
});
|
|
|
|
$(".figure4").click(function () {
|
|
explosion.play();
|
|
shooting_counter ++;
|
|
console.log(shooting_counter);
|
|
$(".shooting_place1").show();
|
|
reach_counter()
|
|
});
|
|
|
|
function reach_counter() {
|
|
if ( shooting_counter == 8 ) {
|
|
$("#thunders").show();
|
|
setTimeout( function () {
|
|
$("#cloud, #cloud2").show();
|
|
appear.play();
|
|
setTimeout( function () {
|
|
comic.play();
|
|
$(".blur").addClass("blur_background");
|
|
$("#amanda").show();
|
|
$(".message2").detach();
|
|
$(".message3").show();
|
|
setTimeout( function () {
|
|
$(".bubble1").show();
|
|
}, 500);
|
|
}, 800);
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
$(".bubble1").click(function() {
|
|
$(".bubble1").hide();
|
|
$(".bad").hide();
|
|
$(".good").show();
|
|
$("#tree9").show();
|
|
$("#tree_flipped9").hide();
|
|
amanda.play();
|
|
theme.pause();
|
|
$(".stop_invert").removeClass("invert");
|
|
$('.back').css("background-color","white");
|
|
$('html').css({overflow: 'hidden'});
|
|
setTimeout( function () {
|
|
comic.play();
|
|
$(".bubble2").show();
|
|
$(".message3").hide();
|
|
$(".message4").show();
|
|
setTimeout( function () {
|
|
$(".blur").removeClass("blur_background");
|
|
}, 1500);
|
|
}, 500);
|
|
});
|
|
|
|
$(".bubble2").click(function() {
|
|
click.play();
|
|
$(".bubble2").hide();
|
|
$("#cloud, #cloud2, #thunders,#amanda").hide();
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</body> |