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);
+ }
}