Test FNaFLore Optimization
by MegaScience
HTML
<div style="background-color: #000; min-width: 1024px;">
<div id="Container" style="padding-bottom:85px;">
<div id="Header">
<div id="SubtitlePlacement">
<div class="tilt">
<div id="status" class="pop">-Popgoes the weasel!</div>
</div>
</div>
<center>
<a href="http://fnaflore.com"><img src="http://fnaflore.com/wp-content/uploads/2016/01/FNaFLore.png" alt="FNaFLore.com" /></a>
</center>
</div>
<div id="MenuBar">
<ul>
<li id="FreddyBar"><a href="http://fnaflore.com/timelines/">Timelines</a>
<div><img src="http://fnaflore.com/wp-content/uploads/2016/01/FreddyMenubar.png" width="256" height="40" alt="FreddyBar" usemap="#honk" />
<map name="honk">
<area shape="rect" coords="126,25,132,31" alt="Honk" onclick="playSound();">
</map>
<script src="http://fnaflore.com/wp-content/themes/FNaFLore/JS/honk.js"></script>
</div>
</li>
<li id="BonnieBar"><a href="http://fnaflore.com/resources/">Resources</a>
<div><img src="http://fnaflore.com/wp-content/uploads/2016/01/BonnieMenubar.png" width="256" height="40" alt="BonnieBar" /></div>
</li>
<li id="ChicaBar"><a href="http://fnaflore.com/observations-and-discussions/">Observations & Discussions</a>
<div><img src="http://fnaflore.com/wp-content/uploads/2016/01/ChicaMenubar.png" width="256" height="40" alt="ChicaBar" /></div>
</li>
<li id="FoxyBar"><a href="http://fnaflore.com/get-involved/">Get Involved!</a>
<div><img src="http://fnaflore.com/wp-content/uploads/2016/01/FoxyMenubar.png" width="256" height="40" alt="FoxyBar" /></div>
</li>
</ul>
</div>
<h1>Freddy Fazbear’s Pizza – Camera Feeds</h1>
<p>
<script src="http://fnaflore.com/wp-content/themes/FNaFLore/JS/FNaF1SIM.js"></script>
</p>
<div id="FNaF1CAMDIV">
<div...
CSS
/*
Author: Sean "Kizzycocoa" Roberts
Author URI: http://www.kizzycocoa.com
Description: This theme is designed for use on the FNaF Timeline subdirectory on Kizzycocoa.com.
License: Creative Commons Attribution 4.0 International License
License URI: http://creativecommons.org/licenses/by/4.0/
Version: 1.0
*/
@charset "utf-8";
body {
margin: 0px;
padding: 0px;
text-align: left;
font: 16px Arial, Helvetica, sans-serif;
color: #FFF;
background-image: url(http://fnaflore.com/wp-content/uploads/2016/01/DarkConcrete.png);
font-family: Arial, Helvetica, sans-serif;
}
img {
border-style: none;
}
a:link {
color: #0094FF;
}
/* unvisited link */
a:visited {
color: #0094FF;
}
/* visited link */
a:hover {
color: #00CCFF;
}
/* mouse over link */
a:active {
color: #00FFFF;
}
/* selected link */
#Container {
display: block;
height: auto;
margin-left: auto;
margin-right: auto;
width: 1024px;
position: relative;
}
#Header {
height: 200px;
padding-bottom: 20px;
}
#SubtitlePlacement {
width: 200px;
margin: 150px 0px 0px 480px;
position: absolute;
z-index: 0;
}
#status {
width: 500px;
height: auto;
position: absolute;
font-family: ScottGamesFont;
font-size: 30px;
text-align: center;
line-height: 25px;
text-shadow: 0px 0px 10px #000, 0px 0px 10px #000;
letter-spacing: 1px;
}
.pop {
animation: pop 0.75s infinite ease-in-out;
font-smoothing: antialiased !important;
-webkit-animation: pop 0.75s infinite ease-in-out;
-webkit-font-smoothing: antialiased !important;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-mz-backface-visibility: hidden;
}
@keyframes pop {
from {
transform: scale3d(1, 1, 1)
}
50% {
transform: scale3d(0.9, 0.9, 0.9)
}
to {
transform: scale3d(1, 1, 1)
}
}
@-webkit-keyframes pop {
from {
-webkit-transform: scale3d(1, 1, 1)
}
50% {
-webkit-transform: scale3d(0.9, 0.9, 0.9)
...
JavaScript
var simData = {
animStats: {
Freddy: {
level: 20,
loc: "1A",
moving: 0,
diffMax: 21,
move: function() {}
},
Bonnie: {
level: 20,
loc: "1A",
moving: 0,
diffMax: 21,
move: function() {
var random, moved = true;
switch (this.loc) {
case "1A":
if (simData.cameras.curStat["1B"] === "NONE") {
this.loc = "1B";
switch (simData.cameras.curStat["1A"]) {
case "FBC":
simData.cameras.curStat["1A"] = "FC";
break;
case "FB":
simData.cameras.curStat["1A"] = "F";
break;
}
simData.cameras.curStat["1B"] = "B";
}
break;
case "1B":
random = Math.floor(Math.random() * 2);
if (random === 0 && simData.cameras.curStat["2A"] === "NONE") {
this.loc = "2A";
simData.cameras.curStat["2A"] = "B";
} else if (random === 1 && simData.cameras.curStat["5"] === "NONE") {
this.loc = "5";
simData.cameras.curStat["5"] = "B";
} else {
moved = false;
}
if (moved) {
simData.cameras.curStat["1B"] = "NONE";
}
break;
case "2A":
random = Math.floor(Math.random() * 4);
if (random === 0 && simData.cameras.curStat["5"] === "NONE") {
this.loc = "5";
simData.cameras.curStat["5"] = "B";
} else if (random === 1 && simData.cameras.curStat["1B"] === "NONE") {
this.loc = "1B";
simData.cameras.curStat["1B"] = "B";
} else if (random === 2 && simData.cameras.curStat["1B"] === "NONE") {
this.loc = "2B";
simData.cameras.curStat["1B"] = "B";
} else if (random === 3 && simData.cameras.curStat["3"]...