This all started when I first wanted to make a slot machine video game and had some other ideas to try out as well. This is a code and information collection you can use to create various slot machine effects. Mostly, the idea is to provide different effects using HTML5, CSS3, and/or JQuery to produce the spinning wheel(s) and some other effects.
The problems show up often while trying to get the animations to appear properly. It’s not always as straight forward as anyone would initially think. Especially for someone that’s a beginner with the use of these tools. It was only recently I started using HTML5, CSS3, and JQuery. Hopefully, this will reduce someone else’s searching time.
A Banner With a Slot Machine Effect
I made a banner, and I need to have a nice way to have an animated slot machine effect on it. With a 2D animation, it’s pretty easy stuff. It can be a disaster waiting to happen trying to do this with 3D transforms. Then again, I’d have the compatibility problems making it work in some browsers using WebKit. To fix it, I’d have to use JQuery and the JQ Transform library.Here’s the code I started out with:
This ends up involving the use of an overflow:hidden style to my <li> elements. Then I’d have to wrap each of the letters in a <div>. Lastly I’d have to animate the inside of the <div>’s top property so it moves vertically. When that top property reaches a certain number, I’d have to reset its position to a negative number. The text would have to be already through the bottom of the <li>. Once the position is set to a negative number, it would be off the top.So instead of all that, I just made this code:
The JS function is the important part to all this. This is just the easiest implementation I could think of. Of course, this is just a sample for anyone to modify as they see fit. The function is called on click, so it doesn’t just take off instantly.
Selecting a Venue Slot Machine Style
I made an app that will pick a venue from a set at random when the user clicks a button. I wanted the random selection to look like a slot machine game. To do this, I decided to try CSS3 and JQuery for the animations. Initially I was using –webkit-keyframes and changing the background positions. Unfortunately, the animation came out not so great.
Here’s some of the code I started with:
I had continued it with another tactic, but it came out as very lengthy code using WebKit. Other strategies also didn’t have such good results. Eventually, I went with CSS 3D. It wasn’t so bad with CSS 3D and some trigonometry. I needed a “smaller” scale carousel to stand vertically and spin on its Y axis.
Look at slot machine games such as X-Tra Bonus Reels, Flea Market, and Sunny. I can see they have a 3D appearance to them. They don’t have a flat appearance like so many other slot machine video games. No, I don’t think it’s a “super stunning” 3D appearance, but it’s definitely there and it’s not bad at all.
The example of the reels template you can use:
There’s the “smaller” scale carousel look on those wheels I wanted. But in this case, I only needed one wheel.
With the following example code (basic setup code below), I can change a variety of things. Including the number of panels, their sizes, and make the carousel stand vertically or horizontally. This is for a nine panel wheel. Each panel has a 20px gap in between each other. The width was set to 210px.
If I wanted to change the width or how many panels are included, I can use //this JS equation.
All in all, the repetitive things to this can be handled in a dynamic script. There’s the drawing and animation I could use so I just had to set it all up to spin like a slot machine roll.
Using the Bounce In Down Effect
When I check out various slot machine video games, I see a little bounce in the rolls near the end of the spin. A nice example of this is seen in Five Times Play. It happens just before the final outcome is displayed in each roll. When I compared that to a real slot machine, I noticed that same bounce happens a lot in the real machines.
While I was making a slot machine game, I started out with this code:
Unfortunately, the results were not acceptable. What I wanted was a nice and smooth little bounce as close to the real slot machines as possible. My animation problem showed up when I spotted that it was limited to one bezier function and the end keyframe. The next idea was to try multiple keyframes. I quickly found out that JQuery’s animate() function doesn’t have support for multiple keyframes. I had to use CSS to fix that problem.
To make this “short n sweet”, I left out the prefixes. Here’s the code I used:
The above basic code can be modified as needed. It gives a good start by using a cubic brazier. And of course, multiple keyframes are included. This salvaged a lot of my time in trying to look into various libraries.
Drawing Lines
When I see a variety of slot machine video games such as Five Times Play, Flask of Run, and X-Tra Bonus Reels, any win would be shown via lines. There’re lots of slot machine video games that do this. Not just one pre-drawn “win” line in the center that’s always there. Lines were showing up all over the place as needed in those games. After checking out various things, I decided my main and best option was to use <canvas> in HTML5. This creates an instant drawing surface.
The fun part is that it’s transparent by default and I can draw the lines for my slot machine video games as needed. If needed, I can remove the border or use something else as a border (decorations). All it takes is this code to make a canvas in HTML5:
I can have multiple canvases in use at any given time. I just always have to remember to specify the ID and width and height properties for each canvas. From there, I’d simply draw lines as I need them in place. Here’s a very basic diagonal line from the upper left corner to the bottom right corner of the 200 x 100 box:
For someone just starting out with these tools, this can be quite a time saver. As for me, I had modified and tried again everything here while making the things describe above. I have no doubt that the effects here are efficient enough.
Or at the minimum, they can serve as a good start. The problem remains as there are all kinds of other effects that can be made up. The good news is that I know much of this code can help in creating those effects.
Also, I did these all listed items due to the collected information from the popular websites like Stackoverflow and other and implemented this in rel life. This source was developed with my participation and I implemented all my skills there.
The problems show up often while trying to get the animations to appear properly. It’s not always as straight forward as anyone would initially think. Especially for someone that’s a beginner with the use of these tools. It was only recently I started using HTML5, CSS3, and JQuery. Hopefully, this will reduce someone else’s searching time.
A Banner With a Slot Machine Effect
I made a banner, and I need to have a nice way to have an animated slot machine effect on it. With a 2D animation, it’s pretty easy stuff. It can be a disaster waiting to happen trying to do this with 3D transforms. Then again, I’d have the compatibility problems making it work in some browsers using WebKit. To fix it, I’d have to use JQuery and the JQ Transform library.Here’s the code I started out with:
Code:
<div class="select-a-game ">
<ul class="select-a-game-name text-center">
<li class="sagn-dark-blue">S</li>
<li class="sagn-dark-grey">E</li>
<li class="sagn-orange">L</li>
<li class="sagn-red">E</li>
<li class="sagn-grey">C</li>
<li class="sagn-dark-blue">T</li>
<li class="sagn-black">A</li>
<li class="sagn-dark-grey">G</li>
<li class="sagn-dark-blue">A</li>
<li class="sagn-grey">M</li>
<li class="sagn-red">E</li>
</ul>
</div>
Code:
$('li').click(function(event){
$( event.target ).css({ perspective: 200, rotateY: 240 });
});
Selecting a Venue Slot Machine Style
I made an app that will pick a venue from a set at random when the user clicks a button. I wanted the random selection to look like a slot machine game. To do this, I decided to try CSS3 and JQuery for the animations. Initially I was using –webkit-keyframes and changing the background positions. Unfortunately, the animation came out not so great.
Here’s some of the code I started with:
Code:
@-webkit-keyframes spin{
0% {
background-position: 0, 0 0;
-webkit-transform: rotateX(0deg);
}
100% {
background-position: 0, 0 -640px;
-webkit-transform: rotateX(360deg);
}
}
.rotating{
-webkit-animation: spin .5s infinite linear;
-webkit-transition: background-position .7s;
}
Look at slot machine games such as X-Tra Bonus Reels, Flea Market, and Sunny. I can see they have a 3D appearance to them. They don’t have a flat appearance like so many other slot machine video games. No, I don’t think it’s a “super stunning” 3D appearance, but it’s definitely there and it’s not bad at all.
The example of the reels template you can use:
There’s the “smaller” scale carousel look on those wheels I wanted. But in this case, I only needed one wheel.With the following example code (basic setup code below), I can change a variety of things. Including the number of panels, their sizes, and make the carousel stand vertically or horizontally. This is for a nine panel wheel. Each panel has a 20px gap in between each other. The width was set to 210px.
Code:
<section class="container">
<div id="carousel">
<figure>1</figure>
<figure>2</figure>
<figure>3</figure>
<figure>4</figure>
<figure>5</figure>
<figure>6</figure>
<figure>7</figure>
<figure>8</figure>
<figure>9</figure>
</div>
</section>
.container {
width: 210px;
height: 140px;
position: relative;
perspective: 1000px;
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
#carousel figure {
margin: 0;
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
border: 2px solid black;
}
//To rotate them, each panel is rotated in 40 degree increments (360 / 9).
#carousel figure:nth-child(1) { transform: rotateY( 0deg ); }
#carousel figure:nth-child(2) { transform: rotateY( 40deg ); }
#carousel figure:nth-child(3) { transform: rotateY( 80deg ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ); }
#carousel figure:nth-child(1) { transform: rotateY( 0deg ) translateZ( 288px ); }
#carousel figure:nth-child(2) { transform: rotateY( 40deg ) translateZ( 288px ); }
#carousel figure:nth-child(3) { transform: rotateY( 80deg ) translateZ( 288px ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }
Code:
var tz = Math.round( ( panelSize / 2 ) / Math.tan( Math.PI / numberOfPanels ) ); // to get to a specific panel transform: translateZ( -288px ) rotateY( -160deg );
Using the Bounce In Down Effect
When I check out various slot machine video games, I see a little bounce in the rolls near the end of the spin. A nice example of this is seen in Five Times Play. It happens just before the final outcome is displayed in each roll. When I compared that to a real slot machine, I noticed that same bounce happens a lot in the real machines.
While I was making a slot machine game, I started out with this code:
Code:
$('#test').css( "margin-top", 7400px );
$('#test').animate(
{"margin-top": "0px"},
{'duration' : 3000, 'easing' : $.bez([0,0,0.9,1.1])}
);
To make this “short n sweet”, I left out the prefixes. Here’s the code I used:
Code:
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}
Drawing Lines
When I see a variety of slot machine video games such as Five Times Play, Flask of Run, and X-Tra Bonus Reels, any win would be shown via lines. There’re lots of slot machine video games that do this. Not just one pre-drawn “win” line in the center that’s always there. Lines were showing up all over the place as needed in those games. After checking out various things, I decided my main and best option was to use <canvas> in HTML5. This creates an instant drawing surface.
The fun part is that it’s transparent by default and I can draw the lines for my slot machine video games as needed. If needed, I can remove the border or use something else as a border (decorations). All it takes is this code to make a canvas in HTML5:
Code:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
Code:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Or at the minimum, they can serve as a good start. The problem remains as there are all kinds of other effects that can be made up. The good news is that I know much of this code can help in creating those effects.
Also, I did these all listed items due to the collected information from the popular websites like Stackoverflow and other and implemented this in rel life. This source was developed with my participation and I implemented all my skills there.