Creating a Boggle Game using React: Part 1
Introduction
Boggle is a word game where you try to make words from letters out of sequentially adjacent cubes, where "adjacent" is defined as horizontally, vertically, and diagonally neighboring cubes.
The longer the word, the more points you score. Words must be at least three letters long, may include singular and plural (or other derived forms) separately, but may not use the same letter cube more than once per word.
After three minutes have elapsed, the game ends.
The letter "Q" is displayed as (and is scored as) "Qu."
Scoring
Submitted words are scored, as follows, based on the length of the word:
- 3-4 letters: 1 point
- 5 letters: 2 points
- 6 letters: 3 points
- 7 letters: 5 points
- 8 or more letters: 11 points
The User Interface
Setup
Create a folder named BoggleGame and have a folder structure similiar to the image below .
Files & Folders
- components - The is the folder where we keep all our React components.
- images - Contains images used in the project.
- index.html - The page that bootstraps React and loads necessary HTML, CSS and JavaScript files.
- styles.css - All our CSS styles go here.
- index.js - This is the entry point for our React components.
Currently, all the files and folders are/should be empty.
Coding
To get started, we design our user interface with HTML and CSS.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Boggle Game</title>
</head>
<body>
<div id="boggle-container">
<img src="./images/logo.png" class="logo" />
<div id="board"></div>
<div id="word-submit"></div>
<table id="score-table"></table>
</div>
</body>
</html>
./images/logo.png
style.css
body {
background-color: #F57921;
font-family: Arial, Helvetica, sans-serif;
}
#boggle-container {
display: flex;
flex-direction: column;
width: 490px;
margin: 0 auto;
}
.logo {
align-self: center;
}
#board {
border: 5px solid #FFCA08;
background-color: #398BD4;
padding: 5px;
margin-top: 20px;
}
Current view
The Board
index.html
...
<div id="board">
<div class="row">
<div class="boggle">
<span>A</span>
</div>
<div class="boggle">
<span>B</span>
</div>
<div class="boggle">
<span>C</span>
</div>
<div class="boggle">
<span>D</span>
</div>
<div class="boggle">
<span>E</span>
</div>
</div>
</div>
...
styles.css
...
.row {
display: flex;
text-align:center;
flex-direction:row;
padding: 5px;
}
.boggle:hover {
cursor: pointer;
}
.boggle {
width: 80px;
height: 80px;
border-radius: 5px;
background-color: #ffffff;
box-shadow: -4px 2px 8px 1px rgba(0,0,0,0.69);
flex:1 1 auto;
margin:5px;
}
.boggle.selected {
background-color: #ACCEEC;
}
.boggle span {
font-weight: bold;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
...
What We Have
The Current Word and Submit Word Area
index.html
...
<div id="word-submit">
<span><strong>Current Word:</strong> ABC</span>
<button type="button">Submit Word</button>
</div>
...
style.css
...
#word-submit {
margin: 15px 0;
display: flex;
justify-content: space-between;
}
...
What We Have
The Score Table Area
...
<table id="score-table">
<tr>
<th>Word </th>
<th>Score</th>
</tr>
<tr>
<td>congruent</td>
<td>11</td>
</tr>
<tr>
<td>urgent</td>
<td>3</td>
</tr>
<tr id="footer">
<td>Total </td>
<td>14</td>
</tr>
</table>
...
...
#score-table {
align-self: left;
border: 5px solid #FFCA08;
border-collapse: collapse;
text-align: left;
}
#score-table td, #score-table th {
border: 5px solid #FFCA08;
background-color: white;
padding: 5px;
}
#score-table tr#footer td {
background-color: #ACCEEC;
}
...
What We Have
Putting It All Together
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Boggle Game</title>
</head>
<body>
<div id="boggle-container">
<img src="./images/logo.png" class="logo" />
<div id="board">
<div class="row">
<div class="boggle">
<span>A</span>
</div>
<div class="boggle">
<span>B</span>
</div>
<div class="boggle">
<span>C</span>
</div>
<div class="boggle">
<span>D</span>
</div>
<div class="boggle">
<span>E</span>
</div>
</div>
<div class="row">
<div class="boggle">
<span>A</span>
</div>
<div class="boggle">
<span>B</span>
</div>
<div class="boggle">
<span>C</span>
</div>
<div class="boggle">
<span>D</span>
</div>
<div class="boggle">
<span>E</span>
</div>
</div>
<div class="row">
<div class="boggle">
<span>A</span>
</div>
<div class="boggle">
<span>B</span>
</div>
<div class="boggle">
<span>C</span>
</div>
<div class="boggle">
<span>D</span>
</div>
<div class="boggle">
<span>E</span>
</div>
</div>
<div class="row">
<div class="boggle">
<span>A</span>
</div>
<div class="boggle">
<span>B</span>
</div>
<div class="boggle">
<span>C</span>
</div>
<div class="boggle">
<span>D</span>
</div>
<div class="boggle">
<span>E</span>
</div>
</div>
<div class="row">
<div class="boggle">
<span>A</span>
</div>
<div class="boggle">
<span>B</span>
</div>
<div class="boggle">
<span>C</span>
</div>
<div class="boggle">
<span>D</span>
</div>
<div class="boggle">
<span>E</span>
</div>
</div>
</div>
<div id="word-submit">
<span><strong>Current Word:</strong> ABC </span>
<button type="button">Submit Word</button>
</div>
<table id="score-table">
<tr>
<th>Word </th>
<th>Score</th>
</tr>
<tr>
<td>congruent</td>
<td>11</td>
</tr>
<tr>
<td>urgent</td>
<td>3</td>
</tr>
<tr id="footer">
<td>Total </td>
<td>14</td>
</tr>
</table>
</div>
</body>
</html>
style.css
body {
background-color: #F57921;
font-family: Arial, Helvetica, sans-serif;
}
#boggle-container {
display: flex;
flex-direction: column;
width: 490px;
margin: 0 auto;
}
.logo {
align-self: center;
}
#board {
border: 5px solid #FFCA08;
background-color: #398BD4;
padding: 5px;
margin-top: 20px;
}
.row {
display: flex;
text-align:center;
flex-direction:row;
padding: 5px;
}
.boggle:hover {
cursor: pointer;
}
.boggle {
width: 80px;
height: 80px;
border-radius: 5px;
background-color: #ffffff;
box-shadow: -4px 2px 8px 1px rgba(0,0,0,0.69);
flex:1 1 auto;
margin:5px;
}
.boggle.selected {
background-color: #ACCEEC;
}
.boggle span {
font-weight: bold;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#word-submit {
margin: 15px 0;
display: flex;
justify-content: space-between;
}
#score-table {
align-self: left;
border: 5px solid #FFCA08;
border-collapse: collapse;
text-align: left;
}
#score-table td, #score-table th {
border: 5px solid #FFCA08;
background-color: white;
padding: 5px;
}
#score-table tr#footer td {
background-color: #ACCEEC;
}
What We Have
In the second part of this tutorial, we will extract each element on the page into appropriate React components and include the game play and scoring logic!
If you enjoyed this tutorial, or have any questions or comments, feel free to like the post or comment below!
