master
*anna* 4 years ago
parent d8809e92a3
commit 3f11361190

BIN
.DS_Store vendored

Binary file not shown.

@ -0,0 +1,430 @@
@font-face {
font-family: sinistre;
src: url(fonts/Sinistre-StCaroline.woff),
url(fonts/Sinistre-StCaroline.otf);
}
@font-face {
font-family: jolybolditalic;
src: url(fonts/JolyDisplay-BoldDisplayItalic.woff),
url(fonts/JolyDisplay-BoldDisplayItalic.otf);
}
@font-face {
font-family: jolyregularitalic;
src: url(fonts/JolyDisplay-RegularDisplayItalic.woff),
url(fonts/JolyDisplay-RegularDisplayItalic.otf);
}
@font-face {
font-family: jolyregular;
src: url(fonts/JolyDisplay-RegularDisplay.woff),
url(fonts/JolyDisplay-RegularDisplay.otf);
}
@font-face {
font-family: jolybold;
src: url(fonts/JolyDisplay-BoldDisplay.woff),
url(fonts/JolyDisplay-BoldDisplay.otf);
}
::-moz-selection { /* Code for Firefox */
background: transparent;
}
::selection {
background: transparent;
}
body {
font-family: jolyregular;
font-size: 1.8vw;
}
#ground{
width: 120%;
height: 120%;
position:fixed;
margin:-100px;
background-color: white;
z-index:-10;
}
svg {
width: 100%;
height: 100%;
position:fixed;
z-index: -10;
stroke:black;
stroke-width:1px;
}
.instructions{
font-family:jolyregularitalic;
}
span.instructions_arrow{
padding-left:40px;
font-size: 2.4vw;
font-family:jolybolditalic;
}
div.text_container {
bottom: 40px;
left:40px;
right:40px;
position:fixed;
margin: auto;
line-height: 1.4em;
z-index: 50;
}
.game_bar {
top:40px;
right:80px;
position:fixed;
border-radius: 25vw;
padding-left: 10px;
padding-right: 10px;
font-family: sinistre;
background-color: white;
border: 0.11vw black solid;
border-radius: 25vw;
color:black;
cursor:pointer;
font-size: 1.4vw;
}
.game_bar_glow{
border: 0.11vw transparent solid;
background-color: transparent;
-webkit-box-shadow: 0px 0px 8px 1px black ;
-moz-box-shadow: 0px 0px 8px 1px black ;
box-shadow: 0px 0px 8px 1px black ;
}
.win{
animation-name: cats;
animation-duration: 0.2s;
}
@keyframes cats {
0% {top: 80px;}
25% {top: 82px;}
50% {top: 80px;}
75% {top: 82px;}
100% {top: 80px;}
}
button{
-webkit-appearance: none;
background-color: white;
border: 0.11vw black solid;
border-radius: 25vw;
color:black;
cursor:pointer;
font-family: jolybolditalic;
}
@keyframes touch {
0% {transform: rotate(0deg);}
50% {transform: rotate(-10deg);}
100% {transform: rotate(0deg);}
}
.touch_animation{
animation-name: touch;
animation-duration: 0.2s;
}
button:hover{
border: 0.11vw transparent solid;
-webkit-box-shadow: 0px 0px 8px 2px black;
-moz-box-shadow: 0px 0px 8px 2px black;
box-shadow: 0px 0px 8px 2px black;
}
span.button_text{
font-size: 1.6vw;
padding: 8px;
}
#cover{
height: 100%;
width:100%;
top:0px;
left: 0px;
position:absolute;
/*background-color: aqua;*/
z-index: 40;
}
#pat {
bottom: 25%;
left: 20%;
position:absolute;
z-index: 50;
}
#pat_flame {
bottom: 25%;
left: 22%;
position:absolute ;
z-index: 51;
}
#butcher {
bottom: 24%;
right: 8%;
position:absolute ;
z-index: 50;
}
#knife{
bottom: 30%;
right: 12%;
position:absolute ;
}
#player_img{
bottom: 24%;
left: 13%;
position:absolute;
z-index: 50;
}
.invert_style{
filter: invert(100%);
}
/*tables*/
#thunder{
top:0%;
left:28%;
position:absolute;
height: 130px;
}
.plant1{
top:13%;
left:20%;
position:absolute;
}
.plant2{
top:13%;
left:50%;
position:absolute;
}
.plant3{
top:40%;
right:10%;
position:absolute;
}
#table1{
top:20%;
left:10%;
position:absolute;
}
#table2{
top:20%;
left:25%;
position:absolute;
}
#table3{
top:20%;
left:40%;
position:absolute;
}
#table4{
top:20%;
left:55%;
position:absolute;
}
#table5{
top:20%;
left:70%;
position:absolute;
}
#table6{
top:40%;
left:10%;
position:absolute;
}
#table7{
top:40%;
left:25%;
position:absolute;
}
#table8{
top:40%;
left:40%;
position:absolute;
}
#table9{
top:40%;
left:55%;
position:absolute;
}
#table10{
top:40%;
left:70%;
position:absolute;
}
#table11{
top:60%;
left:40%;
position:absolute;
}
#table12{
top:60%;
left:55%;
position:absolute;
}
/* baloons*/
.bubble1 {
left: 20%;
bottom: 46%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 200px;
height: 105px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index:50;
cursor: pointer;
}
.bubble1:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #ffffff transparent transparent transparent;
bottom: -20px;
left: 19%;
margin-left: -10px;
}
.bubble1:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-width: 21px 21px 0 0;
border-color: #000000 transparent transparent transparent;
bottom: -22px;
left: 19%;
margin-left: -11px;
display: block;
}
.bubble2 {
left: 20%;
bottom: 43%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 200px;
height: 105px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
z-index:50;
}
.bubble2:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #ffffff transparent transparent transparent;
bottom: -20px;
left: 19%;
margin-left: -10px;
}
.bubble2:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-width: 21px 21px 0 0;
border-color: #000000 transparent transparent transparent;
bottom: -22px;
left: 19%;
margin-left: -11px;
display: block;
}
.bubble3 {
left: 33%;
bottom: 28%;
position: absolute;
background: #ffffff;
color: #000000;
font-family: sinistre;
font-size: 16px;
line-height: 17px;
text-align: center;
width: 200px;
height: 50px;
border-radius: 10px;
padding: 18px;
border: #000000 solid 1px;
}
.bubble3:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color: transparent #ffffff;
border-width: 10px 20px 10px 0;
top: 39%;
left: -20px;
margin-top: -10px;
}
.bubble3:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-color: transparent #000000;
border-width: 11px 21px 11px 0;
top: 39%;
left: -21.5px;
margin-top: -11px;
display: block;
}
/* Track */
::-webkit-scrollbar-track {
background: white;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: white;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: white;
}

