0% found this document useful (0 votes)
4 views2 pages

Game HTML

Uploaded by

rawatkishor421
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
0% found this document useful (0 votes)
4 views2 pages

Game HTML

Uploaded by

rawatkishor421
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/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Shooting Game</title>
<style>
canvas {
background: #eee;
display: block;
margin: auto;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let player = {
x: canvas.width / 2,
y: canvas.height - 30,
width: 50,
height: 50,
color: 'blue',
};

let bullets = [];


let isGameOver = false;

function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}

function drawBullets() {
ctx.fillStyle = 'red';
for (let bullet of bullets) {
ctx.fillRect(bullet.x, bullet.y, 5, 10);
}
}

function updateBullets() {
for (let i = bullets.length - 1; i >= 0; i--) {
bullets[i].y -= 5;
if (bullets[i].y < 0) {
bullets.splice(i, 1);
}
}
}

function gameLoop() {
if (isGameOver) return;

ctx.clearRect(0, 0, canvas.width, canvas.height);


drawPlayer();
drawBullets();
updateBullets();
requestAnimationFrame(gameLoop);
}

document.addEventListener('keydown', (event) => {


if (event.key === 'ArrowLeft' && player.x > 0) {
player.x -= 10;
} else if (event.key === 'ArrowRight' && player.x < canvas.width -
player.width) {
player.x += 10;
} else if (event.key === ' ') { // Spacebar to shoot
bullets.push({ x: player.x + player.width / 2 - 2.5, y:
player.y });
}
});

gameLoop();
</script>
</body>
</html>

You might also like