File Name = Aditya_Pundir_24BCE10113_Game.
html
HTML File Code : Pixel Picker
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Pixel Picker</ tle>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
display: flex;
jus fy-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
padding: 20px;
color: #fff;
}
.game-container {
width: 100%;
max-width: 800px;
background-color: rgba(0, 0, 30, 0.8);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
border: 2px solid #4cc9f0;
}
.header {
background: linear-gradient(to right, #4361ee, #3a0ca3);
padding: 20px;
text-align: center;
border-bo om: 3px solid #f72585;
}
h1 {
font-size: 2.5rem;
margin-bo om: 5px;
text-shadow: 2px 2px 0 #000;
le er-spacing: 1px;
}
.sub tle {
font-size: 1.1rem;
opacity: 0.9;
}
.screen {
padding: 30px;
text-align: center;
display: none;
}
.ac ve-screen {
display: block;
}
.instruc ons {
background-color: rgba(30, 30, 60, 0.9);
padding: 25px;
border-radius: 10px;
margin: 20px 0;
border-le : 5px solid #f72585;
text-align: le ;
}
.instruc ons h2 {
color: #4cc9f0;
margin-bo om: 15px;
font-size: 1.8rem;
}
.instruc ons ul {
margin-le : 20px;
margin-bo om: 20px;
}
.instruc ons li {
margin-bo om: 10px;
line-height: 1.5;
}
.highlight {
color: #f72585;
font-weight: bold;
}
.game-info {
display: flex;
jus fy-content: space-between;
background-color: rgba(0, 0, 40, 0.9);
padding: 15px;
margin-bo om: 20px;
border-radius: 10px;
font-size: 1.2rem;
border: 1px solid #4361ee;
}
.info-item {
display: flex;
flex-direc on: column;
}
.info-label {
font-size: 0.9rem;
color: #4cc9f0;
margin-bo om: 5px;
}
.info-value {
font-size: 1.5rem;
font-weight: bold;
color: #f72585;
}
#gameArea {
width: 100%;
height: 400px;
background-color: rgba(10, 10, 30, 0.9);
border-radius: 10px;
posi on: rela ve;
overflow: hidden;
margin-bo om: 20px;
border: 2px solid #3a0ca3;
}
.pixel {
posi on: absolute;
border-radius: 4px;
cursor: pointer;
transi on: transform 0.1s;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.pixel:hover {
transform: scale(1.1);
}
.correct-pixel {
border: 2px solid #4ade80;
}
.wrong-pixel {
border: 2px solid #f87171;
}
.message {
posi on: absolute;
top: 50%;
le : 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.85);
color: white;
padding: 20px 40px;
border-radius: 10px;
font-size: 2rem;
font-weight: bold;
z-index: 100;
text-align: center;
border: 3px solid #f72585;
display: none;
}
.btn {
background: linear-gradient(to right, #4361ee, #3a0ca3);
color: white;
border: none;
padding: 12px 30px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
margin: 10px;
transi on: all 0.3s;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
background: linear-gradient(to right, #3a0ca3, #4361ee);
}
.btn:ac ve {
transform: translateY(1px);
}
.btn-restart {
background: linear-gradient(to right, #f72585, #b5179e);
}
.footer {
margin-top: 20px;
padding: 15px;
background-color: rgba(0, 0, 20, 0.9);
border-top: 1px solid #3a0ca3;
font-size: 0.9rem;
color: #8b8bcc;
text-align: center;
}
@media (max-width: 600px) {
.game-container {
border-radius: 10px;
}
h1 {
font-size: 2rem;
}
#gameArea {
height: 350px;
}
.game-info {
flex-direc on: column;
gap: 15px;
}
}
</style>
</head>
<body>
<div class="game-container">
<div class="header">
<h1>Pixel Picker</h1>
<p class="sub tle">Click the right pixels, avoid the wrong ones!</p>
</div>
<!-- Start Screen -->
<div id="startScreen" class="screen ac ve-screen">
<div class="instruc ons">
<h2>How to Play</h2>
<ul>
<li>Target pixels (<span class="highlight">green border</span>) will
appear randomly on the screen.</li>
<li>Click on target pixels to earn <span class="highlight">10
points</span> each.</li>
<li>Avoid wrong pixels (<span class="highlight">red border</span>)
- clicking them costs <span class="highlight">5 points</span>.</li>
<li>Each level has a me limit and a target score to reach.</li>
<li>Game gets faster and more challenging with each level!</li>
<li>You have <span class="highlight">3 lives</span> - lose them all
and it's game over!</li>
</ul>
<p><strong>Controls:</strong> Use your mouse or touch screen to
click on pixels.</p>
</div>
<bu on id="startBtn" class="btn">Start Game</bu on>
</div>
<!-- Game Screen -->
<div id="gameScreen" class="screen">
<div class="game-info">
<div class="info-item">
<div class="info-label">SCORE</div>
<div id="score" class="info-value">0</div>
</div>
<div class="info-item">
<div class="info-label">LEVEL</div>
<div id="level" class="info-value">1</div>
</div>
<div class="info-item">
<div class="info-label">TIME LEFT</div>
<div id=" mer" class="info-value">30</div>
</div>
<div class="info-item">
<div class="info-label">LIVES</div>
<div id="lives" class="info-value">3</div>
</div>
<div class="info-item">
<div class="info-label">TARGET</div>
<div id="target" class="info-value">100</div>
</div>
</div>
<div id="gameArea">
<div id="message" class="message"></div>
<!-- Pixels will be generated here dynamically -->
</div>
<bu on id="pauseBtn" class="btn">Pause</bu on>
<bu on id="restartBtn" class="btn btn-restart">Restart</bu on>
</div>
<!-- Game Over Screen -->
<div id="gameOverScreen" class="screen">
<h2 style="color: #f72585; margin-bo om: 20px; font-size:
2.5rem;">Game Over</h2>
<div class="instruc ons">
<h3>Your Final Score: <span id="finalScore">0</span></h3>
<p id="gameOverMessage">You ran out of lives!</p>
<p>Level Reached: <span id="finalLevel">1</span></p>
<p>Total Pixels Collected: <span id="totalPixels">0</span></p>
</div>
<bu on id="playAgainBtn" class="btn">Play Again</bu on>
<bu on id="backToMenuBtn" class="btn">Back to Menu</bu on>
</div>
<div class="footer">
<p>Pixel Picker Game | Interac ve Game Development Assignment</p>
</div>
</div>
<script>
// Game state variables
let score = 0;
let level = 1;
let meLe = 30;
let lives = 3;
let targetScore = 100;
let gameAc ve = false;
let gameTimer;
let pixelTimer;
let pixelsCollected = 0;
let totalPixels = 0;
// DOM elements
const startScreen = [Link]('startScreen');
const gameScreen = [Link]('gameScreen');
const gameOverScreen = [Link]('gameOverScreen');
const startBtn = [Link]('startBtn');
const pauseBtn = [Link]('pauseBtn');
const restartBtn = [Link]('restartBtn');
const playAgainBtn = [Link]('playAgainBtn');
const backToMenuBtn = [Link]('backToMenuBtn');
const gameArea = [Link]('gameArea');
const message = [Link]('message');
// Display elements
const scoreDisplay = [Link]('score');
const levelDisplay = [Link]('level');
const merDisplay = [Link](' mer');
const livesDisplay = [Link]('lives');
const targetDisplay = [Link]('target');
const finalScoreDisplay = [Link]('finalScore');
const finalLevelDisplay = [Link]('finalLevel');
const totalPixelsDisplay = [Link]('totalPixels');
const gameOverMessageDisplay =
[Link]('gameOverMessage');
// Game configura on
const levelConfig = {
1: { me: 30, target: 100, pixelInterval: 1000, pixelCount: 5 },
2: { me: 25, target: 150, pixelInterval: 800, pixelCount: 6 },
3: { me: 20, target: 200, pixelInterval: 700, pixelCount: 7 },
4: { me: 18, target: 250, pixelInterval: 600, pixelCount: 8 },
5: { me: 15, target: 300, pixelInterval: 500, pixelCount: 9 },
6: { me: 12, target: 350, pixelInterval: 450, pixelCount: 10 },
7: { me: 10, target: 400, pixelInterval: 400, pixelCount: 11 },
8: { me: 8, target: 450, pixelInterval: 350, pixelCount: 12 },
9: { me: 7, target: 500, pixelInterval: 300, pixelCount: 13 },
10: { me: 6, target: 600, pixelInterval: 250, pixelCount: 14 }
};
// Color pale es for pixels
const correctColors = ['#4ade80', '#22d3ee', '#60a5fa', '#a855f7',
'#f472b6'];
const wrongColors = ['#f87171', '# 923c', '# bf24', '#a3a3a3', '#737373'];
// Ini alize game
func on initGame() {
score = 0;
level = 1;
lives = 3;
pixelsCollected = 0;
totalPixels = 0;
// Set ini al level values
const config = levelConfig[level];
meLe = config. me;
targetScore = confi[Link];
updateDisplay();
showScreen(gameScreen);
gameAc ve = true;
// Clear any exis ng pixels
clearGameArea();
// Start game mers
startGameTimers();
// Show level start message
showMessage(`Level ${level} - Start!`, 1500);
}
// Start game mers
func on startGameTimers() {
// Clear any exis ng mers
clearInterval(gameTimer);
clearInterval(pixelTimer);
// Game mer
gameTimer = setInterval(() => {
if (!gameAc ve) return;
meLe --;
[Link] = meLe ;
if ( meLe <= 0) {
meUp();
}
}, 1000);
// Pixel genera on mer
const config = levelConfig[level];
pixelTimer = setInterval(() => {
if (!gameAc ve) return;
generatePixels(confi[Link]);
}, confi[Link]);
}
// Generate random pixels
func on generatePixels(count) {
const gameAreaRect = [Link]();
for (let i = 0; i < count; i++) {
// Determine if pixel is correct or wrong (70% correct, 30% wrong)
const isCorrect = [Link]() < 0.7;
// Create pixel element
const pixel = [Link]('div');
[Link] = `pixel ${isCorrect ? 'correct-pixel' : 'wrong-pixel'}`;
// Random posi on within game area
const size = Math.floor([Link]() * 30) + 30; // 30-60px
const x = Math.floor([Link]() * ([Link] - size -
20)) + 10;
const y = Math.floor([Link]() * ([Link] - size -
20)) + 10;
// Set pixel style
[Link] = `${size}px`;
[Link] = `${size}px`;
[Link] = `${x}px`;
[Link] = `${y}px`;
// Set color
const colorPale e = isCorrect ? correctColors : wrongColors;
const color = colorPale e[Math.floor([Link]() *
colorPale [Link])];
[Link] = color;
// Add click event
[Link]('click', () => handlePixelClick(pixel, isCorrect));
// Add to game area
[Link](pixel);
// Remove pixel a er some me
setTimeout(() => {
if ([Link]) {
[Link]();
}
}, isCorrect ? 3000 : 2000);
}
}
// Handle pixel click
func on handlePixelClick(pixel, isCorrect) {
if (!gameAc ve) return;
totalPixels++;
if (isCorrect) {
// Correct pixel clicked
score += 10;
pixelsCollected++;
// Visual feedback
[Link] = 'scale(1.5)';
[Link] = '0.7';
// Check if target reached
if (score >= targetScore) {
levelComplete();
}
} else {
// Wrong pixel clicked
score = [Link](0, score - 5);
lives--;
// Visual feedback
[Link] = 'scale(0.5)';
[Link] = '#ff0000';
// Check if game over
if (lives <= 0) {
gameOver(false);
}
}
// Update display
updateDisplay();
// Remove pixel a er click
setTimeout(() => {
if ([Link]) {
[Link]();
}
}, 200);
}
// Update game display
func on updateDisplay() {
[Link] = score;
[Link] = level;
[Link] = meLe ;
[Link] = lives;
[Link] = targetScore;
}
// Level complete
func on levelComplete() {
gameAc ve = false;
clearInterval(gameTimer);
clearInterval(pixelTimer);
// Clear game area
clearGameArea();
// Show level complete message
showMessage(`Level ${level} Complete!`, 2000);
// Move to next level a er delay
setTimeout(() => {
level++;
// Check if player has completed all levels
if (level > [Link](levelConfig).length) {
gameOver(true);
return;
}
// Setup next level
const config = levelConfig[level];
meLe = config. me;
targetScore = confi[Link];
updateDisplay();
gameAc ve = true;
startGameTimers();
showMessage(`Level ${level} - Start!`, 1500);
}, 2200);
}
// Time's up
func on meUp() {
gameAc ve = false;
clearInterval(gameTimer);
clearInterval(pixelTimer);
// Show me up message
showMessage("Time's Up!", 1500);
// Check if player reached target
if (score >= targetScore) {
setTimeout(() => {
levelComplete();
}, 1600);
} else {
// Lose a life
lives--;
updateDisplay();
if (lives <= 0) {
setTimeout(() => {
gameOver(false);
}, 1600);
} else {
// Restart the level with same me
setTimeout(() => {
const config = levelConfig[level];
meLe = config. me;
updateDisplay();
gameAc ve = true;
startGameTimers();
showMessage(`Try Again! Lives: ${lives}`, 1500);
}, 1600);
}
}
}
// Game over
func on gameOver(isWin) {
gameAc ve = false;
clearInterval(gameTimer);
clearInterval(pixelTimer);
// Update game over screen
fi[Link] = score;
fi[Link] = level - (isWin ? 0 : 1);
[Link] = pixelsCollected;
if (isWin) {
[Link] = "Congratula ons! You've
completed all levels!";
} else if (lives <= 0) {
[Link] = "You ran out of lives!";
} else {
[Link] = "Game Over!";
}
// Show game over screen
showScreen(gameOverScreen);
}
// Clear game area
func on clearGameArea() {
const pixels = [Link]('.pixel');
[Link](pixel => [Link]());
}
// Show message
func on showMessage(text, dura on) {
[Link] = text;
[Link] = 'block';
setTimeout(() => {
[Link] = 'none';
}, dura on);
}
// Switch between screens
func on showScreen(screen) {
// Hide all screens
[Link]('ac ve-screen');
[Link]('ac ve-screen');
[Link]('ac ve-screen');
// Show requested screen
[Link]('ac ve-screen');
}
// Pause/resume game
func on togglePause() {
if (!gameAc ve && meLe > 0 && lives > 0) {
// Resume game
gameAc ve = true;
[Link] = "Pause";
startGameTimers();
showMessage("Game Resumed", 1000);
} else if (gameAc ve) {
// Pause game
gameAc ve = false;
[Link] = "Resume";
clearInterval(gameTimer);
clearInterval(pixelTimer);
showMessage("Game Paused", 999999); // Long dura on un l
resume
}
}
// Event listeners
[Link]('click', initGame);
[Link]('click', togglePause);
[Link]('click', () => {
if (confirm("Are you sure you want to restart? Your progress will be
lost.")) {
initGame();
}
});
[Link]('click', () => {
initGame();
});
[Link]('click', () => {
showScreen(startScreen);
});
// Prevent context menu on game area
[Link]('contextmenu', (e) => {
[Link]();
});
// Ini alize with start screen
showScreen(startScreen);
// Display developer info in console
[Link]("Pixel Picker Game - Interac ve Game Development
Assignment");
[Link]("Game created as a single-file HTML5 game with CSS and
JavaScript");
</script>
</body>
</html>