Building a Video Slot Machine with HTML5 Canvas and CSS3 Transitions
When you're in Tahoe, who doesn't like stopping by the casinos and dropping a few bucks at the slots in exchange for some light entertainment and a couple of free cocktails? And sometimes, you even win!
The main idea is to start off with six or so cute images, and create long strips of them in random order. We'll add a "Start" button, which will trigger a CSS3 transition for each strip. Then we have to figure out if we have a winner, and then highlight the appropriate squares.
All of this is going to require exact CSS styling with a lot of tedious calculations for height, width, and positions of all the sub-elements. This would be a nightmare if we didn't use a CSS preprocessor so that we can program these specifications. However, other than a couple of nested loops for positioning the "table" for highlighting the winning squares, no complex logic is required in programming the CSS.
The most popular CSS proprocessing languages are SASS and LESS. While SASS has the greater capabilities than LESS, both languages are more than sufficient for this project. I chose LESS since we'll also be using the Twitter Bootstrap CSS3 framework, which is prepackaged as modules of LESS variables and mixins in case we require some extra customization. For this project, the choice of SASS vs. LESS is more or less an implementation detail and is not a design criteria.
In the class initialization, we first need to load the images, and then wait for the loading to complete before assembling the canvas strips of images. In this process, we need to store which images are stored in each position of each canvas strip, so we can later use this information to determine if we have a winner.
This rest of this article is "in progress".