Click "Generate" to build board.
Each click rebuilds the board.
Create an HTML Word Search Game Board using JavaScript
People who enjoy word search puzzles are always looking for more puzzles!
As a software engineer I love these kinds of challenges because I think the right web programming project might be able to scratch that itch.
This example seeks to demonstrate one way to create a wordsearch game board using JavaScript, HTML, and CSS.
The example doesn't attempt to populate the board with words, but instead simply focuses on creating the initial matrix of squares in an X by Y grid,
and "responding" to user input through CSS rules and some scripting. The cells are filled at this point with random letters from a
set of characters provided in a variable named data. Check out the code below, and click the button to build/rebuild the example.
Why is "responding" quoted? The type of responding displayed here isn't fully fleshed out, it's simply setting some conditions based on
entering, leaving, and clicking on a cell from the board. Later we'll need to build out the functionality to include the logic to check for
matches, game state, etc., but for now, the functions simply manage the visual response by setting CSS classes and state on the calling DOM element.
Create a matrix of x by y columns and rows. This will act as the basis of our game board.
In each cell of the matrix, add a letter of the english alphabet. (Note: hoping to revisit to support additional languages and character sets as the project develops.)
Future items:
Integrate words into the grid algorithmically--these will form the basis of the game by providing the user something to search for!
Visual polish: We really want the board to look great for the users as it will enhance the game experience by being visually appealing.
Game Board Example and Code
This example uses Javascript to produce an HTML table of X columns by Y rows. By using variables we prepare ourselves for building game boards of varying sizes
rather than locking ourselves down into a predetermined width and height; we might not actually use this--but it's trivial enough at this stage that it seems like
a wise choice, so we'll include that feature.
The visual style of the game board is informed using CSS; I've included the STYLE tag with the code snippet. Keep in mind that the STYLE tags are supposed to go in the HEAD section,
but I'm including it here simply to show the code that's involved.
Finally, I've added an HTML form button to trigger a redraw of the game board with new random data and dimensions.
Here's the code that produces the example above.
Click here for a run down of the steps the code is trying to accomplish.
(back to top)
Generated Game Board Output as Code
Populate the game board, then click the button or click here to see what the HTML markup that it produced looks like as code.
(back to top)
Code Process Review
Here's what's happening in the code.
Define CSS classes for the board elements.
Note: The <STYLE> section is supposed to go in the <HEAD> section of an HTML document--I've put this one here simply to isolate and show the CSS.
Create Javascript functions to build and populate the game board.
This example uses a function scope to isolate the variables and functions we'll use for the WordSearch ("WS") example.
At this point, we haven't triggered the script. The "Generate" button calls WS.main() when it's clicked. That's the function
named "main" in our script--it's the public entry-point for anything that wants to use this board building example.
You can try it from your browser's console by entering "WS.main();" which will trigger the call and update the board too.
Inside the main function...
We choose two random numbers in a range between 8 and 8 + 5 ( 8 to 13 ) which will be the number of
rows and columns we create in our board.
We try to get a reference to a DOM element with the id "game", if it's not found, we create it.
Additionally, we create a named anchor so we can jump to it--in case the element gets created at the bottom of the page for example.
We make a call to the function "createBoard" which hopefully returns the HTML we need to put in the game container to show our board.
Inside the createBoard function...
We create a variable named "html" which is a string we use to build up the TABLE containing the rows and columns of our board matrix.
Two loops exist: The outer loop builds up each row using TR tags. The inner loop builds up each column on that row using TD tags.
Each cell would be empty, which is boring--so instead we fill it with a randomly chosen letter by calling a function named getRandomLetter.
Also notice that each cell gets some old-school HTML binding properties. These will handle processing when the user drives the mouse (or cursor for touch enabled devices)
over the top of a cell. It also provides some instructions for leaving the cell, and when the user clicks on the cell.
Basically...
When the user enters the cell or leaves the cell we want to highlight the cell to make it appear to be responding to the user.
However, if the user has clicked in a cell, we want the highlighting to be different--and to be unaffected when the cursor enters or leaves that cell again.
By using javascript here, we've got some hooks now to manage state further--which we'll need to flesh out more later for other operations we're not doing here yet.
Unobstrusive event binding vs. Inline properties...
Current javascript practice favors attaching events to HTML elements in an "unobtrusive" way. I've tried to use both approaches so you can see
the difference if you aren't familiar with the two techniques. The old-school approach "inlines" the properties "onmouseover",
"onmouseout", and "onclick" which can then be seen in the actual HTML markup. Sometimes, this approach seems to be easier to explain to folks just learning scripting.
But, the "unobtrusive" approach is a nice way to separate the event bindings.
Try clicking and then comparing the output code produced by both generation methods to see the practical differences between the approaches.