<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mini Battle Royale Shooter</title>
<style>
body { margin: 0; overflow: hidden; background: #222; }
#gameCanvas { display: block; background: #88b; }
#ui { position: absolute; top: 10px; left: 10px; color: white; font-family:
sans-serif; }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div id="ui">Health: <span id="health">100</span></div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const uiHealth = document.getElementById('health');
// Player object
const player = {
x: canvas.width / 2,
y: canvas.height / 2,
size: 20,
angle: 0,
speed: 2.5,
health: 100
};
// Bullets array
const bullets = [];
// Enemies array
const enemies = [];
const maxEnemies = 5;
// Input state
const keys = {};
let mousePos = { x: 0, y: 0 };
// Spawn enemies periodically
function spawnEnemy() {
const size = 20;
// spawn at random edges
let x, y;
if (Math.random() < 0.5) {
x = Math.random() < 0.5 ? 0 : canvas.width;
y = Math.random() * canvas.height;
} else {
x = Math.random() * canvas.width;
y = Math.random() < 0.5 ? 0 : canvas.height;
}
enemies.push({ x, y, size, speed: 1 + Math.random(), health: 30 });
}
// Handle input
window.addEventListener('keydown', e => keys[e.key] = true);
window.addEventListener('keyup', e => keys[e.key] = false);
canvas.addEventListener('mousemove', e => {
const rect = canvas.getBoundingClientRect();
mousePos.x = e.clientX - rect.left;
mousePos.y = e.clientY - rect.top;
});
canvas.addEventListener('mousedown', () => {
// shoot bullet
const angle = Math.atan2(mousePos.y - player.y, mousePos.x - player.x);
bullets.push({ x: player.x, y: player.y, angle, speed: 5 });
});
// Game loop
function update() {
// Move player
if (keys['w'] || keys['ArrowUp']) player.y -= player.speed;
if (keys['s'] || keys['ArrowDown']) player.y += player.speed;
if (keys['a'] || keys['ArrowLeft']) player.x -= player.speed;
if (keys['d'] || keys['ArrowRight']) player.x += player.speed;
// Keep player in bounds
player.x = Math.max(player.size, Math.min(canvas.width - player.size,
player.x));
player.y = Math.max(player.size, Math.min(canvas.height - player.size,
player.y));
// Update bullets
for (let i = bullets.length - 1; i >= 0; i--) {
const b = bullets[i];
b.x += Math.cos(b.angle) * b.speed;
b.y += Math.sin(b.angle) * b.speed;
// Remove off-screen bullets
if (b.x < 0 || b.x > canvas.width || b.y < 0 || b.y > canvas.height)
bullets.splice(i, 1);
}
// Spawn enemies
if (enemies.length < maxEnemies && Math.random() < 0.02) spawnEnemy();
// Update enemies
enemies.forEach((e, ei) => {
// move toward player
const ang = Math.atan2(player.y - e.y, player.x - e.x);
e.x += Math.cos(ang) * e.speed;
e.y += Math.sin(ang) * e.speed;
// check collision with player
const dx = e.x - player.x;
const dy = e.y - player.y;
if (Math.hypot(dx, dy) < e.size + player.size) {
player.health -= 0.5;
uiHealth.textContent = Math.max(0, Math.floor(player.health));
if (player.health <= 0) alert('Game Over');
}
// check bullet collisions
bullets.forEach((b, bi) => {
if (Math.hypot(e.x - b.x, e.y - b.y) < e.size) {
e.health -= 20;
bullets.splice(bi, 1);
}
});
// remove dead enemies
if (e.health <= 0) enemies.splice(ei, 1);
});
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw player
ctx.fillStyle = 'cyan';
ctx.beginPath();
ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
ctx.fill();
// draw bullets
ctx.fillStyle = 'yellow';
bullets.forEach(b => {
ctx.beginPath();
ctx.arc(b.x, b.y, 5, 0, Math.PI * 2);
ctx.fill();
});
// draw enemies
ctx.fillStyle = 'red';
enemies.forEach(e => {
ctx.beginPath();
ctx.arc(e.x, e.y, e.size, 0, Math.PI * 2);
ctx.fill();
});
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
// Start game
loop();
</script>
</body>
</html>
