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.

206 lines
7.3 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>cat shelter</title>
<link rel="icon" href="imgs/cat_shelter/kennel5.png">
<link rel="stylesheet" href="cat_shelter.css">
</head>
<body>
<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;">
3 years ago
<img id="pat" src="imgs/cat_shelter/parrot.gif" height="100px" style="display: none;">
3 years ago
<div class="comic_div">
3 years ago
<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>
3 years ago
<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.
3 years ago
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>
3 years ago
3 years ago
</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;">
3 years ago
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.
3 years ago
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
//get player avatar from local storage
3 years ago
console.log (localStorage.myavatar)
3 years ago
var img = document.createElement("img");
img.src = localStorage.myavatar;
var player_img = document.querySelector("#player_img");
3 years ago
player_img.appendChild(img);
3 years ago
//store that you've been in the park
window.onload = function() {
3 years ago
window.localStorage.setItem("cat_shelter_page","opened")
console.log ("cat shelter:",localStorage.cat_shelter_page)
3 years ago
}
// look in the houses game
var house_counter = 0;
$("#house1").click(function(){
$("#house1").addClass("touch_animation");
house_counter ++;
console.log(house_counter);
pat_appear()
});
$("#house2").click(function(){
$("#house2").addClass("touch_animation");
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(){
$("#house3").addClass("touch_animation");
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");
house_counter ++;
console.log(house_counter);
pat_appear()
});
$("#house5").click(function(){
$("#house5").addClass("touch_animation");
house_counter ++;
console.log(house_counter);
pat_appear()
});
$("#house6").click(function(){
$("#house6").addClass("touch_animation");
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();
setTimeout(function(){
$(".bubble1").show();
setTimeout(function(){
$(".message1").hide();
$(".message2").show();
}, 1000);
}, 1000);
}, 1000);
}
}
3 years ago
$(".bubble1").click(function(){
$(".bubble1").hide();
$(".bubble2").show();
});
3 years ago
$(".bubble2").click(function(){
3 years ago
$(".bubble2").hide();
3 years ago
$(".bubble3").show();
3 years ago
});
$(".bubble3").click(function(){
$(".bubble3").hide();
$(".bubble4").show();
3 years ago
});
$(".bubble4").click(function(){
3 years ago
$(".bubble4").hide();
3 years ago
$(".bubble5").show();
3 years ago
});
3 years ago
3 years ago
$(".bubble5").click(function(){
$(".bubble5").hide();
$(".bubble6").show();
3 years ago
});
3 years ago
$(".bubble5").click(function(){
$(".bubble5, .message2").hide();
$(".bubble6").show();
$(".message3").show();
});
$(".bubble6").click(function(){
$(".bubble6").hide();
});
3 years ago
</script>
<script type="text/javascript" src="index.js" ></script>
</body>