jQuery slot machine – CSS3 3D


jQuery slot machine – CSS3 3D

This is my second Version of a jQuery slot machine. I released my first Version of a jQuery slot machine about a year ago.

jQuery slot machine in 3D

The main difference between my old jQuery slot machine and this version is the way it looks and feels.
I wanted to make a new “cleaner” version, since the old one was just a modified Version of this jQuery slot machine.

Well… in the beginning I just wanted to make a plugin with different options… but about 10 minutes after I started I said to myself..
Man… let’s make a funky 3D version.

Haha.. another totally useless (is it really useless?) but absolutely amazing project from the CSSnerd.

So I started making a box and a few cylinders (used as wheels). I first thought the calculation would be quite complicated… turning to the right position and giving points for matches.. but it turned out to be simpler than I imagined.

I might go into detail on this later (maybe in this post or I’ll write a tutorial if people are interested)

yeah yeah.. I know you only want to try it out.. so let’s stop talking…

Demo Source

jQuery slot machine CSS3 3D

Ok I will really keep this post short.. feel free to comment or request a tutorial.. If there are enought requests I will most probably write a tutorial for this.
Keep in mind.. I did this on one afternoon and it is WORK IN PROGRESS. I will add a lot more features.. i.E. audio and probably a drag handle (I really have to think about how I can move the handle in a three-dimensional space… but I’m sure I will figure it out.. eventually)

This will work in Webkit browsers (Safari and Chrome) and Firefox.
I also works really good on the iPhone and iPad.

Follow me

Gregor Adams

web developer at Codefights
Hi, I am a web-programmer and frontend-developer from Germany.
I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.
Follow me

Hi, I am a web-programmer and frontend-developer from Germany. I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.

  • David Augustus

    Both are amazing, the first, i saw some time ago.. But this time .. i’m shocked .

    How could I create something to insert coins ?

    • Well that depends on how you would want the coin to look or “feel”

    • kim

      Hi,

      We’d like to get some consulting from you on this 3d slot machine. Please contact me at your earliest convenient. We can offer you a free ipad to scale the css out to a larger slot machine size.

      Thanks
      Kim

  • glory

    question….
    how can i add more pictures in the slot
    and how to make it shows only different char ?

    thanks in advance

  • Justin

    I’d like to use this code for a project for my company, what is the licensing for this?

    Thank you, it looks great.

    • If you want to use it, you should fork it on github.
      https://github.com/pixelass/slotmachine/

      Feel free to use it for anything. It’s just a proof of concept, so I didn’t bother about a license.
      I might add it though. It will be MIT, so anybody can use it for their projects.

  • Dear Gregor,

    Thanks a lot for this sample. It was very useful for me.
    I used it and adapted it to my needs.
    Could you tell me how can I make it work on IE?
    Thanks again,
    Elias

    • pixelass

      Sadly this cannot work in IE9 and below. Due to a bug in IE10 concerning preserve-3d it will not work on IE10 either until Microsoft fixes it. This example uses a lot of transforms… but let’s take away the chrome.. In the end all we have left are the three wheels. Each weel consists of many single divs that are transformed to build a circle. This circle needs to spin on it’s axis, so We need to put a div around it which will do the spinning for us. The here’s the first issue, where we need to preserve-3d. IE10 fails here… but this doesn’t mean it’s impossible. If we take away the div again and recalculate each side of the wheel separately it’s still possible to recreate the effect. Though, you can probably imagine what kind of overload this would produce. You would completely have to do it in javascript and cannot use css transitions. The entire slotmachine is based on advanced CSS transitions and animations and javascript listeners. it’s rather cheap on your machine and can be used to create a nice effect on iOS or Android, which was the main goal. If you really want to create something like it with cross browser compatibility I would recommend, that you look at one of the 2d examples out there. I still have an old “dirty” version that supports browsers down to IE7 if you’re interested.

      • Actually this is what I have done out of your sample: http://elias-khoury.com/slot6
        I wish it could work on IE.

        Now I guess I’m going to make a 2D version for IE users.

      • And it works great on Safari, Firefox and Chrome. And on Firefox and Safari (IPAD) the easing is prettier than in Chrome. The last move of the wheel is elastic and Chrome isn’t giving this option.
        Anyway, I would like to thank you for your sample. It’s been much of a help for me.

        • pixelass

          heh.. back when I wrote the script with the css easing, it worked on Chrome. It stopped working in version 23 or so. Sad story. I hope the chrome-team fixes this.

  • Pingback: Slot machine with jQuery and CSS 3D transforms | devtutorial.com()

  • Dear Gregor.
    I have seen your latest Codepen for CSS fractal in which you are using 256 .part divs
    Thats is awesome. Do u have a tutorial or explanation as to how you are doing it? It would be great

    • hehe.. yeah I’ve been thinking about posting a tutorial about CSS fractals..

      The time my friend.. the time.

      Blogposts take some time, sadly I don’t really have too much of it ATM.

      But thanks for showing interest, I will try to find some spare time and do a small writeup…

  • Alexander Aislant

    Hola,
    quiero utilizar tu proyecto para entregar unos premios, soy programador novato, ¿Cómo hago para controlar las posiciones cuando yo desee que queden iguales y ganar?
    gracias, Alexa Aislant desde Colombia, saludos

    ______

    hi,
    I want to use your project to deliver some awards, I am a rookie programmer, how do I control the positions when I want to stay the same and win?
    Thanks, Alexa Aislant from Colombia, Greetings

    • pixelass

      This line: https://github.com/pixelass/slotmachine/blob/master/js/jquery.slots.js#L131 generates a random type (symbol). if you set it to a static number you can force a result.

      e.g. (not tested, but something like this should do the job)

      // at the top (https://github.com/pixelass/slotmachine/blob/master/js/jquery.slots.js#L14)
      var slots = [
      ['bell', 'orange', 'prune', 'orange', 'seven', 'cherry', 'bar', 'bell', 'prune'],
      ['prune', 'orange', 'seven', 'cherry', 'bar', 'bell', 'prune', 'orange', 'cherry'],
      ['orange', 'bell', 'orange', 'prune', 'orange', 'seven', 'cherry', 'bar', 'bell']
      ];

      // add something like this
      var forcedResults = [6, 4, 7]; // bar, bar, bar
      //...

      //...
      // then at the each loop
      wheels.each(function() {
      //....
      play.on('click', function () {
      if(credits > 0 && allowPlay) {
      //...
      // change type to something like this
      var type = forcedResults[index];
      //...
      }
      }
      });

  • Alexander Aislant

    Muchas gracias, Si funciona, yes work¡¡¡

  • Alexander Aislant

    hi,
    I have been asked to load the page the movement of the rollers to start and the button to decelerate, slow down gradually and stop, I have dealt with the events onload and ready and I have failed, I can help me, thanks, Greetings

    ________

    hola,
    me han pedido que al cargar la pagina se inicie el movimiento de los rodillos y que el boton desacelere, reduzca la velocidad gradualmente y pare, he tratado con los eventos cargar y ready y no lo he logrado, me pueden dar una mabo, gracias, saludos

  • Alexander Aislant

    automatically switch to start it and it succeeds: for duration = 9999, I have not managed to find the code to stop when I want, I appreciate your help, Greetings

  • doesn’t work in latest firefox as well 🙁