Skip to content

Commit

Permalink
Merge pull request #363 from shraddhha/main
Browse files Browse the repository at this point in the history 
Added rulebook
  • Loading branch information
@ayush-t02
ayush-t02 authored Jun 21, 2024
2 parents 377a7f3 + af87cc4 commit c0dda6b
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 52 deletions.
37 changes: 13 additions & 24 deletions instructions.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<!DOCTYPE html>
<html lang="en">

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

<body>
<video autoplay muted class="video" loop id="myVideo">
<source src="./assets/default.mp4" type="video/mp4">
Expand All @@ -16,40 +18,27 @@ <h1>Detailed Instructions</h1>
<p>Welcome to the Dots & Boxes Game! Here are the detailed instructions on how to play:</p>
<ol>
<li>
<strong>Game Setup:</strong><br>
- Select the number of rows and columns (between 5 and 30).<br>
- Select the number of players (between 2 and 6).<br>
- Choose a theme from the available options.
<strong>Game Setup:</strong><br> - Select the number of rows and columns (between 5 and 30).<br> - Select the number of players (between 2 and 6).<br> - Choose a theme from the available options.
</li>
<li>
<strong>Objective:</strong><br>
The objective of the game is to complete the maximum number of boxes. The player who completes the most boxes wins the game.
<strong>Objective:</strong><br> The objective of the game is to complete the maximum number of boxes. The player who completes the most boxes wins the game.
</li>
<li>
<strong>Gameplay:</strong><br>
- Players take turns to draw a line between two adjacent dots.<br>
- A player who completes the fourth side of a box gets to claim that box and gets another turn.<br>
- The game continues until all the boxes are completed.<br>
- If a player completes a box, they get another turn immediately.<br>
- The game can be played in rounds, and the player with the highest score after a set number of rounds wins the game.
<strong>Gameplay:</strong><br> - Players take turns to draw a line between two adjacent dots.<br> - A player who completes the fourth side of a box gets to claim that box and gets another turn.<br> - The game continues until all the boxes
are completed.<br> - If a player completes a box, they get another turn immediately.<br> - The game can be played in rounds, and the player with the highest score after a set number of rounds wins the game.
</li>
<li>
<strong>Scoring:</strong><br>
- Each completed box is worth one point.<br>
- The player with the highest score at the end of the game is the winner.<br>
- In case of a tie, the player who completed the last box wins.
<strong>Scoring:</strong><br> - Each completed box is worth one point.<br> - The player with the highest score at the end of the game is the winner.<br> - In case of a tie, the player who completed the last box wins. - Optionally, a tie
can be broken by the number of consecutive boxes completed.
</li>
<li>
<strong>Strategies:</strong><br>
- Try to force your opponent into a position where they have to give you a box.<br>
- Plan your moves ahead and avoid creating a situation where your opponent can complete a box unless you can complete the fourth side.<br>
- Control the board by capturing multiple boxes in one turn by carefully planning your moves.<br>
- Take advantage of the extra turn you get after completing a box to create more opportunities for yourself.<br>
- Look for opportunities to create chains and loops of boxes that can be captured in one turn.<br>
- Be mindful of your opponent's potential moves and try to block them from completing boxes whenever possible.
<strong>Strategies:</strong><br> - Try to force your opponent into a position where they have to give you a box.<br> - Plan your moves ahead and avoid creating a situation where your opponent can complete a box unless you can complete
the fourth side.<br> - Control the board by capturing multiple boxes in one turn by carefully planning your moves.<br> - Take advantage of the extra turn you get after completing a box to create more opportunities for yourself.<br> - Look
for opportunities to create chains and loops of boxes that can be captured in one turn.<br> - Be mindful of your opponent's potential moves and try to block them from completing boxes whenever possible.
</li>
</ol>
<a href="index.html" class="back-btn button">Back to Home</a>
</div>
</body>
</html>

</html>
72 changes: 44 additions & 28 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/* Default settings */

:root {
--border-color: #e5e5e5;
--edge-length: 100%;
Expand All @@ -20,7 +21,7 @@ body {
display: grid;
place-items: center;
max-height: 100vh;
user-select: none;
user-select: none;
}

a {
Expand Down Expand Up @@ -82,12 +83,10 @@ a {
transform: scale(1);
opacity: 0.3;
}

30% {
transform: scale(0.5);
opacity: 0.6;
}

to {
transform: scale(1);
opacity: 0.3;
Expand Down Expand Up @@ -177,12 +176,29 @@ a {
z-index: 10;
}

.Player_1 { background: pink; }
.Player_2 { background: skyblue; }
.Player_3 { background: lightgreen; }
.Player_4 { background: magenta; }
.Player_5 { background: yellow; }
.Player_6 { background: orange; }
.Player_1 {
background: pink;
}

.Player_2 {
background: skyblue;
}

.Player_3 {
background: lightgreen;
}

.Player_4 {
background: magenta;
}

.Player_5 {
background: yellow;
}

.Player_6 {
background: orange;
}

.players {
z-index: 10;
Expand Down Expand Up @@ -211,7 +227,6 @@ a {
.player span {
font-size: 0.8rem;
}

.players {
gap: 0.5rem;
}
Expand Down Expand Up @@ -266,11 +281,9 @@ a {
from {
transform: scale(1);
}

40% {
transform: scale(1.2);
}

to {
transform: scale(1);
}
Expand Down Expand Up @@ -523,7 +536,8 @@ h1 {
background: rgb(70, 70, 70);
}

#myVideo, #myVideo2 {
#myVideo,
#myVideo2 {
position: fixed;
right: 0;
bottom: 0;
Expand All @@ -532,7 +546,8 @@ h1 {
z-index: -1;
}

.settings .form-item select, select {

select {

border-radius: 3px;
padding: 0.4rem 0.2rem;
Expand Down Expand Up @@ -626,7 +641,8 @@ select {
gap: 1rem;
}

.start-btn, .reset-btn {
.start-btn,
.reset-btn {
flex: 1;
}

Expand Down Expand Up @@ -673,51 +689,49 @@ input[type=number] {
padding-bottom: 10px;
width: 100%;
font-size: 1.5rem;
}
}


/* Responsive for mobile view */

@media (max-width: 750px) {
.settings .form {
padding: 0px;
}

.settings .form-item {
width: 100%;
}

.board {
width: 90vw;
}

.flex {
flex-direction: column;
}

.score {
width: 90%;
padding: 10px;
}

.flex-btn {
flex-direction: column;
gap: 0.5rem;
}
.whole-background{
.whole-background {
flex-direction: column;
}
.button{
.button {
margin-top: 10px;
padding: 0.5em;
font-size: 1rem;
}
.right-background{
.right-background {
padding: 0px 10px;
font-size: 1rem;
}

}


/* Instructions Page */

.instructions-container {
display: flex;
flex-direction: column;
Expand All @@ -741,9 +755,9 @@ input[type=number] {
}

.back-btn {
margin-top: 20px;
margin-top: 30px;
padding: 10px 20px;
background: #333;
background: rgb(37, 37, 74);
color: #fff;
text-align: center;
border-radius: 5px;
Expand All @@ -755,6 +769,7 @@ input[type=number] {

.back-btn:hover {
background: rgb(75, 75, 75);
text-decoration: underline;
}

@media (max-width: 767px) {
Expand All @@ -763,6 +778,7 @@ input[type=number] {
padding: 15px 25px;
line-height: 1.5em;
}

}


Expand Down Expand Up @@ -821,4 +837,4 @@ input[type=number] {
font-weight: bold;
font-size: 20px;
}

0 comments on commit c0dda6b

Please sign in to comment.