Site Chooser

A Christmas Card Game

Hi and a Happy Festive Season to you!

I hope you’ve had a great Christmas and managed to avoid eating quite as much as I have (did someone say “January detox”? No? Just my conscience? Ah…).

I thought I’d share with you a little game I made for friends and family to say “HAPPY CHRISTMAS” at this time of year:

play-christmas-game

How to Play It

You need to move Ernie Elf left and right along a platform, in order to catch falling letters. Each letter you collect is added to a special festive message written along the bottom of the screen. Avoid the bombs or you have to start again!

Some Thoughts on Making the Game…

Before I set off on this project over the weekend, I wanted to make sure I created a cross between an eCard and a simple computer game. Something which:

  • Was fun
  • Was simple
  • Looked cute
  • Felt festive
  • Could be personalised

I also wanted to make something purely using JavaScript, so I could build on what I’d learned and developed at Seb Lee-Deslisle’s brilliant CreativeJS workshop last week and really get comfortable doing HTML5 games.

So that’s what I set out to do. The graphics were all drawn in Illustrator using my trusty Wacom Cintiq to create a hand-drawn yet vectorised/cute feel to them before exporting out to PNG/JPEG. The sounds were, uh, improvised by me (with apologies and thanks to Chris Rea). The code was 100% JavaScript. No Flash to be seen on this occasion, which was quite daunting, but really quite interesting!

I built on a number of the things learned on the CreativeJS course, but the key elements were the particle systems I created to generate the snow effect and the falling/caught snow balls / bombs. I performed some funky text-string-to-object-array manipulation to create the snow balls / letters, plus various object states and a “waiting to fall” array (thanks Seb for the tip!) to easily manage those snow balls caught, falling and neither falling or caught.

The text-string-to-object-array code allowed me to easily edit the letters in the snow balls being collected just by editing a single string variable. This meant I could easily make special versions for family members, which was a key intention in the first place. In fact, I went as far as adding a sneaky bit of PHP so that the JavaScript code never had to be altered. I’m such a nerd.

Graphics-wise, there were various smoothing/easing techniques used to make sure everything on screen always had a fluid/smooth feel to it – I wanted it to feel “alive”:

  • When the bomb blows up, each on-screen snowball jettisons to the top of the screen (rather than just vanishing).
  • When a snow ball is caught, it “slides” into place in the message at the bottom.
  • When all snow balls are caught, they slide to the top half of the screen and the background smoothly moves down to reveal the sky.
  • The snow balls gently sway once caught, using some simple yet effective Sine wave calculations.
  • Ernie Elf has a smooth bobbing motion as he’s moved across the screen, again using Sine/Cosine waves.

I’ll be talking more about the use of Sine/Cosine in making pleasant movements in a future post. It’ll be about platforms. There will be trig. Bring a bean bag.

And sounds? Urrrrgh, sounds:

The sounds use the basic HTML5 Audio class, and works in IE/FF/Chrome at least. HTML5 audio is a mess, so it probably won’t work everywhere (what sort of class returns “Maybe” or “Probably” when being asked “Do you support this audio format?”. Clearly a standardised audio codec/format is FAR too much to ask.).

Well, that was a LOT of random waffling and not much detail. But don’t worry: in future, I’ll be talking more about specific cool things in terms of game coding, development and theory.

But for now I’m going to go back to nursing my food-baby.

Happy Chrimbo Time and I hope you enjoyed the game!

Toodles,

FPat

Posted on Thu 27 Dec in Coding,Creative,Game with Comment (1)

One Response to “A Christmas Card Game”

  1. Jacqui says:

    Tee hee, Happy Christmas Paaaaaaatrick xx

Place your comment

Name

Email

Website

Please fill your data and comment below:

Browse

Follow

My blog runs on Wordpress, which uses cookies. By using my blog, you are consenting to this. Find out more

The cookie settings on this blog are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Further details on Wordpress's use of cookies is shown here.

Close