Skip to main content

Game Developer Case Study

HTML5 Spelling Game

One of the latest 2D HTML5 games that we've created for the primary education market.

Image of child playing the game

HTML5 Game Features

Colourful characters, engaging animations, fun sound effects

A range of features that ensures this game is fun to play and most importantly helps teachers achieve learning outcomes.

One of the screens from the game
icon of checkmark

Easy to play

icon of checkmark

Drag and drop letters and sounds

icon of checkmark

Colourful background image

icon of checkmark

Colourful animated characters

icon of checkmark

Cool shopping cart reward

icon of checkmark

Track progress with progress counter

icon of checkmark

Customizable with variables for easy replication

icon of checkmark

Play on all devices from Chromebooks to iPads

icon of checkmark

Undo functionality

icon of checkmark

Interactive phoneme frame

icon of checkmark

Uses CreateJS javascript library

One of the areas of interest I have is using digital resources to support the teaching of reading. I have built a great deal of games to support learning for key stage one children in the UK. This all started in Flash. More recently, my work has been using the HTML5 Canvas capability within browsers. Paired with a javascript framework it has been a joy to make 2D animated games.

One of the most recent games is Spelling Consonant Digraph words. It’s a simple drag and drop spelling game… set at the foot of Kilimanjaro. Welcome to Little Mo’s secret garden where she is growing amazing plants… but only if you get your spellings correct. As a motivator, it has a simple shopping experience where the children can buy products to help their plant grow.

This game started off life as Adobe Air software - built-in Flash. But is now alive and kicking in HTML5. You can play the game on all devices - from smartphones, laptops, Chromebooks plus normal PCs and Macs.

Here are some of the main features:

1. Character animation

The main animated character is Little Mo the zebra. Her animations are simple but perfectly adequate for this age group. They include:

  • Running on and off-screen
  • Zooming on screen in a shopping cart
  • Nodding
  • Looking happy, looking concerned
  • Zooming around in a plane
  • Flying in a hot air balloon

Other animated objects include:

Scissors snipping, watering can, rain cloud and a trowel digging. And of course, the plant that grows. The plant blossoms in a random choice of three different plant heads. Each head of the plant dances to the final song.

2. Drag and drop

The main goal of the game is for children to drag and drop phonemes to spell words. As a round begins, the word they need to spell gets announced via a loudspeaker icon. The player then needs to create the word using the letters provided.

As the player drags and drops the sound that the letter is played. The player drags the letters into a phoneme frame to form the word. The draggable letters are extra big to help dragging and dropping.

All letters animate on and off-screen which is very visually pleasing.

3. Logic

The game automatically marks each round of words and keeps track of progress of the rounds played. After marking, if the word is partly correct then those letters are left in the frame. There is also an undo function that allows the player to undo their last answer.

4. Scenery

The scenery is bright and uplifting; with good use of bright colors and gradients. When we do research on the games, there are always great comments about how good the graphics look. [And how fun the games are].

5. Sounds

There’s catchy music that opens the game… and key objects have sounds attached to them. Including all the sounds that the phonemes make and a large library of words.

6. Customizable

You can extend the game by changing the configuration file. This is easy to do and in this way, you can customize it to cover many more words and phonemes (i.e. sounds).

7. Tech...

The game uses CreateJS as the javascript framework that controls the objects on the canvas. I used Adobe Animate to create the animations and draw the graphics. And Texture Packer to create the sprite sheets.

8. Play the game

You can play the game here. Or you can play it on our subscription website Have fun spelling your words.

Image of guiding lighthouse

Helping you navigate the complex world of web and apps

Helpful guidance, profitable solutions

Get started on a project with Pendigital