The concept of this assignment is a word search. I was inspired to do this because of how much I help my younger brother with his word search activities at home. So I immediately started working on the idea.
I started y creating a grid and then have randomized letters in the grid. There are three specific words that you need to find: “WOW” “FUN” “CAT”. Obviously there are more extra and bonus words that you will find in the grid. The process was long but this is what I ended up with. Please mouse click on the letter that you want to highlight:
A big part of the code that I am proud, which was the most challenging part is the WordGrid Class that I created to have many different functions.
class WordGrid {
// Constructor
constructor(gridSize, cellSize) {
// Number of cells along one edge of grid
this.gridSize = gridSize;
// Size of each cell in pixels
this.cellSize = cellSize;
this.words = ['FUN', 'WOW', 'CAT'];
// Initialize grid layout
this.grid = this.initGrid();
// Place words in the grid
this.placeWords();
// Fill empty spaces in grid
this.fillGrid();
}
// Initializes grid with empty values.
initGrid() {
// Array to hold grid data
let grid = [];
// Iterate over each row
for (let i = 0; i < this.gridSize; i++) {
// Initialize an empty row
grid[i] = [];
// Iterate over each column in row
for (let j = 0; j < this.gridSize; j++) {
// Set each cell to default state with no letter and not colored
grid[i][j] = { letter: '-', colored: false };
}
}
return grid;
}
// Places words from 'words' array into grid
placeWords() {
// Iterate over each word and its index in the array
this.words.forEach((word, index) => {
// Calculate row number based on word's index to space out words
let row = index * 2;
// Place each letter of the word into grid.
for (let i = 0; i < word.length; i++) {
// Set cell at calculated row and current column to letter of word
this.grid[row][i] = { letter: word[i], colored: false };
}
});
}
// Fills empty cells of grid with random letters
fillGrid() {
// Iterate over each cell in grid
for (let i = 0; i < this.gridSize; i++) {
for (let j = 0; j < this.gridSize; j++) {
// Check if cell is empty (marked by '-')
if (this.grid[i][j].letter === '-') {
// Set the cell to random letter
this.grid[i][j].letter = this.getRandomLetter();
}
}
}
}
// Returns random letter from the alphabet
getRandomLetter() {
// String containing all letters
const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// Return random letter from alphabet string
return alphabet[Math.floor(Math.random() * alphabet.length)];
}
// Toggles color state of specific cell
toggleCell(row, col) {
// Check if cell contains a valid letter (not '-')
if (this.grid[row][col].letter !== '-') {
// Toggle 'colored' state of cell
this.grid[row][col].colored = !this.grid[row][col].colored;
}
}
// Draws grid on screen
draw() {
// Iterate over each cell in grid
for (let i = 0; i < this.gridSize; i++) {
for (let j = 0; j < this.gridSize; j++) {
// Set fill color based on cell's 'colored' state
fill(this.grid[i][j].colored ? 'red' : 255);
// Draw border around cell
stroke(0);
// Draw cell as rectangle
rect(j * this.cellSize, i * this.cellSize, this.cellSize, this.cellSize);
// Set fill color for text (letter) to black
fill(0);
// Align text to center of cell and draw letter
textAlign(CENTER, CENTER);
text(this.grid[i][j].letter, j * this.cellSize + this.cellSize / 2, i * this.cellSize + this.cellSize / 2);
}
}
}
}
initGrid(): This function creates a two-dimensional array with objects that correspond to each cell in order to set up the grid’s basic structure. At first, I had trouble seeing the grid as an arrangement of objects instead than just letters or empty spaces. But structuring every cell as an object with letter and color characteristics made managing the state of the grid more adaptable.
placeWords(): It was difficult to arrange the words on the grid, especially to make sure they matched and did not overlap. Every word in this condensed form is arranged horizontally and separated by rows. This function established the foundation for comprehending how words interact with the grid, even though the true problem lay in creating more sophisticated placement algorithms.
fillGrid(): To finish the setup of a standard word search puzzle, random letters had to be placed into the remaining vacant cells of the grid. This method iterates across the grid, substituting random letters for unassigned cells. It filled all the cells that had “-” instead of letters of the words that we placed in the grid.
getRandomLetter(): This function selects a letter at random from the alphabet. It fills in the blank cells in the grid, completing the word search problem and enabling gameplay. It’s a little but essential component of the code. It works directly with the function before it.
toggleCell(row, col): The requirement for grid interaction made this function difficult to implement. Users can choose which cells to change color by clicking them. The gameplay revolves around this interaction, which lets players highlight words they come across.
draw(): Lastly, the draw method gives the word grid a visual representation of each cell’s condition, bringing it to life. For the game to be visually appealing and functional, it was essential that every cell’s content—a letter—and state—colored or not—be shown clearly.
There are a couple of limitations for my assignment though. First of all the function that places the words in the grid is placing them all horizontally and under each other which makes the word search game less interesting. Moreover, I only chose three words all with three letters only which again makes this game easy and will end fast. From the technical side, you are required to press on every letter of the grid when you find a word which makes it harder and less appealing to play the game. Making it more realistic like striking through the letters when the correct word is found will make the game more realistic and more appealing to the player. However, overall, I think I did a good job with the representation of the grid and creating a separate file for the WordGrid class to make the code more organized.
