We were recently doing some work on a site that included a childrens' section. One potential concept that may be included in the future is a simple word search game. This is really a very simple little project, but I thought it might be cool to share it with others.
Nifty Word Search Game
Posted by on Monday, July 7, 2003 - 2 comments
All we're using here is a clean combination of JavaScript, CSS, and HTML. We decided to keep it really basic and not include any verification when you complete words or the entire puzzle. If you do build in these extra features or otherwise improve on this version, I'd be interested in seeing the results — download the code (ZIP File). Feel free to use this on your site. This work is licensed under a Share Alike Creative Commons License.
Word Search Example
| E | X | A | M | P | L | E | 8 | 9 | 0 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
Word List
As you find each word in the puzzle above, click on the word below to mark it as complete!
Comments
Steven Perry - July 7, 2003 5:09 pm
OOhhh, that's really neat :) Feels just like doing a regular word search, only you don't need a pencil.
Hadley - October 12, 2003 7:06 pm
I've just had a very quick look at your javascript, but I think I can see a couple of ways to make it simpler.
Instead of passing the block id to switchBox(), you could pass
this. eg javascript:switchBox(this). Then you don't need to put an id on each block, and you can work directly with the element in JS. eg.function switchBox(box) {
box.className = box.className == "on" ? "off" : "on"}
(My javascript's a bit rusty, so I'm not sure how compatible this is)
You could also style .wordsearch td instead of .wordsearchoff, which would mean you wouldn't need to put a class in the html.
Hadley