Simple Javascript Slot Machine

  

HTML5 Slot Machine This is a modern proof of concept casino slot machine game, built using only vanilla HTML, CSS and JavaScript. No Flash or Frameworks required. Allowing for an amazing low bundle size and blazing fast performance.

I was bored and that can be a dangerous thing. Like doodling on the phone book while you are talking on the phone, I doodle code while answering questions on DIC. Yeah, it means I have no life and yes it means I was born a coder. During this little doodle I decided to make a slot machine. But not your standard slot machine per say, but one designed a little bit more like the real thing. Sure it could have been done a little more simpler and not even using a Wheel class at all, but what fun is that? In this entry I show the creation of a slot machine from a bit more of a mechanical aspect than a purely computerized one. It should provide a small sampling of classes and how they can represent real life machines. We cover it all right here on the Programming Underground!

So as I have already said, this little project was just something to play around with. It turned out kinda nice, so I thought I would share it. But what did I mean about it being mechanical in nature? Well, if you have ever played a real slot machine, not the digital ones they have in casinos now, you would see a metal case with a series of wheels. Typically it would be three wheels with pictures on them. When you put your money in and pull the handle the wheels would be set into motion. They would spin and then the first wheel would stop, followed by the second and then the third. After they have all stopped, the winnings are determined and you are paid out in coinage or credits.

I thought, why not be a bit mechanical in this slot machine design and create the wheels as a class called “Wheel” and give it the ability to spin independently of the other wheels? Have the wheel keep track of which picture (or in our case number) is flying by and report the results to the actual slot machine class. I could have done this mechanism without the need of a wheel at all and instead load up an array and have it randomly pick a number from the wheel. Little slimmer, little more efficient but wouldn’t show much programming theory.

What do we gain by recreating these Wheel classes and spinning them independently? Well, you gain a slight bit of flexibility. Independently we are able to control the speed of the spinning if we wanted to, we are able to grasp the idea of the wheel as a concept in our mind and manipulate it. We could easily built in features like if the wheel lands on a certain number it will adjust itself. Like some slots in Vegas, if you land on lets say a rocket in the center line, the machine would see the rocket and correct the wheel to spin backwards 1 spot (in the direction of the rocket as if the rocket was controlling the wheel). We could spin one wheel one way and another wheel another. We could inherit from that wheel and create a specialized wheel that does a slew of new different behaviors. All encapsulated into one solid object making the actual Machine class oblivious to the trickery of the wheel itself… encapsulation at its finest!

The machine class we create will contain 3 pointers. Each to one of the wheels. The machine itself will be in charge of a few different tasks. Taking money, issuing and removing credits, determining when to spin, telling each of the wheels to spin and checking our winnings based on some chart we create. It has enough on its plate than worrying about the wheels and reading their values.

So lets start with our Wheel class and its declaration/implementation…

wheel.h

As you can see the wheel itself is not a difficult concept to envision. The bulk of the work is in the read() method. Here we simply read the values from our internal array of integers (the values on the wheel) and return those values as an array of the three integers… representing the visible column. This column will then be loaded into our 2-Dimensional Array back in the Machine class. The 2D array represents the view or screen by which the user sees the results. Remember that the user never gets to see the entire wheel. Only the 3 consecutive values on the face of the wheel.

Here is how it may look in the real world. We have our machine with the three wheels and our 2D array called “Screen” which acts as our viewing window. Each wheel will report its values and those values will be put into the screen…

Below is our machine class…

machine.h

This looks like a lot of code but really it is not if you look at each function. Most of them are very very simple to understand. We have a spin method which essentially spins each of the wheels, reads their values back from the Wheel class into a pointer (representing each column), then they are loaded into the 2D array one column at a time (our view screen), printed for the user to see the results and lastly the winnings are checked. The checkwinnings() method determines which rows to check based on the amount of the bet. If they chose 1 line, it checks for winning combinations on the middle row only. If they choose 2 lines, it checks the middle and top lines, 3 line bet checks all three horizontal rows, 4 line bet checks the first diagonal as well and 5 line bet checks both diagonals in addition to the lines.

