Twitter | Facebook | Instagram | YouTube | LinkedIn

Home >> Blog >>

How To Make A Children’s Spelling Game in JavaScript

By Adam Patel on May 18th, 2021

In this experiment I made a spelling game for children.

The working game can be found here.

The game is played as follows:

The player is presented with a picture of something. Using the letters available to them, they must spell out the name of the thing in the picture.

If the player gets it right (by spelling the word correctly), the game will tell them the answer is correct and then load up the next question.

If the player gets it wrong, the game will tell the player that the answer is not correct and recommend they try again.

Letters can be entered in any order.

How It Works:

The drag and drop functionality in the UI, is a means of adding single character text strings into an array.

Every time a letter tile is dropped into a position on the board, the corresponding single character text string is added to the array. The functions are written specifically such that the string is added to the array at the index corresponding to the position on the board (using splice instead of push).

So if there are three positions on the board, and the answer is ‘CAT’, and the player drags the letter A to the middle position on the board first, this will be entered into into the array at position 0 (array indices start counting from 0, not from one), because it is currently the only entry in the array. But when the C is added second, it will go into position 0, pushing the A to position 1. This means letters can be added to the board in any order and the game will still work.

After a letter is added to the array, a second function is called that checks the length of the array. If the length of the array is equal to the number of characters in the answer, the array is checked against the answer to the question.

If the current array is exactly the same as the answer, the game tells the player they are correct and then increases their score by one.

If the answer is incorrect, the game will tell the player that their answer is not correct and tell them to try something else.

To clear the board, the player can use the “reset board” button. This button calls a function which resets all the board position variables to empty and reloads a full set of letters in order that the player can re-attempt the question.

The reset board button can be used for this and any number of other edge cases. e.g. If the player enters a letter in the wrong position on the board. With the current code, it is impossible for the user to move the letter using drag and drop, and attempting to do so will simply reenter the same letter in the array a second time.