main #3
16 changed files with 476 additions and 323 deletions
136
index.html
136
index.html
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<!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">
|
||||||
|
|
@ -15,7 +15,10 @@
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1>Welcome to the Asteroid Game!</h1>
|
<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>
|
||||||
|
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>
|
<p>Your goal is to survive as long as possible while scoring points!</p>
|
||||||
<button onclick="window.location.href='secret.html'">Play Game</button>
|
<button onclick="window.location.href='secret.html'">Play Game</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<!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>
|
||||||
|
|
@ -12,7 +12,9 @@
|
||||||
<!-- 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()">
|
||||||
|
Shoot
|
||||||
|
</button>
|
||||||
<button id="rightBtn" class="control-btn">Right</button>
|
<button id="rightBtn" class="control-btn">Right</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,8 @@
|
||||||
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;
|
||||||
|
|
@ -71,4 +72,3 @@
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #ff9900;
|
background-color: #ff9900;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<!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">
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -73,7 +74,9 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Messages */
|
/* Messages */
|
||||||
.message, .score, .highScore {
|
.message,
|
||||||
|
.score,
|
||||||
|
.highScore {
|
||||||
font-size: 1.4rem; /* Increased font size */
|
font-size: 1.4rem; /* Increased font size */
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
|
@ -1,10 +1,10 @@
|
||||||
<!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>
|
||||||
|
|
@ -13,54 +13,81 @@
|
||||||
|
|
||||||
<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"
|
||||||
|
target="_blank"
|
||||||
|
class="item"
|
||||||
|
>
|
||||||
|
<img src="images/asteroid.png" alt="Image can't be displayed" />
|
||||||
<h2>Secret Asteroid Shooter</h2>
|
<h2>Secret Asteroid Shooter</h2>
|
||||||
<div class="description">
|
<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>
|
||||||
<p>Your goal is to survive as long as possible while scoring points!</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>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" target="_blank" class="item">
|
<a href="#" target="_blank" class="item">
|
||||||
<img src="images/blackjack.jpg" alt="Image can't be displayed">
|
<img src="images/blackjack.jpg" alt="Image can't be displayed" />
|
||||||
<h2>Secret Blackjack</h2>
|
<h2>Secret Blackjack</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<p>Try to beat the dealer by getting a hand value as close to 21 as possible without going over.</p>
|
<p>
|
||||||
|
Try to beat the dealer by getting a hand value as close to 21 as
|
||||||
|
possible without going over.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" target="_blank" class="item">
|
<a href="#" target="_blank" class="item">
|
||||||
<img src="images/snake.png" alt="Image can't be displayed">
|
<img src="images/snake.png" alt="Image can't be displayed" />
|
||||||
<h2>Snake</h2>
|
<h2>Snake</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p>
|
<p>
|
||||||
|
Guide the snake to eat food and grow longer while avoiding
|
||||||
|
collisions with the walls and itself.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" target="_blank" class="item">
|
<a href="#" target="_blank" class="item">
|
||||||
<img src="images/solitaire.png" alt="Image can't be displayed">
|
<img src="images/solitaire.png" alt="Image can't be displayed" />
|
||||||
<h2>Solitaire</h2>
|
<h2>Solitaire</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</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="mineSweeper/index.html" target="_blank" class="item">
|
||||||
<img src="images/minesweeper.png" alt="Image can't be displayed">
|
<img src="images/minesweeper.png" alt="Image can't be displayed" />
|
||||||
<h2>Minesweeper</h2>
|
<h2>Minesweeper</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
|
<p>
|
||||||
|
Uncover squares on a grid while avoiding hidden mines, using
|
||||||
|
numbers to deduce safe spots.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="guessMyNumber/index.html" target="_blank" class="item">
|
<a href="guessMyNumber/index.html" target="_blank" class="item">
|
||||||
<img src="images/number.jpeg" alt="Image can't be displayed">
|
<img src="images/number.jpeg" alt="Image can't be displayed" />
|
||||||
<h2>Guess My Number</h2>
|
<h2>Guess My Number</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<p>A simple game where you try to guess a randomly chosen number within a certain range.</p>
|
<p>
|
||||||
|
A simple game where you try to guess a randomly chosen number
|
||||||
|
within a certain range.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" target="_blank" class="item">
|
<a href="#" target="_blank" class="item">
|
||||||
<img src="images/endless_runner.png" alt="Image can't be displayed">
|
<img src="images/endless_runner.png" alt="Image can't be displayed" />
|
||||||
<h2>Endless Runner</h2>
|
<h2>Endless Runner</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<p>Run through an endless landscape, avoiding obstacles and collecting items to score points.</p>
|
<p>
|
||||||
|
Run through an endless landscape, avoiding obstacles and
|
||||||
|
collecting items to score points.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
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"
|
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>
|
||||||
|
|
|
||||||
|
|
@ -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%;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<!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>
|
||||||
|
|
@ -14,38 +14,72 @@
|
||||||
<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
|
||||||
|
src="../secret/../secret/images/snake.png"
|
||||||
|
alt="Image can't be displayed"
|
||||||
|
/>
|
||||||
<h2>Snake</h2>
|
<h2>Snake</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p>
|
<p>
|
||||||
|
Guide the snake to eat food and grow longer while avoiding
|
||||||
|
collisions with the walls and itself.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="" target="_blank" class="item">
|
<a href="" target="_blank" class="item">
|
||||||
<img src="../secret/images/solitaire.png" alt="Image can't be displayed">
|
<img
|
||||||
|
src="../secret/images/solitaire.png"
|
||||||
|
alt="Image can't be displayed"
|
||||||
|
/>
|
||||||
<h2>Solitaire</h2>
|
<h2>Solitaire</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</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="../secret/mineSweeper/index.html" target="_blank" class="item">
|
||||||
<img src="../secret/images/minesweeper.png" alt="Image can't be displayed">
|
<img
|
||||||
|
src="../secret/images/minesweeper.png"
|
||||||
|
alt="Image can't be displayed"
|
||||||
|
/>
|
||||||
<h2>Minesweeper</h2>
|
<h2>Minesweeper</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
|
<p>
|
||||||
|
Uncover squares on a grid while avoiding hidden mines, using
|
||||||
|
numbers to deduce safe spots.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="../secret/guessMyNumber/index.html" target="_blank" class="item">
|
<a
|
||||||
<img src="../secret/images/number.jpeg" alt="Image can't be displayed">
|
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>
|
<h2>Guess My Number</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<p>A simple game where you try to guess a randomly chosen number within a certain range.</p>
|
<p>
|
||||||
|
A simple game where you try to guess a randomly chosen number
|
||||||
|
within a certain range.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="" target="_blank" class="item">
|
<a href="" target="_blank" class="item">
|
||||||
<img src="../secret/images/endless_runner.png" alt="Image can't be displayed">
|
<img
|
||||||
|
src="../secret/images/endless_runner.png"
|
||||||
|
alt="Image can't be displayed"
|
||||||
|
/>
|
||||||
<h2>Endless Runner</h2>
|
<h2>Endless Runner</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<p>Run through an endless landscape, avoiding obstacles and collecting items to score points.</p>
|
<p>
|
||||||
|
Run through an endless landscape, avoiding obstacles and
|
||||||
|
collecting items to score points.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue