<!--Like all of our experiences, this game was created, developed, and coded by the Memphis Escape Rooms team. If you attempt to use any portion of this code, we will pursue legal action.-->

<html>
<head>
<title>Memphis Escape Rooms - Can You Escape?</title>

<style type='text/css'>
@font-face { 
font-family: 'code';
src: url('codepro.otf') format('opentype');
}

body {
   transform: scale(0.7);
   transform-origin: 0 0;
overflow:hidden;
}


@media only screen and (max-width: 500px) {
body {
   transform: scale(0.425);
   transform-origin: 0 0;
overflow:hidden;
}
}

</style>
</head>

<body>

<!--initial room images and button maps-->

<img src="start.png" id="start" usemap="#start" width="800" style="position:absolute;left:0;top:0;">
<map name="start">
  <area shape="rect" coords="190,450,610,600" alt="left" href="javascript:start();">
</map>


<img src="frontdoor_closed.png" id="frontdoorclosed" usemap="#frontdoorclosed" width="800" style="position:absolute;left:0;top:0;visibility:hidden">
<map name="frontdoorclosed">
  <area shape="rect" coords="1,530,160,640" alt="left" href="javascript:fdcleft();">
  <area shape="rect" coords="640,530,795,640" alt="right" href="javascript:fdcright();">
  <area shape="rect" coords="125,315,200,430" alt="keypad" href="javascript:usekeypad();">
<area shape="rect" coords="235,75,570,710" alt="keypad" href="javascript:clue('the door is locked.');">
</map>
<map name="frontdooropen">
  <area shape="rect" coords="270,515,530,580" alt="left" href="javascript:revealreward();">
</map>


<img src="livingroom.png" id="livingroom" usemap="#livingroom" width="800" style="position:absolute;left:0;top:0;visibility:hidden;">
<map name="livingroom">
  <area shape="rect" coords="1,530,160,640" alt="left" href="javascript:lrleft();">
  <area shape="rect" coords="640,530,795,640" alt="right" href="javascript:lrright();">
<area shape="rect" coords="1,1,798,512" alt="right" href="javascript:clue('interesting books,<br>but they\'re a little out of order.');">
<area shape="rect" coords="175,512,620,798" alt="right" href="javascript:clue('interesting books,<br>but they\'re a little out of order.');">
</map>


<img src="bedroomdark_locked.png" id="bedroomdarklocked" usemap="#bedroomdarklocked" width="800" style="position:absolute;left:0;top:0;visibility:hidden;">
<map name="bedroomdarklocked">
  <area shape="rect" coords="1,530,160,640" alt="left" href="javascript:bdlleft();">
  <area shape="rect" coords="640,530,795,640" alt="right" href="javascript:bdlright();">
  <area shape="rect" coords="370,569,415,610" href="javascript:usekey();">
  <area shape="rect" coords="1,1,798,512" href="javascript:clue('it sure is dark in here.<br>i wish i had a flashlight.');">
</map>
<map name="bedroomdarkunlocked">
  <area shape="rect" coords="1,530,160,640" alt="left" href="javascript:bdlleft();">
  <area shape="rect" coords="640,530,795,640" alt="right" href="javascript:bdlright();">
  <area shape="rect" coords="360,590,435,625" href="javascript:getflashlight();clue('Found a flashlight!')">
</map>
<map name="bedroomdarkhaveflashlight">
  <area shape="rect" coords="1,1,799,799" href="javascript:useflashlight();">
</map>
<map name="bedroomlight">
  <area shape="rect" coords="1,530,160,640" alt="left" href="javascript:bdlleft();">
  <area shape="rect" coords="640,530,795,640" alt="right" href="javascript:bdlright();">
  <area shape="rect" coords="35,140,192,250" alt="right" href="javascript:clue('These colors seem familiar.');">
</map>


<img src="kitchen_withkey.png" id="kitchenwithkey" usemap="#kitchenwithkey" width="800" style="position:absolute;left:0;top:0;visibility:hidden;">
<map name="kitchenwithkey">
  <area shape="rect" coords="1,530,160,640" alt="left" href="javascript:kwkleft();">
  <area shape="rect" coords="640,530,795,640" alt="right" href="javascript:kwkright();">
  <area shape="circ" coords="229,295,22" href="javascript:getkey();clue('Found a key!')">
