|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Star Wars: Asteroid Evasion</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Prompt:wght@300;500&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Prompt', sans-serif; |
|
|
background-color: #000; |
|
|
color: #fff; |
|
|
overflow: hidden; |
|
|
height: 100vh; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
#game-container { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-image: |
|
|
radial-gradient(circle at center, rgba(0, 20, 80, 0.8) 0%, rgba(0, 0, 0, 1) 70%), |
|
|
url('https://starshipsofa.com/wp-content/uploads/2013/07/starfield.jpg'); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.stars { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><circle cx="10" cy="10" r="1" fill="white"/><circle cx="50" cy="30" r="1" fill="white"/><circle cx="80" cy="10" r="1" fill="white"/><circle cx="130" cy="20" r="1" fill="white"/><circle cx="170" cy="5" r="1" fill="white"/><circle cx="30" cy="80" r="1" fill="white"/><circle cx="90" cy="60" r="1" fill="white"/><circle cx="150" cy="70" r="1" fill="white"/><circle cx="10" cy="120" r="1" fill="white"/><circle cx="70" cy="100" r="1" fill="white"/><circle cx="120" cy="130" r="1" fill="white"/><circle cx="180" cy="110" r="1" fill="white"/><circle cx="30" cy="170" r="1" fill="white"/><circle cx="80" cy="150" r="1" fill="white"/><circle cx="140" cy="180" r="1" fill="white"/><circle cx="190" cy="160" r="1" fill="white"/></svg>'); |
|
|
background-repeat: repeat; |
|
|
animation: starScroll 200s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes starScroll { |
|
|
from { background-position: 0 0; } |
|
|
to { background-position: 200px 200px; } |
|
|
} |
|
|
|
|
|
#intro-screen, #game-over-screen { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 1000; |
|
|
background-color: rgba(0, 0, 0, 0.8); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
#game-screen { |
|
|
display: none; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.title { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
color: #ffe81f; |
|
|
text-shadow: 0 0 10px #ff6, 0 0 20px #ff6; |
|
|
font-size: 4rem; |
|
|
margin-bottom: 2rem; |
|
|
letter-spacing: 0.5rem; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.scroll-text { |
|
|
position: relative; |
|
|
height: 60%; |
|
|
width: 60%; |
|
|
overflow: hidden; |
|
|
color: #ffe81f; |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
font-size: 1.5rem; |
|
|
line-height: 1.5; |
|
|
text-align: justify; |
|
|
transform: perspective(300px) rotateX(20deg); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.scroll-content { |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
animation: scroll 40s linear forwards; |
|
|
} |
|
|
|
|
|
@keyframes scroll { |
|
|
0% { top: 100%; } |
|
|
100% { top: -500%; } |
|
|
} |
|
|
|
|
|
.btn { |
|
|
background: linear-gradient(to right, #3a3a98, #1a1a4e); |
|
|
color: #ffe81f; |
|
|
border: 2px solid #ffe81f; |
|
|
padding: 1rem 2rem; |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
font-size: 1.2rem; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
margin-top: 2rem; |
|
|
box-shadow: 0 0 15px rgba(255, 232, 31, 0.5); |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
background: linear-gradient(to right, #4e4eb8, #2a2a6e); |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 0 25px rgba(255, 232, 31, 0.8); |
|
|
} |
|
|
|
|
|
#player { |
|
|
position: absolute; |
|
|
width: 60px; |
|
|
height: 100px; |
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150"><polygon points="50,0 0,100 20,100 50,30 80,100 100,100" fill="%23ffe81f"/><rect x="40" y="100" width="20" height="50" fill="%23ffe81f"/></svg>'); |
|
|
background-repeat: no-repeat; |
|
|
z-index: 10; |
|
|
transition: transform 0.1s; |
|
|
left: 50%; |
|
|
bottom: 100px; |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
|
|
|
.asteroid { |
|
|
position: absolute; |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23666"/><path d="M30,30 Q40,20 50,30 Q60,20 70,30 Q75,40 70,50 Q75,60 70,70 Q60,75 50,70 Q40,75 30,70 Q25,60 30,50 Q25,40 30,30" fill="%23444"/></svg>'); |
|
|
background-repeat: no-repeat; |
|
|
z-index: 5; |
|
|
} |
|
|
|
|
|
.powerup { |
|
|
position: absolute; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%2300ff00"/><circle cx="50" cy="50" r="30" fill="%23ffffff"/><circle cx="50" cy="50" r="20" fill="%2300ff00"/><circle cx="50" cy="50" r="10" fill="%23ffffff"/></svg>'); |
|
|
background-repeat: no-repeat; |
|
|
z-index: 5; |
|
|
animation: pulse 1s infinite; |
|
|
} |
|
|
|
|
|
#hud { |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
left: 20px; |
|
|
z-index: 20; |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
color: #ffe81f; |
|
|
display: flex; |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.hud-item { |
|
|
background-color: rgba(0, 0, 0, 0.7); |
|
|
padding: 10px 20px; |
|
|
border: 1px solid #ffe81f; |
|
|
border-radius: 5px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.laser { |
|
|
position: absolute; |
|
|
width: 5px; |
|
|
height: 30px; |
|
|
background-color: red; |
|
|
z-index: 6; |
|
|
border-radius: 5px; |
|
|
box-shadow: 0 0 10px red; |
|
|
} |
|
|
|
|
|
.explosion { |
|
|
position: absolute; |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%23ff0"/><path d="M30,30 Q50,10 70,30 Q90,50 70,70 Q50,90 30,70 Q10,50 30,30" fill="%23f00"/><path d="M40,40 Q50,30 60,40 Q70,50 60,60 Q50,70 40,60 Q30,50 40,40" fill="%23ff0"/></svg>'); |
|
|
background-repeat: no-repeat; |
|
|
z-index: 15; |
|
|
animation: explosion 0.5s forwards; |
|
|
} |
|
|
|
|
|
@keyframes explosion { |
|
|
0% { transform: scale(0); opacity: 1; } |
|
|
100% { transform: scale(2); opacity: 0; } |
|
|
} |
|
|
|
|
|
#score-display { |
|
|
font-size: 2rem; |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
background-color: rgba(0, 0, 0, 0.7); |
|
|
padding: 10px 20px; |
|
|
border: 1px solid #ffe81f; |
|
|
border-radius: 5px; |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
color: #ffe81f; |
|
|
} |
|
|
|
|
|
#audio-toggle { |
|
|
position: absolute; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
z-index: 100; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
border: 1px solid #ffe81f; |
|
|
color: #ffe81f; |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.instructions { |
|
|
color: #ffe81f; |
|
|
font-family: 'Prompt', sans-serif; |
|
|
margin-top: 2rem; |
|
|
max-width: 600px; |
|
|
padding: 0 2rem; |
|
|
} |
|
|
|
|
|
.instructions h2 { |
|
|
margin-bottom: 1rem; |
|
|
color: #00ff00; |
|
|
} |
|
|
|
|
|
.controls { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.control-key { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
border: 1px solid #ffe81f; |
|
|
padding: 5px 10px; |
|
|
border-radius: 5px; |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="game-container"> |
|
|
<div class="stars"></div> |
|
|
|
|
|
<div id="intro-screen"> |
|
|
<h1 class="title">STAR WARS</h1> |
|
|
<h2 class="title" style="font-size: 2rem;">ASTEROID EVASION</h2> |
|
|
|
|
|
<div class="scroll-text"> |
|
|
<div class="scroll-content"> |
|
|
<p>Episode IV</p> |
|
|
<p>A NEW GAME</p> |
|
|
<br> |
|
|
<p>The galaxy is in turmoil as Rebel forces attempt to outrun the Imperial fleet through an asteroid field.</p> |
|
|
<br> |
|
|
<p>As a skilled pilot, your mission is to navigate the treacherous field, collecting power-ups to sustain your ship.</p> |
|
|
<br> |
|
|
<p>Beware of the asteroids that float menacingly through space - a single collision could mean the end of your journey...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="btn" id="start-game">BEGIN MISSION</button> |
|
|
|
|
|
<div class="instructions"> |
|
|
<h2>Mission Controls:</h2> |
|
|
<p>Use WASD or arrow keys to navigate your ship through the asteroid field.</p> |
|
|
<p>Collect power-ups to increase your score and survive longer.</p> |
|
|
<p>Press SPACE to fire lasers and destroy incoming asteroids.</p> |
|
|
|
|
|
<div class="controls"> |
|
|
<span class="control-key"><i class="fas fa-arrow-up"></i> / W</span> |
|
|
<span class="control-key"><i class="fas fa-arrow-left"></i> / A</span> |
|
|
<span class="control-key"><i class="fas fa-arrow-down"></i> / S</span> |
|
|
<span class="control-key"><i class="fas fa-arrow-right"></i> / D</span> |
|
|
<span class="control-key"><i class="fas fa-star"></i> SPACE</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="game-screen"> |
|
|
<div id="hud"> |
|
|
<div class="hud-item"> |
|
|
<i class="fas fa-heart" style="color: red;"></i> |
|
|
<span id="lives">3</span> |
|
|
</div> |
|
|
<div class="hud-item"> |
|
|
<i class="fas fa-bolt" style="color: #00ff00;"></i> |
|
|
<span id="energy">100%</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="score-display">SCORE: 0</div> |
|
|
|
|
|
<div id="player"></div> |
|
|
</div> |
|
|
|
|
|
<div id="game-over-screen" style="display: none;"> |
|
|
<h1 class="title">GAME OVER</h1> |
|
|
<p style="font-size: 1.5rem; margin-bottom: 1rem;">Final Score: <span id="final-score">0</span></p> |
|
|
<button class="btn" id="restart-game">RETRY MISSION</button> |
|
|
</div> |
|
|
|
|
|
<div id="audio-toggle"> |
|
|
<i class="fas fa-volume-up"></i> |
|
|
</div> |
|
|
|
|
|
<audio id="theme-music" loop> |
|
|
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"> |
|
|
Your browser does not support the audio element. |
|
|
</audio> |
|
|
|
|
|
<audio id="laser-sound"> |
|
|
<source src="https://www.soundjay.com/buttons/sounds/button-09.mp3" type="audio/mpeg"> |
|
|
</audio> |
|
|
|
|
|
<audio id="explosion-sound"> |
|
|
<source src="https://www.soundjay.com/explosion-sounds/explosion-01.mp3" type="audio/mpeg"> |
|
|
</audio> |
|
|
|
|
|
<audio id="powerup-sound"> |
|
|
<source src="https://www.soundjay.com/buttons/sounds/button-21.mp3" type="audio/mpeg"> |
|
|
</audio> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let gameActive = false; |
|
|
let score = 0; |
|
|
let lives = 3; |
|
|
let energy = 100; |
|
|
let playerSpeed = 5; |
|
|
let energyDrain = 0.1; |
|
|
let asteroids = []; |
|
|
let powerups = []; |
|
|
let lasers = []; |
|
|
let gameSpeed = 1; |
|
|
let asteroidSpawnRate = 2500; |
|
|
let powerupSpawnRate = 8000; |
|
|
let lastAsteroidSpawn = 0; |
|
|
let lastPowerupSpawn = 0; |
|
|
let keys = {}; |
|
|
let audioEnabled = true; |
|
|
let difficultyIncreaseInterval; |
|
|
|
|
|
|
|
|
const introScreen = document.getElementById('intro-screen'); |
|
|
const gameScreen = document.getElementById('game-screen'); |
|
|
const gameOverScreen = document.getElementById('game-over-screen'); |
|
|
const startButton = document.getElementById('start-game'); |
|
|
const restartButton = document.getElementById('restart-game'); |
|
|
const player = document.getElementById('player'); |
|
|
const livesDisplay = document.getElementById('lives'); |
|
|
const energyDisplay = document.getElementById('energy'); |
|
|
const scoreDisplay = document.getElementById('score-display'); |
|
|
const finalScoreDisplay = document.getElementById('final-score'); |
|
|
const themeMusic = document.getElementById('theme-music'); |
|
|
const laserSound = document.getElementById('laser-sound'); |
|
|
const explosionSound = document.getElementById('explosion-sound'); |
|
|
const powerupSound = document.getElementById('powerup-sound'); |
|
|
const audioToggle = document.getElementById('audio-toggle'); |
|
|
const gameContainer = document.getElementById('game-container'); |
|
|
|
|
|
|
|
|
const PLAYER_WIDTH = 60; |
|
|
const PLAYER_HEIGHT = 100; |
|
|
const GAME_WIDTH = window.innerWidth; |
|
|
const GAME_HEIGHT = window.innerHeight; |
|
|
|
|
|
|
|
|
function initGame() { |
|
|
|
|
|
score = 0; |
|
|
lives = 3; |
|
|
energy = 100; |
|
|
gameSpeed = 1; |
|
|
asteroidSpawnRate = 2500; |
|
|
|
|
|
|
|
|
asteroids.forEach(asteroid => asteroid.element.remove()); |
|
|
powerups.forEach(powerup => powerup.element.remove()); |
|
|
lasers.forEach(laser => laser.element.remove()); |
|
|
|
|
|
asteroids = []; |
|
|
powerups = []; |
|
|
lasers = []; |
|
|
|
|
|
|
|
|
updateHUD(); |
|
|
|
|
|
|
|
|
player.style.left = '50%'; |
|
|
player.style.bottom = '100px'; |
|
|
player.style.transform = 'translateX(-50%)'; |
|
|
|
|
|
|
|
|
introScreen.style.display = 'none'; |
|
|
gameOverScreen.style.display = 'none'; |
|
|
gameScreen.style.display = 'block'; |
|
|
|
|
|
|
|
|
gameActive = true; |
|
|
startGameLoop(); |
|
|
|
|
|
|
|
|
if (difficultyIncreaseInterval) clearInterval(difficultyIncreaseInterval); |
|
|
difficultyIncreaseInterval = setInterval(increaseDifficulty, 10000); |
|
|
|
|
|
|
|
|
if (audioEnabled) { |
|
|
themeMusic.currentTime = 0; |
|
|
themeMusic.play(); |
|
|
} |
|
|
|
|
|
|
|
|
gameScreen.focus(); |
|
|
} |
|
|
|
|
|
|
|
|
function gameLoop(timestamp) { |
|
|
if (!gameActive) return; |
|
|
|
|
|
|
|
|
movePlayer(); |
|
|
|
|
|
|
|
|
if (timestamp - lastAsteroidSpawn > asteroidSpawnRate) { |
|
|
spawnAsteroid(); |
|
|
lastAsteroidSpawn = timestamp; |
|
|
} |
|
|
|
|
|
|
|
|
if (timestamp - lastPowerupSpawn > powerupSpawnRate) { |
|
|
spawnPowerup(); |
|
|
lastPowerupSpawn = timestamp; |
|
|
} |
|
|
|
|
|
|
|
|
updateAsteroids(); |
|
|
|
|
|
|
|
|
updatePowerups(); |
|
|
|
|
|
|
|
|
updateLasers(); |
|
|
|
|
|
|
|
|
checkCollisions(); |
|
|
|
|
|
|
|
|
energy -= energyDrain; |
|
|
if (energy <= 0) { |
|
|
energy = 0; |
|
|
loseLife(); |
|
|
} |
|
|
|
|
|
|
|
|
updateHUD(); |
|
|
|
|
|
|
|
|
requestAnimationFrame(gameLoop); |
|
|
} |
|
|
|
|
|
function startGameLoop() { |
|
|
requestAnimationFrame(gameLoop); |
|
|
} |
|
|
|
|
|
|
|
|
function movePlayer() { |
|
|
const playerRect = player.getBoundingClientRect(); |
|
|
const gameRect = gameContainer.getBoundingClientRect(); |
|
|
let moveX = 0; |
|
|
let moveY = 0; |
|
|
|
|
|
|
|
|
if ((keys['ArrowLeft'] || keys['a'] || keys['A']) && playerRect.left > gameRect.left) { |
|
|
moveX = -playerSpeed; |
|
|
} |
|
|
if ((keys['ArrowRight'] || keys['d'] || keys['D']) && playerRect.right < gameRect.right) { |
|
|
moveX = playerSpeed; |
|
|
} |
|
|
|
|
|
|
|
|
if ((keys['ArrowUp'] || keys['w'] || keys['W']) && playerRect.top > gameRect.top) { |
|
|
moveY = -playerSpeed; |
|
|
} |
|
|
if ((keys['ArrowDown'] || keys['s'] || keys['S']) && playerRect.bottom < gameRect.bottom) { |
|
|
moveY = playerSpeed; |
|
|
} |
|
|
|
|
|
|
|
|
const currentLeft = parseFloat(player.style.left) || (GAME_WIDTH / 2 - PLAYER_WIDTH / 2); |
|
|
const currentBottom = parseFloat(player.style.bottom) || 100; |
|
|
|
|
|
player.style.left = `${currentLeft + moveX}px`; |
|
|
player.style.bottom = `${currentBottom + moveY}px`; |
|
|
|
|
|
|
|
|
if (moveX !== 0) { |
|
|
player.style.transform = `translateX(0) rotate(${moveX * 2}deg)`; |
|
|
} else { |
|
|
player.style.transform = 'translateX(0) rotate(0deg)'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function spawnAsteroid() { |
|
|
const asteroid = document.createElement('div'); |
|
|
asteroid.className = 'asteroid'; |
|
|
asteroid.style.width = `${Math.random() * 50 + 30}px`; |
|
|
asteroid.style.height = asteroid.style.width; |
|
|
|
|
|
const x = Math.random() * (GAME_WIDTH - 100) + 50; |
|
|
const speed = Math.random() * 3 + 2 * gameSpeed; |
|
|
|
|
|
asteroid.style.left = `${x}px`; |
|
|
asteroid.style.top = '-100px'; |
|
|
|
|
|
gameScreen.appendChild(asteroid); |
|
|
|
|
|
asteroids.push({ |
|
|
element: asteroid, |
|
|
x: x, |
|
|
y: -100, |
|
|
speed: speed, |
|
|
width: parseInt(asteroid.style.width), |
|
|
height: parseInt(asteroid.style.height) |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function spawnPowerup() { |
|
|
const powerup = document.createElement('div'); |
|
|
powerup.className = 'powerup'; |
|
|
|
|
|
const x = Math.random() * (GAME_WIDTH - 50) + 25; |
|
|
const speed = Math.random() * 2 + 1 * gameSpeed; |
|
|
|
|
|
powerup.style.left = `${x}px`; |
|
|
powerup.style.top = '-50px'; |
|
|
|
|
|
gameScreen.appendChild(powerup); |
|
|
|
|
|
powerups.push({ |
|
|
element: powerup, |
|
|
x: x, |
|
|
y: -50, |
|
|
speed: speed, |
|
|
width: 40, |
|
|
height: 40 |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateAsteroids() { |
|
|
const playerRect = player.getBoundingClientRect(); |
|
|
|
|
|
for (let i = asteroids.length - 1; i >= 0; i--) { |
|
|
const asteroid = asteroids[i]; |
|
|
asteroid.y += asteroid.speed; |
|
|
asteroid.element.style.top = `${asteroid.y}px`; |
|
|
|
|
|
|
|
|
if (asteroid.y > GAME_HEIGHT) { |
|
|
asteroid.element.remove(); |
|
|
asteroids.splice(i, 1); |
|
|
score += 5; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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`; |
|
|
|
|
|
|
|
|
if (powerup.y > GAME_HEIGHT) { |
|
|
powerup.element.remove(); |
|
|
powerups.splice(i, 1); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function fireLaser() { |
|
|
if (energy < 5) return; |
|
|
|
|
|
energy -= 5; |
|
|
|
|
|
const laser = document.createElement('div'); |
|
|
laser.className = 'laser'; |
|
|
|
|
|
const playerRect = player.getBoundingClientRect(); |
|
|
const x = playerRect.left + playerRect.width / 2 - 2.5; |
|
|
const y = playerRect.top; |
|
|
|
|
|
laser.style.left = `${x}px`; |
|
|
laser.style.top = `${y}px`; |
|
|
|
|
|
gameScreen.appendChild(laser); |
|
|
|
|
|
lasers.push({ |
|
|
element: laser, |
|
|
x: x, |
|
|
y: y, |
|
|
speed: 10 * gameSpeed, |
|
|
width: 5, |
|
|
height: 30 |
|
|
}); |
|
|
|
|
|
if (audioEnabled) { |
|
|
laserSound.currentTime = 0; |
|
|
laserSound.play(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateLasers() { |
|
|
for (let i = lasers.length - 1; i >= 0; i--) { |
|
|
const laser = lasers[i]; |
|
|
laser.y -= laser.speed; |
|
|
laser.element.style.top = `${laser.y}px`; |
|
|
|
|
|
|
|
|
if (laser.y + laser.height < 0) { |
|
|
laser.element.remove(); |
|
|
lasers.splice(i, 1); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function checkCollisions() { |
|
|
const playerRect = player.getBoundingClientRect(); |
|
|
|
|
|
|
|
|
for (let i = lasers.length - 1; i >= 0; i--) { |
|
|
const laser = lasers[i]; |
|
|
const laserRect = laser.element.getBoundingClientRect(); |
|
|
|
|
|
for (let j = asteroids.length - 1; j >= 0; j--) { |
|
|
const asteroid = asteroids[j]; |
|
|
const asteroidRect = asteroid.element.getBoundingClientRect(); |
|
|
|
|
|
if (isColliding(laserRect, asteroidRect)) { |
|
|
|
|
|
createExplosion(asteroid.x + asteroid.width / 2, asteroid.y + asteroid.height / 2); |
|
|
|
|
|
|
|
|
laser.element.remove(); |
|
|
lasers.splice(i, 1); |
|
|
asteroid.element.remove(); |
|
|
asteroids.splice(j, 1); |
|
|
|
|
|
|
|
|
score += 20; |
|
|
|
|
|
|
|
|
if (audioEnabled) { |
|
|
explosionSound.currentTime = 0; |
|
|
explosionSound.play(); |
|
|
} |
|
|
|
|
|
|
|
|
break; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
for (let i = asteroids.length - 1; i >= 0; i--) { |
|
|
const asteroid = asteroids[i]; |
|
|
const asteroidRect = asteroid.element.getBoundingClientRect(); |
|
|
|
|
|
if (isColliding(playerRect, asteroidRect)) { |
|
|
|
|
|
createExplosion( |
|
|
asteroid.x + asteroid.width / 2, |
|
|
asteroid.y + asteroid.height / 2 |
|
|
); |
|
|
|
|
|
|
|
|
asteroid.element.remove(); |
|
|
asteroids.splice(i, 1); |
|
|
|
|
|
|
|
|
loseLife(); |
|
|
|
|
|
|
|
|
if (audioEnabled) { |
|
|
explosionSound.currentTime = 0; |
|
|
explosionSound.play(); |
|
|
} |
|
|
|
|
|
|
|
|
player.style.opacity = '0.5'; |
|
|
setTimeout(() => { |
|
|
player.style.opacity = '1'; |
|
|
}, 1000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
for (let i = powerups.length - 1; i >= 0; i--) { |
|
|
const powerup = powerups[i]; |
|
|
const powerupRect = powerup.element.getBoundingClientRect(); |
|
|
|
|
|
if (isColliding(playerRect, powerupRect)) { |
|
|
|
|
|
powerup.element.remove(); |
|
|
powerups.splice(i, 1); |
|
|
|
|
|
|
|
|
energy = Math.min(100, energy + 20); |
|
|
score += 10; |
|
|
|
|
|
|
|
|
if (audioEnabled) { |
|
|
powerupSound.currentTime = 0; |
|
|
powerupSound.play(); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function isColliding(rect1, rect2) { |
|
|
return !( |
|
|
rect1.right < rect2.left || |
|
|
rect1.left > rect2.right || |
|
|
rect1.bottom < rect2.top || |
|
|
rect1.top > rect2.bottom |
|
|
); |
|
|
} |
|
|
|
|
|
|
|
|
function createExplosion(x, y) { |
|
|
const explosion = document.createElement('div'); |
|
|
explosion.className = 'explosion'; |
|
|
explosion.style.left = `${x - 40}px`; |
|
|
explosion.style.top = `${y - 40}px`; |
|
|
|
|
|
gameScreen.appendChild(explosion); |
|
|
|
|
|
setTimeout(() => { |
|
|
explosion.remove(); |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
|
|
|
function loseLife() { |
|
|
lives--; |
|
|
|
|
|
if (lives <= 0) { |
|
|
gameOver(); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
energy = 100; |
|
|
} |
|
|
|
|
|
|
|
|
function gameOver() { |
|
|
gameActive = false; |
|
|
clearInterval(difficultyIncreaseInterval); |
|
|
|
|
|
|
|
|
themeMusic.pause(); |
|
|
|
|
|
|
|
|
gameScreen.style.display = 'none'; |
|
|
gameOverScreen.style.display = 'flex'; |
|
|
finalScoreDisplay.textContent = score; |
|
|
} |
|
|
|
|
|
|
|
|
function updateHUD() { |
|
|
livesDisplay.textContent = lives; |
|
|
energyDisplay.textContent = `${Math.max(0, Math.floor(energy))}%`; |
|
|
scoreDisplay.textContent = `SCORE: ${score}`; |
|
|
} |
|
|
|
|
|
|
|
|
function increaseDifficulty() { |
|
|
gameSpeed += 0.1; |
|
|
asteroidSpawnRate = Math.max(500, asteroidSpawnRate - 100); |
|
|
|
|
|
|
|
|
gameScreen.style.boxShadow = 'inset 0 0 50px rgba(255, 0, 0, 0.5)'; |
|
|
setTimeout(() => { |
|
|
gameScreen.style.boxShadow = 'none'; |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
|
|
|
startButton.addEventListener('click', initGame); |
|
|
restartButton.addEventListener('click', initGame); |
|
|
|
|
|
audioToggle.addEventListener('click', () => { |
|
|
audioEnabled = !audioEnabled; |
|
|
if (audioEnabled) { |
|
|
audioToggle.innerHTML = '<i class="fas fa-volume-up"></i>'; |
|
|
if (gameActive) themeMusic.play(); |
|
|
} else { |
|
|
audioToggle.innerHTML = '<i class="fas fa-volume-mute"></i>'; |
|
|
themeMusic.pause(); |
|
|
} |
|
|
}); |
|
|
|
|
|
window.addEventListener('keydown', (e) => { |
|
|
keys[e.key] = true; |
|
|
|
|
|
|
|
|
if (gameActive && (e.key === ' ' || e.key === 'Spacebar')) { |
|
|
fireLaser(); |
|
|
} |
|
|
}); |
|
|
|
|
|
window.addEventListener('keyup', (e) => { |
|
|
keys[e.key] = false; |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('keydown', (e) => { |
|
|
if (e.key === ' ' && e.target === document.body) { |
|
|
e.preventDefault(); |
|
|
} |
|
|
}); |
|
|
</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> |
