The basics of an HTML5 word game

It’s not a secret word games are having an huge success lately, thanks to Ruzzle which brought them to a new life. I also made a word game some years ago, it’ called WorDrop and got almost 4 million plays, so I am showing you the basics for the creation of a word game. In this example I am using Scirra’s Construct2 but the main concept can be easily ported in any HTML5 environment.

Getting the words list

You can still follow some of the links I posted four years ago in the post eight word lists to help you creating the perfect word game, but recentyl I found the English Open Word List (EOWL) way better. It starts from the UK Advanced Cryptics Dictionary (UKACD). To make EOWL more usable for computer word games all words longer than 10 letters were removed from the UKACD source list, and all proper nouns and words requiring diacritical symbols, hyphens, and apostrophes were removed.

This makes it much like the standard ENABLE word list, but EOWL is somewhat smaller (by 44,000 words or so) since it contains no words longer than 10 characters.

So I downloaded the EOWL and initially merged all files (it comes in 26 files, one for each initial letter) into a single file you can see here.

Converting the words list

Since a simple word list isn’t of any use in a game, I had to find a way to import it into a format Construct2 would be able to recognize. Ont the official docs I found I can setup an array starting from a JSON file and this is the way I wanted to proceed.

I made this script:

Which loads the words list and outputs a Construct2 array in JSON format. You can see the output here.

Importing the words list

At this time, we just need to load the JSON with an Ajax request and we’ll finally populate the array:

Then I am just invite the player to type a word, and check for it to exist.

See the result at this link, try to write a word: it will turn green if included in the EOWL list, or red if not included.

  • One nice addition will be to add that the word detection is Case independant.
    For now you have to type dog rather than Dog … And with the AutoFirstLetterIsUppercase from mobile device, make it not cool to play for noob

  • Thanks for this tutorial, but still not so popular games in HTML5, I’ll try construct2.

  • I tried this tutorial with a 386264 french words list (ODS6 scrabble dictionary) to make a word game in Construct 2.
    Everything works fine in browser but eats all memory when trying on smartphone or tablet (html5 or cocoon.js).

    According to you, what is the best way ? :
    Cut the main word array in several smaller ones (alphabetical ones or two letters words, threee and so on )?

    Thanx for your help !!