From b507a6b0eae3711d9577282e796e2c4a693ce012 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Tue, 25 Feb 2025 10:04:34 +0100 Subject: [PATCH] formatted like my Boss wants it (help!) --- dropdown.js | 65 +++--- footer.js | 11 +- header.js | 2 +- secret/asteroidDestroyer/game.js | 126 ++++++----- secret/asteroidDestroyer/style.css | 60 +++--- secret/asteroidDestroyer/styles.css | 96 +++++---- secret/endlessRunner/script.js | 136 ++++++------ secret/game.js | 126 ++++++----- secret/guessMyNumber/game.js | 87 ++++---- secret/guessMyNumber/styles.css | 226 ++++++++++---------- secret/guessMyNumber/styles.js | 174 +++++++++++---- secret/mineSweeper/script.js | 321 +++++++++++++++------------- secret/mineSweeper/styles.css | 132 ++++++------ secret/snake/game.js | 204 +++++++++--------- secret/snake/styles.css | 272 +++++++++++------------ secret/snake/styles.js | 158 ++++++++++---- secret/styles.css | 194 +++++++++-------- styles.css | 29 ++- webGames/styles.css | 142 ++++++------ 19 files changed, 1425 insertions(+), 1136 deletions(-) diff --git a/dropdown.js b/dropdown.js index 5d28b26..fc97817 100644 --- a/dropdown.js +++ b/dropdown.js @@ -18,39 +18,44 @@ * along with this program. If not, see . */ document.addEventListener("DOMContentLoaded", () => { - const menu = document.querySelector(".menu"); - const burgerMenu = document.querySelector(".burger-menu"); + const menu = document.querySelector(".menu"); + const burgerMenu = document.querySelector(".burger-menu"); - if (!menu || !burgerMenu) { - console.warn("Menu or burger menu element not found. Ensure they exist in the DOM."); - return; + if (!menu || !burgerMenu) { + console.warn( + "Menu or burger menu element not found. Ensure they exist in the DOM." + ); + return; + } + + // Toggle the menu visibility + function toggleMenu() { + menu.classList.toggle("active"); + + if (menu.classList.contains("active")) { + // Add click listener to close menu when clicking outside + document.addEventListener("click", closeMenu); + } else { + // Remove the click listener when menu is closed + document.removeEventListener("click", closeMenu); } + } - // Toggle the menu visibility - function toggleMenu() { - menu.classList.toggle("active"); - - if (menu.classList.contains("active")) { - // Add click listener to close menu when clicking outside - document.addEventListener("click", closeMenu); - } else { - // Remove the click listener when menu is closed - document.removeEventListener("click", closeMenu); - } + // Close the menu if clicking outside of it + function closeMenu(event) { + if ( + !menu.contains(event.target) && + !event.target.classList.contains("burger-menu") + ) { + menu.classList.remove("active"); + document.removeEventListener("click", closeMenu); } + } - // Close the menu if clicking outside of it - function closeMenu(event) { - if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) { - menu.classList.remove("active"); - document.removeEventListener("click", closeMenu); - } - } - - // Attach click event to the burger menu button - burgerMenu.addEventListener("click", (event) => { - event.stopPropagation(); // Prevent click from immediately triggering closeMenu - toggleMenu(); - }); + // Attach click event to the burger menu button + burgerMenu.addEventListener("click", (event) => { + event.stopPropagation(); // Prevent click from immediately triggering closeMenu + toggleMenu(); + }); }); -// @license-end \ No newline at end of file +// @license-end diff --git a/footer.js b/footer.js index 849c82d..3aed36c 100644 --- a/footer.js +++ b/footer.js @@ -37,17 +37,16 @@ class Footer extends HTMLElement { `; // Add event listener for button click - this.querySelector('.secret-button').addEventListener('click', () => { - window.open('secret/index.html', '_blank'); + this.querySelector(".secret-button").addEventListener("click", () => { + window.open("secret/index.html", "_blank"); }); } } -customElements.define('footer-component', Footer); - +customElements.define("footer-component", Footer); // CSS for the hidden button -const style = document.createElement('style'); +const style = document.createElement("style"); style.textContent = ` .secret-button { display: none; @@ -66,4 +65,4 @@ style.textContent = ` `; document.head.appendChild(style); -// @license-end \ No newline at end of file +// @license-end diff --git a/header.js b/header.js index 3bd9f3c..6cb9811 100644 --- a/header.js +++ b/header.js @@ -42,5 +42,5 @@ class Header extends HTMLElement { } } -customElements.define('header-component', Header); +customElements.define("header-component", Header); // @license-end diff --git a/secret/asteroidDestroyer/game.js b/secret/asteroidDestroyer/game.js index d792739..2ea6461 100644 --- a/secret/asteroidDestroyer/game.js +++ b/secret/asteroidDestroyer/game.js @@ -1,7 +1,7 @@ "use strict"; // Canvas setup -const canvas = document.getElementById('gameCanvas'); -const ctx = canvas.getContext('2d'); +const canvas = document.getElementById("gameCanvas"); +const ctx = canvas.getContext("2d"); const targetFPS = 60; const targetFrameTime = 1000 / targetFPS; canvas.width = window.innerWidth; @@ -15,9 +15,9 @@ const player = { y: canvas.height - 60, width: 40, height: 40, - color: 'white', + color: "white", speed: 5, - dx: 0 + dx: 0, }; let bullets = []; @@ -48,14 +48,14 @@ let greenSphereCooldown = 0; let rainbowSphereCooldown = 0; // Sphere types -const sphereTypes = ['blue', 'yellow', 'green', 'rainbow']; +const sphereTypes = ["blue", "yellow", "green", "rainbow"]; /// Control for left button press and release function btnMoveLeft(isPressed) { if (isPressed) { - player.dx = -player.speed; // Start moving left + player.dx = -player.speed; // Start moving left } else { - player.dx = 0; // Stop moving when button is released + player.dx = 0; // Stop moving when button is released } } @@ -70,37 +70,42 @@ function btnShoot() { // Control for right button press and release function btnMoveRight(isPressed) { if (isPressed) { - player.dx = player.speed; // Start moving right + player.dx = player.speed; // Start moving right } else { - player.dx = 0; // Stop moving when button is released + player.dx = 0; // Stop moving when button is released } } -document.getElementById('shootBtn').addEventListener('mouseup', () => { +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; +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; // Shoot only if it's not a hold, and we can shoot - if (e.key === ' ' && canShoot && !isGameOver) { + if (e.key === " " && canShoot && !isGameOver) { shootBullet(); canShoot = false; // Prevent shooting until the key is released } - if (e.key === 'r' && isGameOver) restartGame(); + if (e.key === "r" && isGameOver) restartGame(); }); -window.addEventListener('keyup', (e) => { +window.addEventListener("keyup", (e) => { // Stop moving when either the arrow keys or the 'a'/'d' keys are released - if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'a' || e.key === 'd') { + if ( + e.key === "ArrowLeft" || + e.key === "ArrowRight" || + e.key === "a" || + e.key === "d" + ) { player.dx = 0; } // Allow shooting again when the space key is released - if (e.key === ' ') { + if (e.key === " ") { canShoot = true; } }); @@ -124,8 +129,8 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: 'yellow', - speed: 7 + color: "yellow", + speed: 7, }); }, i * 50); // Fire bullets with 50ms delay between shots } @@ -137,9 +142,9 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: 'yellow', + color: "yellow", speed: 7, - angle: i * 10 // Spray the bullets at different angles + angle: i * 10, // Spray the bullets at different angles }); } } else { @@ -149,15 +154,15 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: 'yellow', - speed: 7 + color: "yellow", + speed: 7, }); } } // Generate random color function getRandomColor() { - const colors = ['red', 'blue', 'green', 'orange', 'purple', 'pink']; + const colors = ["red", "blue", "green", "orange", "purple", "pink"]; return colors[Math.floor(Math.random() * colors.length)]; } @@ -170,13 +175,14 @@ function createAsteroid() { width: size, height: size, color: getRandomColor(), - speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier // Faster initial speed + speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier, // Faster initial speed }); } // Item mechanics function createItem() { - const randomType = sphereTypes[Math.floor(Math.random() * sphereTypes.length)]; + const randomType = + sphereTypes[Math.floor(Math.random() * sphereTypes.length)]; const size = 30; const x = Math.random() * canvas.width; items.push({ @@ -185,8 +191,15 @@ function createItem() { width: size, height: size, type: randomType, - color: randomType === 'blue' ? 'blue' : randomType === 'yellow' ? 'yellow' : randomType === 'green' ? 'green' : 'rainbow', - speed: 3 + color: + randomType === "blue" + ? "blue" + : randomType === "yellow" + ? "yellow" + : randomType === "green" + ? "green" + : "rainbow", + speed: 3, }); } @@ -194,7 +207,8 @@ function createItem() { function updatePlayer() { player.x += player.dx; if (player.x < 0) player.x = 0; - if (player.x + player.width > canvas.width) player.x = canvas.width - player.width; + if (player.x + player.width > canvas.width) + player.x = canvas.width - player.width; } function updateBullets() { @@ -230,15 +244,15 @@ function updateItems() { function applyItemEffect(type) { let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5 - if (type === 'blue') { + if (type === "blue") { rapidFireActive = true; - setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire - } else if (type === 'yellow') { + setTimeout(() => (rapidFireActive = false), 15000); // 15 seconds of rapid fire + } else if (type === "yellow") { shotgunActive = true; - setTimeout(() => shotgunActive = false, 30000); // 30 seconds of shotgun - } else if (type === 'green') { + setTimeout(() => (shotgunActive = false), 30000); // 30 seconds of shotgun + } else if (type === "green") { ammo = 100; // Refill ammo - } else if (type === 'rainbow') { + } else if (type === "rainbow") { rapidFireActive = true; shotgunActive = true; setTimeout(() => { @@ -282,7 +296,7 @@ function checkCollisions() { // Explosion effect function createExplosion(x, y) { - ctx.fillStyle = 'yellow'; + ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.arc(x, y, 20, 0, Math.PI * 2); ctx.fill(); @@ -313,33 +327,47 @@ function drawItems() { items.forEach((item) => { ctx.fillStyle = item.color; ctx.beginPath(); - ctx.arc(item.x + item.width / 2, item.y + item.height / 2, item.width / 2, 0, Math.PI * 2); + ctx.arc( + item.x + item.width / 2, + item.y + item.height / 2, + item.width / 2, + 0, + Math.PI * 2 + ); ctx.fill(); }); } function drawScore() { - ctx.fillStyle = 'white'; - ctx.font = '24px Arial'; + ctx.fillStyle = "white"; + ctx.font = "24px Arial"; ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner } function drawAmmo() { - ctx.fillStyle = 'white'; - ctx.font = '24px Arial'; + ctx.fillStyle = "white"; + ctx.font = "24px Arial"; ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner } function drawGameOver() { if (isGameOver) { - ctx.fillStyle = 'white'; - ctx.font = '40px Arial'; - ctx.textAlign = 'center'; - ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40); - ctx.font = '24px Arial'; + ctx.fillStyle = "white"; + ctx.font = "40px Arial"; + ctx.textAlign = "center"; + ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 40); + ctx.font = "24px Arial"; ctx.fillText(`Total Score: ${score}`, canvas.width / 2, canvas.height / 2); - ctx.fillText(`Bullets Fired: ${totalBulletsFired}`, canvas.width / 2, canvas.height / 2 + 40); - ctx.fillText('Press "R" to Restart', canvas.width / 2, canvas.height / 2 + 80); + ctx.fillText( + `Bullets Fired: ${totalBulletsFired}`, + canvas.width / 2, + canvas.height / 2 + 40 + ); + ctx.fillText( + 'Press "R" to Restart', + canvas.width / 2, + canvas.height / 2 + 80 + ); } } diff --git a/secret/asteroidDestroyer/style.css b/secret/asteroidDestroyer/style.css index be1817f..e90a6ad 100644 --- a/secret/asteroidDestroyer/style.css +++ b/secret/asteroidDestroyer/style.css @@ -1,43 +1,43 @@ body { - margin: 0; - overflow: hidden; + margin: 0; + overflow: hidden; } canvas { - display: block; - background: black; - width: 100%; - height: 100%; + 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%; + 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; + 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; - } +@media (max-width: 600px) { + .control-btn { + display: block; + font-size: 16px; + padding: 12px; + } } diff --git a/secret/asteroidDestroyer/styles.css b/secret/asteroidDestroyer/styles.css index b72528c..7d92d64 100644 --- a/secret/asteroidDestroyer/styles.css +++ b/secret/asteroidDestroyer/styles.css @@ -1,74 +1,76 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + 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; + 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; + 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 */ + 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 */ + 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; + font-size: 2rem; + margin-bottom: 20px; } p { - font-size: 1.2rem; - margin-bottom: 30px; + 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; + 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; + background-color: #ff9900; } diff --git a/secret/endlessRunner/script.js b/secret/endlessRunner/script.js index c1f200f..59df696 100644 --- a/secret/endlessRunner/script.js +++ b/secret/endlessRunner/script.js @@ -1,78 +1,90 @@ import { useEffect, useRef, useState } from "react"; export default function EndlessRunner() { - const canvasRef = useRef(null); - const [running, setRunning] = useState(true); - const player = { x: 50, y: 150, width: 20, height: 20, dy: 0 }; - const gravity = 0.5; - let obstacles = []; - let score = 0; + const canvasRef = useRef(null); + const [running, setRunning] = useState(true); + const player = { x: 50, y: 150, width: 20, height: 20, dy: 0 }; + const gravity = 0.5; + let obstacles = []; + let score = 0; - useEffect(() => { - const canvas = canvasRef.current; - const ctx = canvas.getContext("2d"); - canvas.width = window.innerWidth; - canvas.height = 300; + useEffect(() => { + const canvas = canvasRef.current; + const ctx = canvas.getContext("2d"); + canvas.width = window.innerWidth; + canvas.height = 300; - function update() { - if (!running) return; - ctx.clearRect(0, 0, canvas.width, canvas.height); + function update() { + if (!running) return; + ctx.clearRect(0, 0, canvas.width, canvas.height); - // Player physics - player.dy += gravity; - player.y += player.dy; - if (player.y > 150) { - player.y = 150; - player.dy = 0; - } + // Player physics + player.dy += gravity; + player.y += player.dy; + if (player.y > 150) { + player.y = 150; + player.dy = 0; + } - // Draw player - ctx.fillStyle = "blue"; - ctx.fillRect(player.x, player.y, player.width, player.height); + // Draw player + ctx.fillStyle = "blue"; + ctx.fillRect(player.x, player.y, player.width, player.height); - // Obstacles - if (Math.random() < 0.02) { - obstacles.push({ x: canvas.width, y: 150, width: 20, height: 20 }); - } - obstacles = obstacles.map(obstacle => ({ ...obstacle, x: obstacle.x - 5 })); - obstacles = obstacles.filter(obstacle => obstacle.x + obstacle.width > 0); + // Obstacles + if (Math.random() < 0.02) { + obstacles.push({ x: canvas.width, y: 150, width: 20, height: 20 }); + } + obstacles = obstacles.map((obstacle) => ({ + ...obstacle, + x: obstacle.x - 5, + })); + obstacles = obstacles.filter( + (obstacle) => obstacle.x + obstacle.width > 0 + ); - obstacles.forEach(obstacle => { - ctx.fillStyle = "red"; - ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height); + obstacles.forEach((obstacle) => { + ctx.fillStyle = "red"; + ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height); - // Collision detection - if ( - player.x < obstacle.x + obstacle.width && - player.x + player.width > obstacle.x && - player.y < obstacle.y + obstacle.height && - player.y + player.height > obstacle.y - ) { - setRunning(false); - } - }); - - // Score - score++; - ctx.fillStyle = "black"; - ctx.fillText("Score: " + score, 10, 20); - - requestAnimationFrame(update); + // Collision detection + if ( + player.x < obstacle.x + obstacle.width && + player.x + player.width > obstacle.x && + player.y < obstacle.y + obstacle.height && + player.y + player.height > obstacle.y + ) { + setRunning(false); } + }); - update(); - }, [running]); + // Score + score++; + ctx.fillStyle = "black"; + ctx.fillText("Score: " + score, 10, 20); - function jump() { - if (player.y >= 150) { - player.dy = -10; - } + requestAnimationFrame(update); } - return ( -
- - {!running && } -
- ); + update(); + }, [running]); + + function jump() { + if (player.y >= 150) { + player.dy = -10; + } + } + + return ( +
+ + {!running && ( + + )} +
+ ); } diff --git a/secret/game.js b/secret/game.js index 8231594..36185f6 100644 --- a/secret/game.js +++ b/secret/game.js @@ -1,7 +1,7 @@ "use strict"; // Canvas setup -const canvas = document.getElementById('gameCanvas'); -const ctx = canvas.getContext('2d'); +const canvas = document.getElementById("gameCanvas"); +const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; @@ -11,9 +11,9 @@ const player = { y: canvas.height - 60, width: 40, height: 40, - color: 'white', + color: "white", speed: 5, - dx: 0 + dx: 0, }; let bullets = []; @@ -44,14 +44,14 @@ let greenSphereCooldown = 0; let rainbowSphereCooldown = 0; // Sphere types -const sphereTypes = ['blue', 'yellow', 'green', 'rainbow']; +const sphereTypes = ["blue", "yellow", "green", "rainbow"]; /// Control for left button press and release function btnMoveLeft(isPressed) { if (isPressed) { - player.dx = -player.speed; // Start moving left + player.dx = -player.speed; // Start moving left } else { - player.dx = 0; // Stop moving when button is released + player.dx = 0; // Stop moving when button is released } } @@ -66,37 +66,42 @@ function btnShoot() { // Control for right button press and release function btnMoveRight(isPressed) { if (isPressed) { - player.dx = player.speed; // Start moving right + player.dx = player.speed; // Start moving right } else { - player.dx = 0; // Stop moving when button is released + player.dx = 0; // Stop moving when button is released } } -document.getElementById('shootBtn').addEventListener('mouseup', () => { +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; +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; // Shoot only if it's not a hold, and we can shoot - if (e.key === ' ' && canShoot && !isGameOver) { + if (e.key === " " && canShoot && !isGameOver) { shootBullet(); canShoot = false; // Prevent shooting until the key is released } - if (e.key === 'r' && isGameOver) restartGame(); + if (e.key === "r" && isGameOver) restartGame(); }); -window.addEventListener('keyup', (e) => { +window.addEventListener("keyup", (e) => { // Stop moving when either the arrow keys or the 'a'/'d' keys are released - if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'a' || e.key === 'd') { + if ( + e.key === "ArrowLeft" || + e.key === "ArrowRight" || + e.key === "a" || + e.key === "d" + ) { player.dx = 0; } // Allow shooting again when the space key is released - if (e.key === ' ') { + if (e.key === " ") { canShoot = true; } }); @@ -120,8 +125,8 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: 'yellow', - speed: 7 + color: "yellow", + speed: 7, }); }, i * 50); // Fire bullets with 50ms delay between shots } @@ -133,9 +138,9 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: 'yellow', + color: "yellow", speed: 7, - angle: i * 10 // Spray the bullets at different angles + angle: i * 10, // Spray the bullets at different angles }); } } else { @@ -145,15 +150,15 @@ function shootBullet() { y: player.y, width: 5, height: 10, - color: 'yellow', - speed: 7 + color: "yellow", + speed: 7, }); } } // Generate random color function getRandomColor() { - const colors = ['red', 'blue', 'green', 'orange', 'purple', 'pink']; + const colors = ["red", "blue", "green", "orange", "purple", "pink"]; return colors[Math.floor(Math.random() * colors.length)]; } @@ -166,13 +171,14 @@ function createAsteroid() { width: size, height: size, color: getRandomColor(), - speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier // Faster initial speed + speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier, // Faster initial speed }); } // Item mechanics function createItem() { - const randomType = sphereTypes[Math.floor(Math.random() * sphereTypes.length)]; + const randomType = + sphereTypes[Math.floor(Math.random() * sphereTypes.length)]; const size = 30; const x = Math.random() * canvas.width; items.push({ @@ -181,8 +187,15 @@ function createItem() { width: size, height: size, type: randomType, - color: randomType === 'blue' ? 'blue' : randomType === 'yellow' ? 'yellow' : randomType === 'green' ? 'green' : 'rainbow', - speed: 3 + color: + randomType === "blue" + ? "blue" + : randomType === "yellow" + ? "yellow" + : randomType === "green" + ? "green" + : "rainbow", + speed: 3, }); } @@ -190,7 +203,8 @@ function createItem() { function updatePlayer() { player.x += player.dx; if (player.x < 0) player.x = 0; - if (player.x + player.width > canvas.width) player.x = canvas.width - player.width; + if (player.x + player.width > canvas.width) + player.x = canvas.width - player.width; } function updateBullets() { @@ -226,15 +240,15 @@ function updateItems() { function applyItemEffect(type) { let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5 - if (type === 'blue') { + if (type === "blue") { rapidFireActive = true; - setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire - } else if (type === 'yellow') { + setTimeout(() => (rapidFireActive = false), 15000); // 15 seconds of rapid fire + } else if (type === "yellow") { shotgunActive = true; - setTimeout(() => shotgunActive = false, 30000); // 30 seconds of shotgun - } else if (type === 'green') { + setTimeout(() => (shotgunActive = false), 30000); // 30 seconds of shotgun + } else if (type === "green") { ammo = 100; // Refill ammo - } else if (type === 'rainbow') { + } else if (type === "rainbow") { rapidFireActive = true; shotgunActive = true; setTimeout(() => { @@ -278,7 +292,7 @@ function checkCollisions() { // Explosion effect function createExplosion(x, y) { - ctx.fillStyle = 'yellow'; + ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.arc(x, y, 20, 0, Math.PI * 2); ctx.fill(); @@ -309,33 +323,47 @@ function drawItems() { items.forEach((item) => { ctx.fillStyle = item.color; ctx.beginPath(); - ctx.arc(item.x + item.width / 2, item.y + item.height / 2, item.width / 2, 0, Math.PI * 2); + ctx.arc( + item.x + item.width / 2, + item.y + item.height / 2, + item.width / 2, + 0, + Math.PI * 2 + ); ctx.fill(); }); } function drawScore() { - ctx.fillStyle = 'white'; - ctx.font = '24px Arial'; + ctx.fillStyle = "white"; + ctx.font = "24px Arial"; ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner } function drawAmmo() { - ctx.fillStyle = 'white'; - ctx.font = '24px Arial'; + ctx.fillStyle = "white"; + ctx.font = "24px Arial"; ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner } function drawGameOver() { if (isGameOver) { - ctx.fillStyle = 'white'; - ctx.font = '40px Arial'; - ctx.textAlign = 'center'; - ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40); - ctx.font = '24px Arial'; + ctx.fillStyle = "white"; + ctx.font = "40px Arial"; + ctx.textAlign = "center"; + ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 40); + ctx.font = "24px Arial"; ctx.fillText(`Total Score: ${score}`, canvas.width / 2, canvas.height / 2); - ctx.fillText(`Bullets Fired: ${totalBulletsFired}`, canvas.width / 2, canvas.height / 2 + 40); - ctx.fillText('Press "R" to Restart', canvas.width / 2, canvas.height / 2 + 80); + ctx.fillText( + `Bullets Fired: ${totalBulletsFired}`, + canvas.width / 2, + canvas.height / 2 + 40 + ); + ctx.fillText( + 'Press "R" to Restart', + canvas.width / 2, + canvas.height / 2 + 80 + ); } } diff --git a/secret/guessMyNumber/game.js b/secret/guessMyNumber/game.js index cd5803d..9a3436d 100644 --- a/secret/guessMyNumber/game.js +++ b/secret/guessMyNumber/game.js @@ -1,54 +1,65 @@ -'use strict'; +"use strict"; const targetNum = Math.trunc(Math.random() * 20) + 1; -let highScore = Number(localStorage.getItem('highscore')) || 0; -let userGuess = 10; // Default guess +let highScore = Number(localStorage.getItem("highscore")) || 0; +let userGuess = 10; // Default guess let currScore = 20; -const screenEl = document.querySelector('.screen'); -const msgEl = document.querySelector('.message'); -const guessInput = document.querySelector('#guess'); -const scoreEl = document.querySelector('.score'); -const highScoreEl = document.querySelector('.highScore'); -const checkBtn = document.querySelector('#check'); -const restartBtn = document.querySelector('#restart'); -const incBtn = document.querySelector('#up'); -const decBtn = document.querySelector('#down'); +const screenEl = document.querySelector(".screen"); +const msgEl = document.querySelector(".message"); +const guessInput = document.querySelector("#guess"); +const scoreEl = document.querySelector(".score"); +const highScoreEl = document.querySelector(".highScore"); +const checkBtn = document.querySelector("#check"); +const restartBtn = document.querySelector("#restart"); +const incBtn = document.querySelector("#up"); +const decBtn = document.querySelector("#down"); -const setMsg = msg => msgEl.textContent = msg; -const setScore = score => scoreEl.textContent = `Score: ${currScore = score}`; +const setMsg = (msg) => (msgEl.textContent = msg); +const setScore = (score) => + (scoreEl.textContent = `Score: ${(currScore = score)}`); const setHighScore = () => { - highScoreEl.textContent = `Highscore: ${highScore}`; - localStorage.setItem('highscore', highScore); + highScoreEl.textContent = `Highscore: ${highScore}`; + localStorage.setItem("highscore", highScore); }; -const changeColor = color => screenEl.style.backgroundColor = color; +const changeColor = (color) => (screenEl.style.backgroundColor = color); -checkBtn.addEventListener('click', () => { - userGuess = Number(guessInput.textContent); - if (!userGuess || userGuess < 1 || userGuess > 20) { - setMsg("Please enter a valid number between 1 and 20."); - } else if (userGuess === targetNum) { - highScore = Math.max(highScore, currScore); - setHighScore(); - setMsg(currScore !== 20 ? 'Correct Number!' : 'Are you sure you didn\'t cheat?'); - changeColor(currScore !== 20 ? '#1ba100' : '#FFC300'); +checkBtn.addEventListener("click", () => { + userGuess = Number(guessInput.textContent); + if (!userGuess || userGuess < 1 || userGuess > 20) { + setMsg("Please enter a valid number between 1 and 20."); + } else if (userGuess === targetNum) { + highScore = Math.max(highScore, currScore); + setHighScore(); + setMsg( + currScore !== 20 ? "Correct Number!" : "Are you sure you didn't cheat?" + ); + changeColor(currScore !== 20 ? "#1ba100" : "#FFC300"); + } else { + setMsg(userGuess > targetNum ? "Too High!" : "Too Low!"); + if (currScore > 1) { + setScore(currScore - 1); } else { - setMsg(userGuess > targetNum ? 'Too High!' : 'Too Low!'); - if (currScore > 1) { - setScore(currScore - 1); - } else { - setScore(1); - setMsg("You lost the game!"); - changeColor('#a10000'); - } + setScore(1); + setMsg("You lost the game!"); + changeColor("#a10000"); } + } }); -restartBtn.addEventListener('click', () => location.reload()); -incBtn.addEventListener('click', () => guessInput.textContent = Math.min(Number(guessInput.textContent) + 1, 20)); -decBtn.addEventListener('click', () => guessInput.textContent = Math.max(Number(guessInput.textContent) - 1, 1)); +restartBtn.addEventListener("click", () => location.reload()); +incBtn.addEventListener( + "click", + () => + (guessInput.textContent = Math.min(Number(guessInput.textContent) + 1, 20)) +); +decBtn.addEventListener( + "click", + () => + (guessInput.textContent = Math.max(Number(guessInput.textContent) - 1, 1)) +); guessInput.textContent = userGuess; -setMsg('Guess a number'); +setMsg("Guess a number"); setScore(currScore); setHighScore(); diff --git a/secret/guessMyNumber/styles.css b/secret/guessMyNumber/styles.css index ef9039a..3a50aec 100644 --- a/secret/guessMyNumber/styles.css +++ b/secret/guessMyNumber/styles.css @@ -1,189 +1,189 @@ /* Base Reset */ body, html { - margin: 0; - padding: 0; - font-family: monospace; - background-color: #3a2d56; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; + margin: 0; + padding: 0; + font-family: monospace; + background-color: #3a2d56; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } /* GameBoy Layout */ .gameboy { - background-color: #5f4c82; /* Game Boy Color purple shell */ - width: 441px; - height: 735px; - border-radius: 20px; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); - display: flex; - flex-direction: column; - align-items: center; - padding: 10px; - position: relative; + background-color: #5f4c82; /* Game Boy Color purple shell */ + width: 441px; + height: 735px; + border-radius: 20px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); + display: flex; + flex-direction: column; + align-items: center; + padding: 10px; + position: relative; } -@media(max-width: 768px) { - .gameboy { - width: 100vw; - height: 100vh; - border-radius: 0; - } +@media (max-width: 768px) { + .gameboy { + width: 100vw; + height: 100vh; + border-radius: 0; + } } /* Screen */ .screen { - background-color: #306230; /* Game Boy green screen */ - border: 4px solid #0f380f; - width: 90%; - height: 55%; - margin-top: 20px; - border-radius: 10px; - display: flex; - justify-content: center; - align-items: center; - box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); - overflow: hidden; + background-color: #306230; /* Game Boy green screen */ + border: 4px solid #0f380f; + width: 90%; + height: 55%; + margin-top: 20px; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); + overflow: hidden; } .game { - text-align: center; - width: 90%; + text-align: center; + width: 90%; } /* Titles */ h1 { - font-size: 2rem; /* Increased font size */ - margin-bottom: 10px; - text-transform: uppercase; + font-size: 2rem; /* Increased font size */ + margin-bottom: 10px; + text-transform: uppercase; } /* Guess Display */ .guess-display { - background-color: #9bbc0f; - color: #0f380f; - border: 2px solid #0f380f; - font-size: 2rem; /* Increased font size */ - width: 80px; /* Increased width */ - text-align: center; - margin: 10px auto; - padding: 10px; /* Increased padding */ - border-radius: 4px; + background-color: #9bbc0f; + color: #0f380f; + border: 2px solid #0f380f; + font-size: 2rem; /* Increased font size */ + width: 80px; /* Increased width */ + text-align: center; + margin: 10px auto; + padding: 10px; /* Increased padding */ + border-radius: 4px; } /* Messages */ .message, .score, .highScore { - font-size: 1.4rem; /* Increased font size */ - margin: 5px 0; + font-size: 1.4rem; /* Increased font size */ + margin: 5px 0; } .description, .description p { - font-size: 1.2rem; - margin: 0 auto; - padding: 0 auto; + font-size: 1.2rem; + margin: 0 auto; + padding: 0 auto; } /* Controls Section */ .controls { - margin-top: 20px; - display: flex; - justify-content: space-between; - width: 80%; - align-items: center; + margin-top: 20px; + display: flex; + justify-content: space-between; + width: 80%; + align-items: center; } /* D-Pad */ .dpad { - position: relative; - width: 120px; /* Increased size */ - height: 120px; /* Increased size */ + position: relative; + width: 120px; /* Increased size */ + height: 120px; /* Increased size */ } /* Base Styling for D-Pad Buttons */ .dpad-btn { - background-color: #0f380f; - color: #9bbc0f; - border: none; - border-radius: 5px; - position: absolute; - width: 42px; - height: 42px; - font-size: 1.5rem; /* Increased size */ - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - z-index: 1; + background-color: #0f380f; + color: #9bbc0f; + border: none; + border-radius: 5px; + position: absolute; + width: 42px; + height: 42px; + font-size: 1.5rem; /* Increased size */ + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + z-index: 1; } .dpad-btn.up { - top: 0; - left: 50%; - transform: translateX(-50%); + top: 0; + left: 50%; + transform: translateX(-50%); } .dpad-btn.down { - bottom: 0; - left: 50%; - transform: translateX(-50%); + bottom: 0; + left: 50%; + transform: translateX(-50%); } .dpad-btn.left { - top: 50%; - left: 0; - transform: translateY(-50%); + top: 50%; + left: 0; + transform: translateY(-50%); } .dpad-btn.right { - top: 50%; - right: 0; - transform: translateY(-50%); + top: 50%; + right: 0; + transform: translateY(-50%); } /* D-Pad Center to Connect Buttons */ .dpad-center { - background-color: #0f380f; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 40px; - height: 40px; - border: 2px solid #9cbc0f00; - z-index: 0; - border-radius: 5px; + background-color: #0f380f; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + border: 2px solid #9cbc0f00; + z-index: 0; + border-radius: 5px; } /* A and B Buttons */ .action-buttons { - display: flex; - flex-direction: column; - justify-content: space-between; - height: 140px; /* Increased height */ + display: flex; + flex-direction: column; + justify-content: space-between; + height: 140px; /* Increased height */ } .btn { - background-color: #0f380f; - color: #9bbc0f; - border: 2px solid #9bbc0f; - border-radius: 50%; - width: 60px; - height: 60px; - font-size: 1.8rem; /* Increased font size */ - cursor: pointer; - transition: transform 0.1s, background-color 0.2s; + background-color: #0f380f; + color: #9bbc0f; + border: 2px solid #9bbc0f; + border-radius: 50%; + width: 60px; + height: 60px; + font-size: 1.8rem; /* Increased font size */ + cursor: pointer; + transition: transform 0.1s, background-color 0.2s; } .btn:hover { - background-color: #9bbc0f; - color: #0f380f; + background-color: #9bbc0f; + color: #0f380f; } .btn:active { - transform: scale(0.9); + transform: scale(0.9); } diff --git a/secret/guessMyNumber/styles.js b/secret/guessMyNumber/styles.js index d7357df..8ccae52 100644 --- a/secret/guessMyNumber/styles.js +++ b/secret/guessMyNumber/styles.js @@ -1,62 +1,148 @@ -'use strict'; -const left = document.querySelector('#left'); -const right = document.querySelector('#right'); -const gameboy = document.querySelector('.gameboy'); +"use strict"; +const left = document.querySelector("#left"); +const right = document.querySelector("#right"); +const gameboy = document.querySelector(".gameboy"); const html = document.documentElement; const body = document.body; -const screen = document.querySelector('.screen'); -const dpadButtons = document.querySelectorAll('.dpad-btn'); -const dpadCenter = document.querySelector('.dpad-center'); // Darker variant -const actionButtons = document.querySelectorAll('.btn'); +const screen = document.querySelector(".screen"); +const dpadButtons = document.querySelectorAll(".dpad-btn"); +const dpadCenter = document.querySelector(".dpad-center"); // Darker variant +const actionButtons = document.querySelectorAll(".btn"); const colors = [ - { gameboyColor: '#B39DDB', htmlColor: '#D1C4E9', screenColor: '#E1BEE7', buttonColor: '#673AB7', buttonTextColor: '#FFFFFF', dpadCenterColor: '#5E35B1' }, - { gameboyColor: '#FFC107', htmlColor: '#FFF9C4', screenColor: '#FFEB3B', buttonColor: '#FF9800', buttonTextColor: '#000000', dpadCenterColor: '#EF6C00' }, - { gameboyColor: '#8BC34A', htmlColor: '#C5E1A5', screenColor: '#A5D6A7', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#E64A19' }, - { gameboyColor: '#F44336', htmlColor: '#FFCDD2', screenColor: '#EF9A9A', buttonColor: '#E91E63', buttonTextColor: '#FFFFFF', dpadCenterColor: '#C2185B' }, - { gameboyColor: '#03A9F4', htmlColor: '#BBDEFB', screenColor: '#90CAF9', buttonColor: '#FFEB3B', buttonTextColor: '#000000', dpadCenterColor: '#0277BD' }, - { gameboyColor: '#FF7043', htmlColor: '#FFCCBC', screenColor: '#FFAB91', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#D84315' }, - { gameboyColor: '#9C27B0', htmlColor: '#E1BEE7', screenColor: '#D1C4E9', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF', dpadCenterColor: '#6A1B9A' }, - { gameboyColor: '#FFD700', htmlColor: '#FFF9C4', screenColor: '#FFF59D', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF', dpadCenterColor: '#F57F17' }, - { gameboyColor: '#009688', htmlColor: '#B2DFDB', screenColor: '#80CBC4', buttonColor: '#4CAF50', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00796B' }, - { gameboyColor: '#795548', htmlColor: '#D7CCC8', screenColor: '#A1887F', buttonColor: '#9E9E9E', buttonTextColor: '#000000', dpadCenterColor: '#5D4037' }, - { gameboyColor: '#FF5733', htmlColor: '#FFCCCB', screenColor: '#FFABAB', buttonColor: '#C70039', buttonTextColor: '#FFFFFF', dpadCenterColor: '#B71C1C' }, - { gameboyColor: '#00BCD4', htmlColor: '#B2EBF2', screenColor: '#80DEEA', buttonColor: '#00ACC1', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00838F' } + { + gameboyColor: "#B39DDB", + htmlColor: "#D1C4E9", + screenColor: "#E1BEE7", + buttonColor: "#673AB7", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#5E35B1", + }, + { + gameboyColor: "#FFC107", + htmlColor: "#FFF9C4", + screenColor: "#FFEB3B", + buttonColor: "#FF9800", + buttonTextColor: "#000000", + dpadCenterColor: "#EF6C00", + }, + { + gameboyColor: "#8BC34A", + htmlColor: "#C5E1A5", + screenColor: "#A5D6A7", + buttonColor: "#FF5722", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#E64A19", + }, + { + gameboyColor: "#F44336", + htmlColor: "#FFCDD2", + screenColor: "#EF9A9A", + buttonColor: "#E91E63", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#C2185B", + }, + { + gameboyColor: "#03A9F4", + htmlColor: "#BBDEFB", + screenColor: "#90CAF9", + buttonColor: "#FFEB3B", + buttonTextColor: "#000000", + dpadCenterColor: "#0277BD", + }, + { + gameboyColor: "#FF7043", + htmlColor: "#FFCCBC", + screenColor: "#FFAB91", + buttonColor: "#FF5722", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#D84315", + }, + { + gameboyColor: "#9C27B0", + htmlColor: "#E1BEE7", + screenColor: "#D1C4E9", + buttonColor: "#7B1FA2", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#6A1B9A", + }, + { + gameboyColor: "#FFD700", + htmlColor: "#FFF9C4", + screenColor: "#FFF59D", + buttonColor: "#FF9800", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#F57F17", + }, + { + gameboyColor: "#009688", + htmlColor: "#B2DFDB", + screenColor: "#80CBC4", + buttonColor: "#4CAF50", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#00796B", + }, + { + gameboyColor: "#795548", + htmlColor: "#D7CCC8", + screenColor: "#A1887F", + buttonColor: "#9E9E9E", + buttonTextColor: "#000000", + dpadCenterColor: "#5D4037", + }, + { + gameboyColor: "#FF5733", + htmlColor: "#FFCCCB", + screenColor: "#FFABAB", + buttonColor: "#C70039", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#B71C1C", + }, + { + gameboyColor: "#00BCD4", + htmlColor: "#B2EBF2", + screenColor: "#80DEEA", + buttonColor: "#00ACC1", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#00838F", + }, ]; -let currentColorIndex = localStorage.getItem('gameboyColorIndex') ? parseInt(localStorage.getItem('gameboyColorIndex')) : 0; +let currentColorIndex = localStorage.getItem("gameboyColorIndex") + ? parseInt(localStorage.getItem("gameboyColorIndex")) + : 0; function updateGameBoyColor() { - gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; - html.style.backgroundColor = colors[currentColorIndex].htmlColor; - body.style.backgroundColor = colors[currentColorIndex].htmlColor; - screen.style.backgroundColor = colors[currentColorIndex].screenColor; + gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; + html.style.backgroundColor = colors[currentColorIndex].htmlColor; + body.style.backgroundColor = colors[currentColorIndex].htmlColor; + screen.style.backgroundColor = colors[currentColorIndex].screenColor; - dpadButtons.forEach(button => { - button.style.backgroundColor = colors[currentColorIndex].buttonColor; - button.style.color = colors[currentColorIndex].buttonTextColor; - }); + dpadButtons.forEach((button) => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); - // Using darker dpad center color - dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; - dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; + // Using darker dpad center color + dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; + dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; - actionButtons.forEach(button => { - button.style.backgroundColor = colors[currentColorIndex].buttonColor; - button.style.color = colors[currentColorIndex].buttonTextColor; - }); + actionButtons.forEach((button) => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); } -left.addEventListener('click', () => { - currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; - localStorage.setItem('gameboyColorIndex', currentColorIndex); - updateGameBoyColor(); +left.addEventListener("click", () => { + currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; + localStorage.setItem("gameboyColorIndex", currentColorIndex); + updateGameBoyColor(); }); -right.addEventListener('click', () => { - currentColorIndex = (currentColorIndex + 1) % colors.length; - localStorage.setItem('gameboyColorIndex', currentColorIndex); - updateGameBoyColor(); +right.addEventListener("click", () => { + currentColorIndex = (currentColorIndex + 1) % colors.length; + localStorage.setItem("gameboyColorIndex", currentColorIndex); + updateGameBoyColor(); }); updateGameBoyColor(); diff --git a/secret/mineSweeper/script.js b/secret/mineSweeper/script.js index d35c436..f30f685 100644 --- a/secret/mineSweeper/script.js +++ b/secret/mineSweeper/script.js @@ -1,173 +1,192 @@ -document.getElementById('startGame').addEventListener('click', function () { - const gridSize = parseInt(document.getElementById('gridSize').value); - const bombs = parseInt(document.getElementById('bombs').value); +document.getElementById("startGame").addEventListener("click", function () { + const gridSize = parseInt(document.getElementById("gridSize").value); + const bombs = parseInt(document.getElementById("bombs").value); - document.getElementById('settings').style.display = 'none'; - document.getElementById('game').style.display = 'block'; + document.getElementById("settings").style.display = "none"; + document.getElementById("game").style.display = "block"; - renderGame(gridSize, bombs); + renderGame(gridSize, bombs); }); -const canvas = document.getElementById('game'); -const ctx = canvas.getContext('2d'); +const canvas = document.getElementById("game"); +const ctx = canvas.getContext("2d"); class Minesweeper { - constructor(width, height, bombs) { - this.size = 25; - this.field = new Array(width); - this.bombs = new Array(width); - for (let x = 0; x < this.field.length; x++) { - this.field[x] = new Array(height); - this.bombs[x] = new Array(height); - for (let y = 0; y < this.field[x].length; y++) { - this.field[x][y] = 1; - this.bombs[x][y] = false; - } - } - - this.bombAmount = bombs > width * height / 2 ? width * height / 2 : bombs; - this.width = width; - this.height = height; - this.firstClick = false; - this.drawField(); + constructor(width, height, bombs) { + this.size = 25; + this.field = new Array(width); + this.bombs = new Array(width); + for (let x = 0; x < this.field.length; x++) { + this.field[x] = new Array(height); + this.bombs[x] = new Array(height); + for (let y = 0; y < this.field[x].length; y++) { + this.field[x][y] = 1; + this.bombs[x][y] = false; + } } - generateBombs() { - for (let i = 0; i < this.bombAmount; i++) { - let x = Math.floor(Math.random() * this.width); - let y = Math.floor(Math.random() * this.height); - (this.bombs[x][y] || this.field[x][y] == 0) ? i-- : this.bombs[x][y] = true; - } - this.firstClick = true; - } + this.bombAmount = + bombs > (width * height) / 2 ? (width * height) / 2 : bombs; + this.width = width; + this.height = height; + this.firstClick = false; + this.drawField(); + } - getNearbyBombs(x, y) { - let counter = 0; - for (let newX = x - 1; newX <= x + 1; newX++) { - for (let newY = y - 1; newY <= y + 1; newY++) { - if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) { - this.bombs[newX][newY] ? counter++ : {}; - } - } - } - return counter; + generateBombs() { + for (let i = 0; i < this.bombAmount; i++) { + let x = Math.floor(Math.random() * this.width); + let y = Math.floor(Math.random() * this.height); + this.bombs[x][y] || this.field[x][y] == 0 + ? i-- + : (this.bombs[x][y] = true); } + this.firstClick = true; + } - checkWin() { - for (let x = 0; x < this.field.length; x++) { - for (let y = 0; y < this.field[x].length; y++) { - if (this.field[x][y] != 0 && !this.bombs[x][y]) { - return; - } else if (this.field[x][y] == 0 && this.bombs[x][y]) { - alert(`[ERROR]: Square (${x}|${y}) should not be a bomb!`); - this.bombs[x][y] = false; - } - } + getNearbyBombs(x, y) { + let counter = 0; + for (let newX = x - 1; newX <= x + 1; newX++) { + for (let newY = y - 1; newY <= y + 1; newY++) { + if ( + newX < this.field.length && + newX >= 0 && + newY < this.field[0].length && + newY >= 0 + ) { + this.bombs[newX][newY] ? counter++ : {}; } - this.drawField(); - alert('You won!'); + } + } + return counter; + } + + checkWin() { + for (let x = 0; x < this.field.length; x++) { + for (let y = 0; y < this.field[x].length; y++) { + if (this.field[x][y] != 0 && !this.bombs[x][y]) { + return; + } else if (this.field[x][y] == 0 && this.bombs[x][y]) { + alert(`[ERROR]: Square (${x}|${y}) should not be a bomb!`); + this.bombs[x][y] = false; + } + } + } + this.drawField(); + alert("You won!"); + window.location.reload(); + } + + markSquare(x, y) { + if (x < this.field.length && y < this.field[0].length) { + switch (this.field[x][y]) { + case 1: + this.field[x][y]++; + break; + case 2: + this.field[x][y]++; + break; + case 3: + this.field[x][y] = 1; + break; + default: + break; + } + this.drawField(); + } + } + + uncoverSquare(x, y) { + if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) { + if (this.bombs[x][y] && this.field[x][y] == 1) { + alert("You lost!"); window.location.reload(); - } - - markSquare(x, y) { - if (x < this.field.length && y < this.field[0].length) { - switch (this.field[x][y]) { - case 1: - this.field[x][y]++; - break; - case 2: - this.field[x][y]++; - break; - case 3: - this.field[x][y] = 1; - break; - default: - break; + } else if (this.field[x][y] == 1) { + this.field[x][y] = 0; + !this.firstClick ? this.generateBombs() : {}; + if (this.getNearbyBombs(x, y) == 0) { + for (let newX = x - 1; newX <= x + 1; newX++) { + for (let newY = y - 1; newY <= y + 1; newY++) { + if ( + newX < this.field.length && + newX >= 0 && + newY < this.field[0].length && + newY >= 0 + ) { + this.field[newX][newY] == 1 + ? this.uncoverSquare(newX, newY) + : {}; + } } - this.drawField(); + } } + } + this.checkWin(); + this.drawField(); + } + } + + drawSquare(x, y, type) { + ctx.lineWidth = 3; + let uncovered = (x + y) % 2 === 0 ? "#D3D3D3" : "#A9A9A9"; + let covered = (x + y) % 2 === 0 ? "#4CAF50" : "#81C784"; + ctx.fillStyle = type != 0 ? covered : uncovered; + ctx.fillRect(x * this.size, y * this.size, this.size, this.size); + ctx.strokeStyle = "#000"; + ctx.strokeRect(x * this.size, y * this.size, this.size, this.size); + + if (type != 1) { + const fontSize = this.size / 2; + const number = this.getNearbyBombs(x, y); + let finalPrint; + ctx.font = `${fontSize}px sans-serif`; + ctx.fillStyle = "#000"; + type == 0 ? (finalPrint = number ? number : " ") : {}; + type == 2 ? (finalPrint = "🚩") : {}; + type == 3 ? (finalPrint = "❓") : {}; + ctx.fillText( + finalPrint, + x * this.size + fontSize / (type == 0 ? 1.5 : 1.8), + y * this.size + fontSize * 1.3 + ); + } + } + + drawField() { + if (window.innerWidth > window.innerHeight) { + this.size = window.innerHeight / (this.field[0].length + 4); + } else { + this.size = window.innerWidth / (this.field.length + 4); } - uncoverSquare(x, y) { - if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) { - if (this.bombs[x][y] && this.field[x][y] == 1) { - alert('You lost!'); - window.location.reload(); - } else if (this.field[x][y] == 1) { - this.field[x][y] = 0; - !this.firstClick ? this.generateBombs() : {}; - if (this.getNearbyBombs(x, y) == 0) { - for (let newX = x - 1; newX <= x + 1; newX++) { - for (let newY = y - 1; newY <= y + 1; newY++) { - if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) { - this.field[newX][newY] == 1 ? this.uncoverSquare(newX, newY) : {}; - } - } - } - } - }; - this.checkWin(); - this.drawField(); - } - } - - drawSquare(x, y, type) { - ctx.lineWidth = 3; - let uncovered = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9'; - let covered = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784'; - ctx.fillStyle = type != 0 ? covered : uncovered; - ctx.fillRect(x * this.size, y * this.size, this.size, this.size); - ctx.strokeStyle = '#000'; - ctx.strokeRect(x * this.size, y * this.size, this.size, this.size); - - if (type != 1) { - const fontSize = this.size / 2; - const number = this.getNearbyBombs(x, y); - let finalPrint; - ctx.font = `${fontSize}px sans-serif`; - ctx.fillStyle = '#000'; - type == 0 ? finalPrint = number ? number : ' ' : {}; - type == 2 ? finalPrint = '🚩' : {}; - type == 3 ? finalPrint = '❓' : {}; - ctx.fillText(finalPrint, x * this.size + fontSize / (type == 0 ? 1.5 : 1.8), y * this.size + fontSize * 1.3); - } - } - - drawField() { - if (window.innerWidth > window.innerHeight) { - this.size = window.innerHeight / (this.field[0].length + 4); - } else { - this.size = window.innerWidth / (this.field.length + 4); - } - - canvas.width = this.size * this.field.length; - canvas.height = this.size * this.field[0].length; - - const offsetX = (canvas.width - (this.field.length * this.size)) / 2; - const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2; - - for (let x = 0; x < this.field.length; x++) { - for (let y = 0; y < this.field[x].length; y++) { - this.drawSquare(x, y, this.field[x][y], offsetX, offsetY); - } - } + canvas.width = this.size * this.field.length; + canvas.height = this.size * this.field[0].length; + + const offsetX = (canvas.width - this.field.length * this.size) / 2; + const offsetY = (canvas.height - this.field[0].length * this.size) / 2; + + for (let x = 0; x < this.field.length; x++) { + for (let y = 0; y < this.field[x].length; y++) { + this.drawSquare(x, y, this.field[x][y], offsetX, offsetY); + } } + } } const renderGame = (gridSize, bombs) => { - let field = new Minesweeper(gridSize, gridSize, bombs); - window.addEventListener('resize', () => field.drawField()); - canvas.addEventListener('click', (event) => { - const rect = canvas.getBoundingClientRect(); - const x = Math.floor((event.clientX - rect.left) / field.size); - const y = Math.floor((event.clientY - rect.top) / field.size); - field.uncoverSquare(x, y); - }); - canvas.addEventListener('contextmenu', (event) => { - event.preventDefault(); - const rect = canvas.getBoundingClientRect(); - const x = Math.floor((event.clientX - rect.left) / field.size); - const y = Math.floor((event.clientY - rect.top) / field.size); - field.markSquare(x, y); - }); + let field = new Minesweeper(gridSize, gridSize, bombs); + window.addEventListener("resize", () => field.drawField()); + canvas.addEventListener("click", (event) => { + const rect = canvas.getBoundingClientRect(); + const x = Math.floor((event.clientX - rect.left) / field.size); + const y = Math.floor((event.clientY - rect.top) / field.size); + field.uncoverSquare(x, y); + }); + canvas.addEventListener("contextmenu", (event) => { + event.preventDefault(); + const rect = canvas.getBoundingClientRect(); + const x = Math.floor((event.clientX - rect.left) / field.size); + const y = Math.floor((event.clientY - rect.top) / field.size); + field.markSquare(x, y); + }); }; diff --git a/secret/mineSweeper/styles.css b/secret/mineSweeper/styles.css index 738993d..8468965 100644 --- a/secret/mineSweeper/styles.css +++ b/secret/mineSweeper/styles.css @@ -1,104 +1,104 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body, html { - height: 100%; - margin: 0; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #121212; - color: #e0e0e0; + height: 100%; + margin: 0; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #121212; + color: #e0e0e0; } #settings { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - margin: auto; - background-color: #1e1e1e; - padding: 40px; - border-radius: 12px; - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); - width: 100%; - max-width: 600px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + margin: auto; + background-color: #1e1e1e; + padding: 40px; + border-radius: 12px; + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); + width: 100%; + max-width: 600px; } h1 { - font-size: 2.5em; - margin-bottom: 20px; - color: #007bff; + font-size: 2.5em; + margin-bottom: 20px; + color: #007bff; } label { - margin-bottom: 12px; - font-size: 20px; - color: #d1d1d1; + margin-bottom: 12px; + font-size: 20px; + color: #d1d1d1; } input[type="number"], input[type="range"], span { - padding: 12px; - margin-bottom: 20px; - width: 100%; - max-width: 400px; - text-align: center; - border: 1px solid #444; - border-radius: 6px; - background-color: #333; - color: #e0e0e0; - font-size: 18px; - transition: border-color 0.3s ease; + padding: 12px; + margin-bottom: 20px; + width: 100%; + max-width: 400px; + text-align: center; + border: 1px solid #444; + border-radius: 6px; + background-color: #333; + color: #e0e0e0; + font-size: 18px; + transition: border-color 0.3s ease; } input[type="number"]:focus, input[type="range"]:focus { - border-color: #007bff; - outline: none; + border-color: #007bff; + outline: none; } button { - padding: 12px 24px; - background-color: #007bff; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - transition: background-color 0.3s ease, transform 0.2s ease; - font-size: 18px; + padding: 12px 24px; + background-color: #007bff; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.2s ease; + font-size: 18px; } button:hover { - background-color: #0056b3; - transform: translateY(-2px); + background-color: #0056b3; + transform: translateY(-2px); } button:active { - transform: translateY(0); + transform: translateY(0); } canvas { - display: none; + display: none; } -@media(max-width: 600px) { - #settings { - font-size: 16px; - } +@media (max-width: 600px) { + #settings { + font-size: 16px; + } - input[type="number"], - input[type="range"], - button { - width: 90%; - max-width: none; - } -} \ No newline at end of file + input[type="number"], + input[type="range"], + button { + width: 90%; + max-width: none; + } +} diff --git a/secret/snake/game.js b/secret/snake/game.js index a9f50a8..08d50d5 100644 --- a/secret/snake/game.js +++ b/secret/snake/game.js @@ -1,13 +1,13 @@ -'use strict'; +"use strict"; -const upButton = document.getElementById('up'); -const downButton = document.getElementById('down'); -const leftButton = document.getElementById('left'); -const rightButton = document.getElementById('right'); -const startButton = document.getElementById('start'); -const grid = document.createElement('div'); -grid.id = 'grid'; -document.querySelector('.game').appendChild(grid); +const upButton = document.getElementById("up"); +const downButton = document.getElementById("down"); +const leftButton = document.getElementById("left"); +const rightButton = document.getElementById("right"); +const startButton = document.getElementById("start"); +const grid = document.createElement("div"); +grid.id = "grid"; +document.querySelector(".game").appendChild(grid); let snake = [{ x: 5, y: 5 }]; let apple = { x: 8, y: 5 }; @@ -17,128 +17,134 @@ let isGameRunning = false; const gridSize = 10; function initGame() { - grid.style.display = 'grid'; - grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`; - grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`; - grid.style.width = '350px'; - grid.style.height = '350px'; - document.getElementById('title').style.display = 'none'; - document.getElementById('description').style.display = 'none'; + grid.style.display = "grid"; + grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`; + grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`; + grid.style.width = "350px"; + grid.style.height = "350px"; + document.getElementById("title").style.display = "none"; + document.getElementById("description").style.display = "none"; - isGameRunning = true; - snake = [{ x: 5, y: 5 }]; - apple = spawnApple(); - direction = { x: 0, y: 0 }; + isGameRunning = true; + snake = [{ x: 5, y: 5 }]; + apple = spawnApple(); + direction = { x: 0, y: 0 }; - clearInterval(gameInterval); - gameInterval = setInterval(gameLoop, 200); - render(); + clearInterval(gameInterval); + gameInterval = setInterval(gameLoop, 200); + render(); } function spawnApple() { - let newApple; - do { - newApple = { - x: Math.floor(Math.random() * gridSize), - y: Math.floor(Math.random() * gridSize) - }; - } while (snake.some(segment => segment.x === newApple.x && segment.y === newApple.y)); - return newApple; + let newApple; + do { + newApple = { + x: Math.floor(Math.random() * gridSize), + y: Math.floor(Math.random() * gridSize), + }; + } while ( + snake.some( + (segment) => segment.x === newApple.x && segment.y === newApple.y + ) + ); + return newApple; } function updateSnake() { - const newHead = { - x: snake[0].x + direction.x, - y: snake[0].y + direction.y - }; + const newHead = { + x: snake[0].x + direction.x, + y: snake[0].y + direction.y, + }; - if (newHead.x < 0) newHead.x = gridSize - 1; - if (newHead.y < 0) newHead.y = gridSize - 1; - if (newHead.x >= gridSize) newHead.x = 0; - if (newHead.y >= gridSize) newHead.y = 0; + if (newHead.x < 0) newHead.x = gridSize - 1; + if (newHead.y < 0) newHead.y = gridSize - 1; + if (newHead.x >= gridSize) newHead.x = 0; + if (newHead.y >= gridSize) newHead.y = 0; - if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) { - gameOver(); - return; - } + if ( + snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y) + ) { + gameOver(); + return; + } - snake.unshift(newHead); + snake.unshift(newHead); - if (newHead.x === apple.x && newHead.y === apple.y) { - apple = spawnApple(); - } else { - snake.pop(); - } + if (newHead.x === apple.x && newHead.y === apple.y) { + apple = spawnApple(); + } else { + snake.pop(); + } } function render() { - grid.innerHTML = ""; + grid.innerHTML = ""; - for (let y = 0; y < gridSize; y++) { - for (let x = 0; x < gridSize; x++) { - const cell = document.createElement("div"); - cell.classList.add("cell"); + for (let y = 0; y < gridSize; y++) { + for (let x = 0; x < gridSize; x++) { + const cell = document.createElement("div"); + cell.classList.add("cell"); - if ((x + y) % 2 === 0) { - cell.classList.add("light-green"); - } else { - cell.classList.add("dark-green"); - } + if ((x + y) % 2 === 0) { + cell.classList.add("light-green"); + } else { + cell.classList.add("dark-green"); + } - if (snake.some(segment => segment.x === x && segment.y === y)) { - cell.classList.add("snake"); - } + if (snake.some((segment) => segment.x === x && segment.y === y)) { + cell.classList.add("snake"); + } - if (apple.x === x && apple.y === y) { - cell.classList.add("apple"); - } + if (apple.x === x && apple.y === y) { + cell.classList.add("apple"); + } - grid.appendChild(cell); - } + grid.appendChild(cell); } + } } function gameLoop() { - if (!isGameRunning) return; - updateSnake(); - render(); + if (!isGameRunning) return; + updateSnake(); + render(); } function gameOver() { - alert('Game Over!'); - clearInterval(gameInterval); - isGameRunning = false; + alert("Game Over!"); + clearInterval(gameInterval); + isGameRunning = false; } function handleDirectionInput(key) { - switch (key) { - case 'ArrowUp': - case 'w': - if (direction.y === 0) direction = { x: 0, y: -1 }; - break; - case 'ArrowDown': - case 's': - if (direction.y === 0) direction = { x: 0, y: 1 }; - break; - case 'ArrowLeft': - case 'a': - if (direction.x === 0) direction = { x: -1, y: 0 }; - break; - case 'ArrowRight': - case 'd': - if (direction.x === 0) direction = { x: 1, y: 0 }; - break; - } + switch (key) { + case "ArrowUp": + case "w": + if (direction.y === 0) direction = { x: 0, y: -1 }; + break; + case "ArrowDown": + case "s": + if (direction.y === 0) direction = { x: 0, y: 1 }; + break; + case "ArrowLeft": + case "a": + if (direction.x === 0) direction = { x: -1, y: 0 }; + break; + case "ArrowRight": + case "d": + if (direction.x === 0) direction = { x: 1, y: 0 }; + break; + } } -upButton.addEventListener('click', () => handleDirectionInput('ArrowUp')); -downButton.addEventListener('click', () => handleDirectionInput('ArrowDown')); -leftButton.addEventListener('click', () => handleDirectionInput('ArrowLeft')); -rightButton.addEventListener('click', () => handleDirectionInput('ArrowRight')); -startButton.addEventListener('click', () => { - if (!isGameRunning) initGame(); +upButton.addEventListener("click", () => handleDirectionInput("ArrowUp")); +downButton.addEventListener("click", () => handleDirectionInput("ArrowDown")); +leftButton.addEventListener("click", () => handleDirectionInput("ArrowLeft")); +rightButton.addEventListener("click", () => handleDirectionInput("ArrowRight")); +startButton.addEventListener("click", () => { + if (!isGameRunning) initGame(); }); -document.addEventListener('keydown', (event) => { - handleDirectionInput(event.key); +document.addEventListener("keydown", (event) => { + handleDirectionInput(event.key); }); diff --git a/secret/snake/styles.css b/secret/snake/styles.css index 556a94a..2454d67 100644 --- a/secret/snake/styles.css +++ b/secret/snake/styles.css @@ -1,238 +1,238 @@ /* Base Reset */ body, html { - margin: 0; - padding: 0; - font-family: monospace; - background-color: #3a2d56; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; + margin: 0; + padding: 0; + font-family: monospace; + background-color: #3a2d56; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } /* GameBoy Layout */ .gameboy { - background-color: #5f4c82; /* Game Boy Color purple shell */ - width: 441px; - height: 735px; - border-radius: 20px; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); - display: flex; - flex-direction: column; - align-items: center; - padding: 10px; - position: relative; + background-color: #5f4c82; + width: 441px; + height: 735px; + border-radius: 20px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); + display: flex; + flex-direction: column; + align-items: center; + padding: 10px; + position: relative; } -@media(max-width: 768px) { - .gameboy { - width: 100vw; - height: 100vh; - border-radius: 0; - } +@media (max-width: 768px) { + .gameboy { + width: 100vw; + height: 100vh; + border-radius: 0; + } } /* Screen */ .screen { - background-color: black; - border: 4px solid #0f380f; - width: 90%; - height: 55%; - margin-top: 20px; - border-radius: 10px; - display: flex; - justify-content: center; - align-items: center; - box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); - overflow: hidden; + background-color: black; + border: 4px solid #0f380f; + width: 90%; + height: 55%; + margin-top: 20px; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); + overflow: hidden; } .game { - text-align: center; - width: 90%; + text-align: center; + width: 90%; } /* Titles */ h1 { - font-size: 2rem; - margin-bottom: 10px; - text-transform: uppercase; - color: #9bbc0f; + font-size: 2rem; + margin-bottom: 10px; + text-transform: uppercase; + color: #9bbc0f; } .description, .description p { - font-size: 1.2rem; - margin: 0 auto; - padding: 0 auto; - color: white; + font-size: 1.2rem; + margin: 0 auto; + padding: 0 auto; + color: white; } /* Grid container */ #grid { - display: grid; - grid-template-columns: repeat(10, 1fr); /* Adjust to match gridSize */ - grid-template-rows: repeat(10, 1fr); /* Adjust to match gridSize */ - width: 400px; /* Adjust as needed */ - height: 400px; /* Adjust as needed */ - border: 2px solid #0f380f; - margin: 20px auto; - /* initially hide */ - display: none; + display: grid; + grid-template-columns: repeat(10, 1fr); /* Adjust to match gridSize */ + grid-template-rows: repeat(10, 1fr); /* Adjust to match gridSize */ + width: 400px; /* Adjust as needed */ + height: 400px; /* Adjust as needed */ + border: 2px solid #0f380f; + margin: 20px auto; + /* initially hide */ + display: none; } /* Individual cells */ .cell { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .cell.light-green { - background-color: #9bbc0f; + background-color: #9bbc0f; } .cell.dark-green { - background-color: #0f380f; + background-color: #0f380f; } /* Snake styling */ .snake { - background-color: #e600ff; /* Snake color */ - z-index: 1000; + background-color: #e600ff; /* Snake color */ + z-index: 1000; } /* Apple styling */ .apple { - background-color: red; /* Apple color */ - z-index: 999; + background-color: red; /* Apple color */ + z-index: 999; } /* Controls Section */ .controls { - margin-top: 20px; - display: flex; - justify-content: space-between; - width: 80%; - align-items: center; + margin-top: 20px; + display: flex; + justify-content: space-between; + width: 80%; + align-items: center; } /* D-Pad */ .dpad { - position: relative; - width: 120px; - height: 120px; + position: relative; + width: 120px; + height: 120px; } /* Base Styling for D-Pad Buttons */ .dpad-btn { - background-color: #0f380f; - color: #9bbc0f; - border: none; - border-radius: 5px; - position: absolute; - width: 42px; - height: 42px; - font-size: 1.5rem; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - z-index: 1; + background-color: #0f380f; + color: #9bbc0f; + border: none; + border-radius: 5px; + position: absolute; + width: 42px; + height: 42px; + font-size: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + z-index: 1; } .dpad-btn.up { - top: 0; - left: 50%; - transform: translateX(-50%); + top: 0; + left: 50%; + transform: translateX(-50%); } .dpad-btn.down { - bottom: 0; - left: 50%; - transform: translateX(-50%); + bottom: 0; + left: 50%; + transform: translateX(-50%); } .dpad-btn.left { - top: 50%; - left: 0; - transform: translateY(-50%); + top: 50%; + left: 0; + transform: translateY(-50%); } .dpad-btn.right { - top: 50%; - right: 0; - transform: translateY(-50%); + top: 50%; + right: 0; + transform: translateY(-50%); } /* D-Pad Center to Connect Buttons */ .dpad-center { - background-color: #0f380f; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 40px; - height: 40px; - border: 2px solid transparent; - z-index: 0; - border-radius: 5px; + background-color: #0f380f; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + border: 2px solid transparent; + z-index: 0; + border-radius: 5px; } /* A and B Buttons */ .action-buttons { - display: flex; - flex-direction: column; - justify-content: space-between; - height: 200px; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 200px; } .btn { - background-color: #0f380f; - color: #9bbc0f; - border: 2px solid #9bbc0f; - border-radius: 50%; - width: 60px; - height: 60px; - font-size: 1.8rem; - cursor: pointer; - transition: transform 0.1s, background-color 0.2s; + background-color: #0f380f; + color: #9bbc0f; + border: 2px solid #9bbc0f; + border-radius: 50%; + width: 60px; + height: 60px; + font-size: 1.8rem; + cursor: pointer; + transition: transform 0.1s, background-color 0.2s; } .btn:hover { - background-color: #9bbc0f; - color: #0f380f; + background-color: #9bbc0f; + color: #0f380f; } .btn:active { - transform: scale(0.9); + transform: scale(0.9); } /* Start Button */ .start-btn { - background-color: #0f380f; - color: #9bbc0f; - border: 2px solid #9bbc0f; - border-radius: 5px; - width: 100px; - height: 40px; - font-size: 1.2rem; - cursor: pointer; - transition: transform 0.1s, background-color 0.2s; - margin-bottom: 20px; + background-color: #0f380f; + color: #9bbc0f; + border: 2px solid #9bbc0f; + border-radius: 5px; + width: 100px; + height: 40px; + font-size: 1.2rem; + cursor: pointer; + transition: transform 0.1s, background-color 0.2s; + margin-bottom: 20px; } .start-btn:hover { - background-color: #9bbc0f; - color: #0f380f; + background-color: #9bbc0f; + color: #0f380f; } .start-btn:active { - transform: scale(0.9); + transform: scale(0.9); } /* Hidden Canvas for Debugging or Fallback */ canvas { - display: none; - z-index: 1000; + display: none; + z-index: 1000; } diff --git a/secret/snake/styles.js b/secret/snake/styles.js index 6706f60..231d5b3 100644 --- a/secret/snake/styles.js +++ b/secret/snake/styles.js @@ -1,60 +1,134 @@ -'use strict'; -const aBtn = document.querySelector('#a'); -const bBtn = document.querySelector('#b'); -const gameboy = document.querySelector('.gameboy'); +"use strict"; +const aBtn = document.querySelector("#a"); +const bBtn = document.querySelector("#b"); +const gameboy = document.querySelector(".gameboy"); const html = document.documentElement; const body = document.body; -const dpadButtons = document.querySelectorAll('.dpad-btn'); -const dpadCenter = document.querySelector('.dpad-center'); // Darker variant -const actionButtons = document.querySelectorAll('.btn'); +const dpadButtons = document.querySelectorAll(".dpad-btn"); +const dpadCenter = document.querySelector(".dpad-center"); // Darker variant +const actionButtons = document.querySelectorAll(".btn"); const colors = [ - { gameboyColor: '#B39DDB', htmlColor: '#D1C4E9', buttonColor: '#673AB7', buttonTextColor: '#FFFFFF', dpadCenterColor: '#5E35B1' }, - { gameboyColor: '#FFC107', htmlColor: '#FFF9C4', buttonColor: '#FF9800', buttonTextColor: '#000000', dpadCenterColor: '#EF6C00' }, - { gameboyColor: '#8BC34A', htmlColor: '#C5E1A5', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#E64A19' }, - { gameboyColor: '#F44336', htmlColor: '#FFCDD2', buttonColor: '#E91E63', buttonTextColor: '#FFFFFF', dpadCenterColor: '#C2185B' }, - { gameboyColor: '#03A9F4', htmlColor: '#BBDEFB', buttonColor: '#FFEB3B', buttonTextColor: '#000000', dpadCenterColor: '#0277BD' }, - { gameboyColor: '#FF7043', htmlColor: '#FFCCBC', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#D84315' }, - { gameboyColor: '#9C27B0', htmlColor: '#E1BEE7', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF', dpadCenterColor: '#6A1B9A' }, - { gameboyColor: '#FFD700', htmlColor: '#FFF9C4', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF', dpadCenterColor: '#F57F17' }, - { gameboyColor: '#009688', htmlColor: '#B2DFDB', buttonColor: '#4CAF50', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00796B' }, - { gameboyColor: '#795548', htmlColor: '#D7CCC8', buttonColor: '#9E9E9E', buttonTextColor: '#000000', dpadCenterColor: '#5D4037' }, - { gameboyColor: '#FF5733', htmlColor: '#FFCCCB', buttonColor: '#C70039', buttonTextColor: '#FFFFFF', dpadCenterColor: '#B71C1C' }, - { gameboyColor: '#00BCD4', htmlColor: '#B2EBF2', buttonColor: '#00ACC1', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00838F' } + { + gameboyColor: "#B39DDB", + htmlColor: "#D1C4E9", + buttonColor: "#673AB7", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#5E35B1", + }, + { + gameboyColor: "#FFC107", + htmlColor: "#FFF9C4", + buttonColor: "#FF9800", + buttonTextColor: "#000000", + dpadCenterColor: "#EF6C00", + }, + { + gameboyColor: "#8BC34A", + htmlColor: "#C5E1A5", + buttonColor: "#FF5722", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#E64A19", + }, + { + gameboyColor: "#F44336", + htmlColor: "#FFCDD2", + buttonColor: "#E91E63", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#C2185B", + }, + { + gameboyColor: "#03A9F4", + htmlColor: "#BBDEFB", + buttonColor: "#FFEB3B", + buttonTextColor: "#000000", + dpadCenterColor: "#0277BD", + }, + { + gameboyColor: "#FF7043", + htmlColor: "#FFCCBC", + buttonColor: "#FF5722", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#D84315", + }, + { + gameboyColor: "#9C27B0", + htmlColor: "#E1BEE7", + buttonColor: "#7B1FA2", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#6A1B9A", + }, + { + gameboyColor: "#FFD700", + htmlColor: "#FFF9C4", + buttonColor: "#FF9800", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#F57F17", + }, + { + gameboyColor: "#009688", + htmlColor: "#B2DFDB", + buttonColor: "#4CAF50", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#00796B", + }, + { + gameboyColor: "#795548", + htmlColor: "#D7CCC8", + buttonColor: "#9E9E9E", + buttonTextColor: "#000000", + dpadCenterColor: "#5D4037", + }, + { + gameboyColor: "#FF5733", + htmlColor: "#FFCCCB", + buttonColor: "#C70039", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#B71C1C", + }, + { + gameboyColor: "#00BCD4", + htmlColor: "#B2EBF2", + buttonColor: "#00ACC1", + buttonTextColor: "#FFFFFF", + dpadCenterColor: "#00838F", + }, ]; -let currentColorIndex = localStorage.getItem('gameboyColorIndex') ? parseInt(localStorage.getItem('gameboyColorIndex')) : 0; +let currentColorIndex = localStorage.getItem("gameboyColorIndex") + ? parseInt(localStorage.getItem("gameboyColorIndex")) + : 0; function updateGameBoyColor() { - gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; - html.style.backgroundColor = colors[currentColorIndex].htmlColor; - body.style.backgroundColor = colors[currentColorIndex].htmlColor; + gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; + html.style.backgroundColor = colors[currentColorIndex].htmlColor; + body.style.backgroundColor = colors[currentColorIndex].htmlColor; - dpadButtons.forEach(button => { - button.style.backgroundColor = colors[currentColorIndex].buttonColor; - button.style.color = colors[currentColorIndex].buttonTextColor; - }); + dpadButtons.forEach((button) => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); - // Using darker dpad center color - dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; - dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; + // Using darker dpad center color + dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; + dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; - actionButtons.forEach(button => { - button.style.backgroundColor = colors[currentColorIndex].buttonColor; - button.style.color = colors[currentColorIndex].buttonTextColor; - }); + actionButtons.forEach((button) => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); } -aBtn.addEventListener('click', () => { - currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; - localStorage.setItem('gameboyColorIndex', currentColorIndex); - updateGameBoyColor(); +aBtn.addEventListener("click", () => { + currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; + localStorage.setItem("gameboyColorIndex", currentColorIndex); + updateGameBoyColor(); }); -bBtn.addEventListener('click', () => { - currentColorIndex = (currentColorIndex + 1) % colors.length; - localStorage.setItem('gameboyColorIndex', currentColorIndex); - updateGameBoyColor(); +bBtn.addEventListener("click", () => { + currentColorIndex = (currentColorIndex + 1) % colors.length; + localStorage.setItem("gameboyColorIndex", currentColorIndex); + updateGameBoyColor(); }); updateGameBoyColor(); diff --git a/secret/styles.css b/secret/styles.css index 7c3550c..b25a85c 100644 --- a/secret/styles.css +++ b/secret/styles.css @@ -1,141 +1,145 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - font-family: 'Courier New', Courier, monospace; - background-color: #0d0d0d; - color: #b0b0b0; - margin: 0; - line-height: 1.6; - background-image: url('images/background.jpg'); - background-size: cover; /* Adjust size for tape appearance */ + font-family: "Courier New", Courier, monospace; + background-color: #0d0d0d; + color: #b0b0b0; + margin: 0; + line-height: 1.6; + background-image: url("images/background.jpg"); + background-size: cover; /* Adjust size for tape appearance */ } header { - background-color: #222; /* Fully opaque background */ - color: #b0b0b0; - text-align: center; - padding: 1em 0; - font-size: 2rem; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); - animation: neonFlicker 1.5s infinite; + background-color: #222; /* Fully opaque background */ + color: #b0b0b0; + text-align: center; + padding: 1em 0; + font-size: 2rem; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); + animation: neonFlicker 1.5s infinite; } /* Create the flickering neon light effect */ @keyframes neonFlicker { - 0% { - text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00, 0 0 50px #ffcc00; - } - 20% { - text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00; - } - 40% { - text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00; - } - 60% { - text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00; - } - 80% { - text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00; - } - 100% { - text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00; - } + 0% { + text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, + 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00, 0 0 50px #ffcc00; + } + 20% { + text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00, + 0 0 15px #ffcc00, 0 0 20px #ffcc00; + } + 40% { + text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00; + } + 60% { + text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, + 0 0 20px #ffcc00, 0 0 30px #ffcc00; + } + 80% { + text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00; + } + 100% { + text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, + 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00; + } } footer { - background-color: #111; - color: #b0b0b0; - text-align: center; - padding: 1em 0; - margin-top: 20px; + background-color: #111; + color: #b0b0b0; + text-align: center; + padding: 1em 0; + margin-top: 20px; } .grid-container { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; - padding: 20px; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + padding: 20px; } .item { - position: relative; - background-color: #1a1a1a; - border-radius: 10px; - overflow: hidden; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); - transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; - width: 100%; - height: 400px; - display: flex; - flex-direction: column; + position: relative; + background-color: #1a1a1a; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); + transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; + width: 100%; + height: 400px; + display: flex; + flex-direction: column; } .item img { - width: 100%; - height: 100%; - object-fit: cover; - filter: brightness(0.6); + width: 100%; + height: 100%; + object-fit: cover; + filter: brightness(0.6); } .item .description { - padding: 30px; - font-size: 1rem; - color: #ccc; - background-color: rgba(0, 0, 0, 0.8); - border-radius: 0 0 10px 10px; - flex-grow: 1; + padding: 30px; + font-size: 1rem; + color: #ccc; + background-color: rgba(0, 0, 0, 0.8); + border-radius: 0 0 10px 10px; + flex-grow: 1; } p { - text-decoration: none; + text-decoration: none; } .item:hover { - transform: scale(1.05); - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9); - filter: brightness(1.1); + transform: scale(1.05); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9); + filter: brightness(1.1); } .item:hover img { - transform: scale(1.1); - filter: brightness(1.1); + transform: scale(1.1); + filter: brightness(1.1); } .item h2 { - position: absolute; - top: 10%; - left: 50%; - transform: translateX(-50%); - color: #ffffff; - font-size: 1.8rem; - background-color: rgba(0, 0, 0, 0.9); - padding: 5px 15px; - border-radius: 5px; - text-align: center; - opacity: 0; - transition: opacity 0.3s ease, transform 0.3s ease; + position: absolute; + top: 10%; + left: 50%; + transform: translateX(-50%); + color: #ffffff; + font-size: 1.8rem; + background-color: rgba(0, 0, 0, 0.9); + padding: 5px 15px; + border-radius: 5px; + text-align: center; + opacity: 0; + transition: opacity 0.3s ease, transform 0.3s ease; } .item:hover h2 { - opacity: 1; - transform: translateX(-50%) translateY(-10px); + opacity: 1; + transform: translateX(-50%) translateY(-10px); } -@media(max-width: 800px) { - header { - font-size: 1.5rem; - } +@media (max-width: 800px) { + header { + font-size: 1.5rem; + } - .item { - height: auto; - width: auto; - } + .item { + height: auto; + width: auto; + } - .grid-container { - grid-template-columns: repeat(1, 1fr); - } + .grid-container { + grid-template-columns: repeat(1, 1fr); + } } diff --git a/styles.css b/styles.css index 15b329a..d14c826 100644 --- a/styles.css +++ b/styles.css @@ -206,7 +206,8 @@ article ul a li { margin-bottom: 10px; border-radius: var(--border-radius); padding: 10px; - transition: background-color var(--transition-speed), box-shadow var(--transition-speed); + transition: background-color var(--transition-speed), + box-shadow var(--transition-speed); } article ul a li:hover { @@ -214,7 +215,7 @@ article ul a li:hover { box-shadow: 0 0 10px var(--accent-color); } -article ul a li{ +article ul a li { text-decoration: none; color: var(--accent-color); font-weight: bold; @@ -256,14 +257,19 @@ section .card a { color: inherit; height: 100%; width: 100%; - padding: 20px; + padding: 20px; } /* Card styles */ section .card { text-align: center; list-style: none; - background: linear-gradient(180deg, rgba(0, 0, 50, 0.9), rgba(10, 10, 100, 0.9), rgba(30, 30, 150, 0.9)); + background: linear-gradient( + 180deg, + rgba(0, 0, 50, 0.9), + rgba(10, 10, 100, 0.9), + rgba(30, 30, 150, 0.9) + ); border-radius: 12px; box-shadow: 0 5px 20px rgba(0, 0, 50, 0.8), 0 0 10px rgba(255, 255, 255, 0.1); border: 1px solid #2e3a60; @@ -278,7 +284,12 @@ section .card { /* Hover effect */ section .card:hover { transform: translateY(-8px); - background: linear-gradient(180deg, rgba(30, 30, 150, 0.9), rgba(40, 0, 100, 0.9), rgba(100, 0, 150, 0.9)); + background: linear-gradient( + 180deg, + rgba(30, 30, 150, 0.9), + rgba(40, 0, 100, 0.9), + rgba(100, 0, 150, 0.9) + ); box-shadow: 0 10px 30px rgba(0, 0, 100, 0.7), 0 0 20px rgba(255, 221, 85, 0.8); } @@ -314,7 +325,11 @@ section .card::before { width: 60px; height: 60px; border-radius: 50%; - background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); + background: radial-gradient( + circle, + rgba(255, 255, 255, 0.1), + rgba(255, 255, 255, 0.02) + ); box-shadow: 0 0 50px rgba(255, 255, 255, 0.5); animation: spin 8s linear infinite; } @@ -411,7 +426,7 @@ footer { width: 60px; } - .project-name{ + .project-name { font-size: 1.3em; } } diff --git a/webGames/styles.css b/webGames/styles.css index 3f4f099..e9a6fcf 100644 --- a/webGames/styles.css +++ b/webGames/styles.css @@ -1,120 +1,120 @@ /* Reset and box-sizing */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } /* General Styles */ body { - font-family: Arial, sans-serif; - background-color: #282c34; - color: #ffffff; - margin: 0; + font-family: Arial, sans-serif; + background-color: #282c34; + color: #ffffff; + margin: 0; } header { - background-color: #4CAF50; - color: white; - text-align: center; - padding: 1em 0; - font-size: 1.5rem; + background-color: #4caf50; + color: white; + text-align: center; + padding: 1em 0; + font-size: 1.5rem; } footer { - background-color: #333; - color: white; - text-align: center; - padding: 1em 0; - margin-top: 20px; + background-color: #333; + color: white; + text-align: center; + padding: 1em 0; + margin-top: 20px; } /* Grid Styles */ .grid-container { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; /* Space between items */ - padding: 20px; /* Space around the grid */ + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; /* Space between items */ + padding: 20px; /* Space around the grid */ } /* Game Item */ .item { - position: relative; - background-color: #444; - border-radius: 10px; - overflow: hidden; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; - width: 100%; /* Ensure it takes full width of the column */ - height: 400px; /* Set a fixed height for all items */ - display: flex; - flex-direction: column; /* Stack children vertically */ + position: relative; + background-color: #444; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; + width: 100%; /* Ensure it takes full width of the column */ + height: 400px; /* Set a fixed height for all items */ + display: flex; + flex-direction: column; /* Stack children vertically */ } /* Ensure the image takes the top part of the card */ .item img { - width: 100%; - height: 100%; /* Set a height for the image */ - object-fit: cover; + width: 100%; + height: 100%; /* Set a height for the image */ + object-fit: cover; } .item .description { - padding: 30px; - font-size: 1rem; - color: #ddd; - background-color: rgba(0, 0, 0, 0.5); - border-radius: 0 0 10px 10px; - flex-grow: 1; /* Allow description to take remaining space */ + padding: 30px; + font-size: 1rem; + color: #ddd; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 0 0 10px 10px; + flex-grow: 1; /* Allow description to take remaining space */ } p { - text-decoration: none; + text-decoration: none; } /* Hover effect for scaling and glowing */ .item:hover { - transform: scale(1.05); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); - filter: brightness(1.2); + transform: scale(1.05); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); + filter: brightness(1.2); } .item:hover img { - transform: scale(1.1); /* Slight zoom-in effect for the image */ - filter: brightness(1.1); /* Increase image brightness */ + transform: scale(1.1); /* Slight zoom-in effect for the image */ + filter: brightness(1.1); /* Increase image brightness */ } .item h2 { - position: absolute; - top: 10%; - left: 50%; - transform: translateX(-50%); - color: white; - font-size: 1.5rem; - background-color: rgba(0, 0, 0, 0.6); - padding: 5px 15px; - border-radius: 5px; - text-align: center; - opacity: 0; - transition: opacity 0.3s ease, transform 0.3s ease; + position: absolute; + top: 10%; + left: 50%; + transform: translateX(-50%); + color: white; + font-size: 1.5rem; + background-color: rgba(0, 0, 0, 0.6); + padding: 5px 15px; + border-radius: 5px; + text-align: center; + opacity: 0; + transition: opacity 0.3s ease, transform 0.3s ease; } .item:hover h2 { - opacity: 1; - transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */ + opacity: 1; + transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */ } /* Mobile Optimization */ -@media(max-width: 600px) { - header { - font-size: 1.2rem; - } +@media (max-width: 600px) { + header { + font-size: 1.2rem; + } - .item { - height: auto; /* Allow auto height on mobile for better responsiveness */ - width: auto; - } + .item { + height: auto; /* Allow auto height on mobile for better responsiveness */ + width: auto; + } - .grid-container { - grid-template-columns: repeat(1, 1fr); - } + .grid-container { + grid-template-columns: repeat(1, 1fr); + } }