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.