Compare commits
6 commits
5b65c84e2e
...
ffca29cc18
| Author | SHA1 | Date | |
|---|---|---|---|
| ffca29cc18 | |||
| 26fabc37e9 | |||
| 24d01959c1 | |||
| 8e361050d9 | |||
| fa002e2786 | |||
| adc78e0931 |
16 changed files with 476 additions and 323 deletions
136
index.html
136
index.html
|
|
@ -17,7 +17,6 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
|
@ -46,7 +45,10 @@
|
|||
<ul>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -66,26 +68,50 @@
|
|||
<h1>Our Team</h1>
|
||||
<section class="cards" id="cards">
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -93,27 +119,97 @@
|
|||
<!-- About Us section -->
|
||||
<section id="about">
|
||||
<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>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>
|
||||
<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>
|
||||
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 id="vision">
|
||||
<h2>Our Vision</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>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>
|
||||
<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>
|
||||
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>
|
||||
</article>
|
||||
|
||||
<!-- Custom footer component -->
|
||||
<footer-component></footer-component>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Game Landing Page</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="landing-page">
|
||||
<div class="game-background">
|
||||
<!-- Game is embedded or shown as background -->
|
||||
<canvas id="gameCanvas"></canvas>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Game Landing Page</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="landing-page">
|
||||
<div class="game-background">
|
||||
<!-- Game is embedded or shown as background -->
|
||||
<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 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>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Asteroid Shooter</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="gameCanvas"></canvas>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Asteroid Shooter</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="gameCanvas"></canvas>
|
||||
|
||||
<!-- Virtual buttons for mobile -->
|
||||
<div class="controls">
|
||||
<button id="leftBtn" class="control-btn">Left</button>
|
||||
<button id="shootBtn" class="control-btn" onclick="btnShoot()">Shoot</button>
|
||||
<button id="rightBtn" class="control-btn">Right</button>
|
||||
</div>
|
||||
<!-- Virtual buttons for mobile -->
|
||||
<div class="controls">
|
||||
<button id="leftBtn" class="control-btn">Left</button>
|
||||
<button id="shootBtn" class="control-btn" onclick="btnShoot()">
|
||||
Shoot
|
||||
</button>
|
||||
<button id="rightBtn" class="control-btn">Right</button>
|
||||
</div>
|
||||
|
||||
<script src="game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<script src="game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,43 @@
|
|||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
background: black;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background: black;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
font-size: 18px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
flex-grow: 1;
|
||||
margin: 0 5px;
|
||||
display: none;
|
||||
padding: 10px;
|
||||
font-size: 18px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
flex-grow: 1;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.control-btn {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
padding: 12px;
|
||||
}
|
||||
@media(max-width: 600px) {
|
||||
.control-btn {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, html {
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
|
|
@ -13,18 +14,18 @@
|
|||
background-color: #000;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.landing-page {
|
||||
}
|
||||
|
||||
.landing-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.game-background {
|
||||
}
|
||||
|
||||
.game-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -34,9 +35,9 @@
|
|||
backdrop-filter: blur(8px); /* Apply blur effect to the background */
|
||||
z-index: -1; /* Ensures it's in the background */
|
||||
pointer-events: none; /* Prevent interaction with the blurred background */
|
||||
}
|
||||
|
||||
.content {
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
z-index: 1; /* Ensure content appears above the game background */
|
||||
padding: 20px;
|
||||
|
|
@ -44,19 +45,19 @@
|
|||
position: relative;
|
||||
color: white;
|
||||
backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */
|
||||
}
|
||||
|
||||
h1 {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
button {
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 12px 24px;
|
||||
background-color: #ffcc00;
|
||||
color: black;
|
||||
|
|
@ -66,9 +67,8 @@
|
|||
border-radius: 5px;
|
||||
text-transform: uppercase;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #ff9900;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -341,7 +341,7 @@ function drawGameOver() {
|
|||
|
||||
// Restart game
|
||||
function restartGame() {
|
||||
window.location.reload();
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
// Main game loop
|
||||
|
|
|
|||
|
|
@ -1,54 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Guess My Number</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="gameboy">
|
||||
<!-- Game Boy Screen -->
|
||||
<div class="screen">
|
||||
<article class="game">
|
||||
<h1>Guess My Number - Game</h1>
|
||||
<p class="message"></p>
|
||||
<div class="guess-display">
|
||||
<span id="guess"></span>
|
||||
</div>
|
||||
<p class="score"></p>
|
||||
<p class="highScore"></p>
|
||||
|
||||
<div class="description">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Guess My Number</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="gameboy">
|
||||
<!-- Game Boy Screen -->
|
||||
<div class="screen">
|
||||
<article class="game">
|
||||
<h1>Guess My Number - Game</h1>
|
||||
<p class="message"></p>
|
||||
<div class="guess-display">
|
||||
<span id="guess"></span>
|
||||
</div>
|
||||
<p class="score"></p>
|
||||
<p class="highScore"></p>
|
||||
|
||||
<div class="description">
|
||||
<h2>Description</h2>
|
||||
<p>Guess a number between 1 and 20</p>
|
||||
<p>A = check</p>
|
||||
<p>B = Reload</p>
|
||||
<p>▲ = increases 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>
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<script src="game.js"></script>
|
||||
<script src="styles.js"></script>
|
||||
</body>
|
||||
<script src="game.js"></script>
|
||||
<script src="styles.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/* Base Reset */
|
||||
body, html {
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: monospace;
|
||||
|
|
@ -16,7 +17,7 @@ body, html {
|
|||
width: 441px;
|
||||
height: 735px;
|
||||
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;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -24,7 +25,7 @@ body, html {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media(max-width: 768px) {
|
||||
.gameboy {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
|
@ -43,7 +44,7 @@ body, html {
|
|||
display: flex;
|
||||
justify-content: 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;
|
||||
}
|
||||
|
||||
|
|
@ -54,7 +55,7 @@ body, html {
|
|||
|
||||
/* Titles */
|
||||
h1 {
|
||||
font-size: 2rem; /* Increased font size */
|
||||
font-size: 2rem; /* Increased font size */
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -64,22 +65,24 @@ h1 {
|
|||
background-color: #9bbc0f;
|
||||
color: #0f380f;
|
||||
border: 2px solid #0f380f;
|
||||
font-size: 2rem; /* Increased font size */
|
||||
width: 80px; /* Increased width */
|
||||
font-size: 2rem; /* Increased font size */
|
||||
width: 80px; /* Increased width */
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
padding: 10px; /* Increased padding */
|
||||
padding: 10px; /* Increased padding */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
.message, .score, .highScore {
|
||||
font-size: 1.4rem; /* Increased font size */
|
||||
.message,
|
||||
.score,
|
||||
.highScore {
|
||||
font-size: 1.4rem; /* Increased font size */
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.description,
|
||||
.description p{
|
||||
.description p {
|
||||
font-size: 1.2rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 auto;
|
||||
|
|
@ -97,8 +100,8 @@ h1 {
|
|||
/* D-Pad */
|
||||
.dpad {
|
||||
position: relative;
|
||||
width: 120px; /* Increased size */
|
||||
height: 120px; /* Increased size */
|
||||
width: 120px; /* Increased size */
|
||||
height: 120px; /* Increased size */
|
||||
}
|
||||
|
||||
/* Base Styling for D-Pad Buttons */
|
||||
|
|
@ -110,7 +113,7 @@ h1 {
|
|||
position: absolute;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
font-size: 1.5rem; /* Increased size */
|
||||
font-size: 1.5rem; /* Increased size */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -161,7 +164,7 @@ h1 {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 140px; /* Increased height */
|
||||
height: 140px; /* Increased height */
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -171,7 +174,7 @@ h1 {
|
|||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.8rem; /* Increased font size */
|
||||
font-size: 1.8rem; /* Increased font size */
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s, background-color 0.2s;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 55 KiB |
|
|
@ -1,73 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Secret Game Collection</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Secret Game Collection</h1>
|
||||
<h1>Secret Game Collection</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="grid-container">
|
||||
<a href="asteroidDestroyer/explenation.html" target="_blank" class="item">
|
||||
<img src="images/asteroid.png" alt="Image can't be displayed">
|
||||
<h2>Secret Asteroid Shooter</h2>
|
||||
<div class="description">
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" target="_blank" class="item">
|
||||
<img src="images/blackjack.jpg" alt="Image can't be displayed">
|
||||
<h2>Secret Blackjack</h2>
|
||||
<div class="description">
|
||||
<p>Try to beat the dealer by getting a hand value as close to 21 as possible without going over.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" target="_blank" class="item">
|
||||
<img src="images/snake.png" alt="Image can't be displayed">
|
||||
<h2>Snake</h2>
|
||||
<div class="description">
|
||||
<p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" target="_blank" class="item">
|
||||
<img src="images/solitaire.png" alt="Image can't be displayed">
|
||||
<h2>Solitaire</h2>
|
||||
<div class="description">
|
||||
<p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" target="_blank" class="item">
|
||||
<img src="images/minesweeper.png" alt="Image can't be displayed">
|
||||
<h2>Minesweeper</h2>
|
||||
<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>
|
||||
<div class="grid-container">
|
||||
<a
|
||||
href="asteroidDestroyer/explenation.html"
|
||||
target="_blank"
|
||||
class="item"
|
||||
>
|
||||
<img src="images/asteroid.png" alt="Image can't be displayed" />
|
||||
<h2>Secret Asteroid Shooter</h2>
|
||||
<div class="description">
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" target="_blank" class="item">
|
||||
<img src="images/blackjack.jpg" alt="Image can't be displayed" />
|
||||
<h2>Secret Blackjack</h2>
|
||||
<div class="description">
|
||||
<p>
|
||||
Try to beat the dealer by getting a hand value as close to 21 as
|
||||
possible without going over.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" target="_blank" class="item">
|
||||
<img src="images/snake.png" alt="Image can't be displayed" />
|
||||
<h2>Snake</h2>
|
||||
<div class="description">
|
||||
<p>
|
||||
Guide the snake to eat food and grow longer while avoiding
|
||||
collisions with the walls and itself.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" target="_blank" class="item">
|
||||
<img src="images/solitaire.png" alt="Image can't be displayed" />
|
||||
<h2>Solitaire</h2>
|
||||
<div class="description">
|
||||
<p>
|
||||
A classic card game where the objective is to move all cards to
|
||||
foundation piles in ascending order.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="mineSweeper/index.html" target="_blank" class="item">
|
||||
<img src="images/minesweeper.png" alt="Image can't be displayed" />
|
||||
<h2>Minesweeper</h2>
|
||||
<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>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Game Collection</p>
|
||||
<p>© 2025 Game Collection</p>
|
||||
</footer>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
14
secret/mineSweeper/counter.js
Normal file
14
secret/mineSweeper/counter.js
Normal 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;
|
||||
});
|
||||
|
|
@ -29,6 +29,7 @@
|
|||
value="20"
|
||||
aria-label="Number of Bombs"
|
||||
/>
|
||||
<span id="bombsValue">20</span>
|
||||
|
||||
<button id="startGame">Start Game</button>
|
||||
</div>
|
||||
|
|
@ -38,5 +39,6 @@
|
|||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script src="counter.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,8 @@ label {
|
|||
}
|
||||
|
||||
input[type="number"],
|
||||
input[type="range"] {
|
||||
input[type="range"],
|
||||
span {
|
||||
padding: 12px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ body {
|
|||
margin: 0;
|
||||
line-height: 1.6;
|
||||
background-image: url('images/background.jpg');
|
||||
background-size: cover /* Adjust size for tape appearance */
|
||||
background-size: cover; /* Adjust size for tape appearance */
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -27,51 +27,22 @@ header {
|
|||
/* Create the flickering neon light effect */
|
||||
@keyframes neonFlicker {
|
||||
0% {
|
||||
text-shadow:
|
||||
0 0 5px #ffcc00,
|
||||
0 0 10px #ffcc00,
|
||||
0 0 15px #ffcc00,
|
||||
0 0 20px #ffcc00,
|
||||
0 0 30px #ffcc00,
|
||||
0 0 40px #ffcc00,
|
||||
0 0 50px #ffcc00;
|
||||
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;
|
||||
text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00;
|
||||
}
|
||||
40% {
|
||||
text-shadow:
|
||||
0 0 5px #ffcc00,
|
||||
0 0 15px #ffcc00,
|
||||
0 0 25px #ffcc00;
|
||||
text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00;
|
||||
}
|
||||
60% {
|
||||
text-shadow:
|
||||
0 0 5px #ffcc00,
|
||||
0 0 10px #ffcc00,
|
||||
0 0 15px #ffcc00,
|
||||
0 0 20px #ffcc00,
|
||||
0 0 30px #ffcc00;
|
||||
text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00;
|
||||
}
|
||||
80% {
|
||||
text-shadow:
|
||||
0 0 3px #ffcc00,
|
||||
0 0 7px #ffcc00,
|
||||
0 0 10px #ffcc00;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -110,7 +81,7 @@ footer {
|
|||
filter: brightness(0.6);
|
||||
}
|
||||
|
||||
.item .description {
|
||||
.item .description {
|
||||
padding: 30px;
|
||||
font-size: 1rem;
|
||||
color: #ccc;
|
||||
|
|
@ -119,7 +90,7 @@ footer {
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
p {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -154,7 +125,7 @@ p {
|
|||
transform: translateX(-50%) translateY(-10px);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
@media(max-width: 800px) {
|
||||
header {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,58 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Game Collection</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Game Collection</h1>
|
||||
<h1>Game Collection</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="grid-container">
|
||||
<a href="" target="_blank" class="item">
|
||||
<img src="../secret/../secret/images/snake.png" alt="Image can't be displayed">
|
||||
<h2>Snake</h2>
|
||||
<div class="description">
|
||||
<p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="" target="_blank" class="item">
|
||||
<img src="../secret/images/solitaire.png" alt="Image can't be displayed">
|
||||
<h2>Solitaire</h2>
|
||||
<div class="description">
|
||||
<p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="" target="_blank" class="item">
|
||||
<img src="../secret/images/minesweeper.png" alt="Image can't be displayed">
|
||||
<h2>Minesweeper</h2>
|
||||
<div class="description">
|
||||
<p>Uncover squares on a grid while avoiding hidden mines, using 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>
|
||||
<div class="grid-container">
|
||||
<a href="" target="_blank" class="item">
|
||||
<img
|
||||
src="../secret/../secret/images/snake.png"
|
||||
alt="Image can't be displayed"
|
||||
/>
|
||||
<h2>Snake</h2>
|
||||
<div class="description">
|
||||
<p>
|
||||
Guide the snake to eat food and grow longer while avoiding
|
||||
collisions with the walls and itself.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="" target="_blank" class="item">
|
||||
<img
|
||||
src="../secret/images/solitaire.png"
|
||||
alt="Image can't be displayed"
|
||||
/>
|
||||
<h2>Solitaire</h2>
|
||||
<div class="description">
|
||||
<p>
|
||||
A classic card game where the objective is to move all cards to
|
||||
foundation piles in ascending order.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="../secret/mineSweeper/index.html" target="_blank" class="item">
|
||||
<img
|
||||
src="../secret/images/minesweeper.png"
|
||||
alt="Image can't be displayed"
|
||||
/>
|
||||
<h2>Minesweeper</h2>
|
||||
<div class="description">
|
||||
<p>
|
||||
Uncover squares on a grid while avoiding hidden mines, using
|
||||
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>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Game Collection</p>
|
||||
<p>© 2025 Game Collection</p>
|
||||
</footer>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ footer {
|
|||
object-fit: cover;
|
||||
}
|
||||
|
||||
.item .description {
|
||||
.item .description {
|
||||
padding: 30px;
|
||||
font-size: 1rem;
|
||||
color: #ddd;
|
||||
|
|
@ -67,7 +67,7 @@ footer {
|
|||
flex-grow: 1; /* Allow description to take remaining space */
|
||||
}
|
||||
|
||||
p {
|
||||
p {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -104,7 +104,7 @@ p {
|
|||
}
|
||||
|
||||
/* Mobile Optimization */
|
||||
@media (max-width: 600px) {
|
||||
@media(max-width: 600px) {
|
||||
header {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
|
@ -114,7 +114,7 @@ p {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.grid-container{
|
||||
.grid-container {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue