How to Create a Word Search Game in JavaScript

Game Programming Using JavaScript

Introducing the WordSearch Project

These examples will attempt to demonstrate how to create a word search puzzle game using JavaScript, HTML, and CSS. I'm hoping to use this to show some basic programming techniques and how they can be applied to a game-oriented web development project. We'll start by focusing on creating the game board itself, and worry ourselves about hiding lists of words in the board later.

In case you aren't familiar with Word Search, it's a popular word puzzle game. A WordSearch basically consists of a table of letters in which is hidden a list of themed words. You can see some more examples here: Word Search examples . For our example we're going to start by creating a game board using some basic programming techniques available in JavaScript. We'll use HTML and CSS to draw and style the game board.

This is a very early draft. Hopefully I'll be able to find cycles to continue to expand and enhance the examples. As I progress, I'll add links and mini-examples here. If necessary I may restructure this as the details of the project materialize more fully. Your feedback and suggestions are appreciated, you can contact me through the links on the menu.

Where to start

To start, let me make a list of what I need to accomplish and break it up into smaller digestible tasks:

  1. Define the project. We need to know what's in and what out of scope, defining the project can help.
  2. Create a game board prototype.
  3. Get a list of words
  4. Idea: Levels of difficulty could be supported by offering the definition of the word as a hint rather than showing the actual word being sought in the matrix. For example: Hint: Another word describing a canine. Answer: DOG.
  5. Hide words in the matrix.
  6. Get user input.
  7. Check user input to see if it contains a letter from a word in the process of being discovered.
  8. Check words to see if all have been solved.