├── README.md
├── ezslots.css
├── ezslots.js
├── images
├── banana.png
├── cherries.png
├── lemon.png
├── orange.png
├── plum.png
├── seven.png
└── watermelon.png
├── jquery-1.11.3.js
├── jquery.easing.1.3.js
└── sample.html
/README.md:
--------------------------------------------------------------------------------
1 | ezSlots
2 | =======
3 | ezSlots is a trivially simple JQuery "Slot Machine Construction Kit". Its only dependencies are jQuery and the jQuery Easing library. It can be allowed to run randomly or to go to a pre-specified "winning" combo, can have any number of wheels, and use any set of symbols (HTML characters, images, etc)
4 |
5 | It is designed as an educational tool / sample as well as a "ready to go" piece of technology to add some slots to any page. There are other, fancier jQuery slot machines out there (including the ability to keep spinning indefinitely, which ezSlots does not have) but by keeping the code base to under 100 lines, ezSlots is meant to be easy to understand and customize.
6 |
7 | Minimal Usage
8 | -----
9 |
10 |
11 |
12 |
13 |
19 |
20 |
21 | Options
22 | -------
23 | The first argument is the id of a div existing on the page.
24 |
25 | The second argument is a map with the following keys:
26 |
27 | - reelCount - how many reels/windows to display (default:3)
28 | - symbols - an array containing html strings (or an array of arrays if you want different symbol sets for each reel) (default:['A','B','C']
29 | - winningSet - an optional array specifying the offset of a "winning" spin. (For example, if the first entry in the symbols array was the "winner", this should be [0,0,0]) (default: none. If you want to call .win() this should be explicitly set)
30 | - startingSet - an optional array specifying the offset when the slots first appear. (default:none, so just random entries)
31 | - width - width of each slot window in pixels (default: 100)
32 | - height - height of each slot window in pixels (default: 100)
33 | - callback - optional function to be called upon completion of animation (approximately). Will be passed the results.
34 |
35 | Samples
36 | -------
37 | There is a [sample page](http://kirkdev.alienbill.com/ezslots/sample.html) where you can see the "all defaults version", one with simple text numbers, one with images, and one that uses mixed type. The mixed type example uses a callback function to show a JSON stringified version of the results.
38 |
39 | Understanding the Code
40 | ----------------------
41 | The code starts with the pattern as storing "this" in a private variable "that". It then sets member variables with a mix of values from the options map and hard-wired defaults.
42 |
43 | The init function is defined but only called once the other member functions are set. It creates the appropriate number of window/reels.
44 |
45 | The CSS suggest the structure ezslots generates:
46 |
47 | .ezslots>.window>.slider>.symbol>.content
48 |
49 | * ezslots - a class assigned to the containing div
50 | * window - refers one of the reel-viewing windows
51 | * slider - this is the part that actually moves.
52 | * symbol - container for a single symbol that will show up in the window
53 | * content - where the symbol actually "lives" (needed for horizontal and vertical centering)
54 |
55 | Heights and width are manually and redundantly applied to ensure consistency with the animation.
56 |
57 | Also, each reel window is given the class "window_#" where # is its position in the ezslots div.
58 |
59 | For the animation effect, 20 symbols are added to each window (randomly selected from the array of options for that reel, except possibly for the "winning" result that actually shows up in the window when things come to rest) and an "easeOutElastic" easing gives the illusion of a rotating reel that then settles into place.
60 |
61 | With a regular or guaranteed win, the results are return an array of offsets into the array of "possibilities." There's currently no function provided for translating these offsets into the html strings being displayed, but it would be trivial to write if needed.
--------------------------------------------------------------------------------
/ezslots.css:
--------------------------------------------------------------------------------
1 | .ezslots>.window{
2 | overflow:hidden;
3 | display:inline-block;
4 | }
5 | .ezslots>.window>.slider>.symbol{
6 | text-align:center;
7 | display:table;
8 | }
9 | .ezslots>.window>.slider>.symbol>.content{
10 | padding:0px;
11 | margin:0px;
12 | display:table-cell;
13 | text-align:center;
14 | vertical-align:middle;
15 | }
16 |
--------------------------------------------------------------------------------
/ezslots.js:
--------------------------------------------------------------------------------
1 | function EZSlots(id,useroptions){
2 | var that = this; //keep reference to function for use in callbacks
3 | //set some variables from the options, or with defaults.
4 | var options = useroptions ? useroptions : {};
5 | this.reelCount = options.reelCount ? options.reelCount : 3; //how many reels, assume 3
6 | this.symbols = options.symbols ? options.symbols : ['A','B','C'];
7 | this.sameSymbolsEachSlot = true;
8 | this.startingSet = options.startingSet;
9 | this.winningSet = options.winningSet;
10 | this.width = options.width ? options.width : 100;
11 | this.height = options.width ? options.height : 100;
12 | this.time = options.time ? (options.time * 1000) : 6500; //time in millis for a spin to take
13 | this.howManySymbolsToAppend = Math.round(this.time/325); //how many symbols each spin adds
14 | this.endingLocation = 7; //location for selected symbol... needs to be a few smaller than howManySymbolsToAppend
15 | this.jqo = $("#"+id); //jquery object reference to main wrapper
16 | this.jqoSliders = []; //jquery object reference to strips sliding up and down
17 | this.callback = options.callback; //callback function to be called once slots animation is finished
18 |
19 | //to initialize we construct the correct number of slot windows
20 | //and then populate each strip once
21 | this.init = function(){
22 | this.jqo.addClass("ezslots"); //to get the css goodness
23 | //figure out if we are using the same of symbols for each window - assume if the first
24 | //entry of the symbols is not a string we have an array of arrays
25 | if(typeof this.symbols[0] != 'string'){
26 | this.sameSymbolsEachSlot = false;
27 | }
28 | //make each slot window
29 | for(var i = 0; i < this.reelCount; i++){
30 | var jqoSlider = $('');
31 | var jqoWindow = $('');
32 | this.scaleJqo(jqoWindow).append(jqoSlider); //make window right size and put slider in it
33 | this.jqo.append(jqoWindow); //add window to main div
34 | this.jqoSliders.push(jqoSlider); //keep reference to jqo of slider
35 | this.addSymbolsToStrip(jqoSlider,i, false, true); //and add the initial set
36 | }
37 | };
38 | //convenience function since we need to apply width and height to multiple parts
39 | this.scaleJqo = function(jqo){
40 | jqo.css("height",this.height+"px").css("width",this.width+"px");
41 | return jqo;
42 | }
43 | //add the various symbols - but take care to possibly add the "winner" as the symbol chosen
44 | this.addSymbolsToStrip = function(jqoSlider, whichReel, shouldWin, isInitialCall){
45 | var symbolsToUse = that.sameSymbolsEachSlot ? that.symbols : that.symbols[whichReel];
46 | var chosen = shouldWin ? that.winningSet[whichReel] : Math.floor(Math.random()*symbolsToUse.length);
47 | for(var i = 0; i < that.howManySymbolsToAppend; i++){
48 | var ctr = (i == that.endingLocation) ? chosen : Math.floor(Math.random()*symbolsToUse.length);
49 | if(i == 0 && isInitialCall && that.startingSet){
50 | ctr = that.startingSet[whichReel];
51 | }
52 | //we nest "content" inside of "symbol" so we can do vertical and horizontal centering more easily
53 | var jqoContent = $("