Scribd
Upload
7 views

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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views

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