<!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 > canteen< / title >
< link rel = "icon" href = "imgs/canteen/kitchen1.gif" >
< link rel = "stylesheet" href = "canteen.css" >
< / head >
< body >
< div id = "ground" class = "invert" > < / div >
< svg class = "invert" >
< line x1 = "10" y1 = "130" x2 = "80%" y2 = "130" style = "stroke:black;stroke-width:1" / >
< line x1 = "80%" y1 = "0" x2 = "80%" y2 = "130" style = "stroke:black;stroke: width 1px;" / >
< line x1 = "80%" y1 = "130" x2 = "150%" y2 = "100%" style = "stroke:black;stroke: width 1px;" / >
< / svg >
<!-- characters -->
< div class = "moving_duo" id = "player_img" > < / div >
< img class = "moving_duo" id = "pill" src = "imgs/canteen/pill.png" height = "40px" style = "display: none;" >
< img id = "ned" src = "imgs/canteen/ned1.gif" height = "120px" >
< img id = "ned_flame" src = "imgs/canteen/fire_ned.gif" height = "120px" style = "display: none;" >
< img id = "table" src = "imgs/canteen/table1.gif" height = "110px" >
< img id = "column" src = "imgs/canteen/fire_5.gif" height = "130px" style = "display: none;" >
< div class = "figure1" >
< img id = "cooking1" class = "cooking" src = "imgs/canteen/woman_cooking_1.gif" height = "110px" >
< img id = "satan1" class = "satan" src = "imgs/canteen/woman_rites_1.gif" height = "130px" style = "display: none;" >
< / div >
< div class = "figure2" >
< img id = "cooking2" class = "cooking" src = "imgs/canteen/woman_cooking_2.gif" height = "120px" >
< img id = "satan2" class = "satan" src = "imgs/canteen/devil_rites_4.gif" height = "140px" style = "display: none;" >
< / div >
< div class = "figure3" >
< img id = "cooking3" class = "cooking" src = "imgs/canteen/woman_cooking_3.gif" height = "120px" >
< img id = "satan3" class = "satan" src = "imgs/canteen/woman_rites_3.gif" height = "180px" style = "display: none;" >
< / div >
< div class = "figure4" >
< img id = "cooking4" class = "cooking" src = "imgs/canteen/woman_cooking_4.gif" height = "140px" >
< img id = "satan4" class = "satan" src = "imgs/canteen/woman_rites_2.gif" height = "180px" style = "display: none;" >
< / div >
< div class = "figure5" >
< img id = "cooking5" class = "cooking" src = "imgs/canteen/woman_cooking_5.gif" height = "140px" >
< img id = "satan5" class = "satan" src = "imgs/canteen/woman_rites_5.gif" height = "160px" style = "display: none;" >
< / div >
<!-- baloons -->
< div class = "ned_bubble1" style = "display: none;" > I think this is the end for me. Please, promise me that you are going to put an end to this! Children are endangered and you are now the only one who can save them! < / div >
< div class = "ned_bubble2" style = "display: none;" > Follow the chemtrails whenever you'll find yourself in doubt. < / div >
< div class = "staff_bubble" style = "display: none;" > < / div >
<!-- bottom text -->
< div class = "text_container" >
< div class = "message1" >
You are now in the school canteen. The staff is there as well: your plan might be getting complicated. < br >
< span class = "instructions" > Click on the corn cobs on the table to take them with you.< / span >
< / div >
< div class = "message2 invert" style = "display: none;" >
Oh jeez! The school's cooking staff turned into what appears to be a devil-worshippers gang!< br >
You still have fluoride with you though: use it to fight them back!< br >
< span class = "instructions" > Click on the school's staff to neutralize them with the poisonous chemical.< / span >
< / div >
< div class = "message3 " style = "display: none;" >
You managed to neutralize the enemy! Sadly, Ned was hit during the fight.
< / div >
< div class = "message4 " style = "display: none;" >
< button onclick = "location.href='square_satanism.html';" > < span class = "button_text" > Go to the village square< / span > < / button > to inform the citizens of your discovery: you need to rescue the children from the trip.
If you are still in doubt, follow Ned's advice and < button onclick = "location.href='pleiadians_satanism.html';" > < span class = "button_text" > look for the chemtrails< / span > < / button > .
< / div >
< / div >
<!-- game bar -->
< div class = "game_bar invert" >
fluoride: < span class = "cobs_collected" > < / span > / 5
< / div >
< script src = "jquery.min.js" > < / script >
< script >
var fluoride = 5;
// saves game step in the local storage
window.onload = function() {
window.localStorage.setItem("school_canteen","opened");
console.log ("school canteen:",localStorage.school_canteen);
$('.cobs_collected').html(fluoride);
}
//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
$("#table").click (function(){
$(".cooking, #table, .message1 ").hide();
$(".satan, #column, .message2").show();
$(".invert").addClass("invert_style");
});
//fight
var duo = $(".moving_duo");
var avatar = $("#player_img");
var weapon = $("#pill");
$(".figure1").click (function(){
--fluoride;
console.log("fluoride:", fluoride);
weapon.hide();
$('.cobs_collected').html(fluoride);
duo.animate({top:'18%'}, {
duration : 300
}).promise().done(function () {
weapon.show();
console.log("weapon show");
weapon.animate({ left: "30%" }, {
duration: 300
}).promise().done(function(){
$("#satan1").attr("src", "imgs/canteen/fire_once.gif");
weapon.hide();
console.log("weapon hide");
weapon.css({ left: "11%" });
check_end_game();
});
});
hit_ned();
});
$(".figure2").click (function(){
--fluoride;
console.log("fluoride:", fluoride);
weapon.hide();
$('.cobs_collected').html(fluoride);
duo.animate({top:'12%'}, {
duration : 300
}).promise().done(function () {
weapon.show();
console.log("weapon show");
weapon.animate({ left: "60%" }, {
duration: 300
}).promise().done(function(){
$("#satan2").attr("src", "imgs/canteen/fire_once.gif");
weapon.hide();
console.log("weapon hide");
weapon.css({ left: "11%" });
check_end_game();
});
});
hit_ned();
});
$(".figure3").click (function(){
--fluoride;
console.log("fluoride:", fluoride);
weapon.hide();
$('.cobs_collected').html(fluoride);
duo.animate({top:'22%'}, {
duration : 300
}).promise().done(function () {
weapon.show();
console.log("weapon show");
weapon.animate({ left: "80%" }, {
duration: 300
}).promise().done(function(){
$("#satan3").attr("src", "imgs/canteen/fire_once.gif");
weapon.hide();
console.log("weapon hide");
weapon.css({ left: "11%" });
check_end_game();
});
});
hit_ned();
});
$(".figure4").click (function(){
--fluoride;
console.log("fluoride:", fluoride);
weapon.hide();
$('.cobs_collected').html(fluoride);
duo.animate({top:'55%'}, {
duration : 300
}).promise().done(function () {
weapon.show();
console.log("weapon show");
weapon.animate({ left: "46%" }, {
duration: 300
}).promise().done(function(){
$("#satan4").attr("src", "imgs/canteen/fire_once.gif");
weapon.hide();
console.log("weapon hide");
weapon.css({ left: "11%" });
check_end_game();
});
});
hit_ned();
});
$(".figure5").click (function(){
--fluoride;
console.log("fluoride:", fluoride);
weapon.hide();
$('.cobs_collected').html(fluoride);
duo.animate({top:'40%'}, {
duration : 300
}).promise().done(function () {
weapon.show();
console.log("weapon show");
weapon.animate({ left: "80%" }, {
duration: 300
}).promise().done(function(){
$("#satan5").attr("src", "imgs/canteen/fire_once.gif");
weapon.hide();
console.log("weapon hide");
weapon.css({ left: "11%" });
check_end_game();
});
});
hit_ned();
});
function hit_ned() {
if (fluoride == 2) {
$("#ned_flame").show();
//$("#ned_flame").delay(1000).hide();
$("#ned").attr("src", "imgs/canteen/ned_wounded.gif");
}
};
var figures_all = $(".figure1, .figure2, .figure3, .figure4, .figure5");
function check_end_game() {
console.log("check end game");
if (fluoride == 0) {
console.log("game over!");
setTimeout( function (){
figures_all.detach()
setTimeout( function () {
$("#column").hide();
$(".message2").hide();
$(".message3").show();
$(".invert").removeClass("invert_style");
setTimeout (function ()
{$(".ned_bubble1").show();
setTimeout (function () {
$(".ned_bubble2").show();
setTimeout (function () {
$(".message3").hide();
$(".message4").show();
$("#ned").attr("src", "imgs/canteen/ned_wounded.png");
},5000);
},4000);
},3000);
}, 1000);
}, 1000);
//setTimeout(avatar.animate ({top:"50%"}), 2000);
};
};
< / script >
< script type = "text/javascript" src = "index.js" > < / script >
< / body >
