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.

287 lines
9.5 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" />
3 years ago
<title>follow Pat</title>
<link rel="icon" href="imgs/major_house/house1.gif">
3 years ago
<link rel="stylesheet" href="major_house.css">
</head>
<body >
3 years ago
<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>
3 years ago
<audio loop="loop" id="theme2" preload="auto"><source src="sound/theme2.wav" type="audio/wav"></audio>
<audio loop="loop" id="theme4" preload="auto"><source src="sound/theme4_scary.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>
3 years ago
3 years ago
<div id="ground_color" class="to_invert"></div>
3 years ago
3 years ago
<div id="groundline" class="to_invert"></div>
<div class="duo">
<span id="player_img"></span>
<img id="pat" src="imgs/cat_shelter/parrot.gif" height="100px">
</div>
3 years ago
3 years ago
<div id="ground" >
3 years ago
3 years ago
<img id="fur1" src="imgs/major_house/ball.gif" height="60px">
<img id="fur2" src="imgs/major_house/ball.gif" height="60px">
<img id="fur3" src="imgs/major_house/ball.gif" height="60px">
<img id="fur4" src="imgs/major_house/ball.gif" height="60px">
<img id="fur5" src="imgs/major_house/ball.gif" height="60px">
3 years ago
3 years ago
<img id="tree1" src="imgs/park/tree4.gif" height="160px">
<img id="tree2" src="imgs/park/tree4.gif" height="160px">
<img id="tree3" src="imgs/park/tree4.gif" height="160px">
<img id="tree4" src="imgs/park/tree4.gif" height="160px">
<img id="tree5" src="imgs/park/tree4.gif" height="160px">
<img id="tree6" src="imgs/park/tree4.gif" height="130px">
<img id="tree7" src="imgs/park/tree4.gif" height="130px">
3 years ago
3 years ago
<div class="house">
<img class="good" src="imgs/major_house/house1.gif" height="160px">
<img class="bad" src="imgs/major_house/volcano.gif" height="140px"style="display: none;">
</div>
<div class="figure1">
<img id="person1" class="good" src="imgs/major_house/person1.gif" height="110px">
<img id="rept1" class="bad" src="imgs/major_house/rept1.gif" height="120px" style="display: none;">
</div>
<div class="figure2">
<img id="person2" class="good" src="imgs/major_house/person2.gif" height="80px">
<img id="rept2" class="bad" src="imgs/major_house/rept2.gif" height="120px" style="display: none;">
</div>
<div class="figure3">
<img id="person3" class="good" src="imgs/major_house/person3.gif" height="110px">
<img id="rept3" class="bad" src="imgs/major_house/rept3.gif" height="120px" style="display: none;">
</div>
<div class="figure4">
<img id="person4" class="good" src="imgs/major_house/person4.gif" height="100px">
<img id="rept4" class="bad" src="imgs/major_house/rept4.gif" height="120px" style="display: none;">
</div>
<div class="figure5">
<img id="person5" class="good" src="imgs/major_house/person5.gif" height="120px">
<img id="rept5" class="bad" src="imgs/major_house/rept5.gif" height="120px" style="display: none;">
</div>
<div class="figure6">
<img id="person6" class="good" src="imgs/major_house/person6.gif" height="120px">
<img id="rept6" class="bad" src="imgs/major_house/rept6.gif" height="150px" style="display: none;">
</div>
<div class="figure7">
<img id="cat" class="good" src="imgs/major_house/cat.gif" height="60px">
<img id="barbecue" class="bad" src="imgs/major_house/barbecue4.gif" height="100px" style="display: none;">
</div>
3 years ago
3 years ago
<div class="bubble1 to_invert" style="display: none;">
The Major and his family are actually saurian settlers who came here to invade planet earth.
3 years ago
Use my magnifying glass to see them in their real appearance ■
3 years ago
</div>
<div class="bubble2 to_invert" style="display: none;">
They are harvesting the cats to be ready for the arrival of other groups of invaders.
3 years ago
Follow me to the butcher shop, I can show you the proof of what I'm saying ■
3 years ago
</div>
3 years ago
3 years ago
<button class="glasses_bar" style="display: none;"> ✜ magnifying glass </button>
<div class="text_container to_invert " >
3 years ago
<div class="message1">
3 years ago
<span class="instructions"><span class="instructions_arrow"></span> Follow the hairballs </span>
</div>
3 years ago
<div class="message2" style="display: none;">
3 years ago
Pat was right, you reached the major's mansion.
3 years ago
</div>
<div class="message3" style="display: none;">
3 years ago
Pat was right from the beginning! I hope Amanda did not get hurt: she can be anywhere by now. <br>
3 years ago
It seems there is no option but to <button onclick="location.href='butchery.html';"><span class="button_text">go to the butcher shop</span></button> .
3 years ago
</div>
</div>
<script src="jquery.min.js"></script>
3 years ago
<script>
var theme = document.querySelector("#theme2");
var scary = document.querySelector("#theme4");
var click = document.querySelector("#click");
var comic = document.querySelector("#comic");
3 years ago
theme.volume = 1;
click.volume = 0.5;
scary.volume = 0.4;
3 years ago
$("body").hover( function() {
3 years ago
//if (left_Percentage <= 74) {
theme.play();
theme.addEventListener('paused',function() {
theme.play();
3 years ago
},false);
3 years ago
//}
3 years ago
})
3 years ago
// saves game step in the local storage
window.onload = function() {
3 years ago
theme.play();
3 years ago
window.localStorage.setItem("major_house","opened");
console.log ("major house:",localStorage.major_house);
3 years ago
}
//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);
//adjust camera scroll
var $div = $('.duo');
var screenLeftMin = 50;
3 years ago
var screenLeftMax = 500;
3 years ago
function adjustScroll() {
var playerLeft = parseInt($div.css("left"));
var scrollLeft = $(document).scrollLeft();
var screenLeft = playerLeft - scrollLeft;
console.log ("screenleft:", screenLeft);
if (screenLeft > screenLeftMax ) {
$(document).scrollLeft(playerLeft - screenLeftMax)
}
if (screenLeft < screenLeftMin ) {
$(document).scrollLeft(playerLeft - screenLeftMin)
}
}
3 years ago
$(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();
});
3 years ago
//move the character
$(document).keydown(function(e) {
var offset = $div.position();
console.log("offset:", offset);
3 years ago
var parent_width = $("#ground").width();
var left_val_px = $div.css('left');
var left_val_only = parseInt(left_val_px);
var left_Percentage = (left_val_only/parent_width) * 100;
console.log ("left %", left_Percentage);
3 years ago
3 years ago
if (left_Percentage < 74) {
3 years ago
switch (e.which) {
case 37:
offset.left -= 20;
console.log("left");
$div.addClass("flipped");
break;
case 39:
offset.left += 20;
console.log("right");
$div.removeClass("flipped");
3 years ago
$(".message1").hide();
3 years ago
break;
3 years ago
}
}
else {
3 years ago
click.play();
3 years ago
console.log("70 ora")
$(document).scrollLeft(8000);
$(".message1").hide();
$(".message2").show();
setTimeout( function() {
$('.bubble1').show();
3 years ago
comic.play();
3 years ago
setTimeout( function() {
$('.glasses_bar').show();
$('.glasses_bar').addClass("glass_appear");
}, 3000);
}, 2000);
}
3 years ago
3 years ago
3 years ago
//check the offset and prevent the character from exceeding screen dimension
3 years ago
if (offset.left < 80) {
offset.left = 80;
}
3 years ago
/*
3 years ago
if (offset.left > $("#ground").width() - 1000) {
offset.left = $("#ground").width() - 1000;
$(document).scrollLeft(3500);
3 years ago
$(".message1").hide();
$(".message2").show();
3 years ago
setTimeout( function() {
$('.bubble1').show();
setTimeout( function() {
$('.glasses_bar').show();
3 years ago
$('.glasses_bar').addClass("glass_appear");
3 years ago
}, 3000);
}, 2000);
3 years ago
}*/
3 years ago
$div.css("left", offset.left);
$div.css("top", offset.top);
e.preventDefault();
adjustScroll();
})
3 years ago
$('.glasses_bar').click ( function(){
3 years ago
theme.pause();
scary.play();
comic.play();
3 years ago
$('.to_invert').toggleClass("invert");
$('.glasses_bar').toggleClass("glasses_bar_black");
$('.good').toggle();
$('.bad').toggle();
3 years ago
$('.bubble1, .message2').detach();
3 years ago
$('.bubble2, .message3').show();
$("body").css("overflow", "hidden");
3 years ago
if ($('.to_invert').hasClass("invert") == true) {
$('.back').css("background-color","black");
}
else{
$('.back').css("background-color","white");
}
3 years ago
})
3 years ago
3 years ago
3 years ago
$('.bubble1').click(function(){
3 years ago
click.play();
3 years ago
$('.bubble1').hide();
});
$('.bubble2').click(function(){
3 years ago
click.play();
3 years ago
$('.bubble2').hide();
});
3 years ago
</script>
</body>