master
*anna* 4 years ago
parent d7b2ae60a9
commit 9dcea187db

BIN
.DS_Store vendored

Binary file not shown.

@ -38,8 +38,17 @@
body { body {
font-family: jolyregular; font-family: jolyregular;
font-size: 1.8vw; font-size: 1.8vw;
}
#ground{
width: 120%;
height: 120%;
position:fixed;
margin:-100px;
background-color: white;
z-index:-10;
} }
svg { svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -119,14 +128,29 @@ span.button_text{
z-index: 0; z-index: 0;
} }
#pill{
bottom: 30%;
left: 8%;
position:absolute ;
}
/*school staff*/ /*school staff*/
#table { #table {
bottom: 50%; bottom: 50%;
left: 45%; left: 45%;
position:absolute ; position:absolute ;
cursor: pointer;
}
#column {
bottom: 50%;
left: 47%;
position:absolute ;
} }
div.figure1 { div.figure1 {
top: 20%; top: 20%;
left: 30%; left: 30%;
@ -146,19 +170,21 @@ div.figure3 {
} }
div.figure4 { div.figure4 {
bottom: 35%; bottom: 25%;
left: 50%; left: 54%;
position:absolute ; position:absolute ;
} }
div.figure5 { div.figure5 {
bottom: 25%; bottom: 40%;
right: 25%; right: 24%;
position:absolute ; position:absolute ;
} }
.invert_style{
filter: invert(100%);
}

@ -4,13 +4,14 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>canteen</title> <title>canteen</title>
<link rel="icon" href="imgs/park/flower2.gif"> <link rel="icon" href="imgs/canteen/kitchen1.gif">
<link rel="stylesheet" href="canteen.css"> <link rel="stylesheet" href="canteen.css">
</head> </head>
<body > <body >
<div id="ground"class="invert"></div>
<svg > <svg class="invert">
<line x1="10" y1="130" x2="80%" y2="130" style="stroke:black;stroke-width:1" /> <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="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;"/> <line x1="80%" y1="130" x2="150%" y2="100%" style="stroke:black;stroke: width 1px;"/>
@ -19,28 +20,33 @@
<!--characters--> <!--characters-->
<div id="player_img"></div> <div id="player_img"></div>
<img id="pill" src="imgs/canteen/pill.png" height="30px" style="display: none;">
<img id="ned" src="imgs/canteen/ned1.gif" height="120px"> <img id="ned" src="imgs/canteen/ned1.gif" height="120px">
<img id="table" src="imgs/canteen/table1.gif" height="110px"> <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"> <div class="figure1">
<img id="cooking1" src="imgs/canteen/woman_cooking_1.gif" height="110px"> <img id="cooking1" class="cooking" src="imgs/canteen/woman_cooking_1.gif" height="110px">
<img id="satan1" src="imgs/canteen/woman_rites_1.gif" height="110px" style="display: none;"> <img id="satan1" class="satan" src="imgs/canteen/woman_rites_1.gif" height="130px" style="display: none;">
</div> </div>
<div class="figure2"> <div class="figure2">
<img id="cooking2" src="imgs/canteen/woman_cooking_2.gif" height="120px"> <img id="cooking2" class="cooking" src="imgs/canteen/woman_cooking_2.gif" height="120px">
<img id="satan2" src="imgs/canteen/woman_rites_2.gif" height="130px" style="display: none;"> <img id="satan2" class="satan" src="imgs/canteen/devil_rites_4.gif" height="140px" style="display: none;">
</div> </div>
<div class="figure3"> <div class="figure3">
<img id="cooking3" src="imgs/canteen/woman_cooking_3.gif" height="120px"> <img id="cooking3" class="cooking" src="imgs/canteen/woman_cooking_3.gif" height="120px">
<img id="satan3" src="imgs/canteen/woman_rites_3.gif" height="110px" style="display: none;"> <img id="satan3" class="satan" src="imgs/canteen/woman_rites_3.gif" height="180px" style="display: none;">
</div> </div>
<div class="figure4"> <div class="figure4">
<img id="cooking4" src="imgs/canteen/woman_cooking_4.gif" height="140px"> <img id="cooking4" class="cooking" src="imgs/canteen/woman_cooking_4.gif" height="140px">
<img id="satan4" src="imgs/canteen/woman_rites_4.gif" height="110px" style="display: none;"> <img id="satan4" class="satan" src="imgs/canteen/woman_rites_2.gif" height="180px" style="display: none;">
</div> </div>
<div class="figure5"> <div class="figure5">
<img id="cooking5" src="imgs/canteen/woman_cooking_5.gif" height="140px"> <img id="cooking5" class="cooking" src="imgs/canteen/woman_cooking_5.gif" height="140px">
<img id="satan4" src="imgs/canteen/woman_rites_4.gif" height="130px" style="display: none;"> <img id="satan4" class="satan" src="imgs/canteen/woman_rites_5.gif" height="160px" style="display: none;">
</div> </div>
@ -57,10 +63,10 @@
<div class="text_container"> <div class="text_container">
<div class="message1"> <div class="message1">
You are now in the school canteen. The staff is there as well: the plan might get more complicated. <br> You are now in the school canteen. The staff is there as well: the plan might get more complicated. <br>
<span class="instructions">Click on the corn on the table to take it with you.</span> <span class="instructions">Click on the corn cobs on the table to take them with you.</span>
</div> </div>
<div class="message2" style="display: none;"> <div class="message2 invert" style="display: none;" >
Oh jeez! The school cooking staff turned into what appears to be a devil-worshippers gang!<br> 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> 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> <span class="instructions">Click on the school's staff to neutralize them with the poisonous chemical.</span>
</div> </div>
@ -72,7 +78,7 @@
</div> </div>
<!--game bar--> <!--game bar-->
<div class="game_bar" > <div class="game_bar invert" >
fluoride: <span class="cobs_collected"></span> / 5 fluoride: <span class="cobs_collected"></span> / 5
</div> </div>
@ -85,7 +91,7 @@
window.onload = function() { window.onload = function() {
window.localStorage.setItem("school_canteen","opened"); window.localStorage.setItem("school_canteen","opened");
console.log ("school canteen:",localStorage.school_canteen); console.log ("school canteen:",localStorage.school_canteen);
$('.cobs_collected').html("0"); $('.cobs_collected').html(fluoride);
} }
@ -96,8 +102,24 @@
var player_img = document.querySelector("#player_img"); var player_img = document.querySelector("#player_img");
player_img.appendChild(img); player_img.appendChild(img);
//get player name from local storage //change characters + invert
$("#table").click (function(){
$(".cooking, #table, .message1 ").hide();
$(".satan, #column, .message2").show();
$(".invert").addClass("invert_style");
});
//fight
var avatar = $("#player_img");
var weapon = $("#pill");
$(".figure1").click (function(){
avatar.animate({top:'16%'}, "slow");
weapon.animate({top:'16%'}, "slow");
weapon.show();
fluoride -- ;
});
</script> </script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Loading…
Cancel
Save