@ -0,0 +1,284 @@
<!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>butcher shop</title>
<link rel="icon" href="imgs/butchery/meat.png">
<link rel="stylesheet" href="butchery.css">
</head>
<body>
<div id="cover"></div>
<div id="ground"class="invert"></div>
<svg class="invert">
<line x1="10" y1="130" x2="78%" y2="130"/>
<line x1="78%" y1="0" x2="78%" y2="130"/>
<line x1="78%" y1="130" x2="150%" y2="100%"/>
</svg>
<!--characters-->
<img class ="moving_duo" id="butcher" src="imgs/butchery/butcher1.gif" height="160px" style="display: none;">
<img class ="moving_duo" id="knife" src="imgs/butchery/knife3.png" height="40px" style="display: none;">
<div id="player_img"></div>
<img id="pat" src="imgs/butchery/parrot.gif" height="110px">
<img id="pat_flame" src="imgs/canteen/fire_ned.gif" height="120px" style="display: none;">
<img id="thunder" src="imgs/butchery/thunder.gif" style="display: none;">
<div class="plant1">
<img id="plant1" class="good" src="imgs/butchery/plant3.gif" height="90px">
</div>
<div class="plant2">
<img id="plant2" class="good" src="imgs/butchery/plant3.gif" height="90px">
</div>
<div class="plant3">
<img id="plant3" class="good" src="imgs/butchery/plant3.gif" height="90px">
</div>
<img id="table1" class="tables" src="imgs/butchery/meat1.gif" height="120px">
<img id="table2" class="tables" src="imgs/butchery/meat1.gif" height="120px">
<img id="table3" class="tables" src="imgs/butchery/meat1.gif" height="120px">
<img id="table4" class="tables" src="imgs/butchery/meat1.gif" height="120px">
<img id="table5" class="tables"src="imgs/butchery/meat1.gif" height="120px">
<img id="table6" class="tables" src="imgs/butchery/meat1.gif" height="120px">
<img id="table7" class="tables" src="imgs/butchery/meat1.gif" height="120px">
<img id="table8" class="tables"src="imgs/butchery/meat1.gif" height="120px">
<img id="table9" class="tables" src="imgs/butchery/meat1.gif" height="120px">
<img id="table10" class="tables" src="imgs/butchery/meat1.gif" height="120px">
<img id="table11" class="tables" src="imgs/butchery/meat1.gif" height="120px">
<img id="table12" class="tables" src="imgs/butchery/meat1.gif" height="120px">
<!--baloons-->
<div class="bubble1" >I believe the butcher is also one of the saurians settlers:
I suspect that some of the meat stored here is actually cat's meat.
Help me to check out these steaks!</div>
<div class="bubble2 invert" style="display: none;">I think this is the end for me. You need to tell people what we found out! I believe the saurians' headquarter lies below the bus station. Go there and save the survivors! </div>
<div class="bubble3 invert" style="display: none;">Follow the chemtrails whenever you'll find yourself in doubt. </div>
<!--bottom text-->
<div class="text_container invert">
<div class="message1">
You are now in the butcher shop's storage room.<br>
</div>
<div class="message2 " style="display: none;" >
You are now in the butcher shop's storage room.<br>
<span class="instructions"><span class="instructions_arrow"></span> Click on the meat to check it out before the butcher finds you.
You should be able to collect four cat steaks. </span>
</div>
<div class="message_won" style="display: none;">
You managed to collect the cat meat! Sadly, Pat was hit by the saurian butcher.
</div>
<div class="message_lost" style="display: none;">
On no! You got busted by the saurian butcher! You should <button id="try_again"><span class="button_text">try again</span></button> .
</div>
<div class="message_final" style="display: none;">
Pat passed ( ͡❛ ︹ ͡❛), now you are the only one who can save Amanda and the kittens.
<button onclick="location.href='square_saurians.html';"><span class="button_text">Go to the village square</span></button> to inform the citizens of your discovery. If you are still in doubt, follow Pat's advice and <button onclick="location.href='pleiadians_saurians.html';"><span class="button_text">follow the chemtrails</span></button> .
</div>
</div>
<!--game bar-->
<div class="game_bar invert" style="display: none;">
cat steaks: <span class="cat_meat_bar"></span> / 4
</div>
<script src="jquery.min.js"></script>
<script>
// saves game step in the local storage
window.onload = function() {
window.localStorage.setItem("butchery","opened");
console.log ("butcher store:",localStorage.butchery);
$('.cat_meat_bar').html(cat_meat);
}
//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);
//change characters + invert
$(".bubble1").click (function(){
$(".bubble1").toggle();
$(".message1").hide();
$(".message2, .game_bar").show();
setTimeout( function() {
$("#cover").css('z-index',-5);
}, 2000);
});
//fight
var cat_meat = 0;
var error = 0;
var duo = $(".moving_duo");
var avatar = $("#player_img");
var weapon = $("#pill");
$("#table1").click (function(){
$("#table1").addClass("touch_animation");
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table2").click (function(){
$("#table2").addClass("touch_animation");
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table3").click (function(){
$("#table3").attr("src", "imgs/butchery/cat.gif");
cat_meat ++;
console.log("cat meat:", cat_meat);
$('.cat_meat_bar').html(cat_meat);
check_end_game ();
});
$("#table4").click (function(){
$("#table4").addClass("touch_animation");
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table5").click (function(){
$("#table5").addClass("touch_animation");
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table6").click (function(){
$("#table6").addClass("touch_animation");
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table7").click (function(){
$("#table7").attr("src", "imgs/butchery/cat.gif");
cat_meat ++;
console.log("cat meat:", cat_meat);
$('.cat_meat_bar').html(cat_meat);
check_end_game ();
});
$("#table8").click (function(){
$("#table8").addClass("touch_animation");
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table9").click (function(){
$("#table9").addClass("touch_animation");
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table10").click (function(){
$("#table10").attr("src", "imgs/butchery/cat.gif");
cat_meat ++;
console.log("cat meat:", cat_meat);
$('.cat_meat_bar').html(cat_meat);
check_end_game ();
});
$("#table11").click (function(){
$("#table11").attr("src", "imgs/butchery/cat.gif");
cat_meat ++;
console.log("cat meat:", cat_meat);
$('.cat_meat_bar').html(cat_meat);
check_end_game ();
});
$("#table12").click (function(){
$("#table12").addClass("touch_animation");
error ++;
console.log("errors:", error);
check_end_game ();
});
function check_end_game () {
if (cat_meat == 4) {
$("#cover").css("z-index",40);
console.log ("you won!");
$(".message2").hide();
$(".game_bar").addClass("game_bar_glow");
setTimeout( function (){
$(".invert").addClass("invert_style");
$("#butcher").show();
setTimeout( function (){
$("#knife").show();
$("#knife").animate({left:'20%'}, {
duration : 500
}).promise().done(function(){
$("#knife").hide();
$("#pat").attr("src", "imgs/butchery/parrot_r.gif");
$("#pat").height(85);
$(".message_won").show();
setTimeout( function (){
$(".bubble2").show();
$("#butcher").hide();
$(".invert").removeClass("invert_style");
setTimeout( function (){
$(".bubble3").show();
setTimeout( function (){
$("#pat").attr("src", "imgs/butchery/parrot_d.png");
$(".message_won").hide();
$(".message_final").show();
}, 2000)
}, 3000)
}, 6000)
});
}, 300);
}, 1000);
};
if (error == 3) {
setTimeout (function() {
$("#cover").css("z-index",40);
console.log ("you lost!");
$(".message_won, .message2").hide();
$(".invert").addClass("invert_style");
$("#butcher, #thunder").show();
setTimeout( function (){
$(".message_lost").show();
}, 1000);
}, 600);
};
};
$("#try_again").click( function (){
cat_meat=0;
error=0;
$('.cat_meat_bar').html(cat_meat);
$(".message_lost, #butcher, #thunder").hide();
$(".message2").show();
$("#cover").css("z-index",-5);
$(".invert").removeClass("invert_style");
$(".tables").attr("src", "imgs/butchery/meat1.gif");
});
</script>
</body>

BIN
tree/imgs/.DS_Store vendored

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

@ -77,7 +77,7 @@
</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 butchery, I can show you the proof of what I'm saying.
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>
@ -91,7 +91,7 @@
</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 butchery</span></button> .
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>

Loading…
Cancel
Save