<area shape="rect" coords="1,1,798,260" href="javascript:clue('There seems to be a utensil<br>that doesn\'t belong here...');">
<area shape="rect" coords="1,331,798,512" href="javascript:clue('There seems to be a utensil<br>that doesn\'t belong here...');">
<area shape="rect" coords="175,512,620,798" href="javascript:clue('There seems to be a utensil<br>that doesn\'t belong here...');">
</map>


<!--timer box-->

<div style="position:absolute;top:750;left:348;font-size:40px;font-family:code,arial;text-align:left;align:left;width:770px;height:100px;padding-top:0px;color:#000000;"><span id="remaining" style="background-color:rgba(255,255,255,0.2);padding-top:5px;padding-left:5px;padding-right:5px;visibility:hidden;"></span></div>

<div id="timesup" style="position:absolute;top:750;left:300;font-size:40px;font-family:code,arial;text-align:left;align:left;width:770px;height:100px;padding-top:0px;color:#000000;visibility:hidden;">Time's up!</div>

<div style="position:absolute;top:20;left:10;font-size:30px;font-family:code,arial;text-align:center;align:left;width:780px;height:100px;padding-top:0px;color:#ffffff;visibility:visible;"><span id="cluebox" style="background-color:#000000;padding-top:5px;padding-left:5px;padding-right:5px;visibility:hidden;"></span></div>


<!--win message-->

<div id="congrats" style="position:absolute;left:275;top:200;font-family:code,arial;color:#000000;font-size:25px;text-align:center;visibility:hidden;">
Congratulations!
<br><br>
You escaped in:
<br>
<br>
<br>
<br>
<br>
Looks like you're
<br>
pretty good at
<br>
escape rooms! 🧐
</div>

<div id="esctime" style="position:absolute;left:298;top:300;font-size:25px;font-family:code,arial;text-align:center;align:center;width:200px;height:100px;padding-top:0px;color:#000000;visibility:hidden"></div>

<div id="esctime2" style="position:absolute;left:900;top:300;font-size:25px;font-family:code,arial;text-align:center;align:center;width:200px;height:100px;padding-top:0px;color:#000000;visibility:hidden"></div>


<!--item indicators-->


<img src="key2.png" id="itemkey" usemap="#item_key" width="70" style="position:absolute;left:625;top:720;visibility:hidden;">
<map name="item_key">
  <area shape="rect" coords="1,1,69,69" href="javascript:clue('there may be a lock we can use this key for.');">
</map>

<img src="flashlight2.png" id="itemflashlight" usemap="#item_flashlight" width=70" style="position:absolute;left:720;top:720;visibility:hidden;">
<map name="item_flashlight">
  <area shape="rect" coords="1,1,69,69" href="javascript:clue('this may help light up a dark room.');">
</map>


<script>

<!--room movement arrows right-->

function fdcright() {
document.getElementById("frontdoorclosed").style.visibility = "hidden";
document.getElementById("livingroom").style.visibility = "visible";
document.getElementById("cluebox").style.visibility = "hidden";
}

function lrright() {
document.getElementById("livingroom").style.visibility = "hidden";
document.getElementById("bedroomdarklocked").style.visibility = "visible";
document.getElementById("cluebox").style.visibility = "hidden";
}

function bdlright() {
document.getElementById("bedroomdarklocked").style.visibility = "hidden";
document.getElementById("kitchenwithkey").style.visibility = "visible";
document.getElementById("cluebox").style.visibility = "hidden";
}

function kwkright() {
document.getElementById("kitchenwithkey").style.visibility = "hidden";
document.getElementById("frontdoorclosed").style.visibility = "visible";
document.getElementById("cluebox").style.visibility = "hidden";
}


<!--room movement arrows left-->

function fdcleft() {
document.getElementById("frontdoorclosed").style.visibility = "hidden";
document.getElementById("kitchenwithkey").style.visibility = "visible";
document.getElementById("cluebox").style.visibility = "hidden";
}

function lrleft() {
document.getElementById("livingroom").style.visibility = "hidden";
document.getElementById("frontdoorclosed").style.visibility = "visible";
document.getElementById("cluebox").style.visibility = "hidden";
}

function bdlleft() {
document.getElementById("bedroomdarklocked").style.visibility = "hidden";
document.getElementById("livingroom").style.visibility = "visible";
document.getElementById("cluebox").style.visibility = "hidden";
}

