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.
Easy to play
Drag and drop letters and sounds
Colourful background image
Colourful animated characters
Cool shopping cart reward
Track progress with progress counter
Customizable with variables for easy replication
Play on all devices from Chromebooks to iPads
Undo functionality
Interactive phoneme frame
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 www.ClubRoy.com. Have fun spelling your words.
