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.
182 lines
6.6 KiB
HTML
182 lines
6.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 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;"> Follow me, I can tell you more about it.</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;">
|
|
I hope Amanda did not get involved in this. <button onclick="location.href='major_house.html';"><span class="button_text">Follow Pat</span></button> to hear more about it.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script src="jquery.min.js"></script>
|
|
<script>
|
|
|
|
//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() {
|
|
window.localStorage.setItem("cat_shelter","opened")
|
|
console.log ("cat shelter:",localStorage.cat_shelter)
|
|
}
|
|
// 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(){
|
|
$(".bubble2").show();
|
|
setTimeout(function(){
|
|
$(".message1").hide();
|
|
$(".message2").show();
|
|
}, 1000);
|
|
}, 1500);
|
|
}, 1000);
|
|
}, 1000);
|
|
}
|
|
}
|
|
$(".bubble2").click(function(){
|
|
$(".message2, .bubble1, .bubble2").hide();
|
|
$(".bubble3").show();
|
|
setTimeout(function(){
|
|
$(".bubble4").show();
|
|
setTimeout(function(){
|
|
$(".message3").show();
|
|
}, 1000);
|
|
}, 1000);
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript" src="index.js" ></script>
|
|
|
|
</body> |