<html lang="en"><head><meta charset="UTF-8"><title>Survival
Game</title><style>body{margin:0;background-color:#000;display:flex;justify-
content:center;align-items:center;height:100vh;color:#fff;font-family:Arial,sans-
serif;position:relative}canvas{background-color:#222;display:block;border:2px solid
#fff}#score{position:absolute;top:20px;left:20px;font-
size:24px}#gameOver{display:none;position:absolute;top:50%;left:50%;transform:trans
late(-50%,-50%);font-size:36px;color:red}</style></head><body><div
id="score">Score: 0</div><div id="gameOver">Game Over! Press 'R' to
restart</div><canvas id="gameCanvas" width="400"
height="600"></canvas><script>const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
const gameOverDisplay = document.getElementById('gameOver');
let gameRunning = true;
let score = 0;
// Player object: ek chhota block jo neeche sthit hai
let player = {
x: canvas.width / 2 - 15,
y: canvas.height - 50,
width: 30,
height: 30,
speed: 5
};
// Enemies array: inhe upar se giraya jayega
let enemies = [];
let enemySpawnInterval = 1500; // har 1.5 second mein enemy spawn hogi
let lastEnemySpawnTime = 0;
// Arrow keys se control ke liye key status
let keys = {};
document.addEventListener('keydown', (e) => {
keys[e.key] = true;
// Agar game over ho chuka ho aur 'R' dabaye, to game restart ho
if (!gameRunning && e.key.toLowerCase() === 'r') {
resetGame();
}
});
document.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
// Game loop: har frame mein game update aur render karta hai
function gameLoop(timestamp) {
if (!gameRunning) return;
// Canvas saaf karen
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Score update karen
score += 0.01;
scoreDisplay.textContent = 'Score: ' + Math.floor(score);
// Player ko draw karen
ctx.fillStyle = '#00ff00';
ctx.fillRect(player.x, player.y, player.width, player.height);
// Player ko move karne ke liye arrow keys check karen
if (keys['ArrowLeft'] && player.x > 0) {
player.x -= player.speed;
}
if (keys['ArrowRight'] && player.x < canvas.width - player.width) {
player.x += player.speed;
}
// Naye enemy spawn karen agar interval pura ho gaya ho
if (timestamp - lastEnemySpawnTime > enemySpawnInterval) {
spawnEnemy();
lastEnemySpawnTime = timestamp;
}
// Har enemy ko update aur draw karen
for (let i = 0; i < enemies.length; i++) {
let enemy = enemies[i];
enemy.y += enemy.speed;
ctx.fillStyle = '#ff0000';
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
// Check collision: agar enemy player se takra jaye to game over
if (isColliding(player, enemy)) {
gameOver();
return;
}
}
// Screen ke bahar chali gayi enemies ko remove karen
enemies = enemies.filter(enemy => enemy.y < canvas.height);
requestAnimationFrame(gameLoop);
}
// Nayi enemy ko spawn karne ka function
function spawnEnemy() {
let enemyWidth = 30;
let enemyHeight = 30;
let x = Math.random() * (canvas.width - enemyWidth);
let y = -enemyHeight;
let speed = 2 + Math.random() * 3; // speed 2 se 5 ke beech
enemies.push({ x, y, width: enemyWidth, height: enemyHeight, speed });
}
// Collision detection: do rectangles ke takraane par true return karega
function isColliding(rect1, rect2) {
return rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.y + rect1.height > rect2.y;
}
// Game over function: game ko rok deta hai aur message dikhata hai
function gameOver() {
gameRunning = false;
gameOverDisplay.style.display = 'block';
}
// Game ko reset karne ka function
function resetGame() {
gameRunning = true;
score = 0;
player.x = canvas.width / 2 - 15;
player.y = canvas.height - 50;
enemies = [];
gameOverDisplay.style.display = 'none';
requestAnimationFrame(gameLoop);
}
// Game loop shuru karen
requestAnimationFrame(gameLoop);</script></body></html>