How does it check the lines? Well each line is given to the checkline() helper function which compares the 3 values of the line against an enumerated type of various symbols. Here we are just assigning a symbol against each numbered value to help the programmer determine which numbers correspond to which winning combos. For instance, luckyseven represents the number 3 in the enumeration. So if it runs across a line with 3 number 3s, then it knows it hit the grand jackpot and credits the player 1000. This method makes things easy because if we ever wanted to change the win patterns later, we could change the enum and checkline method to do so. We could also build in multiple types of symbols and even let the user choose what slot machine game they want to go by. It becomes very flexible and is a testament to great design!

Lastly we can put some tests together just to show some the various aspects of how this thing works and how the programmer can use the classes…

slotmachine.cpp

This simply inserts a 5 dollar bill and a coin for good luck. Then bets 5 lines and spins. Despite the outcome we go and bet five lines again and spin once more. Hopefully we win something this time around! But either way, those are the classes for you and I hope you like them. As always, all code here on the Programming Underground is in the public domain and free for the taking (just don’t cause a mess in isle 3, I am tired of running out there for cleanup). Thanks for stopping by and reading my blog. 🙂

Examples

Overview

Summary

Visitors increasingly want to engage with our sites and brands. This slot machine gives the perfect way for your visitors to do that with little effort or cost to you or your company. On top of that it increases customer loyalty, returning to the site to continue to play! We've seen a huge variety of companies use this to great success. Imagination really is the only limit!

Have your own HTML5, pure Javascript slot machine on your site! In a recent survey, 74% of users said the well finished game contributed “moderately or significantly” to the fun of the site.

Packages provide a license for you to use this slot machine on all your sites. You can mix it up and customize your slot machine with the 5 different pre-set designs provided, or you can very easily make your own.

Written in pure HTML 5, Javascript, jQuery and CSS it is extremely quick and simple to integrate into any new or existing site. Proven to work flawlessly on mobiles and tablet (including Android, iOS and Windows Phone), your visitors can enjoy this feature at any time and there is no use of Flash or Java, so no annoying pop ups to distract your visitors from what you want them to focus on!

Some interesting uses and ideas for your slot machine

These are some of the imaginative uses our customers have given their slot machine. Get your creative juices flowing!

  • Encourage spending in your store giving people a chance to win discounts, prizes and promotions.
  • Give credits away as virtual game currency, or virtual goods in those games, when users level up, or find a chest, for example.
  • Give customers a chance to win a discount at the time of checkout, in your online store.
  • Use it together with physical scratchcards to give people prizes in a loyalty program.
  • Set up a spot at events with several games to entertain guests.
  • Add casino-style games to your site, to increase customer engagement.
  • Create a buzz at a convention, letting visitors play and win merchandise items (t-shirts and hats, for example). Change the odds heavily so that almost everyone wins.

Features

  • 5 designs included, immediately ready to use.
  • Fully customizable. You can very easily change the images, sounds, animations, pay table, and prizes to suit your needs.
  • Completely responsive to every resolution and device. Works on every browser.
  • You can offer either monetary prizes, or physical gifts like hats, t-shirts, or store credit for your site, to improve your brand and keep customers coming back!
  • 100% HTML, CSS3 and Javascript code, based on jQuery. Does not use Java or Flash, ensuring compatibility with all mobile devices.
  • Smooth jQuery animation.
  • Cheat and fraud prevention measures to avoid getting fraudulent complaints from your customers.
  • Over 10 million spins to date, resulting in millions of dollars in profits for the different sites that host it. On a monthly average, there's about one spin every 5 seconds.
Slot

Package

The package includes the full source code for the entire slot machine, including HTML, CSS, Javascript and PHP code. It also includes extensive documentation on how to implement the slots in your own site, and how to customize every element of it, in case you want to.

Simple javascript slot machine games

Only a very, very basic knowledge of PHP and CSS is necessary to add this to your site. If you don't have your own programmers, or don't feel comfortable doing it, we can do this for you for a fee.

