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

formatted like my Boss wants it (help!)

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

65
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

11
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;
@ -66,4 +65,4 @@ style.textContent = `
`; `;
document.head.appendChild(style); document.head.appendChild(style);
// @license-end // @license-end

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

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

29
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;
@ -256,14 +257,19 @@ section .card a {
color: inherit; color: inherit;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
} }
/* Card styles */ /* Card styles */
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);
} }
} }