As I mention elsewhere, SolitaireOnline.org is a place where I play at programming, and as well as adding games of Solitaire, it's fun to spice them up and bit.
An easy way to do this, is by adding a few themes! For the moment, these Solitaire themes are simple. I am playing with the card backgrounds to try and make them more visually appealing with simple effects. There is no level progression (whatever that could mean in Solitaire terms).
And so we have some spiders in Golden Spider Solitaire, and now some snow in Winter Solitaire.
I like snow.
As long as I am inside and don't need to travel anywhere!
I also wanted to experiment with a very simple particle system.
I'm not trying to do anything particularly refined or time consuming, rather just add a little visual interest (and have some fun).
There are large number of sophisticated particle systems (for example particles.js), which have a lot of functionality (and are extremely good).
I however, want to experiment with programming and all I wanted for my Winter Solitaire theme was snow.
A simple snow effect swirls and moves downwards, and code to do this can be written in maybe 200 lines of javascript and can look surprisingly effective.
There are a couple of key points to remember.
The first is specific to how I have written my games of themed solitaire. I want each to be entirely independent of any other.
Each theme has it's own javascript file, which is initialised with something like:
winteranim.initTheMagic()
The second key point to remember is that the speed of the snowflakes must be dependent on time passed. This is the same for any piece of real-time programming. I'm not going to describe this here, but if you look in the javascript file called winteranim.js, you will see a function named updateFlakes(). This function handles speed and time.
I've always been interested in weather effects, and Ancient Egypt Solitaire calls for clouds drifting across the pyramids!
I'm also interested in simple effects.
The weather theme will consist of four layers.
The first to be drawn is the sky, followed by a layer of clouds, on top of this the pyramids and finally another layer of clouds.
The sky is drawn simply using a gradient in the body of the css.
The pyramid is added as a separate layer again with css (see code for details).