interstellar_development/interstellar_website
3
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/interstellar_development/interstellar_website/pulls/23
This commit is contained in:
Patrick 2025-01-05 01:22:10 +01:00
commit ffca29cc18
16 changed files with 476 additions and 323 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
index.html
View file

@ -17,7 +17,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -46,7 +45,10 @@
<ul> <ul>
<li> <li>
<p>Previously we had more unfinished Games listed here.</p> <p>Previously we had more unfinished Games listed here.</p>
<p>We decided against displaying them and giving people the impression we are working on them currently.</p> <p>
We decided against displaying them and giving people the
impression we are working on them currently.
</p>
<p>In the Future we will display the released games here</p> <p>In the Future we will display the released games here</p>
</li> </li>
</ul> </ul>
@ -66,26 +68,50 @@
<h1>Our Team</h1> <h1>Our Team</h1>
<section class="cards" id="cards"> <section class="cards" id="cards">
<div class="card"> <div class="card">
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" class="card-link" target="_blank"> <a
href="https://interstellardevelopment.org/code/Patrick_Pluto"
class="card-link"
target="_blank"
>
<img src="images/Patrick.png" alt="Patrick" /> <img src="images/Patrick.png" alt="Patrick" />
<h3>Patrick_Pluto</h3> <h3>Patrick_Pluto</h3>
<p>The system administrator and our lead coder. He is the one you will need to blame for bugs in the games</p> <p>
The system administrator and our lead coder. He is the one you
will need to blame for bugs in the games
</p>
</a> </a>
</div> </div>
<div class="card"> <div class="card">
<a href="https://interstellardevelopment.org/code/sageTheDm" class="card-link" target="_blank"> <a
href="https://interstellardevelopment.org/code/sageTheDm"
class="card-link"
target="_blank"
>
<img src="images/sage.png" alt="Sage" /> <img src="images/sage.png" alt="Sage" />
<h3>sageTheDM</h3> <h3>sageTheDM</h3>
<p>Our mostly competent web developer and secondary coder, if you experience any bugs on the website or spelling mistake he is to blame</p> <p>
Our mostly competent web developer and secondary coder, if you
experience any bugs on the website or spelling mistake he is to
blame
</p>
</a> </a>
</div> </div>
<div class="card"> <div class="card">
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" class="card-link" target="_blank"> <a
href="https://interstellardevelopment.org/code/Patrick_Pluto"
class="card-link"
target="_blank"
>
<img src="images/nicolas.png" alt="Patrick" /> <img src="images/nicolas.png" alt="Patrick" />
<h3>St. Nicolaus</h3> <h3>St. Nicolaus</h3>
<p>Our game level and asset designer. He is responsible for all assets in our FreeFTF game. So if an asset looks ugly be mad at him. Also, we are not sure if he is human or just a drunk wizard cat but one thing is very clear he is still a novice at his job.</p> <p>
Our game level and asset designer. He is responsible for all
assets in our FreeFTF game. So if an asset looks ugly be mad at
him. Also, we are not sure if he is human or just a drunk wizard
cat but one thing is very clear he is still a novice at his job.
</p>
</a> </a>
</div> </div>
</section> </section>
@ -93,27 +119,97 @@
<!-- About Us section --> <!-- About Us section -->
<section id="about"> <section id="about">
<h2>About Us</h2> <h2>About Us</h2>
<p>Welcome to Interstellar Development! We are a small, passionate international team dedicated to transforming the programming world into a free-and-open-source future. Our diverse backgrounds and experiences fuel our commitment to creating free and open-source software, particularly in the realm of gaming.</p> <p>
<p>Our journey began with a shared vision: to better organize our efforts in making free and open-source games more efficient and accessible. We recognized that many current free software games are either lacking in quality or simply do not exist. This realization inspired us to focus on developing games that are unplayable on GNU/Linux and FreeBSD systems, as well as creating free software alternatives for those in need.</p> Welcome to Interstellar Development! We are a small, passionate
<p>At Interstellar Development, we believe that true freedom for computer users can only be achieved through the use of free software. That’s why we are committed to licensing all of our projects under copyleft free and open-source software licenses, ensuring that our games remain free for everyone to enjoy, forever.</p> international team dedicated to transforming the programming world
<p>While we are not currently accepting donations, we welcome your support in the form of feedback and suggestions for improvements. If you wish to contribute financially, we encourage you to donate to the Free Software Foundation, as without them, we would have never started this.</p> into a free-and-open-source future. Our diverse backgrounds and
<p>Join us as we strive to create a vibrant community around free software and gaming. Together, we can make a difference and pave the way for a free future!</p> experiences fuel our commitment to creating free and open-source
software, particularly in the realm of gaming.
</p>
<p>
Our journey began with a shared vision: to better organize our efforts
in making free and open-source games more efficient and accessible. We
recognized that many current free software games are either lacking in
quality or simply do not exist. This realization inspired us to focus
on developing games that are unplayable on GNU/Linux and FreeBSD
systems, as well as creating free software alternatives for those in
need.
</p>
<p>
At Interstellar Development, we believe that true freedom for computer
users can only be achieved through the use of free software. That’s
why we are committed to licensing all of our projects under copyleft
free and open-source software licenses, ensuring that our games remain
free for everyone to enjoy, forever.
</p>
<p>
While we are not currently accepting donations, we welcome your
support in the form of feedback and suggestions for improvements. If
you wish to contribute financially, we encourage you to donate to the
Free Software Foundation, as without them, we would have never started
this.
</p>
<p>
Join us as we strive to create a vibrant community around free
software and gaming. Together, we can make a difference and pave the
way for a free future!
</p>
</section> </section>
<section id="vision"> <section id="vision">
<h2>Our Vision</h2> <h2>Our Vision</h2>
<h2>Interstellar Development: Free Software is Our Passion</h2> <h2>Interstellar Development: Free Software is Our Passion</h2>
<p>At Interstellar Development, we embarked on this journey to create a more organized and efficient approach to developing free and open-source software, with a particular focus on gaming. We recognized a significant gap in the availability and quality of free software games, which often fail to meet the expectations of users or simply do not exist. Our mission is to fill this void and elevate the standards of free gaming experiences.</p> <p>
<p>Our primary goal is to target games that are currently unplayable on GNU/Linux and FreeBSD systems. We aim to develop high-quality alternatives that not only provide enjoyable gameplay but also adhere to the principles of free software. Additionally, we are committed to identifying and addressing other areas within the software ecosystem that lack free alternatives, ensuring that users have access to a diverse range of tools and applications that respect their freedom.</p> At Interstellar Development, we embarked on this journey to create a
<p>At Interstellar Development, we firmly believe that the path to true freedom for computer users lies in the adoption and promotion of free software. To this end, we are dedicated to licensing all of our projects under copyleft free and open-source software licenses. This commitment ensures that our games and software remain free for everyone to play, modify, and share, fostering a culture of collaboration and innovation within the community.</p> more organized and efficient approach to developing free and
<p>We understand that community involvement is crucial to our success. While we are not currently accepting donations, we invite you to support us by providing feedback, reporting issues, and suggesting improvements. Your insights are invaluable in helping us refine our projects and enhance the user experience.</p> open-source software, with a particular focus on gaming. We recognized
<p>If you feel compelled to contribute financially, we encourage you to consider donating to the Free Software Foundation. Their unwavering support and advocacy for free software principles have been instrumental in our journey, and your contributions to them help sustain the broader movement that enables us to create these games.</p> a significant gap in the availability and quality of free software
<p>Together, we can build a vibrant community around free software and gaming, paving the way for a future where everyone has access to high-quality, open-source alternatives. Join us in our mission to make a difference and champion the cause of free software for all!</p> games, which often fail to meet the expectations of users or simply do
not exist. Our mission is to fill this void and elevate the standards
of free gaming experiences.
</p>
<p>
Our primary goal is to target games that are currently unplayable on
GNU/Linux and FreeBSD systems. We aim to develop high-quality
alternatives that not only provide enjoyable gameplay but also adhere
to the principles of free software. Additionally, we are committed to
identifying and addressing other areas within the software ecosystem
that lack free alternatives, ensuring that users have access to a
diverse range of tools and applications that respect their freedom.
</p>
<p>
At Interstellar Development, we firmly believe that the path to true
freedom for computer users lies in the adoption and promotion of free
software. To this end, we are dedicated to licensing all of our
projects under copyleft free and open-source software licenses. This
commitment ensures that our games and software remain free for
everyone to play, modify, and share, fostering a culture of
collaboration and innovation within the community.
</p>
<p>
We understand that community involvement is crucial to our success.
While we are not currently accepting donations, we invite you to
support us by providing feedback, reporting issues, and suggesting
improvements. Your insights are invaluable in helping us refine our
projects and enhance the user experience.
</p>
<p>
If you feel compelled to contribute financially, we encourage you to
consider donating to the Free Software Foundation. Their unwavering
support and advocacy for free software principles have been
instrumental in our journey, and your contributions to them help
sustain the broader movement that enables us to create these games.
</p>
<p>
Together, we can build a vibrant community around free software and
gaming, paving the way for a future where everyone has access to
high-quality, open-source alternatives. Join us in our mission to make
a difference and champion the cause of free software for all!
</p>
</section> </section>
</article> </article>
<!-- Custom footer component --> <!-- Custom footer component -->
<footer-component></footer-component> <footer-component></footer-component>
</body> </body>
</html> </html>

