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

3 years ago
<!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>
3 years ago
<link rel="icon" href="imgs/park/tree4.gif">
3 years ago
<link rel="stylesheet" href="spring_river.css">
</head>
3 years ago
<body >
3 years ago
<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>
3 years ago
<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>
3 years ago
<div id="ground_color" class="invert scroll-pane stop_invert"></div>
<div id="groundline" class="invert scroll-pane stop_invert blur"></div>
3 years ago
3 years ago
<div class="army blur">
<div id="player_img"></div>
3 years ago
<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">
3 years ago
<img id="fighter4" src="imgs/spring_river/fighter4.gif" height="120px">
<img id="fighter5" src="imgs/spring_river/fighter5.gif" height="120px">
3 years ago
<img id="fighter6" src="imgs/spring_river/fighter6.gif" height="160px">
3 years ago
<img id="fighter7" src="imgs/spring_river/fighter7.gif" height="120px">
3 years ago
<img id="fighter8" src="imgs/spring_river/fighter8.gif" height="150px">
3 years ago
</div>
<div id="ground" class="scroll-pane">
3 years ago
3 years ago
<div class="tree1 blur">
3 years ago
<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>
3 years ago
<div class="tree2 blur">
3 years ago
<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>
3 years ago
<div class="tree3 blur">
3 years ago
<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>
3 years ago
<div class="tree4 blur">
3 years ago
<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>
3 years ago
<div class="tree5 blur">
3 years ago
<img id="tree5" src="imgs/spring_river/tree.gif" height="160px">
</div>
3 years ago
<div class="tree6 blur">
3 years ago
<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>
3 years ago
<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>
3 years ago
3 years ago
<div class="children1 blur">
3 years ago
<img id="cage1" class="bad" src="imgs/spring_river/children_cage_1.gif" height="200px">
3 years ago
<img id="free1" class="good"src="imgs/spring_river/children_free_1.gif" height="240px" style="display: none;">
</div>
3 years ago
<div class="children2 blur">
3 years ago
<img id="cage2" class="bad" src="imgs/spring_river/children_cage_2.gif" height="250px">
3 years ago
<img id="free2" class="good" src="imgs/spring_river/children_free_2.gif" height="300px" style="display: none;">
</div>
3 years ago
<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>
3 years ago
3 years ago
<div class="figure1 blur">
3 years ago
<img id="satan1" class="bad" src="imgs/spring_river/satan1.gif" height="150px">
3 years ago
<img id="teacher1" class="good" src="imgs/spring_river/teacher1.gif" height="100px" style="display: none;">
3 years ago
</div>
3 years ago
<div class="figure2 blur">
3 years ago
<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;">
3 years ago
</div>
3 years ago
<div class="figure3 blur">
3 years ago
<img id="satan3" class="bad" src="imgs/spring_river/satan3.gif" height="150px">
3 years ago
<img id="teacher3" class="good" src="imgs/spring_river/teacher3.gif" height="125px" style="display: none;">
3 years ago
</div>
3 years ago
<div class="figure4 blur">
3 years ago
<img id="satan4" class="bad" src="imgs/spring_river/satan4.gif" height="150px">
3 years ago
<img id="teacher4" class="good" src="imgs/spring_river/teacher4.gif" height="100px" style="display: none;">
3 years ago
</div>
3 years ago
<div class="decoration blur">
3 years ago
<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;">
3 years ago
</div>
3 years ago
3 years ago
<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;">
3 years ago
<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;">
3 years ago
<img id="amanda" src="imgs/spring_river/amanda.gif" height="110px" style="display: none;">
3 years ago
<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;">
3 years ago
<div class="text_container invert stop_invert" >
3 years ago
<div class="message1">
You and your army arrived at the Spring River Natural Park.<br>
3 years ago
<span class="instructions"><span class="instructions_arrow"></span> Move around with your army to find the children!</span>
3 years ago
</div>
<div class="message2" style="display: none;">
3 years ago
Damn! Your premonition actually came true, Ned was right since the beginning.<br>
3 years ago
<span class="instructions"><span class="instructions_arrow"></span> You need to put an end to this evil depravation now!</span>
3 years ago
</div>
<div class="message3" style="display: none;">
3 years ago
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> .
3 years ago
</div>
3 years ago
</div>
3 years ago
<script src="jquery.min.js"></script>
3 years ago
<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");
3 years ago
var explosion = document.querySelector("#explosion");
amanda.volume= 0.4;
explosion.volume= 0.2;
theme.volume= 0.1;
click.volume= 0.5;
3 years ago
$("body").hover( function() {
if ( shooting_counter < 8 ){
theme.play();
theme.addEventListener('paused',function() {
theme.play();
},false);
}
})
3 years ago
// saves game step in the local storage
window.onload = function() {
3 years ago
theme.play();
3 years ago
window.localStorage.setItem("spring_river","opened");
3 years ago
console.log ("spring river:",localStorage.spring_river);
3 years ago
}
//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);
3 years ago
//get player name from local storage
document.querySelector('#player_name').innerHTML = localStorage.playerName;
3 years ago
//adjust camera scroll
3 years ago
var $div = $('.army');
3 years ago
var screenLeftMin = 50;
var screenLeftMax = 400;
3 years ago
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)
}
}
3 years ago
3 years ago
//move the character
$(document).keydown(function(e) {
var offset = $div.position();
console.log("offset:", offset);
3 years ago
// 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);
3 years ago
if (left_Percentage >= 9) {
$("#tree1,#tree2").hide();
$("#tree_flipped1, #tree_flipped2").show();
3 years ago
}
3 years ago
3 years ago
if (left_Percentage == 9) {
explosion.play();
console.log("explode!");
}
3 years ago
if (left_Percentage >= 22) {
$("#tree3").hide();
$("#tree_flipped3").show();
}
if (left_Percentage >= 33) {
$("#tree6").hide();
$("#tree_flipped6").show();
3 years ago
}
3 years ago
if (left_Percentage >= 42) {
3 years ago
$("#tree4").hide();
$("#tree_flipped4").show();
}
3 years ago
if (left_Percentage >= 51) {
$("#tree7, #tree8").hide();
$("#tree_flipped7,#tree_flipped8 ").show();
}
3 years ago
3 years ago
if (left_Percentage >= 70) {
3 years ago
$("#tree9").hide();
$("#tree_flipped9").show();
$(document).scrollLeft(8000);
3 years ago
$(".message1").hide();
$(".message2").show();
}
3 years ago
switch (e.which) {
3 years ago
case 83:
$(".back").show();
break;
3 years ago
case 37:
offset.left -= 20;
console.log("left");
break;
3 years ago
3 years ago
case 39:
offset.left += 20;
console.log("right");
break;
3 years ago
3 years ago
}
//check the offset and prevent the character to exceed the screen dimension
if (offset.left < 80) {
offset.left = 80;
}
3 years ago
if (offset.left > $("#ground").width() - 1090) {
offset.left = $("#ground").width() - 1090;
3 years ago
/*$(document).scrollLeft(4000);
3 years ago
$(".message1").hide();
$(".message2").show();
3 years ago
*/
3 years ago
}
3 years ago
3 years ago
$div.css("left", offset.left);
$div.css("top", offset.top);
e.preventDefault();
adjustScroll();
})
3 years ago
$("#go_to_start").click( function (){
window.location.href="index.html";
click.play();
});
$("#stay").click( function (){
$(".back").hide();
click.play();
});
3 years ago
var shooting_counter = 0;
$("#figure1").click(function () {
3 years ago
explosion.play();
3 years ago
shooting_counter ++;
console.log(shooting_counter);
3 years ago
$(".shooting_place1, .shooting_place4").show();
3 years ago
reach_counter()
});
$(".figure2").click(function () {
3 years ago
explosion.play();
3 years ago
shooting_counter ++;
console.log(shooting_counter);
3 years ago
$(".shooting_place2, .shooting_place5").show();
3 years ago
reach_counter()
});
$(".figure3").click(function () {
3 years ago
explosion.play();
3 years ago
shooting_counter ++;
console.log(shooting_counter);
3 years ago
$(".shooting_place3, .shooting_place6, .shooting_place7").show();
3 years ago
reach_counter()
});
$(".figure4").click(function () {
3 years ago
explosion.play();
3 years ago
shooting_counter ++;
console.log(shooting_counter);
$(".shooting_place1").show();
reach_counter()
});
function reach_counter() {
3 years ago
if ( shooting_counter == 8 ) {
3 years ago
$("#thunders").show();
3 years ago
setTimeout( function () {
3 years ago
$("#cloud, #cloud2").show();
3 years ago
appear.play();
3 years ago
setTimeout( function () {
3 years ago
comic.play();
3 years ago
$(".blur").addClass("blur_background");
$("#amanda").show();
3 years ago
$(".message2").detach();
3 years ago
$(".message3").show();
3 years ago
setTimeout( function () {
3 years ago
$(".bubble1").show();
}, 500);
}, 800);
}, 500);
}
3 years ago
}
3 years ago
$(".bubble1").click(function() {
$(".bubble1").hide();
$(".bad").hide();
$(".good").show();
3 years ago
$("#tree9").show();
$("#tree_flipped9").hide();
3 years ago
amanda.play();
theme.pause();
3 years ago
$(".stop_invert").removeClass("invert");
3 years ago
$('.back').css("background-color","white");
3 years ago
$('html').css({overflow: 'hidden'});
3 years ago
setTimeout( function () {
3 years ago
comic.play();
3 years ago
$(".bubble2").show();
$(".message3").hide();
$(".message4").show();
setTimeout( function () {
$(".blur").removeClass("blur_background");
3 years ago
}, 1500);
3 years ago
}, 500);
});
$(".bubble2").click(function() {
3 years ago
click.play();
3 years ago
$(".bubble2").hide();
3 years ago
$("#cloud, #cloud2, #thunders,#amanda").hide();
3 years ago
});
3 years ago
3 years ago
</script>
</body>