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.
283 lines
9.6 KiB
HTML
283 lines
9.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>cat shelter</title>
|
|
<link rel="icon" href="imgs/cat_shelter/kennel5.png">
|
|
<link rel="stylesheet" href="cat_shelter.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="theme2" preload="auto"><source src="sound/theme2.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="no"><source src="sound/no.wav" type="audio/wav"></audio>
|
|
<audio id="smoke"><source src="sound/smoke.wav" type="audio/wav"></audio>
|
|
|
|
|
|
<div id="groundline"></div>
|
|
|
|
<div id="ground">
|
|
<div id="player_img"></div>
|
|
|
|
<img id="tree1" src="imgs/cat_shelter/tree.gif" height="140px">
|
|
<img id="tree2" src="imgs/cat_shelter/tree.gif" height="140px">
|
|
<img id="tree3" src="imgs/cat_shelter/tree.gif" height="140px">
|
|
<img id="grass1" src="imgs/park/grass1.gif" height="80px">
|
|
<img id="grass2" src="imgs/park/grass1.gif" height="70px">
|
|
<img id="house1" src="imgs/cat_shelter/kennel1.png" height="90px">
|
|
<img id="house2" src="imgs/cat_shelter/kennel2.gif" height="100px">
|
|
<img id="house3" src="imgs/cat_shelter/kennel3.png" height="130px">
|
|
<img id="house4" src="imgs/cat_shelter/kennel4.png" height="90px">
|
|
<img id="house5" src="imgs/cat_shelter/kennel5.png" height="80px">
|
|
<img id="house6" src="imgs/cat_shelter/kennel6.png" height="100px">
|
|
<!--<img id="shed1" src="imgs/cat_shelter/shed.gif" height="120px">
|
|
<img id="fence1" src="imgs/cat_shelter/fence1.gif" height="130px">
|
|
<img id="fence2" src="imgs/cat_shelter/fence2.gif" height="100px">-->
|
|
<img id="toy" src="imgs/cat_shelter/toy.gif" height="100px">
|
|
<img id="fly1" src="imgs/cat_shelter/butterfly.gif" height="40px">
|
|
<img id="fly2" src="imgs/cat_shelter/butterfly.gif" height="40px">
|
|
<img id="snake" src="imgs/cat_shelter/snake.gif" height="40px" style="display: none;">
|
|
<img id="lizard" src="imgs/cat_shelter/lizard.gif" height="25px"style="display: none;">
|
|
<img id="dog" src="imgs/cat_shelter/dog2.gif" height="50px"style="display: none;">
|
|
<img id="pat" src="imgs/cat_shelter/parrot.gif" height="100px" style="display: none;">
|
|
|
|
<div class="comic_div">
|
|
<div class="bubble1"style="display: none;">Hello stranger, are you looking for something? ✜</div>
|
|
<div class="bubble2"style="display: none;"> My name is Pat, nice to meet you ✜</div>
|
|
<div class="bubble3"style="display: none;"> I don't know any Amanda. But believe me, I wouldn't be surprised if something happened to her as well. Like those poor cats. They didn't escape, someone kidnapped them ✜</div>
|
|
<div class="bubble4"style="display: none;"> If you want I can tell you more about it ✜</div>
|
|
<div class="bubble5" style="display: none;">I have reasons to believe that the Major's family is not as human as we thought. You need to see this.
|
|
They are financing the cat shelter to harvest the cubs as food: they made them disappear during the night ✜</div>
|
|
<div class="bubble6"style="display: none;"> The hairballs will drive us to the Major's mansion. Follow me! ■</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="text_container">
|
|
<div class="message1">
|
|
You are at the cat shelter: it looks so empty. What could have happened here?<br>
|
|
<span class="instructions_arrow">→</span><span class="instructions"> Look closer to see if there are any tracks of Amanda</span>
|
|
</div>
|
|
<div class="message2" style="display:none;">
|
|
<span class="instructions_arrow">→</span><span class="instructions"> Ask Pat if she has seen Amanda</span>
|
|
</div>
|
|
<div class="message3" style="display:none;">
|
|
This sounds horrible. Can Amanda be involved in all this mess? <button onclick="location.href='major_house.html';"><span class="button_text">Follow Pat</span></button> to see if she is saying the truth.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script src="jquery.min.js"></script>
|
|
<script>
|
|
var theme = document.querySelector("#theme2");
|
|
var click = document.querySelector("#click");
|
|
var comic = document.querySelector("#comic");
|
|
var no = document.querySelector("#no");
|
|
var smoke = document.querySelector("#smoke");
|
|
|
|
click.volume = 0.5;
|
|
theme.volume =1;
|
|
no.volume= 0.8;
|
|
|
|
$(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();
|
|
});
|
|
|
|
$("body").hover( function() {
|
|
theme.play();
|
|
theme.addEventListener('paused',function() {
|
|
theme.play();
|
|
},false);
|
|
})
|
|
|
|
//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);
|
|
|
|
|
|
//store that you've been in the park
|
|
window.onload = function() {
|
|
theme.play();
|
|
window.localStorage.setItem("cat_shelter_page","opened")
|
|
console.log ("cat shelter:",localStorage.cat_shelter_page)
|
|
}
|
|
// look in the houses game
|
|
var house_counter = 0;
|
|
|
|
$("#house1").click(function(){
|
|
no.play();
|
|
$("#house1").addClass("touch_animation");
|
|
setTimeout( function(){
|
|
$("#house5").removeClass("touch_animation");
|
|
},500);
|
|
house_counter ++;
|
|
console.log(house_counter);
|
|
pat_appear()
|
|
});
|
|
|
|
$("#house2").click(function(){
|
|
no.play();
|
|
$("#house2").addClass("touch_animation");
|
|
setTimeout( function(){
|
|
$("#house2").removeClass("touch_animation");
|
|
smoke.play();
|
|
},500);
|
|
house_counter ++;
|
|
console.log(house_counter);
|
|
$("#snake").show();
|
|
$("#snake").animate({ left: "120%", top:"120%"}, {
|
|
duration: 3000
|
|
}).promise().done(function(){
|
|
$("#snake").hide();
|
|
});
|
|
pat_appear()
|
|
});
|
|
|
|
$("#house3").click(function(){
|
|
no.play();
|
|
$("#house3").addClass("touch_animation");
|
|
setTimeout( function(){
|
|
$("#house3").removeClass("touch_animation");
|
|
smoke.play();
|
|
},500);
|
|
house_counter ++;
|
|
console.log(house_counter);
|
|
$("#dog").show();
|
|
$("#dog").animate({ left: "-20%"}, {
|
|
duration: 1000
|
|
}).promise().done(function(){
|
|
$("#dog").hide();
|
|
});
|
|
pat_appear()
|
|
});
|
|
|
|
$("#house4").click(function(){
|
|
$("#house4").addClass("touch_animation");
|
|
no.play();
|
|
setTimeout( function(){
|
|
$("#house4").removeClass("touch_animation");
|
|
},500);
|
|
house_counter ++;
|
|
console.log(house_counter);
|
|
pat_appear()
|
|
});
|
|
|
|
$("#house5").click(function(){
|
|
no.play();
|
|
$("#house5").addClass("touch_animation");
|
|
setTimeout( function(){
|
|
$("#house5").removeClass("touch_animation");
|
|
},500);
|
|
house_counter ++;
|
|
console.log(house_counter);
|
|
pat_appear()
|
|
});
|
|
|
|
$("#house6").click(function(){
|
|
$("#house6").addClass("touch_animation");
|
|
no.play();
|
|
setTimeout( function(){
|
|
$("#house6").removeClass("touch_animation");
|
|
smoke.play();
|
|
},500);
|
|
house_counter ++;
|
|
console.log(house_counter);
|
|
$("#lizard").show();
|
|
$("#lizard").animate({ left: "-20%"}, {
|
|
duration: 5000
|
|
}).promise().done(function(){
|
|
$("#lizard").hide();
|
|
});
|
|
pat_appear()
|
|
});
|
|
|
|
function pat_appear(){
|
|
if (house_counter == 6){
|
|
setTimeout(function(){
|
|
console.log("hei");
|
|
$("#pat").show();
|
|
smoke.play();
|
|
comic.play();
|
|
setTimeout(function(){
|
|
$(".bubble1").show();
|
|
setTimeout(function(){
|
|
$(".message1").hide();
|
|
}, 1000);
|
|
}, 1000);
|
|
}, 1000);
|
|
}
|
|
}
|
|
$(".bubble1").click(function(){
|
|
comic.play();
|
|
$(".bubble1").hide();
|
|
$(".bubble2").show();
|
|
$(".message2").show();
|
|
click.play();
|
|
});
|
|
|
|
$(".bubble2").click(function(){
|
|
comic.play();
|
|
$(".bubble2").hide();
|
|
$(".bubble3").show();
|
|
});
|
|
|
|
$(".bubble3").click(function(){
|
|
comic.play();
|
|
$(".bubble3").hide();
|
|
$(".bubble4").show();
|
|
});
|
|
|
|
$(".bubble4").click(function(){
|
|
comic.play();
|
|
$(".bubble4").hide();
|
|
$(".bubble5").show();
|
|
});
|
|
|
|
|
|
$(".bubble5").click(function(){
|
|
comic.play();
|
|
click.play();
|
|
$(".bubble5, .message2").hide();
|
|
$(".bubble6").show();
|
|
$(".message3").show();
|
|
});
|
|
|
|
$(".bubble6").click(function(){
|
|
click.play();
|
|
$(".bubble6").hide();
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript" src="index.js" ></script>
|
|
|
|
</body> |