45
secret/asteroidDestroyer/explenation.html
View file

@ -1,26 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Game Landing Page</title> <title>Game Landing Page</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
<div class="landing-page"> <div class="landing-page">
<div class="game-background"> <div class="game-background">
<!-- Game is embedded or shown as background --> <!-- Game is embedded or shown as background -->
<canvas id="gameCanvas"></canvas> <canvas id="gameCanvas"></canvas>
</div>
<div class="content">
<h1>Welcome to the Asteroid Game!</h1>
<p>
In this game, you control a spaceship that shoots at asteroids to
avoid destruction and collect items for power-ups.
</p>
<p>Your goal is to survive as long as possible while scoring points!</p>
<button onclick="window.location.href='secret.html'">Play Game</button>
</div>
</div> </div>
<div class="content"> <script src="app.js"></script>
<h1>Welcome to the Asteroid Game!</h1> </body>
<p>In this game, you control a spaceship that shoots at asteroids to avoid destruction and collect items for power-ups.</p>
<p>Your goal is to survive as long as possible while scoring points!</p>
<button onclick="window.location.href='secret.html'">Play Game</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html> </html>

34
secret/asteroidDestroyer/secret.html
View file

@ -1,21 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Asteroid Shooter</title> <title>Asteroid Shooter</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<canvas id="gameCanvas"></canvas> <canvas id="gameCanvas"></canvas>
<!-- Virtual buttons for mobile --> <!-- Virtual buttons for mobile -->
<div class="controls"> <div class="controls">
<button id="leftBtn" class="control-btn">Left</button> <button id="leftBtn" class="control-btn">Left</button>
<button id="shootBtn" class="control-btn" onclick="btnShoot()">Shoot</button> <button id="shootBtn" class="control-btn" onclick="btnShoot()">
<button id="rightBtn" class="control-btn">Right</button> Shoot
</div> </button>
<button id="rightBtn" class="control-btn">Right</button>
</div>
<script src="game.js"></script> <script src="game.js"></script>
</body> </body>
</html> </html>

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

