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

Merge pull request 'main' (#26) from sageTheDm/pages:main into main #4

Merged
sageTheDm merged 1 commit from interstellar_development/interstellar_website:main into main 2025-02-25 10:28:14 +01:00
Conversation 0 Commits 1 Files changed - +1425 -1136
19 changed files with 1425 additions and 1136 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 2842c955fe - Show all commits

63
dropdown.js
View file

@ -18,39 +18,44 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const menu = document.querySelector(".menu"); const menu = document.querySelector(".menu");
const burgerMenu = document.querySelector(".burger-menu"); const burgerMenu = document.querySelector(".burger-menu");
if (!menu || !burgerMenu) { if (!menu || !burgerMenu) {
console.warn("Menu or burger menu element not found. Ensure they exist in the DOM."); console.warn(
return; "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 // Close the menu if clicking outside of it
function toggleMenu() { function closeMenu(event) {
menu.classList.toggle("active"); if (
!menu.contains(event.target) &&
if (menu.classList.contains("active")) { !event.target.classList.contains("burger-menu")
// Add click listener to close menu when clicking outside ) {
document.addEventListener("click", closeMenu); menu.classList.remove("active");
} else { document.removeEventListener("click", closeMenu);
// Remove the click listener when menu is closed
document.removeEventListener("click", closeMenu);
}
} }
}
// Close the menu if clicking outside of it // Attach click event to the burger menu button
function closeMenu(event) { burgerMenu.addEventListener("click", (event) => {
if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) { event.stopPropagation(); // Prevent click from immediately triggering closeMenu
menu.classList.remove("active"); toggleMenu();
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();
});
}); });
// @license-end // @license-end

9
footer.js
View file

@ -37,17 +37,16 @@ class Footer extends HTMLElement {
`; `;
// Add event listener for button click // Add event listener for button click
this.querySelector('.secret-button').addEventListener('click', () => { this.querySelector(".secret-button").addEventListener("click", () => {
window.open('secret/index.html', '_blank'); window.open("secret/index.html", "_blank");
}); });
} }
} }
customElements.define('footer-component', Footer); customElements.define("footer-component", Footer);
// CSS for the hidden button // CSS for the hidden button
const style = document.createElement('style'); const style = document.createElement("style");
style.textContent = ` style.textContent = `
.secret-button { .secret-button {
display: none; 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 // @license-end

126
secret/asteroidDestroyer/game.js
View file

@ -1,7 +1,7 @@
"use strict"; "use strict";
// Canvas setup // Canvas setup
const canvas = document.getElementById('gameCanvas'); const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext("2d");
const targetFPS = 60; const targetFPS = 60;
const targetFrameTime = 1000 / targetFPS; const targetFrameTime = 1000 / targetFPS;
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
@ -15,9 +15,9 @@ const player = {
y: canvas.height - 60, y: canvas.height - 60,
width: 40, width: 40,
height: 40, height: 40,
color: 'white', color: "white",
speed: 5, speed: 5,
dx: 0 dx: 0,
}; };
let bullets = []; let bullets = [];
@ -48,14 +48,14 @@ let greenSphereCooldown = 0;
let rainbowSphereCooldown = 0; let rainbowSphereCooldown = 0;
// Sphere types // Sphere types
const sphereTypes = ['blue', 'yellow', 'green', 'rainbow']; const sphereTypes = ["blue", "yellow", "green", "rainbow"];
/// Control for left button press and release /// Control for left button press and release
function btnMoveLeft(isPressed) { function btnMoveLeft(isPressed) {
if (isPressed) { if (isPressed) {
player.dx = -player.speed; // Start moving left player.dx = -player.speed; // Start moving left
} else { } 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 // Control for right button press and release
function btnMoveRight(isPressed) { function btnMoveRight(isPressed) {
if (isPressed) { if (isPressed) {
player.dx = player.speed; // Start moving right player.dx = player.speed; // Start moving right
} else { } 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 canShoot = true; // Allow shooting again when button is released
}); });
window.addEventListener('keydown', (e) => { window.addEventListener("keydown", (e) => {
if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed; if (e.key === "ArrowLeft" || e.key === "a") player.dx = -player.speed;
if (e.key === 'ArrowRight' || e.key === 'd') 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 // Shoot only if it's not a hold, and we can shoot
if (e.key === ' ' && canShoot && !isGameOver) { if (e.key === " " && canShoot && !isGameOver) {
shootBullet(); shootBullet();
canShoot = false; // Prevent shooting until the key is released 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 // 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; player.dx = 0;
} }
// Allow shooting again when the space key is released // Allow shooting again when the space key is released
if (e.key === ' ') { if (e.key === " ") {
canShoot = true; canShoot = true;
} }
}); });
@ -124,8 +129,8 @@ function shootBullet() {
y: player.y, y: player.y,
width: 5, width: 5,
height: 10, height: 10,
color: 'yellow', color: "yellow",
speed: 7 speed: 7,
}); });
}, i * 50); // Fire bullets with 50ms delay between shots }, i * 50); // Fire bullets with 50ms delay between shots
} }
@ -137,9 +142,9 @@ function shootBullet() {
y: player.y, y: player.y,
width: 5, width: 5,
height: 10, height: 10,
color: 'yellow', color: "yellow",
speed: 7, speed: 7,
angle: i * 10 // Spray the bullets at different angles angle: i * 10, // Spray the bullets at different angles
}); });
} }
} else { } else {
@ -149,15 +154,15 @@ function shootBullet() {
y: player.y, y: player.y,
width: 5, width: 5,
height: 10, height: 10,
color: 'yellow', color: "yellow",
speed: 7 speed: 7,
}); });
} }
} }
// Generate random color // Generate random color
function getRandomColor() { 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)]; return colors[Math.floor(Math.random() * colors.length)];
} }
@ -170,13 +175,14 @@ function createAsteroid() {
width: size, width: size,
height: size, height: size,
color: getRandomColor(), color: getRandomColor(),
speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier // Faster initial speed speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier, // Faster initial speed
}); });
} }
// Item mechanics // Item mechanics
function createItem() { function createItem() {
const randomType = sphereTypes[Math.floor(Math.random() * sphereTypes.length)]; const randomType =
sphereTypes[Math.floor(Math.random() * sphereTypes.length)];
const size = 30; const size = 30;
const x = Math.random() * canvas.width; const x = Math.random() * canvas.width;
items.push({ items.push({
@ -185,8 +191,15 @@ function createItem() {
width: size, width: size,
height: size, height: size,
type: randomType, type: randomType,
color: randomType === 'blue' ? 'blue' : randomType === 'yellow' ? 'yellow' : randomType === 'green' ? 'green' : 'rainbow', color:
speed: 3 randomType === "blue"
? "blue"
: randomType === "yellow"
? "yellow"
: randomType === "green"
? "green"
: "rainbow",
speed: 3,
}); });
} }
@ -194,7 +207,8 @@ function createItem() {
function updatePlayer() { function updatePlayer() {
player.x += player.dx; player.x += player.dx;
if (player.x < 0) player.x = 0; 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() { function updateBullets() {
@ -230,15 +244,15 @@ function updateItems() {
function applyItemEffect(type) { function applyItemEffect(type) {
let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5 let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5
if (type === 'blue') { if (type === "blue") {
rapidFireActive = true; rapidFireActive = true;
setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire setTimeout(() => (rapidFireActive = false), 15000); // 15 seconds of rapid fire
} else if (type === 'yellow') { } else if (type === "yellow") {
shotgunActive = true; shotgunActive = true;
setTimeout(() => shotgunActive = false, 30000); // 30 seconds of shotgun setTimeout(() => (shotgunActive = false), 30000); // 30 seconds of shotgun
} else if (type === 'green') { } else if (type === "green") {
ammo = 100; // Refill ammo ammo = 100; // Refill ammo
} else if (type === 'rainbow') { } else if (type === "rainbow") {
rapidFireActive = true; rapidFireActive = true;
shotgunActive = true; shotgunActive = true;
setTimeout(() => { setTimeout(() => {
@ -282,7 +296,7 @@ function checkCollisions() {
// Explosion effect // Explosion effect
function createExplosion(x, y) { function createExplosion(x, y) {
ctx.fillStyle = 'yellow'; ctx.fillStyle = "yellow";
ctx.beginPath(); ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2); ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill(); ctx.fill();
@ -313,33 +327,47 @@ function drawItems() {
items.forEach((item) => { items.forEach((item) => {
ctx.fillStyle = item.color; ctx.fillStyle = item.color;
ctx.beginPath(); 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(); ctx.fill();
}); });
} }
function drawScore() { function drawScore() {
ctx.fillStyle = 'white'; ctx.fillStyle = "white";
ctx.font = '24px Arial'; ctx.font = "24px Arial";
ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner
} }
function drawAmmo() { function drawAmmo() {
ctx.fillStyle = 'white'; ctx.fillStyle = "white";
ctx.font = '24px Arial'; ctx.font = "24px Arial";
ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner
} }
function drawGameOver() { function drawGameOver() {
if (isGameOver) { if (isGameOver) {
ctx.fillStyle = 'white'; ctx.fillStyle = "white";
ctx.font = '40px Arial'; ctx.font = "40px Arial";
ctx.textAlign = 'center'; ctx.textAlign = "center";
ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40); ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 40);
ctx.font = '24px Arial'; ctx.font = "24px Arial";
ctx.fillText(`Total Score: ${score}`, canvas.width / 2, canvas.height / 2); 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(
ctx.fillText('Press "R" to Restart', canvas.width / 2, canvas.height / 2 + 80); `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 { body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
} }
canvas { canvas {
display: block; display: block;
background: black; background: black;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.controls { .controls {
display: none; display: none;
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 80%; width: 80%;
} }
.control-btn { .control-btn {
display: none; display: none;
padding: 10px; padding: 10px;
font-size: 18px; font-size: 18px;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
color: white; color: white;
border: 1px solid #fff; border: 1px solid #fff;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
flex-grow: 1; flex-grow: 1;
margin: 0 5px; margin: 0 5px;
} }
@media(max-width: 600px) { @media (max-width: 600px) {
.control-btn { .control-btn {
display: block; display: block;
font-size: 16px; font-size: 16px;
padding: 12px; padding: 12px;
} }
} }

96
secret/asteroidDestroyer/styles.css
View file

@ -1,74 +1,76 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body, body,
html { html {
height: 100%; height: 100%;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #000; background-color: #000;
color: white; color: white;
overflow: hidden; overflow: hidden;
} }
.landing-page { .landing-page {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.game-background { .game-background {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */ background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
backdrop-filter: blur(8px); /* Apply blur effect to the background */ backdrop-filter: blur(8px); /* Apply blur effect to the background */
z-index: -1; /* Ensures it's in the background */ z-index: -1; /* Ensures it's in the background */
pointer-events: none; /* Prevent interaction with the blurred background */ pointer-events: none; /* Prevent interaction with the blurred background */
} }
.content { .content {
text-align: center; text-align: center;
z-index: 1; /* Ensure content appears above the game background */ z-index: 1; /* Ensure content appears above the game background */
padding: 20px; padding: 20px;
max-width: 600px; /* Limit the width of the content */ max-width: 600px; /* Limit the width of the content */
position: relative; position: relative;
color: white; color: white;
backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */ backdrop-filter: blur(
8px
); /* Ensure content has some blur as well for contrast */
} }
h1 { h1 {
font-size: 2rem; font-size: 2rem;
margin-bottom: 20px; margin-bottom: 20px;
} }
p { p {
font-size: 1.2rem; font-size: 1.2rem;
margin-bottom: 30px; margin-bottom: 30px;
} }
button { button {
padding: 12px 24px; padding: 12px 24px;
background-color: #ffcc00; background-color: #ffcc00;
color: black; color: black;
border: none; border: none;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
text-transform: uppercase; text-transform: uppercase;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
button:hover { 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"; import { useEffect, useRef, useState } from "react";
export default function EndlessRunner() { export default function EndlessRunner() {
const canvasRef = useRef(null); const canvasRef = useRef(null);
const [running, setRunning] = useState(true); const [running, setRunning] = useState(true);
const player = { x: 50, y: 150, width: 20, height: 20, dy: 0 }; const player = { x: 50, y: 150, width: 20, height: 20, dy: 0 };
const gravity = 0.5; const gravity = 0.5;
let obstacles = []; let obstacles = [];
let score = 0; let score = 0;
useEffect(() => { useEffect(() => {
const canvas = canvasRef.current; const canvas = canvasRef.current;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = 300; canvas.height = 300;
function update() { function update() {
if (!running) return; if (!running) return;
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
// Player physics // Player physics
player.dy += gravity; player.dy += gravity;
player.y += player.dy; player.y += player.dy;
if (player.y > 150) { if (player.y > 150) {
player.y = 150; player.y = 150;
player.dy = 0; player.dy = 0;
} }
// Draw player // Draw player
ctx.fillStyle = "blue"; ctx.fillStyle = "blue";
ctx.fillRect(player.x, player.y, player.width, player.height); ctx.fillRect(player.x, player.y, player.width, player.height);
// Obstacles // Obstacles
if (Math.random() < 0.02) { if (Math.random() < 0.02) {
obstacles.push({ x: canvas.width, y: 150, width: 20, height: 20 }); obstacles.push({ x: canvas.width, y: 150, width: 20, height: 20 });
} }
obstacles = obstacles.map(obstacle => ({ ...obstacle, x: obstacle.x - 5 })); obstacles = obstacles.map((obstacle) => ({
obstacles = obstacles.filter(obstacle => obstacle.x + obstacle.width > 0); ...obstacle,
x: obstacle.x - 5,
}));
obstacles = obstacles.filter(
(obstacle) => obstacle.x + obstacle.width > 0
);
obstacles.forEach(obstacle => { obstacles.forEach((obstacle) => {
ctx.fillStyle = "red"; ctx.fillStyle = "red";
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height); ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
// Collision detection // Collision detection
if ( if (
player.x < obstacle.x + obstacle.width && player.x < obstacle.x + obstacle.width &&
player.x + player.width > obstacle.x && player.x + player.width > obstacle.x &&
player.y < obstacle.y + obstacle.height && player.y < obstacle.y + obstacle.height &&
player.y + player.height > obstacle.y player.y + player.height > obstacle.y
) { ) {
setRunning(false); setRunning(false);
}
});
// Score
score++;
ctx.fillStyle = "black";
ctx.fillText("Score: " + score, 10, 20);
requestAnimationFrame(update);
} }
});
update(); // Score
}, [running]); score++;
ctx.fillStyle = "black";
ctx.fillText("Score: " + score, 10, 20);
function jump() { requestAnimationFrame(update);
if (player.y >= 150) {
player.dy = -10;
}
} }
return ( update();
<div className="flex flex-col items-center"> }, [running]);
<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>} function jump() {
</div> 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"; "use strict";
// Canvas setup // Canvas setup
const canvas = document.getElementById('gameCanvas'); const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
@ -11,9 +11,9 @@ const player = {
y: canvas.height - 60, y: canvas.height - 60,
width: 40, width: 40,
height: 40, height: 40,
color: 'white', color: "white",
speed: 5, speed: 5,
dx: 0 dx: 0,
}; };
let bullets = []; let bullets = [];
@ -44,14 +44,14 @@ let greenSphereCooldown = 0;
let rainbowSphereCooldown = 0; let rainbowSphereCooldown = 0;
// Sphere types // Sphere types
const sphereTypes = ['blue', 'yellow', 'green', 'rainbow']; const sphereTypes = ["blue", "yellow", "green", "rainbow"];
/// Control for left button press and release /// Control for left button press and release
function btnMoveLeft(isPressed) { function btnMoveLeft(isPressed) {
if (isPressed) { if (isPressed) {
player.dx = -player.speed; // Start moving left player.dx = -player.speed; // Start moving left
} else { } 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 // Control for right button press and release
function btnMoveRight(isPressed) { function btnMoveRight(isPressed) {
if (isPressed) { if (isPressed) {
player.dx = player.speed; // Start moving right player.dx = player.speed; // Start moving right
} else { } 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 canShoot = true; // Allow shooting again when button is released
}); });
window.addEventListener('keydown', (e) => { window.addEventListener("keydown", (e) => {
if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed; if (e.key === "ArrowLeft" || e.key === "a") player.dx = -player.speed;
if (e.key === 'ArrowRight' || e.key === 'd') 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 // Shoot only if it's not a hold, and we can shoot
if (e.key === ' ' && canShoot && !isGameOver) { if (e.key === " " && canShoot && !isGameOver) {
shootBullet(); shootBullet();
canShoot = false; // Prevent shooting until the key is released 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 // 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; player.dx = 0;
} }
// Allow shooting again when the space key is released // Allow shooting again when the space key is released
if (e.key === ' ') { if (e.key === " ") {
canShoot = true; canShoot = true;
} }
}); });
@ -120,8 +125,8 @@ function shootBullet() {
y: player.y, y: player.y,
width: 5, width: 5,
height: 10, height: 10,
color: 'yellow', color: "yellow",
speed: 7 speed: 7,
}); });
}, i * 50); // Fire bullets with 50ms delay between shots }, i * 50); // Fire bullets with 50ms delay between shots
} }
@ -133,9 +138,9 @@ function shootBullet() {
y: player.y, y: player.y,
width: 5, width: 5,
height: 10, height: 10,
color: 'yellow', color: "yellow",
speed: 7, speed: 7,
angle: i * 10 // Spray the bullets at different angles angle: i * 10, // Spray the bullets at different angles
}); });
} }
} else { } else {
@ -145,15 +150,15 @@ function shootBullet() {
y: player.y, y: player.y,
width: 5, width: 5,
height: 10, height: 10,
color: 'yellow', color: "yellow",
speed: 7 speed: 7,
}); });
} }
} }
// Generate random color // Generate random color
function getRandomColor() { 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)]; return colors[Math.floor(Math.random() * colors.length)];
} }
@ -166,13 +171,14 @@ function createAsteroid() {
width: size, width: size,
height: size, height: size,
color: getRandomColor(), color: getRandomColor(),
speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier // Faster initial speed speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier, // Faster initial speed
}); });
} }
// Item mechanics // Item mechanics
function createItem() { function createItem() {
const randomType = sphereTypes[Math.floor(Math.random() * sphereTypes.length)]; const randomType =
sphereTypes[Math.floor(Math.random() * sphereTypes.length)];
const size = 30; const size = 30;
const x = Math.random() * canvas.width; const x = Math.random() * canvas.width;
items.push({ items.push({
@ -181,8 +187,15 @@ function createItem() {
width: size, width: size,
height: size, height: size,
type: randomType, type: randomType,
color: randomType === 'blue' ? 'blue' : randomType === 'yellow' ? 'yellow' : randomType === 'green' ? 'green' : 'rainbow', color:
speed: 3 randomType === "blue"
? "blue"
: randomType === "yellow"
? "yellow"
: randomType === "green"
? "green"
: "rainbow",
speed: 3,
}); });
} }
@ -190,7 +203,8 @@ function createItem() {
function updatePlayer() { function updatePlayer() {
player.x += player.dx; player.x += player.dx;
if (player.x < 0) player.x = 0; 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() { function updateBullets() {
@ -226,15 +240,15 @@ function updateItems() {
function applyItemEffect(type) { function applyItemEffect(type) {
let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5 let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5
if (type === 'blue') { if (type === "blue") {
rapidFireActive = true; rapidFireActive = true;
setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire setTimeout(() => (rapidFireActive = false), 15000); // 15 seconds of rapid fire
} else if (type === 'yellow') { } else if (type === "yellow") {
shotgunActive = true; shotgunActive = true;
setTimeout(() => shotgunActive = false, 30000); // 30 seconds of shotgun setTimeout(() => (shotgunActive = false), 30000); // 30 seconds of shotgun
} else if (type === 'green') { } else if (type === "green") {
ammo = 100; // Refill ammo ammo = 100; // Refill ammo
} else if (type === 'rainbow') { } else if (type === "rainbow") {
rapidFireActive = true; rapidFireActive = true;
shotgunActive = true; shotgunActive = true;
setTimeout(() => { setTimeout(() => {
@ -278,7 +292,7 @@ function checkCollisions() {
// Explosion effect // Explosion effect
function createExplosion(x, y) { function createExplosion(x, y) {
ctx.fillStyle = 'yellow'; ctx.fillStyle = "yellow";
ctx.beginPath(); ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2); ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill(); ctx.fill();
@ -309,33 +323,47 @@ function drawItems() {
items.forEach((item) => { items.forEach((item) => {
ctx.fillStyle = item.color; ctx.fillStyle = item.color;
ctx.beginPath(); 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(); ctx.fill();
}); });
} }
function drawScore() { function drawScore() {
ctx.fillStyle = 'white'; ctx.fillStyle = "white";
ctx.font = '24px Arial'; ctx.font = "24px Arial";
ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner
} }
function drawAmmo() { function drawAmmo() {
ctx.fillStyle = 'white'; ctx.fillStyle = "white";
ctx.font = '24px Arial'; ctx.font = "24px Arial";
ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner
} }
function drawGameOver() { function drawGameOver() {
if (isGameOver) { if (isGameOver) {
ctx.fillStyle = 'white'; ctx.fillStyle = "white";
ctx.font = '40px Arial'; ctx.font = "40px Arial";
ctx.textAlign = 'center'; ctx.textAlign = "center";
ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40); ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 40);
ctx.font = '24px Arial'; ctx.font = "24px Arial";
ctx.fillText(`Total Score: ${score}`, canvas.width / 2, canvas.height / 2); 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(
ctx.fillText('Press "R" to Restart', canvas.width / 2, canvas.height / 2 + 80); `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; const targetNum = Math.trunc(Math.random() * 20) + 1;
let highScore = Number(localStorage.getItem('highscore')) || 0; let highScore = Number(localStorage.getItem("highscore")) || 0;
let userGuess = 10; // Default guess let userGuess = 10; // Default guess
let currScore = 20; let currScore = 20;
const screenEl = document.querySelector('.screen'); const screenEl = document.querySelector(".screen");
const msgEl = document.querySelector('.message'); const msgEl = document.querySelector(".message");
const guessInput = document.querySelector('#guess'); const guessInput = document.querySelector("#guess");
const scoreEl = document.querySelector('.score'); const scoreEl = document.querySelector(".score");
const highScoreEl = document.querySelector('.highScore'); const highScoreEl = document.querySelector(".highScore");
const checkBtn = document.querySelector('#check'); const checkBtn = document.querySelector("#check");
const restartBtn = document.querySelector('#restart'); const restartBtn = document.querySelector("#restart");
const incBtn = document.querySelector('#up'); const incBtn = document.querySelector("#up");
const decBtn = document.querySelector('#down'); const decBtn = document.querySelector("#down");
const setMsg = msg => msgEl.textContent = msg; const setMsg = (msg) => (msgEl.textContent = msg);
const setScore = score => scoreEl.textContent = `Score: ${currScore = score}`; const setScore = (score) =>
(scoreEl.textContent = `Score: ${(currScore = score)}`);
const setHighScore = () => { const setHighScore = () => {
highScoreEl.textContent = `Highscore: ${highScore}`; highScoreEl.textContent = `Highscore: ${highScore}`;
localStorage.setItem('highscore', highScore); localStorage.setItem("highscore", highScore);
}; };
const changeColor = color => screenEl.style.backgroundColor = color; const changeColor = (color) => (screenEl.style.backgroundColor = color);
checkBtn.addEventListener('click', () => { checkBtn.addEventListener("click", () => {
userGuess = Number(guessInput.textContent); userGuess = Number(guessInput.textContent);
if (!userGuess || userGuess < 1 || userGuess > 20) { if (!userGuess || userGuess < 1 || userGuess > 20) {
setMsg("Please enter a valid number between 1 and 20."); setMsg("Please enter a valid number between 1 and 20.");
} else if (userGuess === targetNum) { } else if (userGuess === targetNum) {
highScore = Math.max(highScore, currScore); highScore = Math.max(highScore, currScore);
setHighScore(); setHighScore();
setMsg(currScore !== 20 ? 'Correct Number!' : 'Are you sure you didn\'t cheat?'); setMsg(
changeColor(currScore !== 20 ? '#1ba100' : '#FFC300'); 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 { } else {
setMsg(userGuess > targetNum ? 'Too High!' : 'Too Low!'); setScore(1);
if (currScore > 1) { setMsg("You lost the game!");
setScore(currScore - 1); changeColor("#a10000");
} else {
setScore(1);
setMsg("You lost the game!");
changeColor('#a10000');
}
} }
}
}); });
restartBtn.addEventListener('click', () => location.reload()); restartBtn.addEventListener("click", () => location.reload());
incBtn.addEventListener('click', () => guessInput.textContent = Math.min(Number(guessInput.textContent) + 1, 20)); incBtn.addEventListener(
decBtn.addEventListener('click', () => guessInput.textContent = Math.max(Number(guessInput.textContent) - 1, 1)); "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; guessInput.textContent = userGuess;
setMsg('Guess a number'); setMsg("Guess a number");
setScore(currScore); setScore(currScore);
setHighScore(); setHighScore();

226
secret/guessMyNumber/styles.css
View file

@ -1,189 +1,189 @@
/* Base Reset */ /* Base Reset */
body, body,
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: monospace; font-family: monospace;
background-color: #3a2d56; background-color: #3a2d56;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
} }
/* GameBoy Layout */ /* GameBoy Layout */
.gameboy { .gameboy {
background-color: #5f4c82; /* Game Boy Color purple shell */ background-color: #5f4c82; /* Game Boy Color purple shell */
width: 441px; width: 441px;
height: 735px; height: 735px;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
position: relative; position: relative;
} }
@media(max-width: 768px) { @media (max-width: 768px) {
.gameboy { .gameboy {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
border-radius: 0; border-radius: 0;
} }
} }
/* Screen */ /* Screen */
.screen { .screen {
background-color: #306230; /* Game Boy green screen */ background-color: #306230; /* Game Boy green screen */
border: 4px solid #0f380f; border: 4px solid #0f380f;
width: 90%; width: 90%;
height: 55%; height: 55%;
margin-top: 20px; margin-top: 20px;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
overflow: hidden; overflow: hidden;
} }
.game { .game {
text-align: center; text-align: center;
width: 90%; width: 90%;
} }
/* Titles */ /* Titles */
h1 { h1 {
font-size: 2rem; /* Increased font size */ font-size: 2rem; /* Increased font size */
margin-bottom: 10px; margin-bottom: 10px;
text-transform: uppercase; text-transform: uppercase;
} }
/* Guess Display */ /* Guess Display */
.guess-display { .guess-display {
background-color: #9bbc0f; background-color: #9bbc0f;
color: #0f380f; color: #0f380f;
border: 2px solid #0f380f; border: 2px solid #0f380f;
font-size: 2rem; /* Increased font size */ font-size: 2rem; /* Increased font size */
width: 80px; /* Increased width */ width: 80px; /* Increased width */
text-align: center; text-align: center;
margin: 10px auto; margin: 10px auto;
padding: 10px; /* Increased padding */ padding: 10px; /* Increased padding */
border-radius: 4px; border-radius: 4px;
} }
/* Messages */ /* Messages */
.message, .message,
.score, .score,
.highScore { .highScore {
font-size: 1.4rem; /* Increased font size */ font-size: 1.4rem; /* Increased font size */
margin: 5px 0; margin: 5px 0;
} }
.description, .description,
.description p { .description p {
font-size: 1.2rem; font-size: 1.2rem;
margin: 0 auto; margin: 0 auto;
padding: 0 auto; padding: 0 auto;
} }
/* Controls Section */ /* Controls Section */
.controls { .controls {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 80%; width: 80%;
align-items: center; align-items: center;
} }
/* D-Pad */ /* D-Pad */
.dpad { .dpad {
position: relative; position: relative;
width: 120px; /* Increased size */ width: 120px; /* Increased size */
height: 120px; /* Increased size */ height: 120px; /* Increased size */
} }
/* Base Styling for D-Pad Buttons */ /* Base Styling for D-Pad Buttons */
.dpad-btn { .dpad-btn {
background-color: #0f380f; background-color: #0f380f;
color: #9bbc0f; color: #9bbc0f;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
position: absolute; position: absolute;
width: 42px; width: 42px;
height: 42px; height: 42px;
font-size: 1.5rem; /* Increased size */ font-size: 1.5rem; /* Increased size */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
} }
.dpad-btn.up { .dpad-btn.up {
top: 0; top: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.dpad-btn.down { .dpad-btn.down {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.dpad-btn.left { .dpad-btn.left {
top: 50%; top: 50%;
left: 0; left: 0;
transform: translateY(-50%); transform: translateY(-50%);
} }
.dpad-btn.right { .dpad-btn.right {
top: 50%; top: 50%;
right: 0; right: 0;
transform: translateY(-50%); transform: translateY(-50%);
} }
/* D-Pad Center to Connect Buttons */ /* D-Pad Center to Connect Buttons */
.dpad-center { .dpad-center {
background-color: #0f380f; background-color: #0f380f;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 2px solid #9cbc0f00; border: 2px solid #9cbc0f00;
z-index: 0; z-index: 0;
border-radius: 5px; border-radius: 5px;
} }
/* A and B Buttons */ /* A and B Buttons */
.action-buttons { .action-buttons {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
height: 140px; /* Increased height */ height: 140px; /* Increased height */
} }
.btn { .btn {
background-color: #0f380f; background-color: #0f380f;
color: #9bbc0f; color: #9bbc0f;
border: 2px solid #9bbc0f; border: 2px solid #9bbc0f;
border-radius: 50%; border-radius: 50%;
width: 60px; width: 60px;
height: 60px; height: 60px;
font-size: 1.8rem; /* Increased font size */ font-size: 1.8rem; /* Increased font size */
cursor: pointer; cursor: pointer;
transition: transform 0.1s, background-color 0.2s; transition: transform 0.1s, background-color 0.2s;
} }
.btn:hover { .btn:hover {
background-color: #9bbc0f; background-color: #9bbc0f;
color: #0f380f; color: #0f380f;
} }
.btn:active { .btn:active {
transform: scale(0.9); transform: scale(0.9);
} }

174
secret/guessMyNumber/styles.js
View file

@ -1,62 +1,148 @@
'use strict'; "use strict";
const left = document.querySelector('#left'); const left = document.querySelector("#left");
const right = document.querySelector('#right'); const right = document.querySelector("#right");
const gameboy = document.querySelector('.gameboy'); const gameboy = document.querySelector(".gameboy");
const html = document.documentElement; const html = document.documentElement;
const body = document.body; const body = document.body;
const screen = document.querySelector('.screen'); const screen = document.querySelector(".screen");
const dpadButtons = document.querySelectorAll('.dpad-btn'); const dpadButtons = document.querySelectorAll(".dpad-btn");
const dpadCenter = document.querySelector('.dpad-center'); // Darker variant const dpadCenter = document.querySelector(".dpad-center"); // Darker variant
const actionButtons = document.querySelectorAll('.btn'); const actionButtons = document.querySelectorAll(".btn");
const colors = [ 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: "#B39DDB",
{ gameboyColor: '#8BC34A', htmlColor: '#C5E1A5', screenColor: '#A5D6A7', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#E64A19' }, htmlColor: "#D1C4E9",
{ gameboyColor: '#F44336', htmlColor: '#FFCDD2', screenColor: '#EF9A9A', buttonColor: '#E91E63', buttonTextColor: '#FFFFFF', dpadCenterColor: '#C2185B' }, screenColor: "#E1BEE7",
{ gameboyColor: '#03A9F4', htmlColor: '#BBDEFB', screenColor: '#90CAF9', buttonColor: '#FFEB3B', buttonTextColor: '#000000', dpadCenterColor: '#0277BD' }, buttonColor: "#673AB7",
{ gameboyColor: '#FF7043', htmlColor: '#FFCCBC', screenColor: '#FFAB91', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#D84315' }, buttonTextColor: "#FFFFFF",
{ gameboyColor: '#9C27B0', htmlColor: '#E1BEE7', screenColor: '#D1C4E9', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF', dpadCenterColor: '#6A1B9A' }, dpadCenterColor: "#5E35B1",
{ 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: "#FFC107",
{ gameboyColor: '#FF5733', htmlColor: '#FFCCCB', screenColor: '#FFABAB', buttonColor: '#C70039', buttonTextColor: '#FFFFFF', dpadCenterColor: '#B71C1C' }, htmlColor: "#FFF9C4",
{ gameboyColor: '#00BCD4', htmlColor: '#B2EBF2', screenColor: '#80DEEA', buttonColor: '#00ACC1', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00838F' } 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() { function updateGameBoyColor() {
gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor;
html.style.backgroundColor = colors[currentColorIndex].htmlColor; html.style.backgroundColor = colors[currentColorIndex].htmlColor;
body.style.backgroundColor = colors[currentColorIndex].htmlColor; body.style.backgroundColor = colors[currentColorIndex].htmlColor;
screen.style.backgroundColor = colors[currentColorIndex].screenColor; screen.style.backgroundColor = colors[currentColorIndex].screenColor;
dpadButtons.forEach(button => { dpadButtons.forEach((button) => {
button.style.backgroundColor = colors[currentColorIndex].buttonColor; button.style.backgroundColor = colors[currentColorIndex].buttonColor;
button.style.color = colors[currentColorIndex].buttonTextColor; button.style.color = colors[currentColorIndex].buttonTextColor;
}); });
// Using darker dpad center color // Using darker dpad center color
dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor;
dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; dpadCenter.style.color = colors[currentColorIndex].buttonTextColor;
actionButtons.forEach(button => { actionButtons.forEach((button) => {
button.style.backgroundColor = colors[currentColorIndex].buttonColor; button.style.backgroundColor = colors[currentColorIndex].buttonColor;
button.style.color = colors[currentColorIndex].buttonTextColor; button.style.color = colors[currentColorIndex].buttonTextColor;
}); });
} }
left.addEventListener('click', () => { left.addEventListener("click", () => {
currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length;
localStorage.setItem('gameboyColorIndex', currentColorIndex); localStorage.setItem("gameboyColorIndex", currentColorIndex);
updateGameBoyColor(); updateGameBoyColor();
}); });
right.addEventListener('click', () => { right.addEventListener("click", () => {
currentColorIndex = (currentColorIndex + 1) % colors.length; currentColorIndex = (currentColorIndex + 1) % colors.length;
localStorage.setItem('gameboyColorIndex', currentColorIndex); localStorage.setItem("gameboyColorIndex", currentColorIndex);
updateGameBoyColor(); updateGameBoyColor();
}); });
updateGameBoyColor(); updateGameBoyColor();

321
secret/mineSweeper/script.js
View file

@ -1,173 +1,192 @@
document.getElementById('startGame').addEventListener('click', function () { document.getElementById("startGame").addEventListener("click", function () {
const gridSize = parseInt(document.getElementById('gridSize').value); const gridSize = parseInt(document.getElementById("gridSize").value);
const bombs = parseInt(document.getElementById('bombs').value); const bombs = parseInt(document.getElementById("bombs").value);
document.getElementById('settings').style.display = 'none'; document.getElementById("settings").style.display = "none";
document.getElementById('game').style.display = 'block'; document.getElementById("game").style.display = "block";
renderGame(gridSize, bombs); renderGame(gridSize, bombs);
}); });
const canvas = document.getElementById('game'); const canvas = document.getElementById("game");
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext("2d");
class Minesweeper { class Minesweeper {
constructor(width, height, bombs) { constructor(width, height, bombs) {
this.size = 25; this.size = 25;
this.field = new Array(width); this.field = new Array(width);
this.bombs = new Array(width); this.bombs = new Array(width);
for (let x = 0; x < this.field.length; x++) { for (let x = 0; x < this.field.length; x++) {
this.field[x] = new Array(height); this.field[x] = new Array(height);
this.bombs[x] = new Array(height); this.bombs[x] = new Array(height);
for (let y = 0; y < this.field[x].length; y++) { for (let y = 0; y < this.field[x].length; y++) {
this.field[x][y] = 1; this.field[x][y] = 1;
this.bombs[x][y] = false; 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();
} }
generateBombs() { this.bombAmount =
for (let i = 0; i < this.bombAmount; i++) { bombs > (width * height) / 2 ? (width * height) / 2 : bombs;
let x = Math.floor(Math.random() * this.width); this.width = width;
let y = Math.floor(Math.random() * this.height); this.height = height;
(this.bombs[x][y] || this.field[x][y] == 0) ? i-- : this.bombs[x][y] = true; this.firstClick = false;
} this.drawField();
this.firstClick = true; }
}
getNearbyBombs(x, y) { generateBombs() {
let counter = 0; for (let i = 0; i < this.bombAmount; i++) {
for (let newX = x - 1; newX <= x + 1; newX++) { let x = Math.floor(Math.random() * this.width);
for (let newY = y - 1; newY <= y + 1; newY++) { let y = Math.floor(Math.random() * this.height);
if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) { this.bombs[x][y] || this.field[x][y] == 0
this.bombs[newX][newY] ? counter++ : {}; ? i--
} : (this.bombs[x][y] = true);
}
}
return counter;
} }
this.firstClick = true;
}
checkWin() { getNearbyBombs(x, y) {
for (let x = 0; x < this.field.length; x++) { let counter = 0;
for (let y = 0; y < this.field[x].length; y++) { for (let newX = x - 1; newX <= x + 1; newX++) {
if (this.field[x][y] != 0 && !this.bombs[x][y]) { for (let newY = y - 1; newY <= y + 1; newY++) {
return; if (
} else if (this.field[x][y] == 0 && this.bombs[x][y]) { newX < this.field.length &&
alert(`[ERROR]: Square (${x}|${y}) should not be a bomb!`); newX >= 0 &&
this.bombs[x][y] = false; 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(); window.location.reload();
} } else if (this.field[x][y] == 1) {
this.field[x][y] = 0;
markSquare(x, y) { !this.firstClick ? this.generateBombs() : {};
if (x < this.field.length && y < this.field[0].length) { if (this.getNearbyBombs(x, y) == 0) {
switch (this.field[x][y]) { for (let newX = x - 1; newX <= x + 1; newX++) {
case 1: for (let newY = y - 1; newY <= y + 1; newY++) {
this.field[x][y]++; if (
break; newX < this.field.length &&
case 2: newX >= 0 &&
this.field[x][y]++; newY < this.field[0].length &&
break; newY >= 0
case 3: ) {
this.field[x][y] = 1; this.field[newX][newY] == 1
break; ? this.uncoverSquare(newX, newY)
default: : {};
break; }
} }
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) { canvas.width = this.size * this.field.length;
if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) { canvas.height = this.size * this.field[0].length;
if (this.bombs[x][y] && this.field[x][y] == 1) {
alert('You lost!'); const offsetX = (canvas.width - this.field.length * this.size) / 2;
window.location.reload(); const offsetY = (canvas.height - this.field[0].length * this.size) / 2;
} else if (this.field[x][y] == 1) {
this.field[x][y] = 0; for (let x = 0; x < this.field.length; x++) {
!this.firstClick ? this.generateBombs() : {}; for (let y = 0; y < this.field[x].length; y++) {
if (this.getNearbyBombs(x, y) == 0) { this.drawSquare(x, y, this.field[x][y], offsetX, offsetY);
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);
}
}
} }
}
} }
const renderGame = (gridSize, bombs) => { const renderGame = (gridSize, bombs) => {
let field = new Minesweeper(gridSize, gridSize, bombs); let field = new Minesweeper(gridSize, gridSize, bombs);
window.addEventListener('resize', () => field.drawField()); window.addEventListener("resize", () => field.drawField());
canvas.addEventListener('click', (event) => { canvas.addEventListener("click", (event) => {
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
const x = Math.floor((event.clientX - rect.left) / field.size); const x = Math.floor((event.clientX - rect.left) / field.size);
const y = Math.floor((event.clientY - rect.top) / field.size); const y = Math.floor((event.clientY - rect.top) / field.size);
field.uncoverSquare(x, y); field.uncoverSquare(x, y);
}); });
canvas.addEventListener('contextmenu', (event) => { canvas.addEventListener("contextmenu", (event) => {
event.preventDefault(); event.preventDefault();
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
const x = Math.floor((event.clientX - rect.left) / field.size); const x = Math.floor((event.clientX - rect.left) / field.size);
const y = Math.floor((event.clientY - rect.top) / field.size); const y = Math.floor((event.clientY - rect.top) / field.size);
field.markSquare(x, y); field.markSquare(x, y);
}); });
}; };

130
secret/mineSweeper/styles.css
View file

@ -1,104 +1,104 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body, body,
html { html {
height: 100%; height: 100%;
margin: 0; margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #121212; background-color: #121212;
color: #e0e0e0; color: #e0e0e0;
} }
#settings { #settings {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
margin: auto; margin: auto;
background-color: #1e1e1e; background-color: #1e1e1e;
padding: 40px; padding: 40px;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
} }
h1 { h1 {
font-size: 2.5em; font-size: 2.5em;
margin-bottom: 20px; margin-bottom: 20px;
color: #007bff; color: #007bff;
} }
label { label {
margin-bottom: 12px; margin-bottom: 12px;
font-size: 20px; font-size: 20px;
color: #d1d1d1; color: #d1d1d1;
} }
input[type="number"], input[type="number"],
input[type="range"], input[type="range"],
span { span {
padding: 12px; padding: 12px;
margin-bottom: 20px; margin-bottom: 20px;
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
text-align: center; text-align: center;
border: 1px solid #444; border: 1px solid #444;
border-radius: 6px; border-radius: 6px;
background-color: #333; background-color: #333;
color: #e0e0e0; color: #e0e0e0;
font-size: 18px; font-size: 18px;
transition: border-color 0.3s ease; transition: border-color 0.3s ease;
} }
input[type="number"]:focus, input[type="number"]:focus,
input[type="range"]:focus { input[type="range"]:focus {
border-color: #007bff; border-color: #007bff;
outline: none; outline: none;
} }
button { button {
padding: 12px 24px; padding: 12px 24px;
background-color: #007bff; background-color: #007bff;
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease; transition: background-color 0.3s ease, transform 0.2s ease;
font-size: 18px; font-size: 18px;
} }
button:hover { button:hover {
background-color: #0056b3; background-color: #0056b3;
transform: translateY(-2px); transform: translateY(-2px);
} }
button:active { button:active {
transform: translateY(0); transform: translateY(0);
} }
canvas { canvas {
display: none; display: none;
} }
@media(max-width: 600px) { @media (max-width: 600px) {
#settings { #settings {
font-size: 16px; font-size: 16px;
} }
input[type="number"], input[type="number"],
input[type="range"], input[type="range"],
button { button {
width: 90%; width: 90%;
max-width: none; max-width: none;
} }
} }

204
secret/snake/game.js
View file

@ -1,13 +1,13 @@
'use strict'; "use strict";
const upButton = document.getElementById('up'); const upButton = document.getElementById("up");
const downButton = document.getElementById('down'); const downButton = document.getElementById("down");
const leftButton = document.getElementById('left'); const leftButton = document.getElementById("left");
const rightButton = document.getElementById('right'); const rightButton = document.getElementById("right");
const startButton = document.getElementById('start'); const startButton = document.getElementById("start");
const grid = document.createElement('div'); const grid = document.createElement("div");
grid.id = 'grid'; grid.id = "grid";
document.querySelector('.game').appendChild(grid); document.querySelector(".game").appendChild(grid);
let snake = [{ x: 5, y: 5 }]; let snake = [{ x: 5, y: 5 }];
let apple = { x: 8, y: 5 }; let apple = { x: 8, y: 5 };
@ -17,128 +17,134 @@ let isGameRunning = false;
const gridSize = 10; const gridSize = 10;
function initGame() { function initGame() {
grid.style.display = 'grid'; grid.style.display = "grid";
grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`; grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`; grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
grid.style.width = '350px'; grid.style.width = "350px";
grid.style.height = '350px'; grid.style.height = "350px";
document.getElementById('title').style.display = 'none'; document.getElementById("title").style.display = "none";
document.getElementById('description').style.display = 'none'; document.getElementById("description").style.display = "none";
isGameRunning = true; isGameRunning = true;
snake = [{ x: 5, y: 5 }]; snake = [{ x: 5, y: 5 }];
apple = spawnApple(); apple = spawnApple();
direction = { x: 0, y: 0 }; direction = { x: 0, y: 0 };
clearInterval(gameInterval); clearInterval(gameInterval);
gameInterval = setInterval(gameLoop, 200); gameInterval = setInterval(gameLoop, 200);
render(); render();
} }
function spawnApple() { function spawnApple() {
let newApple; let newApple;
do { do {
newApple = { newApple = {
x: Math.floor(Math.random() * gridSize), x: Math.floor(Math.random() * gridSize),
y: Math.floor(Math.random() * gridSize) y: Math.floor(Math.random() * gridSize),
}; };
} while (snake.some(segment => segment.x === newApple.x && segment.y === newApple.y)); } while (
return newApple; snake.some(
(segment) => segment.x === newApple.x && segment.y === newApple.y
)
);
return newApple;
} }
function updateSnake() { function updateSnake() {
const newHead = { const newHead = {
x: snake[0].x + direction.x, x: snake[0].x + direction.x,
y: snake[0].y + direction.y y: snake[0].y + direction.y,
}; };
if (newHead.x < 0) newHead.x = gridSize - 1; if (newHead.x < 0) newHead.x = gridSize - 1;
if (newHead.y < 0) newHead.y = gridSize - 1; if (newHead.y < 0) newHead.y = gridSize - 1;
if (newHead.x >= gridSize) newHead.x = 0; if (newHead.x >= gridSize) newHead.x = 0;
if (newHead.y >= gridSize) newHead.y = 0; if (newHead.y >= gridSize) newHead.y = 0;
if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) { if (
gameOver(); snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y)
return; ) {
} gameOver();
return;
}
snake.unshift(newHead); snake.unshift(newHead);
if (newHead.x === apple.x && newHead.y === apple.y) { if (newHead.x === apple.x && newHead.y === apple.y) {
apple = spawnApple(); apple = spawnApple();
} else { } else {
snake.pop(); snake.pop();
} }
} }
function render() { function render() {
grid.innerHTML = ""; grid.innerHTML = "";
for (let y = 0; y < gridSize; y++) { for (let y = 0; y < gridSize; y++) {
for (let x = 0; x < gridSize; x++) { for (let x = 0; x < gridSize; x++) {
const cell = document.createElement("div"); const cell = document.createElement("div");
cell.classList.add("cell"); cell.classList.add("cell");
if ((x + y) % 2 === 0) { if ((x + y) % 2 === 0) {
cell.classList.add("light-green"); cell.classList.add("light-green");
} else { } else {
cell.classList.add("dark-green"); cell.classList.add("dark-green");
} }
if (snake.some(segment => segment.x === x && segment.y === y)) { if (snake.some((segment) => segment.x === x && segment.y === y)) {
cell.classList.add("snake"); cell.classList.add("snake");
} }
if (apple.x === x && apple.y === y) { if (apple.x === x && apple.y === y) {
cell.classList.add("apple"); cell.classList.add("apple");
} }
grid.appendChild(cell); grid.appendChild(cell);
}
} }
}
} }
function gameLoop() { function gameLoop() {
if (!isGameRunning) return; if (!isGameRunning) return;
updateSnake(); updateSnake();
render(); render();
} }
function gameOver() { function gameOver() {
alert('Game Over!'); alert("Game Over!");
clearInterval(gameInterval); clearInterval(gameInterval);
isGameRunning = false; isGameRunning = false;
} }
function handleDirectionInput(key) { function handleDirectionInput(key) {
switch (key) { switch (key) {
case 'ArrowUp': case "ArrowUp":
case 'w': case "w":
if (direction.y === 0) direction = { x: 0, y: -1 }; if (direction.y === 0) direction = { x: 0, y: -1 };
break; break;
case 'ArrowDown': case "ArrowDown":
case 's': case "s":
if (direction.y === 0) direction = { x: 0, y: 1 }; if (direction.y === 0) direction = { x: 0, y: 1 };
break; break;
case 'ArrowLeft': case "ArrowLeft":
case 'a': case "a":
if (direction.x === 0) direction = { x: -1, y: 0 }; if (direction.x === 0) direction = { x: -1, y: 0 };
break; break;
case 'ArrowRight': case "ArrowRight":
case 'd': case "d":
if (direction.x === 0) direction = { x: 1, y: 0 }; if (direction.x === 0) direction = { x: 1, y: 0 };
break; break;
} }
} }
upButton.addEventListener('click', () => handleDirectionInput('ArrowUp')); upButton.addEventListener("click", () => handleDirectionInput("ArrowUp"));
downButton.addEventListener('click', () => handleDirectionInput('ArrowDown')); downButton.addEventListener("click", () => handleDirectionInput("ArrowDown"));
leftButton.addEventListener('click', () => handleDirectionInput('ArrowLeft')); leftButton.addEventListener("click", () => handleDirectionInput("ArrowLeft"));
rightButton.addEventListener('click', () => handleDirectionInput('ArrowRight')); rightButton.addEventListener("click", () => handleDirectionInput("ArrowRight"));
startButton.addEventListener('click', () => { startButton.addEventListener("click", () => {
if (!isGameRunning) initGame(); if (!isGameRunning) initGame();
}); });
document.addEventListener('keydown', (event) => { document.addEventListener("keydown", (event) => {
handleDirectionInput(event.key); handleDirectionInput(event.key);
}); });

272
secret/snake/styles.css
View file

@ -1,238 +1,238 @@
/* Base Reset */ /* Base Reset */
body, body,
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: monospace; font-family: monospace;
background-color: #3a2d56; background-color: #3a2d56;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
} }
/* GameBoy Layout */ /* GameBoy Layout */
.gameboy { .gameboy {
background-color: #5f4c82; /* Game Boy Color purple shell */ background-color: #5f4c82;
width: 441px; width: 441px;
height: 735px; height: 735px;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
position: relative; position: relative;
} }
@media(max-width: 768px) { @media (max-width: 768px) {
.gameboy { .gameboy {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
border-radius: 0; border-radius: 0;
} }
} }
/* Screen */ /* Screen */
.screen { .screen {
background-color: black; background-color: black;
border: 4px solid #0f380f; border: 4px solid #0f380f;
width: 90%; width: 90%;
height: 55%; height: 55%;
margin-top: 20px; margin-top: 20px;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
overflow: hidden; overflow: hidden;
} }
.game { .game {
text-align: center; text-align: center;
width: 90%; width: 90%;
} }
/* Titles */ /* Titles */
h1 { h1 {
font-size: 2rem; font-size: 2rem;
margin-bottom: 10px; margin-bottom: 10px;
text-transform: uppercase; text-transform: uppercase;
color: #9bbc0f; color: #9bbc0f;
} }
.description, .description,
.description p { .description p {
font-size: 1.2rem; font-size: 1.2rem;
margin: 0 auto; margin: 0 auto;
padding: 0 auto; padding: 0 auto;
color: white; color: white;
} }
/* Grid container */ /* Grid container */
#grid { #grid {
display: grid; display: grid;
grid-template-columns: repeat(10, 1fr); /* Adjust to match gridSize */ grid-template-columns: repeat(10, 1fr); /* Adjust to match gridSize */
grid-template-rows: repeat(10, 1fr); /* Adjust to match gridSize */ grid-template-rows: repeat(10, 1fr); /* Adjust to match gridSize */
width: 400px; /* Adjust as needed */ width: 400px; /* Adjust as needed */
height: 400px; /* Adjust as needed */ height: 400px; /* Adjust as needed */
border: 2px solid #0f380f; border: 2px solid #0f380f;
margin: 20px auto; margin: 20px auto;
/* initially hide */ /* initially hide */
display: none; display: none;
} }
/* Individual cells */ /* Individual cells */
.cell { .cell {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.cell.light-green { .cell.light-green {
background-color: #9bbc0f; background-color: #9bbc0f;
} }
.cell.dark-green { .cell.dark-green {
background-color: #0f380f; background-color: #0f380f;
} }
/* Snake styling */ /* Snake styling */
.snake { .snake {
background-color: #e600ff; /* Snake color */ background-color: #e600ff; /* Snake color */
z-index: 1000; z-index: 1000;
} }
/* Apple styling */ /* Apple styling */
.apple { .apple {
background-color: red; /* Apple color */ background-color: red; /* Apple color */
z-index: 999; z-index: 999;
} }
/* Controls Section */ /* Controls Section */
.controls { .controls {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 80%; width: 80%;
align-items: center; align-items: center;
} }
/* D-Pad */ /* D-Pad */
.dpad { .dpad {
position: relative; position: relative;
width: 120px; width: 120px;
height: 120px; height: 120px;
} }
/* Base Styling for D-Pad Buttons */ /* Base Styling for D-Pad Buttons */
.dpad-btn { .dpad-btn {
background-color: #0f380f; background-color: #0f380f;
color: #9bbc0f; color: #9bbc0f;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
position: absolute; position: absolute;
width: 42px; width: 42px;
height: 42px; height: 42px;
font-size: 1.5rem; font-size: 1.5rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
} }
.dpad-btn.up { .dpad-btn.up {
top: 0; top: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.dpad-btn.down { .dpad-btn.down {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.dpad-btn.left { .dpad-btn.left {
top: 50%; top: 50%;
left: 0; left: 0;
transform: translateY(-50%); transform: translateY(-50%);
} }
.dpad-btn.right { .dpad-btn.right {
top: 50%; top: 50%;
right: 0; right: 0;
transform: translateY(-50%); transform: translateY(-50%);
} }
/* D-Pad Center to Connect Buttons */ /* D-Pad Center to Connect Buttons */
.dpad-center { .dpad-center {
background-color: #0f380f; background-color: #0f380f;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 2px solid transparent; border: 2px solid transparent;
z-index: 0; z-index: 0;
border-radius: 5px; border-radius: 5px;
} }
/* A and B Buttons */ /* A and B Buttons */
.action-buttons { .action-buttons {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
height: 200px; height: 200px;
} }
.btn { .btn {
background-color: #0f380f; background-color: #0f380f;
color: #9bbc0f; color: #9bbc0f;
border: 2px solid #9bbc0f; border: 2px solid #9bbc0f;
border-radius: 50%; border-radius: 50%;
width: 60px; width: 60px;
height: 60px; height: 60px;
font-size: 1.8rem; font-size: 1.8rem;
cursor: pointer; cursor: pointer;
transition: transform 0.1s, background-color 0.2s; transition: transform 0.1s, background-color 0.2s;
} }
.btn:hover { .btn:hover {
background-color: #9bbc0f; background-color: #9bbc0f;
color: #0f380f; color: #0f380f;
} }
.btn:active { .btn:active {
transform: scale(0.9); transform: scale(0.9);
} }
/* Start Button */ /* Start Button */
.start-btn { .start-btn {
background-color: #0f380f; background-color: #0f380f;
color: #9bbc0f; color: #9bbc0f;
border: 2px solid #9bbc0f; border: 2px solid #9bbc0f;
border-radius: 5px; border-radius: 5px;
width: 100px; width: 100px;
height: 40px; height: 40px;
font-size: 1.2rem; font-size: 1.2rem;
cursor: pointer; cursor: pointer;
transition: transform 0.1s, background-color 0.2s; transition: transform 0.1s, background-color 0.2s;
margin-bottom: 20px; margin-bottom: 20px;
} }
.start-btn:hover { .start-btn:hover {
background-color: #9bbc0f; background-color: #9bbc0f;
color: #0f380f; color: #0f380f;
} }
.start-btn:active { .start-btn:active {
transform: scale(0.9); transform: scale(0.9);
} }
/* Hidden Canvas for Debugging or Fallback */ /* Hidden Canvas for Debugging or Fallback */
canvas { canvas {
display: none; display: none;
z-index: 1000; z-index: 1000;
} }

158
secret/snake/styles.js
View file

@ -1,60 +1,134 @@
'use strict'; "use strict";
const aBtn = document.querySelector('#a'); const aBtn = document.querySelector("#a");
const bBtn = document.querySelector('#b'); const bBtn = document.querySelector("#b");
const gameboy = document.querySelector('.gameboy'); const gameboy = document.querySelector(".gameboy");
const html = document.documentElement; const html = document.documentElement;
const body = document.body; const body = document.body;
const dpadButtons = document.querySelectorAll('.dpad-btn'); const dpadButtons = document.querySelectorAll(".dpad-btn");
const dpadCenter = document.querySelector('.dpad-center'); // Darker variant const dpadCenter = document.querySelector(".dpad-center"); // Darker variant
const actionButtons = document.querySelectorAll('.btn'); const actionButtons = document.querySelectorAll(".btn");
const colors = [ const colors = [
{ gameboyColor: '#B39DDB', htmlColor: '#D1C4E9', buttonColor: '#673AB7', buttonTextColor: '#FFFFFF', dpadCenterColor: '#5E35B1' }, {
{ gameboyColor: '#FFC107', htmlColor: '#FFF9C4', buttonColor: '#FF9800', buttonTextColor: '#000000', dpadCenterColor: '#EF6C00' }, gameboyColor: "#B39DDB",
{ gameboyColor: '#8BC34A', htmlColor: '#C5E1A5', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#E64A19' }, htmlColor: "#D1C4E9",
{ gameboyColor: '#F44336', htmlColor: '#FFCDD2', buttonColor: '#E91E63', buttonTextColor: '#FFFFFF', dpadCenterColor: '#C2185B' }, buttonColor: "#673AB7",
{ gameboyColor: '#03A9F4', htmlColor: '#BBDEFB', buttonColor: '#FFEB3B', buttonTextColor: '#000000', dpadCenterColor: '#0277BD' }, buttonTextColor: "#FFFFFF",
{ gameboyColor: '#FF7043', htmlColor: '#FFCCBC', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#D84315' }, dpadCenterColor: "#5E35B1",
{ 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: "#FFC107",
{ gameboyColor: '#795548', htmlColor: '#D7CCC8', buttonColor: '#9E9E9E', buttonTextColor: '#000000', dpadCenterColor: '#5D4037' }, htmlColor: "#FFF9C4",
{ gameboyColor: '#FF5733', htmlColor: '#FFCCCB', buttonColor: '#C70039', buttonTextColor: '#FFFFFF', dpadCenterColor: '#B71C1C' }, buttonColor: "#FF9800",
{ gameboyColor: '#00BCD4', htmlColor: '#B2EBF2', buttonColor: '#00ACC1', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00838F' } 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() { function updateGameBoyColor() {
gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor;
html.style.backgroundColor = colors[currentColorIndex].htmlColor; html.style.backgroundColor = colors[currentColorIndex].htmlColor;
body.style.backgroundColor = colors[currentColorIndex].htmlColor; body.style.backgroundColor = colors[currentColorIndex].htmlColor;
dpadButtons.forEach(button => { dpadButtons.forEach((button) => {
button.style.backgroundColor = colors[currentColorIndex].buttonColor; button.style.backgroundColor = colors[currentColorIndex].buttonColor;
button.style.color = colors[currentColorIndex].buttonTextColor; button.style.color = colors[currentColorIndex].buttonTextColor;
}); });
// Using darker dpad center color // Using darker dpad center color
dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor;
dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; dpadCenter.style.color = colors[currentColorIndex].buttonTextColor;
actionButtons.forEach(button => { actionButtons.forEach((button) => {
button.style.backgroundColor = colors[currentColorIndex].buttonColor; button.style.backgroundColor = colors[currentColorIndex].buttonColor;
button.style.color = colors[currentColorIndex].buttonTextColor; button.style.color = colors[currentColorIndex].buttonTextColor;
}); });
} }
aBtn.addEventListener('click', () => { aBtn.addEventListener("click", () => {
currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length;
localStorage.setItem('gameboyColorIndex', currentColorIndex); localStorage.setItem("gameboyColorIndex", currentColorIndex);
updateGameBoyColor(); updateGameBoyColor();
}); });
bBtn.addEventListener('click', () => { bBtn.addEventListener("click", () => {
currentColorIndex = (currentColorIndex + 1) % colors.length; currentColorIndex = (currentColorIndex + 1) % colors.length;
localStorage.setItem('gameboyColorIndex', currentColorIndex); localStorage.setItem("gameboyColorIndex", currentColorIndex);
updateGameBoyColor(); updateGameBoyColor();
}); });
updateGameBoyColor(); updateGameBoyColor();

194
secret/styles.css
View file

@ -1,141 +1,145 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
font-family: 'Courier New', Courier, monospace; font-family: "Courier New", Courier, monospace;
background-color: #0d0d0d; background-color: #0d0d0d;
color: #b0b0b0; color: #b0b0b0;
margin: 0; margin: 0;
line-height: 1.6; line-height: 1.6;
background-image: url('images/background.jpg'); background-image: url("images/background.jpg");
background-size: cover; /* Adjust size for tape appearance */ background-size: cover; /* Adjust size for tape appearance */
} }
header { header {
background-color: #222; /* Fully opaque background */ background-color: #222; /* Fully opaque background */
color: #b0b0b0; color: #b0b0b0;
text-align: center; text-align: center;
padding: 1em 0; padding: 1em 0;
font-size: 2rem; font-size: 2rem;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
animation: neonFlicker 1.5s infinite; animation: neonFlicker 1.5s infinite;
} }
/* Create the flickering neon light effect */ /* Create the flickering neon light effect */
@keyframes neonFlicker { @keyframes neonFlicker {
0% { 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; 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; 20% {
} text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00,
40% { 0 0 15px #ffcc00, 0 0 20px #ffcc00;
text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00; }
} 40% {
60% { text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00;
text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00; }
} 60% {
80% { text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00,
text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00; 0 0 20px #ffcc00, 0 0 30px #ffcc00;
} }
100% { 80% {
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; 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 { footer {
background-color: #111; background-color: #111;
color: #b0b0b0; color: #b0b0b0;
text-align: center; text-align: center;
padding: 1em 0; padding: 1em 0;
margin-top: 20px; margin-top: 20px;
} }
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 20px; gap: 20px;
padding: 20px; padding: 20px;
} }
.item { .item {
position: relative; position: relative;
background-color: #1a1a1a; background-color: #1a1a1a;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); 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; transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
width: 100%; width: 100%;
height: 400px; height: 400px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.item img { .item img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
filter: brightness(0.6); filter: brightness(0.6);
} }
.item .description { .item .description {
padding: 30px; padding: 30px;
font-size: 1rem; font-size: 1rem;
color: #ccc; color: #ccc;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
flex-grow: 1; flex-grow: 1;
} }
p { p {
text-decoration: none; text-decoration: none;
} }
.item:hover { .item:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9);
filter: brightness(1.1); filter: brightness(1.1);
} }
.item:hover img { .item:hover img {
transform: scale(1.1); transform: scale(1.1);
filter: brightness(1.1); filter: brightness(1.1);
} }
.item h2 { .item h2 {
position: absolute; position: absolute;
top: 10%; top: 10%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
color: #ffffff; color: #ffffff;
font-size: 1.8rem; font-size: 1.8rem;
background-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9);
padding: 5px 15px; padding: 5px 15px;
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease;
} }
.item:hover h2 { .item:hover h2 {
opacity: 1; opacity: 1;
transform: translateX(-50%) translateY(-10px); transform: translateX(-50%) translateY(-10px);
} }
@media(max-width: 800px) { @media (max-width: 800px) {
header { header {
font-size: 1.5rem; font-size: 1.5rem;
} }
.item { .item {
height: auto; height: auto;
width: auto; width: auto;
} }
.grid-container { .grid-container {
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
} }
} }

27
styles.css
View file

@ -206,7 +206,8 @@ article ul a li {
margin-bottom: 10px; margin-bottom: 10px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 10px; 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 { article ul a li:hover {
@ -214,7 +215,7 @@ article ul a li:hover {
box-shadow: 0 0 10px var(--accent-color); box-shadow: 0 0 10px var(--accent-color);
} }
article ul a li{ article ul a li {
text-decoration: none; text-decoration: none;
color: var(--accent-color); color: var(--accent-color);
font-weight: bold; font-weight: bold;
@ -263,7 +264,12 @@ section .card a {
section .card { section .card {
text-align: center; text-align: center;
list-style: none; 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; border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 50, 0.8), 0 0 10px rgba(255, 255, 255, 0.1); box-shadow: 0 5px 20px rgba(0, 0, 50, 0.8), 0 0 10px rgba(255, 255, 255, 0.1);
border: 1px solid #2e3a60; border: 1px solid #2e3a60;
@ -278,7 +284,12 @@ section .card {
/* Hover effect */ /* Hover effect */
section .card:hover { section .card:hover {
transform: translateY(-8px); 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); 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; width: 60px;
height: 60px; height: 60px;
border-radius: 50%; 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); box-shadow: 0 0 50px rgba(255, 255, 255, 0.5);
animation: spin 8s linear infinite; animation: spin 8s linear infinite;
} }
@ -411,7 +426,7 @@ footer {
width: 60px; width: 60px;
} }
.project-name{ .project-name {
font-size: 1.3em; font-size: 1.3em;
} }
} }

142
webGames/styles.css
View file

@ -1,120 +1,120 @@
/* Reset and box-sizing */ /* Reset and box-sizing */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
/* General Styles */ /* General Styles */
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #282c34; background-color: #282c34;
color: #ffffff; color: #ffffff;
margin: 0; margin: 0;
} }
header { header {
background-color: #4CAF50; background-color: #4caf50;
color: white; color: white;
text-align: center; text-align: center;
padding: 1em 0; padding: 1em 0;
font-size: 1.5rem; font-size: 1.5rem;
} }
footer { footer {
background-color: #333; background-color: #333;
color: white; color: white;
text-align: center; text-align: center;
padding: 1em 0; padding: 1em 0;
margin-top: 20px; margin-top: 20px;
} }
/* Grid Styles */ /* Grid Styles */
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 20px; /* Space between items */ gap: 20px; /* Space between items */
padding: 20px; /* Space around the grid */ padding: 20px; /* Space around the grid */
} }
/* Game Item */ /* Game Item */
.item { .item {
position: relative; position: relative;
background-color: #444; background-color: #444;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 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; transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
width: 100%; /* Ensure it takes full width of the column */ width: 100%; /* Ensure it takes full width of the column */
height: 400px; /* Set a fixed height for all items */ height: 400px; /* Set a fixed height for all items */
display: flex; display: flex;
flex-direction: column; /* Stack children vertically */ flex-direction: column; /* Stack children vertically */
} }
/* Ensure the image takes the top part of the card */ /* Ensure the image takes the top part of the card */
.item img { .item img {
width: 100%; width: 100%;
height: 100%; /* Set a height for the image */ height: 100%; /* Set a height for the image */
object-fit: cover; object-fit: cover;
} }
.item .description { .item .description {
padding: 30px; padding: 30px;
font-size: 1rem; font-size: 1rem;
color: #ddd; color: #ddd;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
flex-grow: 1; /* Allow description to take remaining space */ flex-grow: 1; /* Allow description to take remaining space */
} }
p { p {
text-decoration: none; text-decoration: none;
} }
/* Hover effect for scaling and glowing */ /* Hover effect for scaling and glowing */
.item:hover { .item:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
filter: brightness(1.2); filter: brightness(1.2);
} }
.item:hover img { .item:hover img {
transform: scale(1.1); /* Slight zoom-in effect for the image */ transform: scale(1.1); /* Slight zoom-in effect for the image */
filter: brightness(1.1); /* Increase image brightness */ filter: brightness(1.1); /* Increase image brightness */
} }
.item h2 { .item h2 {
position: absolute; position: absolute;
top: 10%; top: 10%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
color: white; color: white;
font-size: 1.5rem; font-size: 1.5rem;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
padding: 5px 15px; padding: 5px 15px;
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease;
} }
.item:hover h2 { .item:hover h2 {
opacity: 1; opacity: 1;
transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */ transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */
} }
/* Mobile Optimization */ /* Mobile Optimization */
@media(max-width: 600px) { @media (max-width: 600px) {
header { header {
font-size: 1.2rem; font-size: 1.2rem;
} }
.item { .item {
height: auto; /* Allow auto height on mobile for better responsiveness */ height: auto; /* Allow auto height on mobile for better responsiveness */
width: auto; width: auto;
} }
.grid-container { .grid-container {
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
} }
} }