CLICK TO BEGIN: ALIEN ROOMMATE SIMULATOR
body, html {
margin: 0;
padding: 0;
background: black;
color: #00FF00;
font-family: monospace;
overflow: hidden;
height: 100vh;
}
#simContainer {
width: 100%;
height: 100%;
position: relative;
background: url(‘https://upload.wikimedia.org/wikipedia/commons/5/55/Evil-Dead-Game-C64.png’) no-repeat center center;
background-size: cover;
display: flex;
align-items: flex-end;
justify-content: center;
cursor: pointer;
}
#ticker {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
overflow: hidden;
background: rgba(0, 0, 0, 0.7);
padding: 10px 0;
font-size: 1.1em;
}
#message {
display: inline-block;
padding-left: 100%;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
#clickText {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #00FF00;
font-size: 1.5em;
background: rgba(0, 0, 0, 0.8);
padding: 20px;
}
const messages = [
“TODD microwaves a hot pocket”,
“BLERGUS THE PEOPLEFLAYER watches Netflix”,
“TODD and BLERGUS THE PEOPLEFLAYER argue about the dishes”,
“TODD reads a book”,
“TODD vacuums”,
“BLERGUS THE PEOPLEFLAYER lays eggs in TODD”,
“TODD plays videogames”,
“BLERGUS THE PEOPLEFLAYER drinks the last soda”,
“TODD checks his email”,
“BLERGUS THE PEOPLEFLAYER meditates in the bathtub”,
“TODD writes poetry about futility”,
“BLERGUS THE PEOPLEFLAYER reorganizes Todd’s DNA”,
“TODD cleans the litterbox”,
“BLERGUS THE PEOPLEFLAYER stares into the void”,
“TODD makes pancakes”,
“BLERGUS THE PEOPLEFLAYER digests something screaming”,
“TODD waters the plants”,
“TODD and BLERGUS THE PEOPLEFLAYER sing karaoke”,
“BLERGUS THE PEOPLEFLAYER molts in the living room”,
“TODD scrolls social media”,
“BLERGUS THE PEOPLEFLAYER writes fan fiction”,
“TODD washes his face”,
“TODD and BLERGUS THE PEOPLEFLAYER play chess”,
“BLERGUS THE PEOPLEFLAYER weeps uncontrollably”,
“TODD takes out the trash”,
“BLERGUS THE PEOPLEFLAYER bites the refrigerator”
];
let messageIndex = 0;
function shuffleMessages(arr) {
for (let i = arr.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
}
function startSim() {
document.getElementById(“clickText”).style.display = “none”;
shuffleMessages(messages);
runTicker();
}
function runTicker() {
const messageEl = document.getElementById(“message”);
setInterval(() => {
messageEl.style.animation = ‘none’; // reset animation
void messageEl.offsetWidth; // force reflow
messageEl.style.animation = null;
messageEl.textContent = messages[messageIndex];
messageIndex = (messageIndex + 1) % messages.length;
}, 20000); // match ticker duration
}