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.

385 lines
15 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>saurian headquarter</title>
<link rel="icon" href="imgs/saurian_headquarter/fire2.gif">
<link rel="stylesheet" href="saurians_head.css">
</head>
<body >
<audio loop="loop" id="theme" preload="auto"><source src="sound/theme6_march.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="appear"><source src="sound/appear.wav" type="audio/wav"></audio>
<audio id="amanda_theme"><source src="sound/amanda_theme.wav" type="audio/wav"></audio>
<audio id="smoke"><source src="sound/smoke.wav" type="audio/wav"></audio>
<audio id="explosion"><source src="sound/explosion.wav" type="audio/wav"></audio>
<svg class="invert blur">
<line x1="-10" y1="70" x2="68%" y2="70"/>
<line x1="68%" y1="70" x2="68%" y2="-10"/>
<line x1="88%" y1="70" x2="88%" y2="-10"/>
<line x1="88%" y1="70" x2="110%" y2="70"/>
</svg>
<div id="ground_color" class="invert stop_invert"></div>
<div class="army ">
<div id="player_img" class="blur" style="display: none;"></div>
<img id="fighter1" class="blur" src="imgs/spring_river/fighter1.gif" height="120px" style="display: none;">
<img id="fighter2" class="blur" src="imgs/spring_river/fighter2.gif" height="120px"style="display: none;">
<img id="fighter3" class="blur" src="imgs/spring_river/fighter3.gif" height="120px"style="display: none;">
<img id="fighter4" class="blur"src="imgs/spring_river/fighter4.gif" height="120px"style="display: none;">
<img id="fighter5" class="blur"src="imgs/spring_river/fighter5.gif" height="120px"style="display: none;">
<img id="fighter6" class="blur" src="imgs/spring_river/fighter6.gif" height="160px"style="display: none;">
<img id="fighter7" class="blur" src="imgs/spring_river/fighter7.gif" height="120px"style="display: none;">
<img id="fighter8" class="blur" src="imgs/spring_river/fighter8.gif" height="150px"style="display: none;">
</div>
<div id="ground">
<div class="spot1 blur">
<img id="fire1" class="bad" src="imgs/saurian_headquarter/fire1.gif" height="90px">
<img id="cat1" class="good" src="imgs/saurian_headquarter/cat1.gif" height="80px"style="display: none;">
</div>
<div class="spot2 blur">
<img id="fire2" class="bad" src="imgs/saurian_headquarter/fire2.gif" height="90px">
<img id="cat2" class="good" src="imgs/saurian_headquarter/baloons.gif" height="80px"style="display: none;">
</div>
<div class="spot3 blur">
<img id="fire3" class="bad" src="imgs/saurian_headquarter/fire3.gif" height="90px">
<img id="cat3" class="good"src="imgs/saurian_headquarter/cat3.gif" height="60px"style="display: none;">
</div>
<div class="spot4 blur">
<img id="fire4" class="bad" src="imgs/saurian_headquarter/fire4.gif" height="90px">
<img id="cat4" class="good" src="imgs/saurian_headquarter/cat4.gif" height="60px"style="display: none;">
</div>
<div class="spot5 blur">
<img id="fire5" class="bad" src="imgs/saurian_headquarter/fire5.gif" height="90px">
<img id="cat5" class="good" src="imgs/saurian_headquarter/cat5.gif" height="90px"style="display: none;">
</div>
<div class="figure1 blur">
<img id="saurian1" class="bad" src="imgs/saurian_headquarter/saurian1.gif" height="110px">
<img id="person1" class="good" src="imgs/saurian_headquarter/person1.gif" height="110px" style="display: none;">
</div>
<div class="figure2 blur">
<img id="saurian2" class="bad" src="imgs/saurian_headquarter/saurian2.gif" height="100px">
<img id="person2" class="good" src="imgs/saurian_headquarter/person8.gif" height="90px" style="display: none;">
</div>
<div class="figure3 blur">
<img id="saurian3" class="bad" src="imgs/saurian_headquarter/saurian3.gif" height="110px">
<img id="person3" class="good" src="imgs/saurian_headquarter/person3.gif" height="100px" style="display: none;">
</div>
<div class="figure4 blur">
<img id="saurian4" class="bad" src="imgs/saurian_headquarter/saurian4.gif" height="140px">
<img id="person4" class="good" src="imgs/saurian_headquarter/person4.gif" height="100px" style="display: none;">
</div>
<div class="figure5 blur">
<img id="saurian5" class="bad" src="imgs/saurian_headquarter/saurian5.gif" height="110px">
<img id="person5" class="good" src="imgs/saurian_headquarter/person5.gif" height="120px" style="display: none;">
</div>
<div class="figure6 blur">
<img id="saurian6" class="bad" src="imgs/saurian_headquarter/saurian6.gif" height="140px">
<img id="person6" class="good" src="imgs/saurian_headquarter/person6.gif" height="110px" style="display: none;">
</div>
<div class="figure7 blur">
<img id="saurian7" class="bad" src="imgs/saurian_headquarter/saurian7.gif" height="110px">
<img id="person7" class="good" src="imgs/saurian_headquarter/person7.gif" height="100px" style="display: none;">
</div>
<div class="figure8 blur">
<img id="saurian8" class="bad" src="imgs/saurian_headquarter/saurian8.gif" height="110px">
<img id="person8" class="good" src="imgs/saurian_headquarter/person2.gif" height="100px" style="display: none;">
</div>
<div class="figure9 blur">
<img id="saurian9" class="bad" src="imgs/saurian_headquarter/saurian9.gif" height="110px">
<img id="person9" class="good" src="imgs/saurian_headquarter/person9.gif" height="110px" style="display: none;">
</div>
<div class="scenography1 blur">
<img class="bad" src="imgs/saurian_headquarter/eruption.gif" height="100px">
<img class="good" src="imgs/saurian_headquarter/cesto.gif" height="60px" style="display: none;">
</div>
<div class="scenography2 blur">
<img class="bad" src="imgs/saurian_headquarter/eruption.gif" height="100px">
<img class="good" src="imgs/saurian_headquarter/cake2.gif" height="80px" style="display: none;">
</div>
<div class="scenography3 blur">
<img class="bad" src="imgs/saurian_headquarter/stone_once.gif" height="150px">
<img class="good" src="imgs/saurian_headquarter/cat2.gif" height="80px" style="display: none;">
</div>
<div class="scenography4 blur">
<img class="bad" src="imgs/saurian_headquarter/stone_once.gif" height="150px">
<img class="good" src="imgs/saurian_headquarter/cake2.gif" height="100px" style="display: none;">
</div>
<div class="scenography5 blur">
<img class="bad" src="imgs/saurian_headquarter/stone_once.gif" height="150px">
<img class="good" src="imgs/saurian_headquarter/baloons.gif" height="100px" style="display: none;">
</div>
<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 entered the saurians' headquarter. Your suspicions were well-founded.<br>
<span class="instructions"><span class="instructions_arrow"></span> Stop the evil kitten-eaters invasion. Fight the saurians back!</span>
</div>
<div class="message2" style="display: none;">
Is this... Amanda?
</div>
<div class="message3" style="display: none;">
What did just happened? 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>
var theme = document.querySelector("#theme");
theme.volume= 0.05;
var click = document.querySelector("#click");
var comic = document.querySelector("#comic");
var shot = document.querySelector("#shot");
var smoke = document.querySelector("#smoke");
var explosion = document.querySelector("#explosion");
explosion.volume= 0.1;
var appear = document.querySelector("#appear");
var amanda = document.querySelector("#amanda_theme");
amanda.volume= 0.05;
$("body").hover( function() {
if ( shooting_counter < 10 ){
theme.play();
theme.addEventListener('paused',function() {
theme.play();
},false);
}
})
// saves game step in the local storage
window.onload = function() {
theme.play();
window.localStorage.setItem("saurians_headquarter","opened");
console.log ("saurians headquarter:",localStorage.saurians_headquarter);
setTimeout(function() {
smoke.play();
$("#player_img").show();
setTimeout(function() {
smoke.play();
$("#fighter1").show();
setTimeout(function() {
smoke.play();
$("#fighter2").show();
setTimeout(function() {
smoke.play();
$("#fighter3").show();
setTimeout(function() {
smoke.play();
$("#fighter4").show();
setTimeout(function() {
smoke.play();
$("#fighter5").show();
setTimeout(function() {
smoke.play();
$("#fighter6").show();
setTimeout(function() {
$("#fighter7").show();
smoke.play();
setTimeout(function() {
$("#fighter8").show();
smoke.play();
setTimeout(function() {
$("#fighter9").show();
smoke.play();
},500);
},500);
},500);
},500);
},500);
},500);
},500);
},500);
},500);
},1500);
}
//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;
var shooting_counter = 0;
$(".figure1").click(function () {
explosion.play();
shooting_counter ++;
console.log(shooting_counter);
$("#saurian1").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
setTimeout( function(){
$("#saurian1").attr( "src", "imgs/saurian_headquarter/saurian1.gif")
},1000);
reach_counter()
});
$(".figure2").click(function () {
explosion.play();
shooting_counter ++;
console.log(shooting_counter);
$("#saurian2").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
setTimeout( function(){
$("#saurian2").attr( "src", "imgs/saurian_headquarter/saurian2.gif")
},1000);
reach_counter()
});
$(".figure3").click(function () {
explosion.play();
shooting_counter ++;
console.log(shooting_counter);
$("#saurian3").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
setTimeout( function(){
$("#saurian3").attr( "src", "imgs/saurian_headquarter/saurian3.gif")
},1000);
reach_counter()
});
$(".figure4").click(function () {
explosion.play();
shooting_counter ++;
console.log(shooting_counter);
$("#saurian4").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
setTimeout( function(){
$("#saurian4").attr( "src", "imgs/saurian_headquarter/saurian4.gif")
},1000);
reach_counter()
});
$(".figure5").click(function () {
explosion.play();
shooting_counter ++;
console.log(shooting_counter);
$("#saurian5").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
setTimeout( function(){
$("#saurian5").attr( "src", "imgs/saurian_headquarter/saurian5.gif")
},1000);
reach_counter()
});
$(".figure6").click(function () {
explosion.play();
shooting_counter ++;
console.log(shooting_counter);
$("#saurian6").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
setTimeout( function(){
$("#saurian6").attr( "src", "imgs/saurian_headquarter/saurian6.gif")
},1000);
reach_counter()
});
$(".figure7").click(function () {
explosion.play();
shooting_counter ++;
console.log(shooting_counter);
$("#saurian7").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
setTimeout( function(){
$("#saurian7").attr( "src", "imgs/saurian_headquarter/saurian7.gif")
},1000);
reach_counter()
});
$(".figure8").click(function () {
explosion.play();
shooting_counter ++;
console.log(shooting_counter);
$("#saurian8").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
setTimeout( function(){
$("#saurian8").attr( "src", "imgs/saurian_headquarter/saurian8.gif")
},1000);
reach_counter()
});
$(".figure9").click(function () {
explosion.play();
shooting_counter ++;
console.log(shooting_counter);
$("#saurian9").attr( "src", "imgs/saurian_headquarter/fire_once2.gif");
setTimeout( function(){
$("#saurian9").attr( "src", "imgs/saurian_headquarter/saurian9.gif")
},1000);
reach_counter()
});
function reach_counter() {
if ( shooting_counter == 10 ) {
$("#cloud").show();
$("#cloud").animate({ left: "39%"}, {
duration: 500
}).promise().done(function(){
$("#cloud2").show();
$("#cloud2").animate({ left: "42%"}, {
duration: 500
}).promise().done(function(){
appear.play();
$("#thunders").show();
setTimeout( function() {
$("#amanda").show();
setTimeout( function() {
click.play();
comic.play();
$(".message1").hide();
$(".message2,.bubble1").show();
$(".blur").addClass("blur_background");
},1500);
},500);
});
});
};
}
$(".bubble1").click( function() {
comic.play();
theme.pause();
amanda.play();
$(".bad").hide();
$(".good").show();
$(".stop_invert").removeClass("invert");
$(".bubble1, #thunders").hide();
$(".bubble2").toggle();
setTimeout( function() {
click.play();
$(".message2").hide();
$(".message3").show();
$(".blur").removeClass("blur_background");
smoke.play();
},2500);
});
$(".bubble2").click( function() {
click.play();
$(".bubble2").toggle();
$("#amanda, #cloud, #cloud2").hide();
})
</script>
</body>