Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<title>Mini Battle Royale</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body { margin: 0; overflow: hidden; background: #222; font-family: sans-serif; }
canvas { display: block; background: #4CAF50; touch-action: none; }
#ui { position: absolute; top: 10px; left: 10px; color: white; pointer-events: none; }
</style>
</head>
<body>
<div id="ui">Kills: <span id="score">0</span></div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreEl = document.getElementById('score');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let player = { x: canvas.width/2, y: canvas.height/2, r: 15, color: 'blue' };
let bullets = [];
let enemies = [];
let score = 0;
// Touch Control
window.addEventListener('touchstart', (e) => {
const touch = e.touches[0];
const angle = Math.atan2(touch.clientY - player.y, touch.clientX - player.x);
bullets.push({
x: player.x, y: player.y,
vx: Math.cos(angle) * 5,
vy: Math.sin(angle) * 5
});
});
function spawnEnemy() {
const r = 15;
let x = Math.random() < 0.5 ? -r : canvas.width + r;
let y = Math.random() * canvas.height;
enemies.push({ x, y, r, color: 'red' });
}
setInterval(spawnEnemy, 1000);
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw Player
ctx.beginPath();
ctx.arc(player.x, player.y, player.r, 0, Math.PI*2);
ctx.fillStyle = player.color;
ctx.fill();
// Bullets
bullets.forEach((b, i) => {
b.x += b.vx; b.y += b.vy;
ctx.fillStyle = 'yellow';
ctx.fillRect(b.x, b.y, 5, 5);
if(b.x<0 || b.x>canvas.width || b.y<0 || b.y>canvas.height) bullets.splice(i, 1);
});
// Enemies
enemies.forEach((en, ei) => {
const angle = Math.atan2(player.y - en.y, player.x - en.x);
en.x += Math.cos(angle) * 1.5;
en.y += Math.sin(angle) * 1.5;
ctx.beginPath();
ctx.arc(en.x, en.y, en.r, 0, Math.PI*2);
ctx.fillStyle = en.color;
ctx.fill();
// Collision with Bullet
bullets.forEach((b, bi) => {
const dist = Math.hypot(b.x - en.x, b.y - en.y);
if(dist < en.r) {
enemies.splice(ei, 1);
bullets.splice(bi, 1);
score++;
scoreEl.innerText = score;
}
});
// Collision with Player
if(Math.hypot(player.x - en.x, player.y - en.y) < player.r + en.r) {
alert("Game Over! Kills: " + score);
location.reload();
}
});
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>
1
1
4KB
4KB
147.0ms
196.0ms
147.0ms