Skip to content

Commit

Permalink
Added Instruction tab in all game (Spandan-Bhattacharya#324)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Surajit0573
Surajit0573 authored Feb 25, 2024
1 parent 70b950e commit a6d4d17
Show file tree
Hide file tree
Showing 30 changed files with 1,699 additions and 721 deletions.
144 changes: 85 additions & 59 deletions 2048/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,98 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>2048</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" charset="utf-8"></script>
<script src="https://kit.fontawesome.com/b9199edbdd.js" crossorigin="anonymous"></script>

</head>
<body background="../assets/bg.webp">
<nav class="navbar">
<div class="image">
<img src="../assets/bodylogo.png" alt="loading">
</div>
<div class="left-nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="newContact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contributors.html">Contributors</a></li>
</ul>
</div>
</nav>
<head>
<meta charset="utf-8">
<title>2048</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" charset="utf-8"></script>
<script src="https://kit.fontawesome.com/b9199edbdd.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../css_files/model.css">

<div class="container">
<div class="info">
<h1>2048</h1>
<div class="score-container">
<div class="score-title">score</div>
<span id="score">0</span>
</div>
</div>
<span id="result">Join the numbers and get to the <b>2048</b> tile!</span>
<div class="grid"></div>
</head>

<div class="buttons">
<button id="resetButton" class="btn-s" onclick="location.reload()">Reset</button>
<a href="../index.html"><button id="solve-btn" class="btn-s">Back to Home</button></a>
<body background="../assets/bg.webp">
<nav class="navbar">
<div class="image">
<img src="../assets/bodylogo.png" alt="loading">
</div>
<div class="left-nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="newContact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contributors.html">Contributors</a></li>
<li><a href="#" onclick="openInstructions()">Instructions</a></li>
</ul>
</div>
</nav>

<div class="container">
<div class="info">
<h1>2048</h1>
<div class="score-container">
<div class="score-title">score</div>
<span id="score">0</span>
</div>
</div>
<span id="result">Join the numbers and get to the <b>2048</b> tile!</span>
<div class="grid"></div>

<div class="buttons">
<button id="resetButton" class="btn-s" onclick="location.reload()">Reset</button>
<a href="../index.html"><button id="solve-btn" class="btn-s">Back to Home</button></a>
</div>

<div class="footer-container">
<div class="foot-head">
<h2>Solve it!</h2>
</div>

<div class="footer-container">
<div class="foot-head">
<h2>Solve it!</h2>
<p>
Solve it! is a website that contains solvers for common games like
Sudoku, Nonogram, Crosswords and more!
</p>
</div>
<div class="foot-navlinks">
<h3>Quick Links</h3>
<a href="#">Home</a>
<a href="/html_files/about.html">About</a>
<a href="/html_files/newContact.html">Contact</a>
<a href="/html_files/faq.html">FAQ</a>
<a href="/html_files/contributors.html">Contributors</a>
</div>
<div class="foot-social">
<h3>Social Links</h3>
<a href="https://twitter.com/TeamJWOC"><i class="fab fa-x-twitter" style="font-size: 1.25em; margin: 2px"></i></a>
<a href="https://github.com/Spandan-Bhattacharya"><i class="fa-brands fa-github"
style="font-size: 1.25em; margin: 2px"></i></a>
<a href="https://www.linkedin.com/in/spandan-bhattacharya-02509b227"><i class="fa-brands fa-linkedin"
style="font-size: 1.25em; margin: 2px"></i></a>
</div>

<div id="instructionsModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeInstructions()">&times;</span>
<h2>How to Play 2048:</h2>
<p>
Solve it! is a website that contains solvers for common games like
Sudoku, Nonogram, Crosswords and more!
1. 2048 is played on a 4x4 grid, with numbered tiles that slide smoothly when a player moves them using the
arrow keys.<br>
2. Every turn, a new tile will randomly appear in an empty spot on the board with a value of either 2 or
4.<br>
3. Tiles slide as far as possible in the chosen direction until they are stopped by either another tile or the
edge of the grid.<br>
4. If two tiles of the same number collide while moving, they will merge into a tile with the total value of
the two tiles that collided.<br>
5. The game is won when a tile with a value of 2048 appears on the board.<br>
6. The game is over when the board is full and no more moves can be made, or if a player reaches a tile with a
value of 2048.<br>
</p>

</div>
<div class="foot-navlinks">
<h3>Quick Links</h3>
<a href="#">Home</a>
<a href="/html_files/about.html">About</a>
<a href="/html_files/newContact.html">Contact</a>
<a href="/html_files/faq.html">FAQ</a>
<a href="/html_files/contributors.html">Contributors</a>
</div>
<div class="foot-social">
<h3>Social Links</h3>
<a href="https://twitter.com/TeamJWOC"><i class="fab fa-x-twitter" style="font-size: 1.25em; margin: 2px"></i></a>
<a href="https://github.com/Spandan-Bhattacharya"><i class="fa-brands fa-github"
style="font-size: 1.25em; margin: 2px"></i></a>
<a href="https://www.linkedin.com/in/spandan-bhattacharya-02509b227"><i class="fa-brands fa-linkedin"
style="font-size: 1.25em; margin: 2px"></i></a>
</div>

</div>

<script src="../javascript/instruction.js"></script>
</body>

</body>
</html>
</html>
147 changes: 102 additions & 45 deletions Bingo Game/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Bingo Game</title>
<link rel="stylesheet" href="style.css">
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Bingo Game</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../css_files/model.css">
</head>

<body background="../assets/bg.webp">
<body background="../assets/bg.webp">
<nav class="navbar">
<div class="image">
<img src="../assets/bodylogo.png" alt="loading">
</div>
<div class="left-nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="newContact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contributors.html">Contributors</a></li>
<li><a href="#" onclick="openInstructions()">Instructions</a></li>
</ul>
</div>
</nav>
<div class="bingo-container">
<a href="../index.html"><Button id="back">Back</Button> </a>
<h1>Bingo Game</h1>
<div class="player-cards">
<h1 id="p1-h1">Player 1's Card</h1>
<div class="player-card" id="player1Card">
</div>
<div class="player-card" id="player2Card">
</div>
<h1 id="p2-h1">Player 2's Card</h1>
</div>
<div class="controls">
<button id="startButton">
Start
</button>
<button id="resetButton" disabled>
Reset
</button>
</div>
<div class="input-container">
<label for="numberInput">
Enter a number (1-25):
</label>
<input type="number"
id="numberInput"
min="1" max="25" disabled>
<button id="markButton" disabled>
Mark
</button>
</div>
<div id="turnDisplay"></div>
<h1>Bingo Game</h1>
<div class="player-cards">
<h1 id="p1-h1">Player 1's Card</h1>
<div class="player-card" id="player1Card">
</div>
<div class="player-card" id="player2Card">
</div>
<h1 id="p2-h1">Player 2's Card</h1>
</div>
<div class="controls">
<button id="startButton">
Start
</button>
<button id="resetButton" disabled>
Reset
</button>
</div>
<div class="input-container">
<label for="numberInput">
Enter a number (1-25):
</label>
<input type="number" id="numberInput" min="1" max="25" disabled>
<button id="markButton" disabled>
Mark
</button>
</div>
<div id="turnDisplay"></div>
<!-- Display win message here -->
<div id="winDisplay"></div>
</div>
<script src="app.js"></script>
</body>
<div id="winDisplay"></div>
</div>

</html>
<div class="footer-container">
<div class="foot-head">
<h2>Solve it!</h2>
<p>
Solve it! is a website that contains solvers for common games like
Sudoku, Nonogram, Crosswords and more!
</p>
</div>
<div class="foot-navlinks">
<h3>Quick Links</h3>
<a href="#">Home</a>
<a href="/html_files/about.html">About</a>
<a href="/html_files/newContact.html">Contact</a>
<a href="/html_files/faq.html">FAQ</a>
<a href="/html_files/contributors.html">Contributors</a>
</div>
<div class="foot-social">
<h3>Social Links</h3>
<a href="https://twitter.com/TeamJWOC"><i class="fab fa-x-twitter"
style="font-size: 1.25em; margin: 2px"></i></a>
<a href="https://github.com/Spandan-Bhattacharya"><i class="fa-brands fa-github"
style="font-size: 1.25em; margin: 2px"></i></a>
<a href="https://www.linkedin.com/in/spandan-bhattacharya-02509b227"><i class="fa-brands fa-linkedin"
style="font-size: 1.25em; margin: 2px"></i></a>
</div>

<div id="instructionsModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeInstructions()">&times;</span>
<h2>How to Play Bingo:</h2>
<p>
1. Each player gets a bingo card with a 5x5 grid containing numbers.<br>
2. The game host randomly selects numbers and calls them out.<br>
3. Players mark off the called numbers on their cards.<br>
4. The first player to complete a row, column, or diagonal on their card shouts "Bingo!" and wins
the game.<br>
5. In some variations, additional patterns or rules may be used to win.<br>
</p>

</div>
</div>

<script src="../javascript/instruction.js"></script>
<script src="app.js"></script>
</body>

</html>
Loading

0 comments on commit a6d4d17

Please sign in to comment.