CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fix-It Frenzy</title>
<style>
.fixitfrenzy7892-body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #1e90ff; /* Changed to blue */
}
.fixitfrenzy7892-game-container {
display: flex;
flex-direction: row;
gap: 20px;
}
.fixitfrenzy7892-game-area {
width: 400px;
height: 400px;
background-color: #ffffff;
border: 2px solid #333;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fixitfrenzy7892-info-area {
width: 200px;
display: flex;
flex-direction: column;
gap: 10px;
background-color: rgba(255, 255, 255, 0.8); /* Added for better readability */
padding: 15px;
border-radius: 10px;
}
.fixitfrenzy7892-button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
.fixitfrenzy7892-button:hover {
background-color: #45a049;
}
.fixitfrenzy7892-item {
font-size: 24px;
margin-bottom: 20px;
}
.fixitfrenzy7892-timer {
font-size: 20px;
margin-bottom: 20px;
}
.fixitfrenzy7892-score {
font-size: 18px;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.fixitfrenzy7892-game-container {
flex-direction: column;
}
.fixitfrenzy7892-game-area {
width: 300px;
height: 300px;
}
.fixitfrenzy7892-info-area {
width: 100%;
}
}
</style>
</head>
<body class="fixitfrenzy7892-body">
<div class="fixitfrenzy7892-game-container">
<div class="fixitfrenzy7892-game-area">
<div class="fixitfrenzy7892-item" id="item"></div>
<div class="fixitfrenzy7892-timer" id="timer">Time: 60s</div>
<div class="fixitfrenzy7892-score" id="score">Score: 0</div>
<button class="fixitfrenzy7892-button" id="fixButton">Fix It!</button>
</div>
<div class="fixitfrenzy7892-info-area">
<h1>Fix-It Frenzy</h1>
<p>Race against time to fix household items!</p>
<h3>How to play:</h3>
<ul>
<li>Click 'Start' to begin</li>
<li>Click 'Fix It!' when you see an item</li>
<li>Score points for each fix</li>
<li>Game ends when time runs out</li>
</ul>
<button class="fixitfrenzy7892-button" id="startButton">Start</button>
<button class="fixitfrenzy7892-button" id="newGameButton">New Game</button>
<button class="fixitfrenzy7892-button" id="pauseButton">Pause</button>
</div>
</div>
<script>
const items = ['Leaky Faucet', 'Broken Chair', 'Flickering Light', 'Squeaky Door', 'Clogged Drain'];
let currentItem = '';
let score = 0;
let timeLeft = 60;
let gameInterval;
let isPaused = false;
const itemElement = document.getElementById('item');
const timerElement = document.getElementById('timer');
const scoreElement = document.getElementById('score');
const fixButton = document.getElementById('fixButton');
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const pauseButton = document.getElementById('pauseButton');
function startGame() {
score = 0;
timeLeft = 60;
updateScore();
updateTimer();
generateNewItem();
gameInterval = setInterval(updateGame, 1000);
startButton.disabled = true;
fixButton.disabled = false;
pauseButton.textContent = 'Pause';
isPaused = false;
}
function updateGame() {
if (isPaused) return;
timeLeft--;
updateTimer();
if (timeLeft <= 0) {
endGame();
}
}
function generateNewItem() {
currentItem = items[Math.floor(Math.random() * items.length)];
itemElement.textContent = currentItem;
}
function fixItem() {
if (isPaused) return;
score += 10;
updateScore();
generateNewItem();
}
function updateScore() {
scoreElement.textContent = `Score: ${score}`;
}
function updateTimer() {
timerElement.textContent = `Time: ${timeLeft}s`;
}
function endGame() {
clearInterval(gameInterval);
itemElement.textContent = 'Game Over!';
fixButton.disabled = true;
startButton.disabled = false;
}
function newGame() {
clearInterval(gameInterval);
itemElement.textContent = '';
score = 0;
timeLeft = 60;
updateScore();
updateTimer();
startButton.disabled = false;
fixButton.disabled = true;
pauseButton.textContent = 'Pause';
isPaused = false;
}
function togglePause() {
isPaused = !isPaused;
if (isPaused) {
pauseButton.textContent = 'Resume';
} else {
pauseButton.textContent = 'Pause';
}
}
startButton.addEventListener('click', startGame);
fixButton.addEventListener('click', fixItem);
newGameButton.addEventListener('click', newGame);
pauseButton.addEventListener('click', togglePause);
newGame();
</script>
</body>
</html>