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.

How To Write A JavaScript Function

By Adam Patel on May 16th, 2021

black flat screen computer monitor

A function is a bunch of code that runs when called.

Below is the code for the basic structure of a Javascript function.

function nameOfFunction(){
      // write the code here
}

Let’s break it down:

We start with the word ‘function’, followed by a space. This is so that the system knows we’re writing a function.

Next, we have the name of the function written in ‘JavaScript case’ (Don’t Google this – it’s not an official term, just my name for it). It’s not imperative, but it is a well respected convention in Javascript circles. All you do is write the first word in lowercase, followed by camel case for every additional word. No spaces.

Immediately after the name of the function is a pair of brackets like this: (). If the function takes arguments, these must be stated between the brackets. An argument is any type of input data the function requires in order to ‘work’ – for example if you made a function that determines whether a number is divisible by 6 or not, you’d have to provide the number as an argument, for the function to work. The code would look like this:

function divisibeBySeven(num){
        // code here
}

Immediately after the brackets are a pair of curly braces. It is between these curly braces where the Javascript function code will be written.

JavaScript functions can be used for standard programming tasks, for example finding the lowest number in a sequence or fizzbuzz or whatever, as well as DOM manipulation, which is, on the whole, unique to JavaScript.