36
secret/asteroidDestroyer/styles.css
View file

@ -2,9 +2,10 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body, html { body,
html {
height: 100%; height: 100%;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
display: flex; display: flex;
@ -13,18 +14,18 @@
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;
@ -34,9 +35,9 @@
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;
@ -44,19 +45,19 @@
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;
@ -66,9 +67,8 @@
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;
} }

2
secret/game.js
View file

@ -341,7 +341,7 @@ function drawGameOver() {
// Restart game // Restart game
function restartGame() { function restartGame() {
window.location.reload(); window.location.reload();
} }
// Main game loop // Main game loop

80
secret/guessMyNumber/index.html
View file

@ -1,54 +1,54 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Guess My Number</title> <title>Guess My Number</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
<div class="gameboy"> <div class="gameboy">
<!-- Game Boy Screen --> <!-- Game Boy Screen -->
<div class="screen"> <div class="screen">
<article class="game"> <article class="game">
<h1>Guess My Number - Game</h1> <h1>Guess My Number - Game</h1>
<p class="message"></p> <p class="message"></p>
<div class="guess-display"> <div class="guess-display">
<span id="guess"></span> <span id="guess"></span>
</div> </div>
<p class="score"></p> <p class="score"></p>
<p class="highScore"></p> <p class="highScore"></p>
<div class="description"> <div class="description">
<h2>Description</h2> <h2>Description</h2>
<p>Guess a number between 1 and 20</p> <p>Guess a number between 1 and 20</p>
<p>A = check</p> <p>A = check</p>
<p>B = Reload</p> <p>B = Reload</p>
<p>▲ = increases guess by one</p> <p>▲ = increases guess by one</p>
<p>▼ = decreases guess by one</p> <p>▼ = decreases guess by one</p>
</div>
</article>
</div>
<!-- Controls -->
<div class="controls">
<!-- D-Pad on the left -->
<div class="dpad">
<button class="dpad-btn up" id="up">▲</button>
<button class="dpad-btn left" id="left">◀</button>
<div class="dpad-center"></div>
<button class="dpad-btn right" id="right">▶</button>
<button class="dpad-btn down" id="down">▼</button>
</div> </div>
</article>
</div>
<!-- Controls --> <!-- A and B Buttons on the right -->
<div class="controls"> <div class="action-buttons">
<!-- D-Pad on the left --> <button class="btn" id="check">A</button>
<div class="dpad"> <button class="btn" id="restart">B</button>
<button class="dpad-btn up" id="up">▲</button> </div>
<button class="dpad-btn left" id="left">◀</button>
<div class="dpad-center"></div>
<button class="dpad-btn right" id="right">▶</button>
<button class="dpad-btn down" id="down">▼</button>
</div>
<!-- A and B Buttons on the right -->
<div class="action-buttons">
<button class="btn" id="check">A</button>
<button class="btn" id="restart">B</button>
</div> </div>
</div> </div>
</div> <script src="game.js"></script>
<script src="game.js"></script> <script src="styles.js"></script>
<script src="styles.js"></script> </body>
</body>
</html> </html>

35
secret/guessMyNumber/styles.css
View file

@ -1,5 +1,6 @@
/* Base Reset */ /* Base Reset */
body, html { body,
html {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: monospace; font-family: monospace;
@ -16,7 +17,7 @@ body, html {
width: 441px; width: 441px;
height: 735px; height: 735px;
border-radius: 20px; border-radius: 20px;
box-shadow: 0px 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;
@ -24,7 +25,7 @@ body, html {
position: relative; position: relative;
} }
@media (max-width: 768px) { @media(max-width: 768px) {
.gameboy { .gameboy {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@ -43,7 +44,7 @@ body, html {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.5); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
overflow: hidden; overflow: hidden;
} }
@ -54,7 +55,7 @@ body, html {
/* 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;
} }
@ -64,22 +65,24 @@ h1 {
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, .score, .highScore { .message,
font-size: 1.4rem; /* Increased font size */ .score,
.highScore {
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;
@ -97,8 +100,8 @@ h1 {
/* 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 */
@ -110,7 +113,7 @@ h1 {
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;
@ -161,7 +164,7 @@ h1 {
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 {
@ -171,7 +174,7 @@ h1 {
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;
} }

BIN
secret/images/minesweeper.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 55 KiB

149
secret/index.html
View file

@ -1,73 +1,100 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Secret Game Collection</title> <title>Secret Game Collection</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
<header> <header>
<h1>Secret Game Collection</h1> <h1>Secret Game Collection</h1>
</header> </header>
<main> <main>
<div class="grid-container"> <div class="grid-container">
<a href="asteroidDestroyer/explenation.html" target="_blank" class="item"> <a
<img src="images/asteroid.png" alt="Image can't be displayed"> href="asteroidDestroyer/explenation.html"
<h2>Secret Asteroid Shooter</h2> target="_blank"
<div class="description"> class="item"
<p>In this game, you control a spaceship that shoots at asteroids to avoid destruction and collect items for power-ups.</p> >
<p>Your goal is to survive as long as possible while scoring points!</p> <img src="images/asteroid.png" alt="Image can't be displayed" />
</div> <h2>Secret Asteroid Shooter</h2>
</a> <div class="description">
<a href="#" target="_blank" class="item"> <p>
<img src="images/blackjack.jpg" alt="Image can't be displayed"> In this game, you control a spaceship that shoots at asteroids to
<h2>Secret Blackjack</h2> avoid destruction and collect items for power-ups.
<div class="description"> </p>
<p>Try to beat the dealer by getting a hand value as close to 21 as possible without going over.</p> <p>
</div> Your goal is to survive as long as possible while scoring points!
</a> </p>
<a href="#" target="_blank" class="item"> </div>
<img src="images/snake.png" alt="Image can't be displayed"> </a>
<h2>Snake</h2> <a href="#" target="_blank" class="item">
<div class="description"> <img src="images/blackjack.jpg" alt="Image can't be displayed" />
<p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p> <h2>Secret Blackjack</h2>
</div> <div class="description">
</a> <p>
<a href="#" target="_blank" class="item"> Try to beat the dealer by getting a hand value as close to 21 as
<img src="images/solitaire.png" alt="Image can't be displayed"> possible without going over.
<h2>Solitaire</h2> </p>
<div class="description"> </div>
<p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p> </a>
</div> <a href="#" target="_blank" class="item">
</a> <img src="images/snake.png" alt="Image can't be displayed" />
<a href="#" target="_blank" class="item"> <h2>Snake</h2>
<img src="images/minesweeper.png" alt="Image can't be displayed"> <div class="description">
<h2>Minesweeper</h2> <p>
<div class="description"> Guide the snake to eat food and grow longer while avoiding
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p> collisions with the walls and itself.
</div> </p>
</a> </div>
<a href="guessMyNumber/index.html" target="_blank" class="item"> </a>
<img src="images/number.jpeg" alt="Image can't be displayed"> <a href="#" target="_blank" class="item">
<h2>Guess My Number</h2> <img src="images/solitaire.png" alt="Image can't be displayed" />
<div class="description"> <h2>Solitaire</h2>
<p>A simple game where you try to guess a randomly chosen number within a certain range.</p> <div class="description">
</div> <p>
</a> A classic card game where the objective is to move all cards to
<a href="#" target="_blank" class="item"> foundation piles in ascending order.
<img src="images/endless_runner.png" alt="Image can't be displayed"> </p>
<h2>Endless Runner</h2> </div>
<div class="description"> </a>
<p>Run through an endless landscape, avoiding obstacles and collecting items to score points.</p> <a href="mineSweeper/index.html" target="_blank" class="item">
</div> <img src="images/minesweeper.png" alt="Image can't be displayed" />
</a> <h2>Minesweeper</h2>
</div> <div class="description">
<p>
Uncover squares on a grid while avoiding hidden mines, using
numbers to deduce safe spots.
</p>
</div>
</a>
<a href="guessMyNumber/index.html" target="_blank" class="item">
<img src="images/number.jpeg" alt="Image can't be displayed" />
<h2>Guess My Number</h2>
<div class="description">
<p>
A simple game where you try to guess a randomly chosen number
within a certain range.
</p>
</div>
</a>
<a href="#" target="_blank" class="item">
<img src="images/endless_runner.png" alt="Image can't be displayed" />
<h2>Endless Runner</h2>
<div class="description">
<p>
Run through an endless landscape, avoiding obstacles and
collecting items to score points.
</p>
</div>
</a>
</div>
</main> </main>
<footer> <footer>
<p>&copy; 2025 Game Collection</p> <p>&copy; 2025 Game Collection</p>
</footer> </footer>
</body> </body>
</html> </html>

14
secret/mineSweeper/counter.js Normal file
View file

@ -0,0 +1,14 @@
'use strict'
document.addEventListener('DOMContentLoaded', () => {
const bombsSlider = document.getElementById('bombs');
const bombsValue = document.getElementById('bombsValue');
// Update the displayed number of bombs when the slider value changes
bombsSlider.addEventListener('input', () => {
bombsValue.textContent = bombsSlider.value;
});
// Initialize the displayed value on page load
bombsValue.textContent = bombsSlider.value;
});

2
secret/mineSweeper/index.html
View file

@ -29,6 +29,7 @@
value="20" value="20"
aria-label="Number of Bombs" aria-label="Number of Bombs"
/> />
<span id="bombsValue">20</span>
<button id="startGame">Start Game</button> <button id="startGame">Start Game</button>
</div> </div>
@ -38,5 +39,6 @@
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
<script src="counter.js"></script>
</body> </body>
</html> </html>

3
secret/mineSweeper/styles.css
View file

@ -45,7 +45,8 @@ label {
} }
input[type="number"], input[type="number"],
input[type="range"] { input[type="range"],
span {
padding: 12px; padding: 12px;
margin-bottom: 20px; margin-bottom: 20px;
width: 100%; width: 100%;

45
secret/styles.css
View file

@ -11,7 +11,7 @@ body {
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 {
@ -27,51 +27,22 @@ header {
/* Create the flickering neon light effect */ /* Create the flickering neon light effect */
@keyframes neonFlicker { @keyframes neonFlicker {
0% { 0% {
text-shadow: 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;
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% { 20% {
text-shadow: text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00;
0 0 3px #ffcc00,
0 0 7px #ffcc00,
0 0 10px #ffcc00,
0 0 15px #ffcc00,
0 0 20px #ffcc00;
} }
40% { 40% {
text-shadow: text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00;
0 0 5px #ffcc00,
0 0 15px #ffcc00,
0 0 25px #ffcc00;
} }
60% { 60% {
text-shadow: text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00;
0 0 5px #ffcc00,
0 0 10px #ffcc00,
0 0 15px #ffcc00,
0 0 20px #ffcc00,
0 0 30px #ffcc00;
} }
80% { 80% {
text-shadow: text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00;
0 0 3px #ffcc00,
0 0 7px #ffcc00,
0 0 10px #ffcc00;
} }
100% { 100% {
text-shadow: 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 5px #ffcc00,
0 0 10px #ffcc00,
0 0 15px #ffcc00,
0 0 20px #ffcc00,
0 0 30px #ffcc00,
0 0 40px #ffcc00;
} }
} }
@ -154,7 +125,7 @@ p {
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;
} }

126
webGames/index.html
View file

@ -1,58 +1,92 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Game Collection</title> <title>Game Collection</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
<header> <header>
<h1>Game Collection</h1> <h1>Game Collection</h1>
</header> </header>
<main> <main>
<div class="grid-container"> <div class="grid-container">
<a href="" target="_blank" class="item"> <a href="" target="_blank" class="item">
<img src="../secret/../secret/images/snake.png" alt="Image can't be displayed"> <img
<h2>Snake</h2> src="../secret/../secret/images/snake.png"
<div class="description"> alt="Image can't be displayed"
<p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p> />
</div> <h2>Snake</h2>
</a> <div class="description">
<a href="" target="_blank" class="item"> <p>
<img src="../secret/images/solitaire.png" alt="Image can't be displayed"> Guide the snake to eat food and grow longer while avoiding
<h2>Solitaire</h2> collisions with the walls and itself.
<div class="description"> </p>
<p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p> </div>
</div> </a>
</a> <a href="" target="_blank" class="item">
<a href="" target="_blank" class="item"> <img
<img src="../secret/images/minesweeper.png" alt="Image can't be displayed"> src="../secret/images/solitaire.png"
<h2>Minesweeper</h2> alt="Image can't be displayed"
<div class="description"> />
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p> <h2>Solitaire</h2>
</div> <div class="description">
</a> <p>
<a href="../secret/guessMyNumber/index.html" target="_blank" class="item"> A classic card game where the objective is to move all cards to
<img src="../secret/images/number.jpeg" alt="Image can't be displayed"> foundation piles in ascending order.
<h2>Guess My Number</h2> </p>
<div class="description"> </div>
<p>A simple game where you try to guess a randomly chosen number within a certain range.</p> </a>
</div> <a href="../secret/mineSweeper/index.html" target="_blank" class="item">
</a> <img
<a href="" target="_blank" class="item"> src="../secret/images/minesweeper.png"
<img src="../secret/images/endless_runner.png" alt="Image can't be displayed"> alt="Image can't be displayed"
<h2>Endless Runner</h2> />
<div class="description"> <h2>Minesweeper</h2>
<p>Run through an endless landscape, avoiding obstacles and collecting items to score points.</p> <div class="description">
</div> <p>
</a> Uncover squares on a grid while avoiding hidden mines, using
</div> numbers to deduce safe spots.
</p>
</div>
</a>
<a
href="../secret/guessMyNumber/index.html"
target="_blank"
class="item"
>
<img
src="../secret/images/number.jpeg"
alt="Image can't be displayed"
/>
<h2>Guess My Number</h2>
<div class="description">
<p>
A simple game where you try to guess a randomly chosen number
within a certain range.
</p>
</div>
</a>
<a href="" target="_blank" class="item">
<img
src="../secret/images/endless_runner.png"
alt="Image can't be displayed"
/>
<h2>Endless Runner</h2>
<div class="description">
<p>
Run through an endless landscape, avoiding obstacles and
collecting items to score points.
</p>
</div>
</a>
</div>
</main> </main>
<footer> <footer>
<p>&copy; 2025 Game Collection</p> <p>&copy; 2025 Game Collection</p>
</footer> </footer>
</body> </body>
</html> </html>

4
webGames/styles.css
View file

@ -104,7 +104,7 @@ p {
} }
/* Mobile Optimization */ /* Mobile Optimization */
@media (max-width: 600px) { @media(max-width: 600px) {
header { header {
font-size: 1.2rem; font-size: 1.2rem;
} }
@ -114,7 +114,7 @@ p {
width: auto; width: auto;
} }
.grid-container{ .grid-container {
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
} }
} }