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