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.
376 lines
13 KiB
HTML
376 lines
13 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>canteen</title>
|
|
<link rel="icon" href="imgs/canteen/kitchen1.gif">
|
|
<link rel="stylesheet" href="canteen.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>
|
|
<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 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>
|
|
|
|
|
|
<!--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"><span class="instructions_arrow">→</span> 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"><span class="instructions_arrow">→</span> 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;">
|
|
Ned passed ( ͡❛ ︹ ͡❛) , but you can still save the children. <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 his advice and <button onclick="location.href='pleiadians_satanism.html';"><span class="button_text">follow 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>
|
|
|
|
//audio
|
|
|
|
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");
|
|
|
|
theme.volume = 1;
|
|
shot.volume = 0.5;
|
|
scary.volume = 0.4;
|
|
click.volume=0.5;
|
|
|
|
$("body").hover( function() {
|
|
if (stop_autoplay = 0) {
|
|
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();
|
|
if ($('.invert').hasClass("invert_style") == true) {
|
|
$('.back').css("background-color","black");
|
|
}
|
|
else{
|
|
$('.back').css("background-color","white");
|
|
}
|
|
}
|
|
});
|
|
|
|
$("#go_to_start").click( function (){
|
|
window.location.href="index.html";
|
|
click.play();
|
|
});
|
|
|
|
$("#stay").click( function (){
|
|
$(".back").hide();
|
|
click.play();
|
|
});
|
|
|
|
var fluoride = 5;
|
|
|
|
// saves game step in the local storage
|
|
window.onload = function() {
|
|
theme.play();
|
|
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
|
|
|
|
var stop_autoplay = 0;
|
|
|
|
$("#table").click (function(){
|
|
stop_autoplay ++;
|
|
theme.pause();
|
|
scary.play();
|
|
$(".cooking, #table, .message1 ").hide();
|
|
$(".satan, #column, .message2").show();
|
|
$(".invert").addClass("invert_style");
|
|
});
|
|
|
|
|
|
//fight
|
|
var duo = $(".moving_duo");
|
|
var avatar = $("#player_img");
|
|
var weapon = $("#pill");
|
|
|
|
$("#satan1").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(){
|
|
shot.play();
|
|
$("#satan1").attr("src", "imgs/canteen/fire_once.gif");
|
|
weapon.hide();
|
|
console.log("weapon hide");
|
|
weapon.css({ left: "11%" });
|
|
check_end_game();
|
|
});
|
|
});
|
|
hit_ned();
|
|
});
|
|
|
|
$("#satan2").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(){
|
|
shot.play();
|
|
$("#satan2").attr("src", "imgs/canteen/fire_once.gif");
|
|
weapon.hide();
|
|
console.log("weapon hide");
|
|
weapon.css({ left: "11%" });
|
|
check_end_game();
|
|
});
|
|
});
|
|
hit_ned();
|
|
});
|
|
|
|
$("#satan3").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(){
|
|
shot.play();
|
|
$("#satan3").attr("src", "imgs/canteen/fire_once.gif");
|
|
weapon.hide();
|
|
console.log("weapon hide");
|
|
weapon.css({ left: "11%" });
|
|
check_end_game();
|
|
});
|
|
});
|
|
hit_ned();
|
|
});
|
|
|
|
$("#satan4").click (function(){
|
|
shot.play();
|
|
--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(){
|
|
shot.play();
|
|
$("#satan4").attr("src", "imgs/canteen/fire_once.gif");
|
|
weapon.hide();
|
|
console.log("weapon hide");
|
|
weapon.css({ left: "11%" });
|
|
check_end_game();
|
|
});
|
|
});
|
|
hit_ned();
|
|
});
|
|
|
|
$("#satan5").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(){
|
|
shot.play();
|
|
$("#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();
|
|
setTimeout( function() {
|
|
shot.play();
|
|
}, 200);
|
|
//$("#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!");
|
|
$(".game_bar").addClass("game_bar_glow");
|
|
click.play();
|
|
setTimeout( function (){
|
|
figures_all.detach();
|
|
$(".game_bar").hide();
|
|
setTimeout( function () {
|
|
$("#column").hide();
|
|
$(".message2").hide();
|
|
$(".message3").show();
|
|
$(".invert").removeClass("invert_style");
|
|
scary.pause();
|
|
theme.play();
|
|
setTimeout (function () {
|
|
$(".game_bar").hide();
|
|
$(".ned_bubble1").show();
|
|
},1500);
|
|
}, 1000);
|
|
}, 1000);
|
|
|
|
};
|
|
};
|
|
|
|
$(".ned_bubble1").click( function(){
|
|
comic.play();
|
|
$(".ned_bubble1").hide();
|
|
$(".ned_bubble2").show();
|
|
setTimeout (function () {
|
|
click.play();
|
|
$(".message3").hide();
|
|
$(".message4").show();
|
|
$("#ned").attr("src", "imgs/canteen/ned_wounded.png");
|
|
},3000);
|
|
});
|
|
|
|
$(".ned_bubble2").click( function(){
|
|
click.play();
|
|
$(".ned_bubble2").hide();
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body> |