It’s a winning formula… and anyway, who doesn’t need a space wildebeest in their life? This html5 game uses the canvas tag to create a 2D learning environment for primary children.
- It's fun!
- Meeting learning objectives
- Device compatibility and quick to load
- Amazon Web Services - AWS
- Play it here
I particularly loved making this HTML5 game. I ported it from Flash for use on mobile tech. Thousands of children have already played it on all kinds of devices. This includes Chrome books (the preferred machine for schools now?), iPads and more.
So, what do I love about this game? In no particular order…
1. It's fun!
Zara the wildebeest is asleep and dreaming of becoming a wildenaut. Help her to spell her tricky words and she’ll explore space collecting space objects as she goes. Simples!
2. Meeting learning objectives
The HTML5 game helps support UK teachers meet the curriculum.
The user plays rounds of different tricky words to spell. Each round is composed of:
- Hearing and reading the word
- Then a chance to drag and drop letters to spell it correctly
- Then marked when the child feels the answer is correct
Throughout the round there’s a chance to undo the answers. An undobot robot helps you to undo any letters dragged to the wrong place accidentally.
Get the answer right and you zoom off through space. Get the answer wrong, and you’re given a chance to read and hear the word again.
I created these in Adobe Animate. I remember taking particular care of each space object. I’m also especially proud of the background with some great use of gradients to achieve a night sky. The drawing tools of Adobe Animate are great - I much prefer them over Illustrator.
For information, I used Texture Packer to create the sprite sheets. It’s great software that takes the output from Animate and sorts the sheets and JSON for CreateJS. The latter being the JS framework that I used to create the game.
Simple animations that don’t dominate. Remember that this is a game for education! There needs to be a balance between the arcade side of things and learning. I.e. not too distracting.
So we have:
- Wildenaut: Zara flys through space with her animated JetPac finding randomised space objects. Probably inspired by the original ZX Spectum JetPac!
- Background: when the game starts the background animates into a space dream.
- UndoBot: A space robot that undoes the last answer, whilst animating.
- Fuel tank: Get the answers correct and you refuel.
- Letters: Letters tween into place for each word.
The game keeps track of the rounds. There’s a scoreboard showing the user where their position is in the game.
Each round is auto-scored. The game detects when the round completes and then decides what to do next.
There’s all kinds of UI type sounds for clicks and drags. As well as some background ambience noise. All sounds are coming from .mp4 files and have a .ogg file for falling back to.
I use SoundJS to manage the sounds. Everything preloads before the game starts.
It’s easy to extend the game to more words. It’s based on a set of configurable variables. In fact, on www.roythezebra.com, a Jekyll static site, all you have to do is edit the front matter variables. I.e. within the content management system of your choice.
9. Device compatibility and quick to load
You can play the game on many devices. This includes:
- Chrome books
- Android tablets
- Desktops - PC and MAC
- And it’s also very happy on an interactive whiteboard
The game is quick to load too!
10. Amazon Web Services - AWS
To reduce the costs running this game. I host the assets in an S3 bucket on Amazon web services.
11. Play it here
You can play the game here. Remember to bring a 6-year-old to help! Have fun playing it.
If you’d like to discuss our coding services for HTML5 games then please don’t hesitate to get in contact.