diff --git a/footer.js b/footer.js index ec68f22..7f1574a 100644 --- a/footer.js +++ b/footer.js @@ -38,7 +38,7 @@ class Footer extends HTMLElement { // Add event listener for button click this.querySelector('.secret-button').addEventListener('click', () => { - window.location.href = 'secret/secret.html'; // Open the secret.html file + window.location.href = 'secret/explenation.html'; // Open the secret.html file }); } } diff --git a/secret/explenation.html b/secret/explenation.html new file mode 100644 index 0000000..e051da1 --- /dev/null +++ b/secret/explenation.html @@ -0,0 +1,26 @@ + + + + + + Game Landing Page + + + +
+
+ + +
+ +
+

Welcome to the Asteroid Game!

+

In this game, you control a spaceship that shoots at asteroids to avoid destruction and collect items for power-ups.

+

Your goal is to survive as long as possible while scoring points!

+ +
+
+ + + + diff --git a/secret/game.js b/secret/game.js index 1adae6c..cf84dc9 100644 --- a/secret/game.js +++ b/secret/game.js @@ -1,3 +1,4 @@ +"use strict"; // Canvas setup const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); @@ -45,7 +46,36 @@ let rainbowSphereCooldown = 0; // Sphere types const sphereTypes = ['blue', 'yellow', 'green', 'rainbow']; -// Controls +/// Control for left button press and release +function btnMoveLeft(isPressed) { + if (isPressed) { + player.dx = -player.speed; // Start moving left + } else { + player.dx = 0; // Stop moving when button is released + } +} + +// Control for shoot button click (simulates spacebar press) +function btnShoot() { + if (canShoot && !isGameOver) { + shootBullet(); + canShoot = false; // Prevent shooting until the button is "released" + } +} + +// Control for right button press and release +function btnMoveRight(isPressed) { + if (isPressed) { + player.dx = player.speed; // Start moving right + } else { + player.dx = 0; // Stop moving when button is released + } +} + +document.getElementById('shootBtn').addEventListener('mouseup', () => { + canShoot = true; // Allow shooting again when button is released +}); + window.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed; if (e.key === 'ArrowRight' || e.key === 'd') player.dx = player.speed; @@ -79,6 +109,8 @@ function shootBullet() { lastBulletTime = now; ammo--; // Decrease ammo + totalBulletsFired++; // Increment total bullets fired + if (rapidFireActive) { // If rapid fire is active, fire bullets continuously with a short delay for (let i = 0; i < 3; i++) { @@ -193,6 +225,7 @@ function updateItems() { } function applyItemEffect(type) { + let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5 if (type === 'blue') { rapidFireActive = true; setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire @@ -209,6 +242,7 @@ function applyItemEffect(type) { shotgunActive = false; }, 15000); // 15 seconds with all effects } + score += points; // Add points when an item is collected } // Collision detection @@ -223,7 +257,9 @@ function checkCollisions() { ) { bullets.splice(bIndex, 1); asteroids.splice(aIndex, 1); - score++; + score += Math.floor(Math.random() * 5) + 1; // Add points when an asteroid is destroyed + // Visual feedback for destroyed asteroid + createExplosion(asteroid.x, asteroid.y); } }); }); @@ -240,6 +276,15 @@ function checkCollisions() { }); } +// Explosion effect +function createExplosion(x, y) { + ctx.fillStyle = 'yellow'; + ctx.beginPath(); + ctx.arc(x, y, 20, 0, Math.PI * 2); + ctx.fill(); + setTimeout(() => ctx.clearRect(x - 20, y - 20, 40, 40), 200); // Clear explosion after 200ms +} + // Draw elements function drawPlayer() { ctx.fillStyle = player.color; @@ -320,23 +365,12 @@ function gameLoop() { drawGameOver(); if (!isGameOver) { - if (Math.random() < 0.02) { - createAsteroid(); - } - - if (Math.random() < 0.02) { - createItem(); - } - } - - // Difficulty increase over time - if (score > 0 && score % 50 === 0) { - asteroidSpawnInterval -= difficultyIncreaseRate; // Increase spawn rate (faster asteroids) - asteroidSpeedMultiplier += difficultyIncreaseRate; // Increase speed multiplier + if (Math.random() < 0.01) createAsteroid(); // 1% chance every frame to spawn an asteroid + if (Math.random() < 0.005) createItem(); // 0.5% chance to spawn an item } requestAnimationFrame(gameLoop); } -// Start the game +// Start game loop gameLoop(); diff --git a/secret/secret.html b/secret/secret.html index afa0e3b..4cce9e5 100644 --- a/secret/secret.html +++ b/secret/secret.html @@ -8,6 +8,14 @@ + + +
+ + + +
+ diff --git a/secret/style.css b/secret/style.css index eedaeef..d904269 100644 --- a/secret/style.css +++ b/secret/style.css @@ -1,10 +1,43 @@ body { - margin: 0; - overflow: hidden; + margin: 0; + overflow: hidden; +} + +canvas { + display: block; + background: black; + width: 100%; + height: 100%; +} + +.controls { + display: none; + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: space-between; + width: 80%; +} + +.control-btn { + display: none; + padding: 10px; + font-size: 18px; + background-color: rgba(0, 0, 0, 0.6); + color: white; + border: 1px solid #fff; + border-radius: 5px; + cursor: pointer; + flex-grow: 1; + margin: 0 5px; +} + +@media (max-width: 600px) { + .control-btn { + display: block; + font-size: 16px; + padding: 12px; } - - canvas { - display: block; - background: black; - } - \ No newline at end of file +} diff --git a/secret/styles.css b/secret/styles.css new file mode 100644 index 0000000..062d406 --- /dev/null +++ b/secret/styles.css @@ -0,0 +1,74 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body, html { + height: 100%; + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + background-color: #000; + color: white; + overflow: hidden; + } + + .landing-page { + position: relative; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + .game-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */ + backdrop-filter: blur(8px); /* Apply blur effect to the background */ + z-index: -1; /* Ensures it's in the background */ + pointer-events: none; /* Prevent interaction with the blurred background */ + } + + .content { + text-align: center; + z-index: 1; /* Ensure content appears above the game background */ + padding: 20px; + max-width: 600px; /* Limit the width of the content */ + position: relative; + color: white; + backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */ + } + + h1 { + font-size: 2rem; + margin-bottom: 20px; + } + + p { + font-size: 1.2rem; + margin-bottom: 30px; + } + + button { + padding: 12px 24px; + background-color: #ffcc00; + color: black; + border: none; + font-size: 18px; + cursor: pointer; + border-radius: 5px; + text-transform: uppercase; + transition: background-color 0.3s ease; + } + + button:hover { + background-color: #ff9900; + } + \ No newline at end of file diff --git a/styles.css b/styles.css index 2849708..15b329a 100644 --- a/styles.css +++ b/styles.css @@ -410,4 +410,8 @@ footer { height: 60px; width: 60px; } + + .project-name{ + font-size: 1.3em; + } }