sageTheDm/pages
1
0
Fork 0
forked from interstellar_development/interstellar_website
Code Pull requests Activity

formatted like my Boss wants it (help!)

Browse source
This commit is contained in:
sageTheDM 2025-02-25 10:04:34 +01:00
parent 5d11f87dd3
commit b507a6b0ea
19 changed files with 1425 additions and 1136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
dropdown.js
View file

@ -18,39 +18,44 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
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

9
footer.js
View file

@ -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;

2
header.js
View file

@ -42,5 +42,5 @@ class Header extends HTMLElement {
}
}
customElements.define('header-component', Header);
customElements.define("header-component", Header);
// @license-end

126
secret/asteroidDestroyer/game.js
View file

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

60
secret/asteroidDestroyer/style.css
View file

@ -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;
}
}

96
secret/asteroidDestroyer/styles.css
View file

@ -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;
}

136
secret/endlessRunner/script.js
View file

@ -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 (
<div className="flex flex-col items-center">
<canvas ref={canvasRef} className="border" onClick={jump}></canvas>
{!running && <button onClick={() => window.location.reload()} className="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Restart</button>}
</div>
);
update();
}, [running]);
function jump() {
if (player.y >= 150) {
player.dy = -10;
}
}
return (
<div className="flex flex-col items-center">
<canvas ref={canvasRef} className="border" onClick={jump}></canvas>
{!running && (
<button
onClick={() => window.location.reload()}
className="mt-4 bg-blue-500 text-white px-4 py-2 rounded"
>
Restart
</button>
)}
</div>
);
}

126
secret/game.js
View file

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

87
secret/guessMyNumber/game.js
View file

@ -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();

226
secret/guessMyNumber/styles.css
View file

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

174
secret/guessMyNumber/styles.js
View file

@ -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();

321
secret/mineSweeper/script.js
View file

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

130
secret/mineSweeper/styles.css
View file

@ -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;
}
input[type="number"],
input[type="range"],
button {
width: 90%;
max-width: none;
}
}

204
secret/snake/game.js
View file

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

272
secret/snake/styles.css
View file

@ -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;
}

158
secret/snake/styles.js
View file

@ -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();

194
secret/styles.css
View file

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

27
styles.css
View file

@ -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;
@ -263,7 +264,12 @@ section .card a {
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;
}
}

142
webGames/styles.css
View file

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