Scribd
Upload
7 views3 pages

Htmlviewer.html

The document describes a simple survival game implemented in HTML and JavaScript. Players control a block that moves left and right to avoid falling enemies, with a scoring system based on survival time. The game features a restart option when the player collides with an enemy, displaying a 'Game Over' message.

Uploaded by

rizwanhusain6386
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views3 pages

Htmlviewer.html

The document describes a simple survival game implemented in HTML and JavaScript. Players control a block that moves left and right to avoid falling enemies, with a scoring system based on survival time. The game features a restart option when the player collides with an enemy, displaying a 'Game Over' message.

Uploaded by

rizwanhusain6386
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<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>

You might also like