function kwkleft() {
document.getElementById("kitchenwithkey").style.visibility = "hidden";
document.getElementById("bedroomdarklocked").style.visibility = "visible";
document.getElementById("cluebox").style.visibility = "hidden";
}


<!--item functions-->

function getkey() {
document.getElementById("kitchenwithkey").src="kitchen_withoutkey.png";
document.getElementById("itemkey").style.visibility = "visible";
}


function usekey() {
var key = document.getElementById("itemkey").style.visibility;
if (key == "visible")
{
document.getElementById("bedroomdarklocked").src="bedroomdark_unlocked.png";
document.getElementById("bedroomdarklocked").useMap="#bedroomdarkunlocked";
}
else
{
clue('hmm, the cabinet is locked.<br>a key is just the utensil we need.');
}
}


function getflashlight() {
document.getElementById("bedroomdarklocked").src="bedroomdark_unlocked_noflashlight.png";
document.getElementById("itemflashlight").style.visibility = "visible";
document.getElementById("bedroomdarklocked").useMap="#bedroomdarkhaveflashlight";
}

function useflashlight() {
var flashlight = document.getElementById("itemflashlight").style.visibility;
if (flashlight == "visible")
{
document.getElementById("bedroomdarklocked").src="bedroomlight.png";
document.getElementById("bedroomdarklocked").useMap="#bedroomlight";
}
else
{

}
}


function usekeypad() {
var passcode = prompt("Enter 5-digit Code To Escape The Room:", "");

if (passcode == "41572") {
var escapedtime = document.getElementById('esctime');
var stoptimeread = document.getElementById('esctime2');
escapedtime.innerHTML = stoptimeread.innerHTML;
document.getElementById("remaining").style.visibility = "hidden";
document.getElementById("frontdoorclosed").src="frontdoor_open1.png";
document.getElementById("frontdoorclosed").useMap="#frontdooropen";
document.getElementById("congrats").style.visibility = "visible";
document.getElementById("esctime").style.visibility = "visible";
document.getElementById("itemkey").style.visibility = "hidden";
document.getElementById("itemflashlight").style.visibility = "hidden";
document.getElementById("timesup").style.visibility = "hidden";

}
else
{
clue('invalid passcode. please try again.');
}
}

function revealreward() {
document.getElementById("frontdoorclosed").src="frontdoor_open_reward.png";
document.getElementById("frontdoorclosed").useMap="#frontdooropenreward";
document.getElementById("congrats").style.visibility = "hidden";
document.getElementById("esctime").style.visibility = "hidden";
}


<!--clues-->

function hideclue()
{
document.getElementById("cluebox").style.visibility = "hidden";
}

function clue(message) {
document.getElementById("cluebox").innerHTML = message;
document.getElementById("cluebox").style.visibility = "visible";
var cluelength = message.split(' ').length;
setTimeout(hideclue,3000+(cluelength*500));
}


<!--timer-->


function starttimer(){
var left = "";
var num = "";
var stoptimerecord;
var step = "";
timer();

}


		function timer(){
			
			num = document.getElementById('remaining');


			fps= 10;
			seconds = 3 * 60;

			var total = fps*seconds;
			for(var i=total;i>=0;i--) {

setDelay(i);
}

function setDelay(i) {

				var delayed = (function(){

stoptimerecord = document.getElementById('esctime2');
					var step = 1-i/36000;
					var left = Math.ceil(i/fps);
var timeleft = Math.floor(left).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false});
var timeused = 180 - left;


					return function() {
						num.innerHTML=Math.floor(left/60).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})+":"+Math.floor((left%=60)).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false});


var stoptime = Math.floor(timeused/60).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})+" minutes"+"<br>"+Math.floor((timeused%=60)).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})+" seconds";

stoptimerecord.innerHTML=stoptime;


var escapedtime2 = document.getElementById("esctime");
var escapedtime2value = escapedtime2.innerHTML;


if (timeleft == 0 && escapedtime2value == "") {
document.getElementById("remaining").style.visibility = "hidden";
document.getElementById("timesup").style.visibility = "visible";
}


					};
				})();


var timergo
timergo = setTimeout(delayed,-1000/fps*(i-total));


			}
		}
		

function start() {
document.getElementById("remaining").style.visibility = "visible";
document.getElementById("start").style.visibility = "hidden";
document.getElementById("frontdoorclosed").style.visibility = "visible";
starttimer();
}


</script>

</body>
</html>