|
|
|
|
<!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>
|
