Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<title>Gemini Space Attack</title>
<style>
body { margin: 0; background: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; color: white; font-family: sans-serif; }
canvas { border: 2px solid #333; background: #050505; }
#ui { position: absolute; top: 20px; left: 20px; font-size: 20px; pointer-events: none; }
</style>
</head>
<body>
<div id="ui">Score: <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 = 600;
canvas.height = 800;
let score = 0;
let gameActive = true;
const player = { x: 300, y: 700, w: 40, h: 40, speed: 7, color: '#00d4ff' };
const bullets = [];
const enemies = [];
const keys = {};
window.addEventListener('keydown', e => keys[e.code] = true);
window.addEventListener('keyup', e => keys[e.code] = false);
function spawnEnemy() {
if(!gameActive) return;
enemies.push({
x: Math.random() * (canvas.width - 30),
y: -30,
w: 30,
h: 30,
speed: 2 + Math.random() * 3,
color: '#ff4444'
});
setTimeout(spawnEnemy, 1000 - Math.min(score * 10, 700));
}
function update() {
if(!gameActive) return;
if (keys['ArrowLeft'] && player.x > 0) player.x -= player.speed;
if (keys['ArrowRight'] && player.x < canvas.width - player.x) player.x += player.speed;
if (keys['Space']) {
if(bullets.length === 0 || bullets[bullets.length-1].y < player.y - 100) {
bullets.push({ x: player.x + 18, y: player.y, w: 4, h: 15 });
}
}
bullets.forEach((b, i) => {
b.y -= 10;
if(b.y < 0) bullets.splice(i, 1);
});
enemies.forEach((en, ei) => {
en.y += en.speed;
if(en.y > canvas.height) {
gameActive = false;
alert("Game Over! Score: " + score);
location.reload();
}
// Collision check
bullets.forEach((b, bi) => {
if(b.x < en.x + en.w && b.x + b.w > en.x && b.y < en.y + en.h && b.y + b.h > en.y) {
enemies.splice(ei, 1);
bullets.splice(bi, 1);
score += 10;
scoreEl.innerText = score;
}
});
});
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Player
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.w, player.h);
// Bullets
ctx.fillStyle = 'yellow';
bullets.forEach(b => ctx.fillRect(b.x, b.y, b.w, b.h));
// Enemies
ctx.fillStyle = 'red';
enemies.forEach(en => ctx.fillRect(en.x, en.y, en.w, en.h));
requestAnimationFrame(() => {
update();
draw();
});
}
spawnEnemy();
draw();
</script>
</body>
</html>
1
1
4KB
4KB
182.0ms
200.0ms
182.0ms