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.
320 lines
14 KiB
HTML
320 lines
14 KiB
HTML
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html><head>
|
||
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||
|
|
<title>IRL ENERGY by Louisa Teichmann</title>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com/">
|
||
|
|
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="bg"></div>
|
||
|
|
<div class="splash" id="first-page"> <br><p id="introtxt">
|
||
|
|
|
||
|
|
<br>You are standing outside Duan's Seafood Service. Find the hidden codewords all around you to make it to the end of this hyper-local side quest.
|
||
|
|
Make sure to enter the codewords in correct spelling ;-* All codewords are in short distance and within reach of the hotspot.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<p id="scene1">YOU UNLOCKED A REAL LIFE ENERGY DRINK. TAKE IT IN FOR A MOMENT AND ABSORB THE NUTRIENTS, THEN MOVE FORWARD TO THE NEXT SCENE.</p>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="ending"> <br>
|
||
|
|
<p id="endingtxt"><br><br><br><br><br><br>You had too much screen time. <br>Please spend more time in the real world.
|
||
|
|
</p>
|
||
|
|
<a href=""><br><br><input type="button" id="archive" value="start over">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="win"> <br>
|
||
|
|
<p id="winningtxt">You spent enough time in the real world to boost your energy!!!<br>To reach the next level,<br> turn off your phone and start walking until you get lost.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="1"><p class="title">The Lobster Lounge</p>
|
||
|
|
<div id="scene">Hidden amongst the many chinese restaurants,<br> Duan's Seafood Service is waiting for customers.
|
||
|
|
</div>
|
||
|
|
<img id="hint1" class="hint-pix" src="img/hint1.jpg">
|
||
|
|
<div id="input">
|
||
|
|
<label for="fname">insert your IRL codeword below and hit enter on your keyboard >>></label><br>
|
||
|
|
<input type="text" id="fname" name="firstname" placeholder="enter codeword..">
|
||
|
|
</div>
|
||
|
|
<div id="hint-txt1" class="hint-txt">Look closely. What animal is in the left circle? The name is the codeword.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="2">
|
||
|
|
<p class="title">Shrimp Empire Unleashed</p>
|
||
|
|
<div id="scene">Not too far from Duan's, you see a well advertised Restaurant.</div>
|
||
|
|
<img id="hint2" class="hint-pix" src="img/hint2.jpg">
|
||
|
|
<div id="input">
|
||
|
|
<label for="fname">insert your IRL codeword below and hit enter on your keyboard >>></label><br>
|
||
|
|
<input type="text" id="fname" name="firstname" placeholder="type here..">
|
||
|
|
</div>
|
||
|
|
<div id="hint-txt2" class="hint-txt">What is the name of the missing dish?</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="3">
|
||
|
|
<p class="title">A Rectangular Roof</p>
|
||
|
|
<div id="scene">You cross the street to look back at the flats above the shops.</div>
|
||
|
|
|
||
|
|
<img id="hint3" class="hint-pix" src="img/hint3.jpg">
|
||
|
|
<div id="input">
|
||
|
|
<label for="fname">insert your IRL codeword below and hit enter on your keyboard >>></label><br>
|
||
|
|
<input type="text" id="fname" name="firstname" placeholder="type here..">
|
||
|
|
</div>
|
||
|
|
<div id="hint-txt3" class="hint-txt">What color are these tiles?</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="4">
|
||
|
|
<p class="title">Symbolic Circles</p>
|
||
|
|
<div id="scene">Do not move too far. Remember to stay within reach.</div>
|
||
|
|
|
||
|
|
<img id="hint4" class="hint-pix" src="img/hint4.jpg">
|
||
|
|
<div id="input">
|
||
|
|
<label for="fname">insert your IRL codeword below and hit enter on your keyboard >>></label><br>
|
||
|
|
<input type="text" id="fname" name="firstname" placeholder="type here..">
|
||
|
|
</div>
|
||
|
|
<div id="hint-txt4" class="hint-txt">How many dots make up this small circle?</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="5">
|
||
|
|
<p class="title">Electronic Box Time</p>
|
||
|
|
<div id="scene">Right at the entry of a sidestreet, you see a grey electronic box.
|
||
|
|
</div>
|
||
|
|
<img id="hint5" class="hint-pix" src="img/hint5.jpg">
|
||
|
|
<div id="input">
|
||
|
|
<label for="fname">insert your IRL codeword below and hit enter on your keyboard >>></label><br>
|
||
|
|
<input type="text" id="fname" name="firstname" placeholder="type here..">
|
||
|
|
</div>
|
||
|
|
<div id="hint-txt5" class="hint-txt">Look at the white sign placed on it. What is the three digit number?</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="nav">
|
||
|
|
<div id="keys"></div><br>
|
||
|
|
<div id="healthbar"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<button id="left" onclick="backwardClick()">
|
||
|
|
⤶
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button id="right" onclick="forwardClick()">
|
||
|
|
>>>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var healthtracker = 100;
|
||
|
|
var keytracker = 0;
|
||
|
|
var scenetracker = 0;
|
||
|
|
|
||
|
|
|
||
|
|
document.getElementById("hint-txt1").style.visibility = "hidden";
|
||
|
|
document.getElementById("hint-txt2").style.visibility = "hidden";
|
||
|
|
document.getElementById("hint-txt3").style.visibility = "hidden";
|
||
|
|
document.getElementById("hint-txt4").style.visibility = "hidden";
|
||
|
|
document.getElementById("hint-txt5").style.visibility = "hidden";
|
||
|
|
|
||
|
|
function openCan(){
|
||
|
|
|
||
|
|
document.getElementById("input").style.visibility = "visible";
|
||
|
|
document.getElementById("fname").focus();
|
||
|
|
document.getElementById("coordinates").style.visibility = "visible";
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function forwardClick () {
|
||
|
|
if (healthtracker <= 1) {
|
||
|
|
document.getElementById("ending").style.visibility = "visible";
|
||
|
|
console.log("wasted");
|
||
|
|
}
|
||
|
|
else if (scenetracker == 0) {
|
||
|
|
document.getElementById("first-page").style.visibility = "hidden";
|
||
|
|
document.getElementById("input").style.visibility = "visible";
|
||
|
|
document.getElementById("fname").focus();
|
||
|
|
document.getElementById("1").style.visibility = "visible";
|
||
|
|
document.getElementById("2").style.visibility = "hidden";
|
||
|
|
document.getElementById("3").style.visibility = "hidden";
|
||
|
|
document.getElementById("4").style.visibility = "hidden";
|
||
|
|
document.getElementById("5").style.visibility = "hidden";
|
||
|
|
healthtracker = healthtracker - 25;
|
||
|
|
scenetracker = 1;
|
||
|
|
} else if (scenetracker == 1) {
|
||
|
|
document.getElementById("left").style.visibility = "visible";
|
||
|
|
document.getElementById("scene1").style.visibility = "hidden";
|
||
|
|
document.getElementById("1").style.visibility = "hidden";
|
||
|
|
document.getElementById("2").style.visibility = "visible";
|
||
|
|
healthtracker = healthtracker - 25;
|
||
|
|
scenetracker = 2;
|
||
|
|
|
||
|
|
} else if (scenetracker == 2) {
|
||
|
|
document.getElementById("scene1").style.visibility = "hidden";
|
||
|
|
document.getElementById("2").style.visibility = "hidden";
|
||
|
|
document.getElementById("3").style.visibility = "visible";
|
||
|
|
healthtracker = healthtracker - 25;
|
||
|
|
scenetracker = 3;
|
||
|
|
} else if (scenetracker == 3) {
|
||
|
|
document.getElementById("scene1").style.visibility = "hidden";
|
||
|
|
document.getElementById("3").style.visibility = "hidden";
|
||
|
|
document.getElementById("4").style.visibility = "visible";
|
||
|
|
healthtracker = healthtracker - 25;
|
||
|
|
scenetracker = 4;
|
||
|
|
} else if (scenetracker == 4) {
|
||
|
|
document.getElementById("scene1").style.visibility = "hidden";
|
||
|
|
document.getElementById("4").style.visibility = "hidden";
|
||
|
|
document.getElementById("5").style.visibility = "visible";
|
||
|
|
healthtracker = healthtracker - 5;
|
||
|
|
scenetracker = 5;
|
||
|
|
} else if (scenetracker == 5) {
|
||
|
|
document.getElementById("scene1").style.visibility = "hidden";
|
||
|
|
document.getElementById("5").style.visibility = "hidden";
|
||
|
|
document.getElementById("6").style.visibility = "visible";
|
||
|
|
document.getElementById("right").style.visibility = "hidden";
|
||
|
|
healthtracker = healthtracker - 5;
|
||
|
|
scenetracker = 6;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.log("nothing");
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById("healthbar").innerHTML = "ENERGY: " + healthtracker + "%";
|
||
|
|
console.log(healthtracker);
|
||
|
|
console.log(scenetracker);
|
||
|
|
}
|
||
|
|
|
||
|
|
function backwardClick () {
|
||
|
|
if (scenetracker == 2) {
|
||
|
|
document.getElementById("1").style.visibility = "visible";
|
||
|
|
document.getElementById("2").style.visibility = "hidden";
|
||
|
|
document.getElementById("left").style.visibility = "hidden";
|
||
|
|
scenetracker = 1;
|
||
|
|
} else if (scenetracker == 3) {
|
||
|
|
document.getElementById("scene1").style.visibility = "hidden";
|
||
|
|
document.getElementById("3").style.visibility = "hidden";
|
||
|
|
document.getElementById("2").style.visibility = "visible";
|
||
|
|
|
||
|
|
scenetracker = 2;
|
||
|
|
} else if (scenetracker == 4) {
|
||
|
|
document.getElementById("scene1").style.visibility = "hidden";
|
||
|
|
document.getElementById("4").style.visibility = "hidden";
|
||
|
|
document.getElementById("3").style.visibility = "visible";
|
||
|
|
|
||
|
|
scenetracker = 3;
|
||
|
|
} else if (scenetracker == 5) {
|
||
|
|
document.getElementById("scene1").style.visibility = "hidden";
|
||
|
|
document.getElementById("5").style.visibility = "hidden";
|
||
|
|
document.getElementById("4").style.visibility = "visible";
|
||
|
|
|
||
|
|
scenetracker = 4;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.log("nothing");
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
let scene1unlocked = false;
|
||
|
|
let scene2unlocked = false;
|
||
|
|
let scene3unlocked = false;
|
||
|
|
let scene4unlocked = false;
|
||
|
|
let scene5unlocked = false;
|
||
|
|
|
||
|
|
let text = document.querySelector ("input[type='text']");
|
||
|
|
function checkCode (e) {
|
||
|
|
|
||
|
|
// console.log("checkCode", e);
|
||
|
|
if (e.key == "Enter") {
|
||
|
|
|
||
|
|
// console.log("checking the code");
|
||
|
|
if (document.querySelector ("input[type='text']").value.toLowerCase() === "shrimp" && scenetracker == 1 && scene1unlocked == false) {
|
||
|
|
// console.log("OPEN SESAME");
|
||
|
|
document.getElementById("scene1").style.visibility = "visible";
|
||
|
|
keytracker++;
|
||
|
|
healthtracker = healthtracker + 15;
|
||
|
|
scene1unlocked = true;
|
||
|
|
console.log(scene1unlocked)
|
||
|
|
document.getElementById("keys").innerHTML = "LOGGED CANS: " + keytracker;
|
||
|
|
document.getElementById("healthbar").innerHTML = "ENERGY: " + healthtracker + "%";
|
||
|
|
|
||
|
|
} else if (document.querySelector ("input[type='text']").value.toLowerCase() === "dumplings" && scenetracker == 2 && scene2unlocked == false) {
|
||
|
|
// console.log("OPEN SESAME");
|
||
|
|
document.getElementById("scene1").style.visibility = "visible";
|
||
|
|
keytracker++;
|
||
|
|
scene2unlocked = true;
|
||
|
|
healthtracker = healthtracker + 15;
|
||
|
|
console.log(scene1unlocked)
|
||
|
|
document.getElementById("keys").innerHTML = "LOGGED CANS: " + keytracker;
|
||
|
|
document.getElementById("healthbar").innerHTML = "ENERGY: " + healthtracker + "%";
|
||
|
|
|
||
|
|
} else if (document.querySelector ("input[type='text']").value.toLowerCase() === "blue" && scenetracker == 3 && scene3unlocked == false) {
|
||
|
|
// console.log("OPEN SESAME");
|
||
|
|
document.getElementById("scene1").style.visibility = "visible";
|
||
|
|
keytracker++;
|
||
|
|
scene3unlocked = true;
|
||
|
|
healthtracker = healthtracker + 15;
|
||
|
|
console.log(scene1unlocked)
|
||
|
|
document.getElementById("keys").innerHTML = "LOGGED CANS: " + keytracker;
|
||
|
|
document.getElementById("healthbar").innerHTML = "ENERGY: " + healthtracker + "%";
|
||
|
|
|
||
|
|
} else if (document.querySelector ("input[type='text']").value === "11" && scenetracker == 4 && scene4unlocked == false) {
|
||
|
|
// console.log("OPEN SESAME");
|
||
|
|
document.getElementById("scene1").style.visibility = "visible";
|
||
|
|
keytracker++;
|
||
|
|
scene4unlocked = true;
|
||
|
|
healthtracker = healthtracker + 15;
|
||
|
|
console.log(scene1unlocked)
|
||
|
|
document.getElementById("keys").innerHTML = "LOGGED CANS: " + keytracker;
|
||
|
|
document.getElementById("healthbar").innerHTML = "ENERGY: " + healthtracker + "%";
|
||
|
|
|
||
|
|
} else if (document.querySelector ("input[type='text']").value === "119" && scenetracker == 5 && scene5unlocked == false) {
|
||
|
|
// console.log("OPEN SESAME");
|
||
|
|
document.getElementById("scene1").style.visibility = "visible";
|
||
|
|
scene5unlocked = true;
|
||
|
|
keytracker++;
|
||
|
|
healthtracker = healthtracker + 15;
|
||
|
|
document.getElementById("keys").innerHTML = "LOGGED CANS: " + keytracker;
|
||
|
|
document.getElementById("healthbar").innerHTML = "ENERGY: " + healthtracker + "%";
|
||
|
|
|
||
|
|
}
|
||
|
|
document.querySelector ("input[type='text']").value = "";
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if (keytracker >= 5) {
|
||
|
|
document.getElementById("win").style.visibility = "visible";
|
||
|
|
console.log("win");
|
||
|
|
} else {
|
||
|
|
|
||
|
|
console.log(keytracker);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// text.addEventListener("EVENT", CODE-TO-DO-WHEN-EVENT-HAPPENDS);
|
||
|
|
text.addEventListener("keydown", checkCode );
|
||
|
|
|
||
|
|
function keyCheck(){
|
||
|
|
if (keytracker >= 5) {
|
||
|
|
document.getElementById("win").style.visibility = "visible";
|
||
|
|
console.log("win");
|
||
|
|
} else {
|
||
|
|
|
||
|
|
console.log(keytracker);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
document.getElementById("healthbar").innerHTML = "ENERGY: " + healthtracker + "%";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
</body></html>
|