HTML email game
I built this a game for my talk at the Completely Email conference in London as a sequel to my previous experiment with an email game Splat the Fly.
This time I decided to add a counter to keep score and to make it get harder as you go along.
If you want to skip straight to the game it’s at the end of the page.
The concept
It’s basically like an email version of the old fairground Whack-a-Mole game but apparently that’s copyrighted so I changed it to the completely unique ThWack-a-Vole.
Every time you ThWack (click or tap) a Vole you score a point, but if you Wack (click or tap) a Mole you’ll lose a point (for copyright infringement).
The code
So I scrambled this together out of a lot of ideas and code snippets I’ve written or seen. I started with the counter which is basically a carousel of 5 slides controlled by 5 radio buttons.
HTML radio buttons are pretty cool (yes they are) when one is selected all the others in that group are unselected. You can then target the selected button with CSS separately to the unselected ones.
#slide1:checked ~ .brain .count .score{ margin-left:-50px;}
<input type="radio" name="next" id="slide1" checked>
So here I’m basically moving the score slides depending on which radio button is selected.
The problem now is we don’t want people to see the radio buttons. If they see all the buttons they could just skip to the last one and win the game and that’s no fun. So we hide all the radio buttons and use label tags to select them.
<label for="slide2"></label>
<label for="slide4"></label>
Let’s say we’re currently viewing slide 3, we only want to be able to go forward one or back one so we only show the labels for slide 2 and slide 4. I know this is quite confusing (I’m getting lost myself) so here’s an example of where we are so far…
From that example it may not look it, but the bulk of the hard work is now done. After this we simply added a bit of styling to make the buttons look like a mole and a vole and some CSS animation to make them move.
I wrote two animations each with 10 steps to it and lasting 10 seconds. I then set the animation to alternate so after it’s moved through those 10 steps it will play in reverse making it 20 steps and a bit harder to spot patterns.
To make it harder still I decided to switch the two patterns with every level. So once you ThWacked your first Vole it will now start to follow the animation pattern that mole had and vice versa.
But to make it really hard I also decided to speed up the animation with every level, this is done really easily by shortening the animation time with each slide.
Finally the last slide displays a ‘Winner’ screen. This would be a good place to put a special promo code or link to your website. You could also add a reset button by adding a label tag for slide0. to start the game again.
So here’s the final product, feel free to take the code and play around with it. If you end up building your own game, please let me know and if you get stuck give me a shout.
Cheers,
Mark
Try it out
Bugs and support
There’s a bit of a funny quirk with Android, when you tap you really need to hold it down for a bit for the click to register. In the Android browser you only need a little tap or if there’s no animation in the Android email client it only needs a little tap.
As with my Splat the Fly game, this should work across webkit email clients and thunderbird, for a lot of people that’s about half of your opens. Could be a lot more or a lot less, if you’re not already it’s really worth tracking what email clients your subscribers are using.
I’ve not built in a fallback for email clients where this doesn’t work, there are few reasons for this. Firstly for testing I want to see if/when support is developed by the email clients. Secondly I’m half busy and half lazy. Thirdly I’m a bit of a perfectionist, if I’m offering full support I’ll want to deliver a great email in all clients and that’s a lot of work, building testing, hacking etc. so it would take me twice as long to build this game, and this isn’t being sent as a campaign, it’s just a concept (for now).