CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Five Nights at Freddy's</title>
<style>
.fnaf7329-body {
font-family: Arial, sans-serif;
background-color: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.fnaf7329-game-container {
display: flex;
flex-direction: row;
gap: 20px;
}
.fnaf7329-game-area {
width: 800px;
height: 600px;
background-color: #111;
position: relative;
overflow: hidden;
}
.fnaf7329-office {
width: 100%;
height: 100%;
background-image: url('https://via.placeholder.com/800x600.png?text=Office');
background-size: cover;
}
.fnaf7329-camera {
width: 100%;
height: 100%;
background-image: url('https://via.placeholder.com/800x600.png?text=Camera+View');
background-size: cover;
display: none;
}
.fnaf7329-animatronic {
width: 100px;
height: 150px;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
transition: all 0.5s ease-in-out;
}
.fnaf7329-freddy { background-image: url('https://via.placeholder.com/100x150.png?text=Freddy'); }
.fnaf7329-bonnie { background-image: url('https://via.placeholder.com/100x150.png?text=Bonnie'); }
.fnaf7329-chica { background-image: url('https://via.placeholder.com/100x150.png?text=Chica'); }
.fnaf7329-controls {
display: flex;
flex-direction: column;
gap: 10px;
}
.fnaf7329-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4a4a4a;
color: #fff;
border: none;
border-radius: 5px;
}
.fnaf7329-button:hover {
background-color: #5a5a5a;
}
.fnaf7329-info {
margin-bottom: 20px;
}
.fnaf7329-power-bar {
width: 200px;
height: 20px;
background-color: #333;
margin-top: 10px;
}
.fnaf7329-power-level {
height: 100%;
background-color: #4CAF50;
transition: width 0.5s ease-in-out;
}
@media (max-width: 1200px) {
.fnaf7329-game-container {
flex-direction: column;
}
.fnaf7329-game-area {
width: 100%;
height: 70vh;
}
}
</style>
</head>
<body class="fnaf7329-body">
<div class="fnaf7329-game-container">
<div class="fnaf7329-game-area">
<div class="fnaf7329-office"></div>
<div class="fnaf7329-camera"></div>
<div class="fnaf7329-animatronic fnaf7329-freddy"></div>
<div class="fnaf7329-animatronic fnaf7329-bonnie"></div>
<div class="fnaf7329-animatronic fnaf7329-chica"></div>
</div>
<div class="fnaf7329-controls">
<div class="fnaf7329-info">
<h1>Five Nights at Freddy's</h1>
<p>Survive the night shift at Freddy Fazbear's Pizza!</p>
<h3>Instructions:</h3>
<ul>
<li>Monitor the cameras to track animatronics</li>
<li>Close doors to prevent animatronics from entering</li>
<li>Manage your power carefully</li>
<li>Survive until 6 AM</li>
</ul>
</div>
<button class="fnaf7329-button" id="startButton">Start Game</button>
<button class="fnaf7329-button" id="newGameButton">New Game</button>
<button class="fnaf7329-button" id="toggleCameraButton">Toggle Camera</button>
<button class="fnaf7329-button" id="leftDoorButton">Toggle Left Door</button>
<button class="fnaf7329-button" id="rightDoorButton">Toggle Right Door</button>
<div class="fnaf7329-power-bar">
<div class="fnaf7329-power-level" id="powerLevel"></div>
</div>
<p>Power: <span id="powerPercentage">100</span>%</p>
<p>Time: <span id="gameTime">12:00 AM</span></p>
</div>
</div>
<script>
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const toggleCameraButton = document.getElementById('toggleCameraButton');
const leftDoorButton = document.getElementById('leftDoorButton');
const rightDoorButton = document.getElementById('rightDoorButton');
const office = document.querySelector('.fnaf7329-office');
const camera = document.querySelector('.fnaf7329-camera');
const powerLevel = document.getElementById('powerLevel');
const powerPercentage = document.getElementById('powerPercentage');
const gameTime = document.getElementById('gameTime');
const animatronics = document.querySelectorAll('.fnaf7329-animatronic');
let gameRunning = false;
let cameraOn = false;
let leftDoorClosed = false;
let rightDoorClosed = false;
let power = 100;
let time = 0;
let gameInterval;
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', resetGame);
toggleCameraButton.addEventListener('click', toggleCamera);
leftDoorButton.addEventListener('click', toggleLeftDoor);
rightDoorButton.addEventListener('click', toggleRightDoor);
function startGame() {
if (!gameRunning) {
gameRunning = true;
startButton.textContent = 'Pause Game';
gameInterval = setInterval(updateGame, 1000);
moveAnimatronics();
} else {
gameRunning = false;
startButton.textContent = 'Resume Game';
clearInterval(gameInterval);
}
}
function resetGame() {
clearInterval(gameInterval);
gameRunning = false;
cameraOn = false;
leftDoorClosed = false;
rightDoorClosed = false;
power = 100;
time = 0;
startButton.textContent = 'Start Game';
updatePower();
updateTime();
office.style.display = 'block';
camera.style.display = 'none';
animatronics.forEach(animatronic => {
animatronic.style.left = '-100px';
animatronic.style.top = '50%';
});
}
function toggleCamera() {
cameraOn = !cameraOn;
office.style.display = cameraOn ? 'none' : 'block';
camera.style.display = cameraOn ? 'block' : 'none';
}
function toggleLeftDoor() {
leftDoorClosed = !leftDoorClosed;
leftDoorButton.textContent = `Toggle Left Door (${leftDoorClosed ? 'Closed' : 'Open'})`;
}
function toggleRightDoor() {
rightDoorClosed = !rightDoorClosed;
rightDoorButton.textContent = `Toggle Right Door (${rightDoorClosed ? 'Closed' : 'Open'})`;
}
function updateGame() {
time++;
power -= 1 + (leftDoorClosed ? 1 : 0) + (rightDoorClosed ? 1 : 0) + (cameraOn ? 1 : 0);
updatePower();
updateTime();
if (power <= 0 || time >= 300) {
endGame();
}
}
function updatePower() {
power = Math.max(0, Math.min(100, power));
powerLevel.style.width = `${power}%`;
powerPercentage.textContent = power;
}
function updateTime() {
const hours = Math.floor(time / 60) + 12;
const minutes = time % 60;
gameTime.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${hours >= 12 && hours < 18 ? 'PM' : 'AM'}`;
}
function moveAnimatronics() {
animatronics.forEach(animatronic => {
setInterval(() => {
if (gameRunning && Math.random() < 0.3) {
const x = Math.random() * 700;
const y = Math.random() * 500;
animatronic.style.left = `${x}px`;
animatronic.style.top = `${y}px`;
}
}, 5000);
});
}
function endGame() {
clearInterval(gameInterval);
gameRunning = false;
startButton.textContent = 'Start Game';
alert(power <= 0 ? 'Game Over! You ran out of power!' : 'Congratulations! You survived the night!');
}
resetGame();
</script>
</body>
</html>