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.

See Also

Here's what I need to do right now:

Future items:

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.


(back to top)

Code Sample

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.
  1. 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.

  2. 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.

  3. 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.

  4. Inside the main function...
  5. Inside the createBoard function...
  6. 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.