Webleb - UI Elements

HTML

CSS

JS

script.js
let power = 100;
let hour = 12;
let cameraOpen = false;
let doorClosed = false;
let enemyPosition = 3;
let gameRunning = true;

const powerEl = document.getElementById("power");
const timeEl = document.getElementById("time");
const cameraView = document.getElementById("cameraView");
const cameraFeed = document.getElementById("cameraFeed");
const jumpscare = document.getElementById("jumpscare");

function toggleCamera() {
if (!gameRunning) return;
cameraOpen = !cameraOpen;
cameraView.style.display = cameraOpen ? "flex" : "none";
drainPower(2);
}

function closeDoor() {
if (!gameRunning) return;
doorClosed = !doorClosed;
alert(doorClosed ? "Door Closed" : "Door Opened");
drainPower(5);
}

function drainPower(amount) {
power -= amount;
if (power < 0) power = 0;
powerEl.textContent = power;
if (power === 0) triggerJumpscare();
}

function triggerJumpscare() {
if (!gameRunning) return;
gameRunning = false;
jumpscare.style.display = "flex";
}

function restartGame() {
power = 100;
hour = 12;
enemyPosition = 3;
cameraOpen = false;
doorClosed = false;
gameRunning = true;
jumpscare.style.display = "none";
cameraView.style.display = "none";
powerEl.textContent = power;
timeEl.textContent = "12 AM";
}

function advanceTime() {
if (!gameRunning) return;

hour++;
if (hour === 13) timeEl.textContent = "1 AM";
else if (hour === 14) timeEl.textContent = "2 AM";
else if (hour === 15) timeEl.textContent = "3 AM";
else if (hour === 16) timeEl.textContent = "4 AM";
else if (hour === 17) timeEl.textContent = "5 AM";
else if (hour >= 18) {
alert("6 AM — You survived!");
restartGame();
}
}

function moveEnemy() {
if (!gameRunning) return;

if (Math.random() < 0.6) {
enemyPosition--;
}
if (enemyPosition <= 0) {
if (!doorClosed) triggerJumpscare();
else enemyPosition = 3;
}
}

setInterval(() => {
if (!gameRunning) return;
drainPower(cameraOpen ? 2 : 0.5);
}, 2000);

setInterval(advanceTime, 8000);
setInterval(moveEnemy, 5000);

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS