Skip to content

Commit

Permalink
Solving Issue ChromeGaming#53: Added Exit Button and Resolved Row and…
Browse files Browse the repository at this point in the history 
… Column Size
  • Loading branch information
@Deekshit7483
Deekshit7483 committed May 15, 2024
1 parent e8ed6cf commit d939215
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 55 deletions.
107 changes: 53 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,65 +29,64 @@
<source src="./back.mp4" type="video/mp4">
</video>
<div class="form">
<h1 class="heading"
style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:rgb(52, 76, 100);">
▁ ▂ ▄ ▅ ▆ ▇ █ <span style="color: rgb(87, 166, 161);">MAXIMISE</span> BOXES!! █ ▇ ▆ ▅ ▄ ▂ ▁
</h1>
<h1 class="heading" style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">
▁ ▂ ▄ ▅ ▆ ▇ █ MAXIMIZE BOXES!! █ ▇ ▆ ▅ ▄ ▂ ▁
</h1>

<h3 class="instructions-heading" style="color: white; background-color: rgb(87, 123, 141);">Instructions</h3>
<h3 class="instructions-heading">Instructions</h3>

<p class="instructions" style="color: rgb(52, 76, 100);">
1. Select the number of rows, columns and players. <br>
2. The player who has maximum number of boxes on board is the winner. <br>
3. Players will switch after every turn. But the player who has filled the last box, will get one extra
chance
consecutively. <br>
</p>
<p class="instructions">
1. Select the number of rows, columns, and players. <br>
2. The player who has the maximum number of boxes on the board is the winner. <br>
3. Players will switch after every turn. But the player who has filled the last box will get one extra
chance consecutively. <br>
</p>

</div>
</div>

<!-- Form page -->
<div class="form">
<div>
<h2 style="color: rgb(52, 76, 100);">What size of Board do you want? :</h2>
</div>

<div class="form-item">
<label for="rows" style="color: rgb(52, 76, 100);">Rows : <span class="details">(between 5 and 30)</span></label>
<input type="number" id="rows" min="5" max="30" value="6" />
</div>

<div class="form-item">
<label for="columns" style="color: rgb(52, 76, 100);">Columns : <span class="details">(between 5 and 30)</span></label>
<input type="number" id="columns" min="5" max="30" value="6" />
</div>

<div class="form-item">
<label for="players-count" style="color: rgb(52, 76, 100);">Players : <span class="details">(between 2 and 6)</span></label>
<input type="number" id="players-count" min="2" max="6" value="2" />
</div>

<button class="start-btn" style="background-color:rgb(87, 123, 141);">START</button>

</div>


</div>

<!-- Players -->
<div class="players" style="margin-top: 50px;"></div>

<div class="player-turn">
<div class="bg" style="margin-top: 60px;">
<span class="name">PlayerX</span>'s turn
</div>
</div>

<!-- Game Page -->
<div class="board" style="margin-top: 154px;"></div>
<!-- Form page -->
<div class="form">
<div>
<h2>What size of Board do you want? :</h2>
</div>

<div class="form-item">
<label for="rows">Rows : <span class="details">(between 5 and 30)</span></label>
<input type="number" id="rows" min="5" max="30" value="6" />
</div>

<div class="form-item">
<label for="columns">Columns : <span class="details">(between 5 and 30)</span></label>
<input type="number" id="columns" min="5" max="30" value="6" />
</div>

<div class="form-item">
<label for="players-count">Players : <span class="details">(between 2 and 6)</span></label>
<input type="number" id="players-count" min="2" max="6" value="2" />
</div>

<button class="start-btn" onclick="startGame()">START</button>

</div>


</div>

<!-- Exit button -->
<button class="exit-btn" onclick="exitGame()">Exit</button>

<!-- Players -->
<div class="players" style="margin-top: 50px;"></div>

<div class="player-turn">
<div class="bg" style="margin-top: 60px;">
<span class="name">PlayerX</span>'s turn
</div>
</div>

<!-- Game Page -->
<div class="board" style="margin-top: 154px;"></div>

</body>

</html>
<!--Video by <a href="https://pixabay.com/users/blendertimer-9538909/?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=80645">Daniel Roberts</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=80645">Pixabay</a>
</a>-->
22 changes: 21 additions & 1 deletion js/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ const playersInput = document.querySelector("#players-count")
const startBtn = document.querySelector(".start-btn")
const heading = document.querySelector(".heading")
const bgMusic = new Audio('./sounds/bgMusic.mp3');
var game = null
var game = null;

startBtn.addEventListener("click", () => {
bgMusic.volume = 0.1;
Expand All @@ -187,3 +187,23 @@ startBtn.addEventListener("click", () => {
function calculate(value, min, max) {
return Math.min(Math.max(value, min), max)
}



var game = null;

function startGame() {
const rows = parseInt(document.getElementById('rows').value);
const columns = parseInt(document.getElementById('columns').value);
const playersCount = parseInt(document.getElementById('players-count').value);

if (isNaN(rows) || isNaN(columns) || isNaN(playersCount) || rows < 5 || rows > 30 || columns < 5 || columns > 30 || playersCount < 2 || playersCount > 6) {
alert('Please enter valid values for rows, columns between 5 and 30. players between 2 to 6');
window.location.reload();
return; // Don't start the game if inputs are invalid
}
}

function exitGame() {
window.location.reload();
}
18 changes: 18 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,4 +342,22 @@ h1 {
width: auto;
height: 100%;
}
}


.exit-btn {
position: fixed;
top: 10px;
left: 10px;
padding: 10px 20px;
background-color: #ff0000;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

.exit-btn:hover {
background-color: #cc0000;
}

0 comments on commit d939215

Please sign in to comment.