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
287 lines
9.5 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>follow Pat</title>
|
|
<link rel="icon" href="imgs/major_house/house1.gif">
|
|
<link rel="stylesheet" href="major_house.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 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>
|
|
|
|
<div id="ground_color" class="to_invert"></div>
|
|
|
|
<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>
|
|
|
|
|
|
<div id="ground" >
|
|
|
|
<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">
|
|
|
|
|
|
<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">
|
|
|
|
<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>
|
|
|
|
<div class="bubble1 to_invert" style="display: none;">
|
|
The Major and his family are actually saurian settlers who came here to invade planet earth.
|
|
Use my magnifying glass to see them in their real appearance ■
|
|
</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.
|
|
Follow me to the butcher shop, I can show you the proof of what I'm saying ■
|
|
</div>
|
|
|
|
<button class="glasses_bar" style="display: none;"> ✜ magnifying glass </button>
|
|
<div class="text_container to_invert " >
|
|
|
|
<div class="message1">
|
|
<span class="instructions"><span class="instructions_arrow">→</span> Follow the hairballs </span>
|
|
</div>
|
|
<div class="message2" style="display: none;">
|
|
Pat was right, you reached the major's mansion.
|
|
</div>
|
|
<div class="message3" style="display: none;">
|
|
Pat was right from the beginning! I hope Amanda did not get hurt: she can be anywhere by now. <br>
|
|
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> .
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="jquery.min.js"></script>
|
|
<script>
|
|
|
|
var theme = document.querySelector("#theme2");
|
|
var scary = document.querySelector("#theme4");
|
|
var click = document.querySelector("#click");
|
|
var comic = document.querySelector("#comic");
|
|
|
|
theme.volume = 1;
|
|
click.volume = 0.5;
|
|
scary.volume = 0.4;
|
|
|
|
|
|
$("body").hover( function() {
|
|
//if (left_Percentage <= 74) {
|
|
theme.play();
|
|
theme.addEventListener('paused',function() {
|
|
theme.play();
|
|
},false);
|
|
//}
|
|
})
|
|
|
|
// saves game step in the local storage
|
|
window.onload = function() {
|
|
theme.play();
|
|
window.localStorage.setItem("major_house","opened");
|
|
console.log ("major house:",localStorage.major_house);
|
|
}
|
|
|
|
//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;
|
|
var screenLeftMax = 500;
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
$(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();
|
|
});
|
|
|
|
//move the character
|
|
|
|
$(document).keydown(function(e) {
|
|
var offset = $div.position();
|
|
console.log("offset:", offset);
|
|
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);
|
|
|
|
if (left_Percentage < 74) {
|
|
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");
|
|
$(".message1").hide();
|
|
break;
|
|
}
|
|
}
|
|
|
|
else {
|
|
click.play();
|
|
console.log("70 ora")
|
|
$(document).scrollLeft(8000);
|
|
$(".message1").hide();
|
|
$(".message2").show();
|
|
setTimeout( function() {
|
|
$('.bubble1').show();
|
|
comic.play();
|
|
setTimeout( function() {
|
|
$('.glasses_bar').show();
|
|
$('.glasses_bar').addClass("glass_appear");
|
|
}, 3000);
|
|
}, 2000);
|
|
}
|
|
|
|
|
|
//check the offset and prevent the character from exceeding screen dimension
|
|
if (offset.left < 80) {
|
|
offset.left = 80;
|
|
}
|
|
/*
|
|
if (offset.left > $("#ground").width() - 1000) {
|
|
offset.left = $("#ground").width() - 1000;
|
|
$(document).scrollLeft(3500);
|
|
$(".message1").hide();
|
|
$(".message2").show();
|
|
setTimeout( function() {
|
|
$('.bubble1').show();
|
|
setTimeout( function() {
|
|
$('.glasses_bar').show();
|
|
$('.glasses_bar').addClass("glass_appear");
|
|
}, 3000);
|
|
}, 2000);
|
|
}*/
|
|
|
|
|
|
$div.css("left", offset.left);
|
|
$div.css("top", offset.top);
|
|
e.preventDefault();
|
|
adjustScroll();
|
|
})
|
|
|
|
$('.glasses_bar').click ( function(){
|
|
theme.pause();
|
|
scary.play();
|
|
comic.play();
|
|
$('.to_invert').toggleClass("invert");
|
|
$('.glasses_bar').toggleClass("glasses_bar_black");
|
|
$('.good').toggle();
|
|
$('.bad').toggle();
|
|
$('.bubble1, .message2').detach();
|
|
$('.bubble2, .message3').show();
|
|
$("body").css("overflow", "hidden");
|
|
if ($('.to_invert').hasClass("invert") == true) {
|
|
$('.back').css("background-color","black");
|
|
}
|
|
else{
|
|
$('.back').css("background-color","white");
|
|
}
|
|
|
|
})
|
|
|
|
|
|
$('.bubble1').click(function(){
|
|
click.play();
|
|
$('.bubble1').hide();
|
|
});
|
|
|
|
$('.bubble2').click(function(){
|
|
click.play();
|
|
$('.bubble2').hide();
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</body> |