Spaces:

aired
/

defender

Running

App Files Files Community

defender / index.html

aired

Add 2 files

3f85fca verified about 1 year ago

raw

history blame contribute delete

35.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Galaxy Defender</title>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	background-color: #000;
	color: #0ff;
	font-family: 'Orbitron', sans-serif;
	overflow: hidden;
	height: 100vh;
	background-image:
	radial-gradient(circle at 20% 30%, rgba(20, 20, 80, 0.8), transparent 40%),
	radial-gradient(circle at 80% 70%, rgba(80, 20, 80, 0.6), transparent 40%),
	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="20" cy="50" r="1" fill="white" opacity="0.8"/><circle cx="50" cy="20" r="1" fill="white" opacity="0.6"/><circle cx="80" cy="50" r="1" fill="white" opacity="0.7"/><circle cx="50" cy="80" r="1" fill="white" opacity="0.9"/></svg>');
	background-size: 100% 100%, 100% 100%, 100px 100px;
	}

	#gameContainer {
	position: relative;
	width: 100%;
	height: 100vh;
	perspective: 1000px;
	}

	#gameCanvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	}

	#uiOverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	}

	#scoreDisplay {
	position: absolute;
	top: 20px;
	left: 20px;
	font-size: 24px;
	color: #0ff;
	text-shadow: 0 0 10px #0ff;
	}

	#healthBar {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 200px;
	height: 20px;
	background-color: rgba(255, 0, 0, 0.3);
	border: 2px solid #f00;
	border-radius: 10px;
	overflow: hidden;
	}

	#healthFill {
	height: 100%;
	width: 100%;
	background-color: #f00;
	transition: width 0.3s;
	}

	#startScreen, #gameOverScreen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 3;
	}

	#gameOverScreen {
	display: none;
	}

	h1 {
	font-size: 3rem;
	margin-bottom: 2rem;
	color: #0ff;
	text-shadow: 0 0 15px #0ff;
	text-align: center;
	}

	p {
	font-size: 1.2rem;
	margin-bottom: 2rem;
	color: #fff;
	max-width: 600px;
	text-align: center;
	line-height: 1.6;
	}

	.btn {
	padding: 12px 30px;
	background: linear-gradient(45deg, #0ff, #00aaff);
	border: none;
	border-radius: 30px;
	color: #000;
	font-family: 'Orbitron', sans-serif;
	font-size: 1.2rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s;
	pointer-events: auto;
	box-shadow: 0 0 15px #0ff;
	}

	.btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 25px #0ff;
	}

	#finalScore {
	font-size: 2rem;
	color: #0ff;
	margin: 20px 0;
	text-shadow: 0 0 10px #0ff;
	}

	#powerups {
	position: absolute;
	bottom: 20px;
	left: 20px;
	display: flex;
	gap: 10px;
	}

	.powerup-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	color: #000;
	background: #ff0;
	box-shadow: 0 0 10px #ff0;
	}

	#earth {
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	height: 300px;
	background: radial-gradient(circle at 30% 30%, #1a66ff, #003399 60%, #001a33);
	border-radius: 50%;
	box-shadow:
	0 0 60px rgba(0, 150, 255, 0.6),
	inset 0 0 100px rgba(255, 255, 255, 0.3);
	z-index: 0;
	}

	#earth::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,50 Q35,40 50,50 T80,50" fill="none" stroke="%23007733" stroke-width="2"/><path d="M40,30 Q45,25 50,30 T60,30" fill="none" stroke="%23007733" stroke-width="1"/><path d="M25,65 Q35,60 45,65 T60,65" fill="none" stroke="%23007733" stroke-width="1"/></svg>');
	background-size: 100%;
	opacity: 0.6;
	}
	</style>
	</head>
	<body>
	<div id="gameContainer">
	<div id="earth"></div>
	<canvas id="gameCanvas"></canvas>
	<div id="uiOverlay">
	<div id="scoreDisplay">SCORE: 0</div>
	<div id="healthBar">
	<div id="healthFill"></div>
	</div>
	<div id="powerups">
	<!-- Power-up icons will be added here dynamically -->
	</div>
	</div>

	<div id="startScreen">
	<h1>GALAXY DEFENDER</h1>
	<p>Aliens are attacking Earth from all directions! Take control of the state-of-the-art starfighter and defend our planet.</p>
	<p>Controls: Arrow keys to move, Spacebar to shoot</p>
	<button class="btn" id="startBtn">LAUNCH STARFIGHTER</button>
	</div>

	<div id="gameOverScreen">
	<h1>MISSION FAILED</h1>
	<p>The alien invasion was too strong. Earth has fallen under their control.</p>
	<div id="finalScore">SCORE: 0</div>
	<button class="btn" id="restartBtn">TRY AGAIN</button>
	</div>
	</div>

	<audio id="laserSound" src="https://assets.mixkit.co/active_storage/sfx/2347/2347-preview.mp3" preload="auto"></audio>
	<audio id="explosionSound" src="https://assets.mixkit.co/active_storage/sfx/2099/2099-preview.mp3" preload="auto"></audio>
	<audio id="powerupSound" src="https://assets.mixkit.co/active_storage/sfx/2329/2329-preview.mp3" preload="auto"></audio>
	<audio id="backgroundMusic" loop>
	<source src="https://assets.mixkit.co/music/preview/mixkit-space-game-668.mp3" type="audio/mpeg">
	</audio>

	<script>
	// Game constants
	const GAME_WIDTH = window.innerWidth;
	const GAME_HEIGHT = window.innerHeight;
	const PLAYER_WIDTH = 60;
	const PLAYER_HEIGHT = 40;
	const BULLET_SIZE = 8;
	const ENEMY_SIZE = 40;
	const POWERUP_SIZE = 30;
	const ENEMY_SPAWN_RATE = 2000; // ms
	const POWERUP_SPAWN_RATE = 15000; // ms
	const POWERUP_DURATION = 10000; // ms

	// Game variables
	let score = 0;
	let health = 100;
	let gameOver = false;
	let gameStarted = false;
	let lastEnemySpawn = 0;
	let lastPowerupSpawn = 0;
	let powerupsActive = {
	tripleShot: false,
	rapidFire: false,
	shield: false
	};

	// DOM elements
	const canvas = document.getElementById('gameCanvas');
	const ctx = canvas.getContext('2d');
	const scoreDisplay = document.getElementById('scoreDisplay');
	const healthFill = document.getElementById('healthFill');
	const startScreen = document.getElementById('startScreen');
	const gameOverScreen = document.getElementById('gameOverScreen');
	const startBtn = document.getElementById('startBtn');
	const restartBtn = document.getElementById('restartBtn');
	const finalScore = document.getElementById('finalScore');
	const powerupsContainer = document.getElementById('powerups');

	// Audio elements
	const laserSound = document.getElementById('laserSound');
	const explosionSound = document.getElementById('explosionSound');
	const powerupSound = document.getElementById('powerupSound');
	const backgroundMusic = document.getElementById('backgroundMusic');

	// Set canvas size
	canvas.width = GAME_WIDTH;
	canvas.height = GAME_HEIGHT;

	// Game objects
	const player = {
	x: GAME_WIDTH / 2,
	y: GAME_HEIGHT - 100,
	width: PLAYER_WIDTH,
	height: PLAYER_HEIGHT,
	speed: 8,
	color: '#0ff',
	bullets: [],
	lastShot: 0,
	shootDelay: 500, // ms
	isAlive: true
	};

	const enemies = [];
	const powerups = [];
	const explosions = [];

	// Keyboard state
	const keys = {
	ArrowLeft: false,
	ArrowRight: false,
	ArrowUp: false,
	ArrowDown: false,
	Space: false
	};

	// Event listeners
	window.addEventListener('resize', () => {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	player.y = canvas.height - 100;
	});

	document.addEventListener('keydown', (e) => {
	if (keys.hasOwnProperty(e.key)) {
	keys[e.key] = true;
	e.preventDefault();
	}
	});

	document.addEventListener('keyup', (e) => {
	if (keys.hasOwnProperty(e.key)) {
	keys[e.key] = false;
	e.preventDefault();
	}
	});

	startBtn.addEventListener('click', startGame);
	restartBtn.addEventListener('click', startGame);

	function startGame() {
	// Reset game state
	score = 0;
	health = 100;
	gameOver = false;
	gameStarted = true;
	player.isAlive = true;
	player.bullets = [];
	enemies.length = 0;
	powerups.length = 0;
	explosions.length = 0;
	powerupsActive = {
	tripleShot: false,
	rapidFire: false,
	shield: false
	};
	updatePowerupDisplay();

	// Clear powerups container
	while (powerupsContainer.firstChild) {
	powerupsContainer.removeChild(powerupsContainer.firstChild);
	}

	// Reset player position
	player.x = canvas.width / 2;
	player.y = canvas.height - 100;
	player.lastShot = 0;

	// Reset UI
	scoreDisplay.textContent = `SCORE: ${score}`;
	healthFill.style.width = '100%';

	// Hide screens
	startScreen.style.display = 'none';
	gameOverScreen.style.display = 'none';

	// Start game loop
	requestAnimationFrame(gameLoop);

	// Start background music
	backgroundMusic.volume = 0.3;
	backgroundMusic.play().catch(e => console.log("Audio play failed:", e));
	}

	function gameLoop(timestamp) {
	if (gameOver) {
	endGame();
	return;
	}

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

	// Spawn enemies
	if (timestamp - lastEnemySpawn > ENEMY_SPAWN_RATE) {
	spawnEnemy();
	lastEnemySpawn = timestamp;

	// Increase spawn rate as score increases
	ENEMY_SPAWN_RATE = Math.max(500, 2000 - Math.floor(score / 10) * 50);
	}

	// Spawn powerups
	if (timestamp - lastPowerupSpawn > POWERUP_SPAWN_RATE) {
	spawnPowerup();
	lastPowerupSpawn = timestamp;
	}

	// Update player
	updatePlayer();

	// Update bullets
	updateBullets();

	// Update enemies
	updateEnemies();

	// Update powerups
	updatePowerups();

	// Update explosions
	updateExplosions();

	// Draw player
	drawPlayer();

	// Draw bullets
	drawBullets();

	// Draw enemies
	drawEnemies();

	// Draw powerups
	drawPowerups();

	// Draw explosions
	drawExplosions();

	// Continue game loop
	requestAnimationFrame(gameLoop);
	}

	function spawnEnemy() {
	const size = Math.random() * 30 + 30;
	const x = Math.random() * (canvas.width - size);
	const y = -size;
	const speed = Math.random() * 3 + 1;
	const health = Math.floor(Math.random() * 2) + 1;

	enemies.push({
	x: x,
	y: y,
	width: size,
	height: size,
	speed: speed,
	health: health,
	origX: x,
	movePattern: Math.random() > 0.5 ? 'straight' : 'zigzag',
	zigzagSpeed: Math.random() * 0.1,
	zigzagAmplitude: Math.random() * 100 + 50
	});
	}

	function spawnPowerup() {
	const x = Math.random() * (canvas.width - POWERUP_SIZE);
	const y = -POWERUP_SIZE;
	const types = ['tripleShot', 'rapidFire', 'shield'];
	const type = types[Math.floor(Math.random() * types.length)];

	powerups.push({
	x: x,
	y: y,
	width: POWERUP_SIZE,
	height: POWERUP_SIZE,
	speed: 3,
	type: type
	});
	}

	function updatePlayer() {
	// Movement
	if (keys.ArrowLeft && player.x > 0) {
	player.x -= player.speed;
	}
	if (keys.ArrowRight && player.x < canvas.width - player.width) {
	player.x += player.speed;
	}
	if (keys.ArrowUp && player.y > canvas.height / 2) {
	player.y -= player.speed;
	}
	if (keys.ArrowDown && player.y < canvas.height - player.height) {
	player.y += player.speed;
	}

	// Shooting
	if (keys.Space && Date.now() - player.lastShot > (powerupsActive.rapidFire ? 100 : player.shootDelay)) {
	shoot();
	player.lastShot = Date.now();
	}
	}

	function shoot() {
	if (powerupsActive.tripleShot) {
	// Three spread shots
	player.bullets.push({
	x: player.x + player.width / 2 - BULLET_SIZE / 2,
	y: player.y,
	width: BULLET_SIZE,
	height: BULLET_SIZE,
	speed: -10,
	angle: -0.1
	});
	player.bullets.push({
	x: player.x + player.width / 2 - BULLET_SIZE / 2,
	y: player.y,
	width: BULLET_SIZE,
	height: BULLET_SIZE,
	speed: -10,
	angle: 0
	});
	player.bullets.push({
	x: player.x + player.width / 2 - BULLET_SIZE / 2,
	y: player.y,
	width: BULLET_SIZE,
	height: BULLET_SIZE,
	speed: -10,
	angle: 0.1
	});
	} else {
	// Single shot
	player.bullets.push({
	x: player.x + player.width / 2 - BULLET_SIZE / 2,
	y: player.y,
	width: BULLET_SIZE,
	height: BULLET_SIZE,
	speed: -10,
	angle: 0
	});
	}

	// Play laser sound
	laserSound.currentTime = 0;
	laserSound.play().catch(e => console.log("Audio play failed:", e));
	}

	function updateBullets() {
	for (let i = player.bullets.length - 1; i >= 0; i--) {
	const bullet = player.bullets[i];
	bullet.y += bullet.speed;
	if (bullet.angle !== 0) {
	bullet.x += Math.sin(bullet.angle) * 5;
	}

	// Remove bullets that go off screen
	if (bullet.y + bullet.height < 0) {
	player.bullets.splice(i, 1);
	}
	}
	}

	function updateEnemies() {
	for (let i = enemies.length - 1; i >= 0; i--) {
	const enemy = enemies[i];

	// Update position based on movement pattern
	if (enemy.movePattern === 'straight') {
	enemy.y += enemy.speed;
	} else if (enemy.movePattern === 'zigzag') {
	enemy.y += enemy.speed;
	enemy.x = enemy.origX + Math.sin(enemy.y * enemy.zigzagSpeed) * enemy.zigzagAmplitude;
	}

	// Check if enemy hits player
	if (
	player.isAlive &&
	enemy.y + enemy.height > player.y &&
	enemy.y < player.y + player.height &&
	enemy.x + enemy.width > player.x &&
	enemy.x < player.x + player.width
	) {
	takeDamage(10);
	// Create explosion at enemy position
	createExplosion(enemy.x + enemy.width/2, enemy.y + enemy.height/2, enemy.width * 1.5);
	enemies.splice(i, 1);

	// Play explosion sound
	explosionSound.currentTime = 0;
	explosionSound.play().catch(e => console.log("Audio play failed:", e));
	continue;
	}

	// Remove enemies that go off screen
	if (enemy.y > canvas.height) {
	enemies.splice(i, 1);
	continue;
	}

	// Check bullet collisions
	for (let j = player.bullets.length - 1; j >= 0; j--) {
	const bullet = player.bullets[j];

	if (
	bullet.y + bullet.height > enemy.y &&
	bullet.y < enemy.y + enemy.height &&
	bullet.x + bullet.width > enemy.x &&
	bullet.x < enemy.x + enemy.width
	) {
	// Hit detected
	enemy.health--;

	if (enemy.health <= 0) {
	// Enemy destroyed
	score += 10;
	scoreDisplay.textContent = `SCORE: ${score}`;
	enemies.splice(i, 1);
	createExplosion(enemy.x + enemy.width/2, enemy.y + enemy.height/2, enemy.width);

	// Play explosion sound
	explosionSound.currentTime = 0;
	explosionSound.play().catch(e => console.log("Audio play failed:", e));
	}

	player.bullets.splice(j, 1);
	break;
	}
	}
	}
	}

	function updatePowerups() {
	for (let i = powerups.length - 1; i >= 0; i--) {
	const powerup = powerups[i];
	powerup.y += powerup.speed;

	// Check if player collects powerup
	if (
	player.isAlive &&
	powerup.y + powerup.height > player.y &&
	powerup.y < player.y + player.height &&
	powerup.x + powerup.width > player.x &&
	powerup.x < player.x + player.width
	) {
	activatePowerup(powerup.type);
	powerups.splice(i, 1);

	// Play powerup sound
	powerupSound.currentTime = 0;
	powerupSound.play().catch(e => console.log("Audio play failed:", e));
	continue;
	}

	// Remove powerups that go off screen
	if (powerup.y > canvas.height) {
	powerups.splice(i, 1);
	}
	}

	// Check if powerups should expire
	const now = Date.now();
	for (const type in powerupsActive) {
	if (powerupsActive[type] && now - powerupsActive[type] > POWERUP_DURATION) {
	powerupsActive[type] = false;
	updatePowerupDisplay();
	}
	}
	}

	function activatePowerup(type) {
	powerupsActive[type] = Date.now();
	updatePowerupDisplay();

	// Display powerup notification
	const notification = document.createElement('div');
	notification.className = 'powerup-notification';
	notification.textContent = type === 'tripleShot' ? 'TRIPLE SHOT ACTIVATED' :
	type === 'rapidFire' ? 'RAPID FIRE ACTIVATED' :
	'SHIELD ACTIVATED';
	notification.style.position = 'absolute';
	notification.style.left = '50%';
	notification.style.top = '30%';
	notification.style.transform = 'translateX(-50%)';
	notification.style.color = '#ff0';
	notification.style.fontSize = '24px';
	notification.style.textShadow = '0 0 10px #ff0';
	notification.style.opacity = '0';
	notification.style.transition = 'opacity 1s';

	document.getElementById('uiOverlay').appendChild(notification);

	// Fade in
	setTimeout(() => {
	notification.style.opacity = '1';
	}, 10);

	// Fade out and remove
	setTimeout(() => {
	notification.style.opacity = '0';
	setTimeout(() => {
	notification.remove();
	}, 1000);
	}, 3000);
	}

	function updatePowerupDisplay() {
	// Clear existing icons
	powerupsContainer.innerHTML = '';

	// Add icons for active powerups
	for (const type in powerupsActive) {
	if (powerupsActive[type]) {
	const icon = document.createElement('div');
	icon.className = 'powerup-icon';
	icon.textContent = type === 'tripleShot' ? '3x' :
	type === 'rapidFire' ? 'RF' :
	'S';
	icon.title = type === 'tripleShot' ? 'Triple Shot' :
	type === 'rapidFire' ? 'Rapid Fire' :
	'Shield';

	// Add progress bar
	const progress = document.createElement('div');
	progress.style.position = 'absolute';
	progress.style.bottom = '-5px';
	progress.style.left = '0';
	progress.style.width = '100%';
	progress.style.height = '3px';
	progress.style.backgroundColor = '#ff0';
	progress.style.transformOrigin = 'left center';

	// Calculate remaining time
	const durationLeft = Math.max(0, POWERUP_DURATION - (Date.now() - powerupsActive[type]));
	const percentageLeft = (durationLeft / POWERUP_DURATION) * 100;
	progress.style.transform = `scaleX(${percentageLeft / 100})`;

	icon.appendChild(progress);
	powerupsContainer.appendChild(icon);

	// Update progress bar
	const interval = setInterval(() => {
	const timeLeft = Math.max(0, POWERUP_DURATION - (Date.now() - powerupsActive[type]));
	const percentage = (timeLeft / POWERUP_DURATION) * 100;
	progress.style.transform = `scaleX(${percentage / 100})`;

	if (timeLeft <= 0) {
	clearInterval(interval);
	}
	}, 100);
	}
	}
	}

	function createExplosion(x, y, radius) {
	explosions.push({
	x: x,
	y: y,
	radius: radius,
	maxRadius: radius * 1.5,
	alpha: 1,
	life: 1
	});
	}

	function updateExplosions() {
	for (let i = explosions.length - 1; i >= 0; i--) {
	const explosion = explosions[i];
	explosion.radius += 0.5;
	explosion.life -= 0.02;

	if (explosion.life <= 0) {
	explosions.splice(i, 1);
	}
	}
	}

	function takeDamage(amount) {
	if (powerupsActive.shield) return;

	health = Math.max(0, health - amount);
	healthFill.style.width = `${health}%`;

	if (health <= 0) {
	player.isAlive = false;
	gameOver = true;
	createExplosion(player.x + player.width/2, player.y + player.height/2, player.width * 2);
	}
	}

	function drawPlayer() {
	if (!player.isAlive) return;

	// Draw ship body
	ctx.fillStyle = player.color;
	ctx.beginPath();
	ctx.moveTo(player.x + player.width/2, player.y);
	ctx.lineTo(player.x + player.width, player.y + player.height);
	ctx.lineTo(player.x, player.y + player.height);
	ctx.closePath();
	ctx.fill();

	// Draw cockpit
	ctx.fillStyle = '#0af';
	ctx.beginPath();
	ctx.arc(player.x + player.width/2, player.y + player.height/2, player.width/4, 0, Math.PI * 2);
	ctx.fill();

	// Draw engine glow
	if (Date.now() % 200 < 100) {
	ctx.fillStyle = '#f80';
	ctx.beginPath();
	ctx.moveTo(player.x + player.width/3, player.y + player.height);
	ctx.lineTo(player.x + player.width/2, player.y + player.height + 10);
	ctx.lineTo(player.x + 2*player.width/3, player.y + player.height);
	ctx.closePath();
	ctx.fill();
	}

	// Draw shield if active
	if (powerupsActive.shield) {
	ctx.strokeStyle = '#0ff';
	ctx.lineWidth = 2;
	ctx.beginPath();
	ctx.arc(player.x + player.width/2, player.y + player.height/2, player.width, 0, Math.PI * 2);
	ctx.stroke();

	ctx.strokeStyle = '#0ff';
	ctx.lineWidth = 1;
	ctx.beginPath();
	ctx.arc(player.x + player.width/2, player.y + player.height/2, player.width * 1.3, 0, Math.PI * 2);
	ctx.stroke();
	}
	}

	function drawBullets() {
	ctx.fillStyle = '#ff0';
	for (const bullet of player.bullets) {
	ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);

	// Add trail effect
	ctx.fillStyle = 'rgba(255, 255, 0, 0.5)';
	ctx.fillRect(bullet.x, bullet.y + bullet.height, bullet.width, bullet.height/2);
	ctx.fillStyle = '#ff0';
	}
	}

	function drawEnemies() {
	for (const enemy of enemies) {
	// Different colors for different health levels
	ctx.fillStyle = enemy.health === 2 ? '#f60' : '#f06';

	// Draw alien ship
	ctx.beginPath();
	ctx.moveTo(enemy.x + enemy.width/2, enemy.y);
	ctx.lineTo(enemy.x + enemy.width, enemy.y + enemy.height);
	ctx.lineTo(enemy.x, enemy.y + enemy.height);
	ctx.closePath();
	ctx.fill();

	// Draw alien markings
	if (enemy.health === 2) {
	ctx.strokeStyle = '#0f0';
	ctx.lineWidth = 2;
	ctx.beginPath();
	ctx.moveTo(enemy.x + enemy.width/3, enemy.y + enemy.height/2);
	ctx.lineTo(enemy.x + 2*enemy.width/3, enemy.y + enemy.height/2);
	ctx.stroke();
	}

	// Draw glow effect
	ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
	ctx.beginPath();
	ctx.arc(enemy.x + enemy.width/2, enemy.y + enemy.height/2, enemy.width * 0.8, 0, Math.PI * 2);
	ctx.fill();
	}
	}

	function drawPowerups() {
	for (const powerup of powerups) {
	let color;
	let symbol;

	if (powerup.type === 'tripleShot') {
	color = '#0f0';
	symbol = '3x';
	} else if (powerup.type === 'rapidFire') {
	color = '#00f';
	symbol = 'RF';
	} else {
	color = '#0ff';
	symbol = 'S';
	}

	// Draw powerup background
	ctx.fillStyle = color;
	ctx.beginPath();
	ctx.arc(powerup.x + powerup.width/2, powerup.y + powerup.height/2, powerup.width/2, 0, Math.PI * 2);
	ctx.fill();

	// Draw symbol
	ctx.fillStyle = '#000';
	ctx.font = 'bold 12px Orbitron';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	ctx.fillText(symbol, powerup.x + powerup.width/2, powerup.y + powerup.height/2);

	// Add pulsing glow effect
	const pulse = Math.sin(Date.now() / 200) * 0.3 + 0.7;
	ctx.strokeStyle = `rgba(${color === '#0f0' ? '0,255,0' : color === '#00f' ? '0,0,255' : '0,255,255'},${pulse})`;
	ctx.lineWidth = 2;
	ctx.beginPath();
	ctx.arc(powerup.x + powerup.width/2, powerup.y + powerup.height/2, powerup.width/2 + 2, 0, Math.PI * 2);
	ctx.stroke();
	}
	}

	function drawExplosions() {
	for (const explosion of explosions) {
	const gradient = ctx.createRadialGradient(
	explosion.x,
	explosion.y,
	0,
	explosion.x,
	explosion.y,
	explosion.radius
	);

	gradient.addColorStop(0, `rgba(255, 255, 0, ${explosion.life})`);
	gradient.addColorStop(0.5, `rgba(255, 100, 0, ${explosion.life * 0.7})`);
	gradient.addColorStop(1, `rgba(255, 0, 0, 0)`);

	ctx.beginPath();
	ctx.fillStyle = gradient;
	ctx.arc(explosion.x, explosion.y, explosion.radius, 0, Math.PI * 2);
	ctx.fill();

	// Add secondary explosion ring
	if (explosion.life > 0.5) {
	const outerRadius = explosion.radius * 1.5;
	const outerAlpha = (explosion.life - 0.5) * 2;

	const outerGradient = ctx.createRadialGradient(
	explosion.x,
	explosion.y,
	0,
	explosion.x,
	explosion.y,
	outerRadius
	);

	outerGradient.addColorStop(0, `rgba(255, 255, 255, ${outerAlpha})`);
	outerGradient.addColorStop(1, `rgba(255, 255, 255, 0)`);

	ctx.beginPath();
	ctx.fillStyle = outerGradient;
	ctx.arc(explosion.x, explosion.y, outerRadius, 0, Math.PI * 2);
	ctx.fill();
	}
	}
	}

	function endGame() {
	gameOver = true;
	gameOverScreen.style.display = 'flex';
	finalScore.textContent = `SCORE: ${score}`;
	backgroundMusic.pause();
	backgroundMusic.currentTime = 0;
	}
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
	</html>