<!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 >
< 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 >
< audio id = "yes" > < source src = "sound/yes.wav" type = "audio/wav" > < / audio >
< audio id = "no" > < source src = "sound/no.wav" type = "audio/wav" > < / audio >
< audio id = "shot" > < source src = "sound/shot.wav" type = "audio/wav" > < / audio >
< 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 >
< 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 >
var theme = document.querySelector("#theme2");
var scary = document.querySelector("#theme4");
var click = document.querySelector("#click");
var comic = document.querySelector("#comic");
var no = document.querySelector("#no");
var yes = document.querySelector("#yes");
var shot = document.querySelector("#shot");
click.volume = 0.5;
scary.volume = 0.3;
shot.volume = 0.5;
$("body").hover( function() {
if (cat_meat < 4 ) {
theme.play();
theme.addEventListener('paused',function() {
theme.play();
},false);
}
})
//go back to start
$(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();
});
// saves game step in the local storage
window.onload = function() {
theme.play();
comic.play();
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();
click.play();
setTimeout( function() {
$("#cover").css('z-index',-5);
$(".tables").css('cursor', 'pointer');
}, 2000);
});
//fight
var cat_meat = 0;
var error = 0;
var duo = $(".moving_duo");
var avatar = $("#player_img");
var weapon = $("#pill");
$("#table1").click (function(){
no.play();
$("#table1").addClass("touch_animation");
setTimeout(function(){
$("#table1").removeClass("touch_animation");
},250);
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table2").click (function(){
no.play();
$("#table2").addClass("touch_animation");
setTimeout(function(){
$("#table2").removeClass("touch_animation");
},250);
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table3").click (function(){
yes.play();
$("#table3").attr("src", "imgs/butchery/cat.gif");
setTimeout(function(){
$("#table3").removeClass("touch_animation");
},250);
cat_meat ++;
console.log("cat meat:", cat_meat);
$('.cat_meat_bar').html(cat_meat);
check_end_game ();
});
$("#table4").click (function(){
no.play();
$("#table4").addClass("touch_animation");
setTimeout(function(){
$("#table4").removeClass("touch_animation");
},250);
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table5").click (function(){
no.play();
$("#table5").addClass("touch_animation");
setTimeout(function(){
$("#table5").removeClass("touch_animation");
},250);
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table6").click (function(){
no.play();
$("#table6").addClass("touch_animation");
setTimeout(function(){
$("#table6").removeClass("touch_animation");
},250);
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table7").click (function(){
yes.play();
$("#table7").attr("src", "imgs/butchery/cat.gif");
setTimeout(function(){
$("#table7").removeClass("touch_animation");
},250);
cat_meat ++;
console.log("cat meat:", cat_meat);
$('.cat_meat_bar').html(cat_meat);
check_end_game ();
});
$("#table8").click (function(){
no.play();
$("#table8").addClass("touch_animation");
setTimeout(function(){
$("#table8").removeClass("touch_animation");
},250);
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table9").click (function(){
no.play();
$("#table9").addClass("touch_animation");
setTimeout(function(){
$("#table9").removeClass("touch_animation");
},250);
error ++;
console.log("errors:", error);
check_end_game ();
});
$("#table10").click (function(){
yes.play();
$("#table10").attr("src", "imgs/butchery/cat.gif");
setTimeout(function(){
$("#table10").removeClass("touch_animation");
},250);
cat_meat ++;
console.log("cat meat:", cat_meat);
$('.cat_meat_bar').html(cat_meat);
check_end_game ();
});
$("#table11").click (function(){
yes.play();
$("#table11").attr("src", "imgs/butchery/cat.gif");
setTimeout(function(){
$("#table11").removeClass("touch_animation");
},250);
cat_meat ++;
console.log("cat meat:", cat_meat);
$('.cat_meat_bar').html(cat_meat);
check_end_game ();
});
$("#table12").click (function(){
no.play();
$("#table12").addClass("touch_animation");
setTimeout(function(){
$("#table12").removeClass("touch_animation");
},250);
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").removeClass("invert");
$(".game_bar").addClass("game_bar_glow");
setTimeout( function (){
$(".invert").addClass("invert_style");
theme.pause();
scary.play();
$("#butcher").show();
setTimeout( function (){
$("#knife").show();
shot.play();
$("#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();
click.play();
setTimeout( function (){
$(".bubble2").show();
comic.play();
$("#butcher").hide();
$(".invert").removeClass("invert_style");
scary.pause();
theme.play();
}, 5000)
});
}, 300);
}, 1000);
};
$(".bubble2").click(function(){
comic.play();
$(".bubble2").hide();
$(".bubble3").show();
setTimeout( function (){
$("#pat").attr("src", "imgs/butchery/parrot_d.png");
$(".message_won").hide();
$(".message_final").show();
click.play();
}, 2000)
});
$(".bubble3").click(function(){
click.play();
$(".bubble3").hide();
});
if (error == 3) {
setTimeout (function() {
theme.pause();
scary.play();
$("#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();
click.play();
}, 1000);
}, 600);
};
};
$("#try_again").click( function (){
theme.play();
scary.pause();
cat_meat=0;
error=0;
$('.cat_meat_bar').html(cat_meat);
$(".message_lost, #butcher, #thunder").hide();
$(".message2").show();
click.play();
$("#cover").css("z-index",-5);
$(".invert").removeClass("invert_style");
$(".tables").attr("src", "imgs/butchery/meat1.gif");
});
< / script >
< / body >