We also offer a custom-design option for an extra fee, in which we get you in contact with our graphics designer, and you get the design that you need, ready to plug into your site.

Simple Javascript Slot Machine Tutorial

Buy this slot machine today, or contact us with any questions.

F.A.Q.

  • Can I change the icons to my products / company logo?Open or Close

    Yes, all the images you see can be directly replaced for anything you would like, by simply changing the files provided.

  • Can I customize the odds of winning / the game's payout / my profit margin?Open or Close

    Yes, all the probabilities are 100% configurable when setting up the prizes for the game. This is explained in detail in the documentation, including examples to make it as easy as possible.

  • Can I use this slot machine in my Wordpress site?Open or Close

    Yes, it's quite easy to integrate this into Wordpress by simply modifying the site templates to add the HTML code, and then adding the extra CSS and JS file. Quick and simple!

  • Can anyone implement this?Open or Close

    A very minimal knowledge of PHP and CSS is needed to implement this on your site. Any junior programmer can do it. Alternatively, you can hire us to do it for you, for a very small additional fee.

  • Is it a one-time payment?Open or Close

    Yes, a one time payment of the license fee gives you our full source code, and allows you to use the slot machine in as many sites as you own.

  • How can I customize this slot machine?Open or Close

    You can very easily change everything that your visitors will see about the slot machine. All images and sounds, the pay table configuration, maximum and minimum bets, payouts, the details of the animation, etc. The package you will buy includes extensive documentation on how to modify all of these, and our support team will also be able to help you and answer all your questions.

  • Can I have non-monetary payouts?Open or Close

    Yes, several of our customers use their slot machine to give out t-shits, hats, store credit, discount codes and more!

  • Can monetary payouts have cents?Open or Close

    Yes, you can have your payouts in entire dollars, quarters, cents, even Bitcoin fractions if you want.

  • Does it work with Bitcoin / Litecoin / other cryptocurrencies?Open or Close

    Yes! Basically, you can integrate this with any payment / credits mechanism you can think of, be it regular money, Bitcoin, tokens, anything!

  • Do I get the full source code?Open or Close

    You get absolutely everything, in full un-minified, non-obfuscated form. All the PHP, HTML, CSS and Javascript, which you can modify as much as you wish, along with extensive documentation on how to do so.

What our previous customers say

'The customers love it'

We installed the slot machine software on our website about six months ago and could not be happier. It was super smooth and we have not had to return to Daniel even once with any problems - in fact not one of our customers has ever reported a problem with a spin which is amazing for a web based game. The integration was a snap and putting our own custom design into the machine was much easier then expected. We could not be happier with the entire experience and our customers love playing every day.

'Huge increase in customer engagement'

From start to finish Daniel was the perfect man for the job. We were setting up a fun virtual games website and communicated a few game ideas to Daniel. The animations were smooth, the games felt fast, and they were able to handle a large number of users.

Our customers were consistently thrilled with the way the games worked, and the games were a big success immediately after launch. In a recent survey 74% of users said the well finished games he programmed contributed 'moderately or significantly' to the fun of the site.

Java Slot Machine Program

'Only took me about half an hour to integrate.'

I love your coding style, very organized and well documented. Only took me about half an hour to integrate with our systems, works great and our users are LOVING it!

'I highly recommend Daniel's work.'

I found Daniel to be an extremely knowledgeable and reliable developer who helped us integrate his games into our retail platform. Daniel made himself available for our questions and gave assistance whenever we requested.

I highly recommend Daniel's work to anyone who wishes to be successful the first time out. His insight is invaluable.

'Very easy to customize, works in all browsers'

Simple Javascript Slot Machine Machines

The slot machine is working really well – we haven't had any reports of problems from players, many of which are using tablets / smartphones.

The documentation was great and the code well laid out and self-explanatory making any customisations easy to add into the code..

'Very professional service'

Slot Machine Script

Daniel is a true professional that provides exceptional value. He kept his word on both pricing and beat his estimated delivery time. I definitely will be working with him on projects in the future.