Hugging Face's logo

Spaces:
FriedsU
/
space
Running

App Files Community
space / index.html
FriedsU's picture
FriedsU
Add 2 files
888ef33 verified
Raw History Blame Contribute Delete
26.3 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>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
overflow: hidden;
background-color: #000;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
#game-container {
position: relative;
width: 800px;
height: 600px;
margin: 20px auto;
background: linear-gradient(to bottom, #000033 0%, #000000 100%);
overflow: hidden;
}
#player {
position: absolute;
width: 50px;
height: 50px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25 5 L5 25 L15 25 L15 45 L35 45 L35 25 L45 25 Z" fill="%2300FFFF" stroke="%23FFFFFF" stroke-width="2"/></svg>');
z-index: 10;
}
.enemy {
position: absolute;
width: 40px;
height: 40px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M20 5 L5 20 L15 20 L15 35 L25 35 L25 20 L35 20 Z" fill="%23FF0000" stroke="%23FFFFFF" stroke-width="2"/></svg>');
z-index: 5;
}
.bullet {
position: absolute;
width: 5px;
height: 15px;
background-color: #FFFF00;
border-radius: 2px;
z-index: 8;
}
.explosion {
position: absolute;
width: 50px;
height: 50px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="%23FF9900"/><circle cx="25" cy="25" r="15" fill="%23FF3300"/><circle cx="25" cy="25" r="10" fill="%23FFFF00"/></svg>');
z-index: 15;
animation: explode 0.5s forwards;
}
.powerup {
position: absolute;
width: 30px;
height: 30px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><circle cx="15" cy="15" r="12" fill="%2300FF00" stroke="%23FFFFFF" stroke-width="2"/></svg>');
z-index: 7;
animation: pulse 1s infinite alternate;
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
z-index: 1;
}
#score-display {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
color: white;
text-shadow: 0 0 5px #00FFFF;
z-index: 20;
}
#health-display {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: white;
text-shadow: 0 0 5px #FF0000;
z-index: 20;
}
#level-complete {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: #00FF00;
padding: 30px;
border-radius: 15px;
text-align: center;
display: none;
z-index: 100;
font-size: 24px;
border: 2px solid #00FF00;
box-shadow: 0 0 20px #00FF00;
}
#game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: #FF0000;
padding: 30px;
border-radius: 15px;
text-align: center;
display: none;
z-index: 100;
font-size: 24px;
border: 2px solid #FF0000;
box-shadow: 0 0 20px #FF0000;
}
#restart-btn {
background: linear-gradient(to bottom, #FF3300 0%, #990000 100%);
color: white;
border: none;
padding: 10px 20px;
margin-top: 20px;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
text-shadow: 0 0 5px #000;
}
#restart-btn:hover {
background: linear-gradient(to bottom, #FF5500 0%, #BB0000 100%);
}
@keyframes explode {
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(2); opacity: 0; }
}
@keyframes pulse {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
#boss {
position: absolute;
width: 80px;
height: 80px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path d="M40 10 L10 40 L30 40 L30 70 L50 70 L50 40 L70 40 Z" fill="%23FF00FF" stroke="%23FFFFFF" stroke-width="3"/></svg>');
z-index: 6;
}
</style>
</head>
<body class="flex flex-col items-center justify-center min-h-screen bg-black">
<h1 class="text-4xl font-bold mb-4 text-blue-400 text-center" style="text-shadow: 0 0 10px #00FFFF;">GALAXY DEFENDER</h1>
<div id="game-container">
<div id="player"></div>
<div id="score-display">SCORE: 0</div>
<div id="health-display">HEALTH: 100%</div>
<div id="level-complete">
<h2 class="text-3xl font-bold mb-4">LEVEL COMPLETE!</h2>
<p id="final-score">Your score: 0</p>
<button id="restart-btn">Play Again</button>
</div>
<div id="game-over">
<h2 class="text-3xl font-bold mb-4">GAME OVER</h2>
<p id="game-over-score">Your score: 0</p>
<button id="restart-btn">Try Again</button>
</div>
</div>
<div class="mt-4 text-gray-400 text-center">
<p>Arrow keys to move | Space to shoot | Collect green power-ups</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Game elements
const gameContainer = document.getElementById('game-container');
const player = document.getElementById('player');
const scoreDisplay = document.getElementById('score-display');
const healthDisplay = document.getElementById('health-display');
const levelCompleteScreen = document.getElementById('level-complete');
const gameOverScreen = document.getElementById('game-over');
const finalScoreDisplay = document.getElementById('final-score');
const gameOverScoreDisplay = document.getElementById('game-over-score');
const restartBtns = document.querySelectorAll('#restart-btn');
// Game state
let score = 0;
let health = 100;
let gameRunning = true;
let levelComplete = false;
let playerX = 375;
let playerY = 500;
let playerSpeed = 8;
let bullets = [];
let enemies = [];
let explosions = [];
let powerups = [];
let stars = [];
let keys = {};
let lastShotTime = 0;
let shotDelay = 300; // ms
let enemySpawnTimer = 0;
let enemySpawnDelay = 1000; // ms
let powerupSpawnTimer = 0;
let powerupSpawnDelay = 8000; // ms
let bossActive = false;
let bossHealth = 10;
// Game dimensions
const gameWidth = gameContainer.offsetWidth;
const gameHeight = gameContainer.offsetHeight;
const playerWidth = 50;
const playerHeight = 50;
// Initialize player position
player.style.left = `${playerX}px`;
player.style.top = `${playerY}px`;
// Create background stars
function createStars() {
for (let i = 0; i < 100; i++) {
const star = document.createElement('div');
star.className = 'star';
const size = Math.random() * 3;
const x = Math.random() * gameWidth;
const y = Math.random() * gameHeight;
const opacity = Math.random();
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.left = `${x}px`;
star.style.top = `${y}px`;
star.style.opacity = opacity;
gameContainer.appendChild(star);
stars.push({
element: star,
x: x,
y: y,
speed: 0.5 + Math.random() * 2
});
}
}
// Event listeners for keyboard
document.addEventListener('keydown', (e) => {
keys[e.key] = true;
// Space to shoot
if (e.key === ' ' && gameRunning && !levelComplete) {
const now = Date.now();
if (now - lastShotTime > shotDelay) {
shoot();
lastShotTime = now;
}
}
});
document.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
restartBtns.forEach(btn => {
btn.addEventListener('click', restartGame);
});
// Create initial game elements
function initGame() {
createStars();
spawnEnemyWave(5);
}
// Create a bullet
function shoot() {
const bullet = document.createElement('div');
bullet.className = 'bullet';
bullet.style.left = `${playerX + playerWidth / 2 - 2}px`;
bullet.style.top = `${playerY - 15}px`;
gameContainer.appendChild(bullet);
bullets.push({
element: bullet,
x: playerX + playerWidth / 2 - 2,
y: playerY - 15,
speed: 10
});
}
// Spawn a wave of enemies
function spawnEnemyWave(count) {
for (let i = 0; i < count; i++) {
setTimeout(() => {
if (!gameRunning || levelComplete) return;
const enemy = document.createElement('div');
enemy.className = 'enemy';
const x = Math.random() * (gameWidth - 40);
const y = -40;
enemy.style.left = `${x}px`;
enemy.style.top = `${y}px`;
gameContainer.appendChild(enemy);
enemies.push({
element: enemy,
x: x,
y: y,
speed: 2 + Math.random() * 2,
health: 1
});
}, i * 500);
}
}
// Spawn a boss enemy
function spawnBoss() {
if (bossActive) return;
bossActive = true;
const boss = document.createElement('div');
boss.id = 'boss';
const x = gameWidth / 2 - 40;
const y = -80;
boss.style.left = `${x}px`;
boss.style.top = `${y}px`;
gameContainer.appendChild(boss);
enemies.push({
element: boss,
x: x,
y: y,
speed: 1.5,
health: bossHealth,
isBoss: true
});
}
// Spawn a powerup
function spawnPowerup() {
const powerup = document.createElement('div');
powerup.className = 'powerup';
const x = Math.random() * (gameWidth - 30);
const y = -30;
powerup.style.left = `${x}px`;
powerup.style.top = `${y}px`;
gameContainer.appendChild(powerup);
powerups.push({
element: powerup,
x: x,
y: y,
speed: 3
});
}
// Create explosion effect
function createExplosion(x, y) {
const explosion = document.createElement('div');
explosion.className = 'explosion';
explosion.style.left = `${x - 25}px`;
explosion.style.top = `${y - 25}px`;
gameContainer.appendChild(explosion);
explosions.push({
element: explosion,
time: 0
});
// Remove explosion after animation
setTimeout(() => {
gameContainer.removeChild(explosion);
}, 500);
}
// Game loop
function gameLoop() {
if (!gameRunning) return;
// Handle player movement
handleMovement();
// Update bullets
updateBullets();
// Update enemies
updateEnemies();
// Update powerups
updatePowerups();
// Update stars (parallax background)
updateStars();
// Spawn new enemies periodically
enemySpawnTimer += 16; // ~60fps
if (enemySpawnTimer >= enemySpawnDelay) {
if (enemies.length < 10) {
spawnEnemyWave(3);
}
enemySpawnTimer = 0;
// Spawn boss after certain score
if (score >= 500 && !bossActive) {
spawnBoss();
}
}
// Spawn powerups periodically
powerupSpawnTimer += 16;
if (powerupSpawnTimer >= powerupSpawnDelay) {
spawnPowerup();
powerupSpawnTimer = 0;
}
// Check for level completion (after boss is defeated)
if (bossActive && enemies.length === 0) {
levelComplete = true;
showLevelComplete();
}
requestAnimationFrame(gameLoop);
}
// Handle player movement based on keyboard input
function handleMovement() {
if (keys['ArrowLeft'] || keys['a']) {
playerX = Math.max(0, playerX - playerSpeed);
}
if (keys['ArrowRight'] || keys['d']) {
playerX = Math.min(gameWidth - playerWidth, playerX + playerSpeed);
}
if (keys['ArrowUp'] || keys['w']) {
playerY = Math.max(0, playerY - playerSpeed);
}
if (keys['ArrowDown'] || keys['s']) {
playerY = Math.min(gameHeight - playerHeight, playerY + playerSpeed);
}
player.style.left = `${playerX}px`;
player.style.top = `${playerY}px`;
}
// Update all active bullets
function updateBullets() {
for (let i = bullets.length - 1; i >= 0; i--) {
const bullet = bullets[i];
bullet.y -= bullet.speed;
bullet.element.style.top = `${bullet.y}px`;
// Remove bullets that go off screen
if (bullet.y < -15) {
gameContainer.removeChild(bullet.element);
bullets.splice(i, 1);
}
}
}
// Update all active enemies
function updateEnemies() {
for (let i = enemies.length - 1; i >= 0; i--) {
const enemy = enemies[i];
enemy.y += enemy.speed;
enemy.element.style.top = `${enemy.y}px`;
// Remove enemies that go off screen
if (enemy.y > gameHeight) {
gameContainer.removeChild(enemy.element);
enemies.splice(i, 1);
}
// Check for bullet collisions
for (let j = bullets.length - 1; j >= 0; j--) {
const bullet = bullets[j];
if (checkCollision(bullet, enemy)) {
// Hit enemy
enemy.health--;
// Remove bullet
gameContainer.removeChild(bullet.element);
bullets.splice(j, 1);
// Create explosion if enemy is destroyed
if (enemy.health <= 0) {
createExplosion(enemy.x + 20, enemy.y + 20);
gameContainer.removeChild(enemy.element);
enemies.splice(i, 1);
// Add score
const points = enemy.isBoss ? 200 : 50;
score += points;
scoreDisplay.textContent = `SCORE: ${score}`;
// Check if boss was defeated
if (enemy.isBoss) {
bossActive = false;
}
}
break;
}
}
// Check for player collision
if (checkCollision({x: playerX, y: playerY, width: playerWidth, height: playerHeight}, enemy)) {
createExplosion(enemy.x + 20, enemy.y + 20);
gameContainer.removeChild(enemy.element);
enemies.splice(i, 1);
// Reduce player health
health -= enemy.isBoss ? 30 : 10;
health = Math.max(0, health);
healthDisplay.textContent = `HEALTH: ${health}%`;
if (health <= 0) {
gameOver();
}
}
}
}
// Update all active powerups
function updatePowerups() {
for (let i = powerups.length - 1; i >= 0; i--) {
const powerup = powerups[i];
powerup.y += powerup.speed;
powerup.element.style.top = `${powerup.y}px`;
// Remove powerups that go off screen
if (powerup.y > gameHeight) {
gameContainer.removeChild(powerup.element);
powerups.splice(i, 1);
}
// Check for player collision
if (checkCollision({x: playerX, y: playerY, width: playerWidth, height: playerHeight}, powerup)) {
gameContainer.removeChild(powerup.element);
powerups.splice(i, 1);
// Apply powerup effect
health = Math.min(100, health + 20);
healthDisplay.textContent = `HEALTH: ${health}%`;
// Temporary speed boost
const originalSpeed = playerSpeed;
playerSpeed = 12;
setTimeout(() => {
playerSpeed = originalSpeed;
}, 5000);
}
}
}
// Update background stars
function updateStars() {
for (let i = 0; i < stars.length; i++) {
const star = stars[i];
star.y += star.speed;
if (star.y > gameHeight) {
star.y = 0;
star.x = Math.random() * gameWidth;
}
star.element.style.top = `${star.y}px`;
}
}
// Check collision between two objects
function checkCollision(obj1, obj2) {
const obj1Width = obj1.width || 40;
const obj1Height = obj1.height || 40;
const obj2Width = obj2.width || 40;
const obj2Height = obj2.height || 40;
return (
obj1.x < obj2.x + obj2Width &&
obj1.x + obj1Width > obj2.x &&
obj1.y < obj2.y + obj2Height &&
obj1.y + obj1Height > obj2.y
);
}
// Show level complete screen
function showLevelComplete() {
gameRunning = false;
finalScoreDisplay.textContent = `Your score: ${score}`;
levelCompleteScreen.style.display = 'block';
}
// Game over function
function gameOver() {
gameRunning = false;
gameOverScoreDisplay.textContent = `Your score: ${score}`;
gameOverScreen.style.display = 'block';
// Create explosion at player position
createExplosion(playerX + 25, playerY + 25);
player.style.display = 'none';
}
// Restart game function
function restartGame() {
// Reset game state
score = 0;
health = 100;
gameRunning = true;
levelComplete = false;
bossActive = false;
playerX = 375;
playerY = 500;
playerSpeed = 8;
// Reset displays
scoreDisplay.textContent = `SCORE: 0`;
healthDisplay.textContent = `HEALTH: 100%`;
player.style.display = 'block';
player.style.left = `${playerX}px`;
player.style.top = `${playerY}px`;
// Hide screens
levelCompleteScreen.style.display = 'none';
gameOverScreen.style.display = 'none';
// Clear all game elements
bullets.forEach(bullet => {
gameContainer.removeChild(bullet.element);
});
enemies.forEach(enemy => {
gameContainer.removeChild(enemy.element);
});
powerups.forEach(powerup => {
gameContainer.removeChild(powerup.element);
});
stars.forEach(star => {
gameContainer.removeChild(star.element);
});
// Clear arrays
bullets = [];
enemies = [];
powerups = [];
stars = [];
// Create new game elements
initGame();
// Start game
requestAnimationFrame(gameLoop);
}
// Start the game
initGame();
gameLoop();
});
</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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=FriedsU/space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>