Create a wheel of fortune for your HTML5 games with Phaser in only a few lines

When you want to reward your players with some random gift, a wheel of fortune is what you need.

In one of the games in am currently playing, Down The Mountain, there is a fortune wheel spinning every six hours which can make you win prizes.

Here it is, using the same graphics, hope Umbrella Games guys won’t mind:

Click anywhere to spin the wheel, and have a look at the prize.

And here is the full commented source code, just a few lines of code thanks to tweens and easing.

Now you can reward your players. Download the source code of the entire project

  • thank you so much it was so good lesson

  • Astro

    Black rect in Chrome iOS.

    • Alberto Cole

      change line 60 for “spin: function(){”

      and

      change line 83 with: “winPrize: function(){”

      Regards,

  • Apelmon

    I have some bug.
    If degrees = 360 then prize = -1 because Math.floor(degrees / (360 / slices)) = 8
    It is necessary that degrees = between(0, 359) and all be fine.

    Thanks for the example.

    • Emanuele Feronato

      Thank you, you’re right.

  • Jorge Abrego

    Hey great script! Thanks for sharing the code. By the way how do you position the prizing wheel? I added the ccs into the site and added the prize wheel js files, where wanted the wheel to appear. However, the prizing wheel appears all the way beneath the footer.

    • nico

      You can load the wheel as an iframe, it should work fine then.

      • pablo

        how do you load it inside an iframe?

  • Kevin Beals

    Hello Emanuele,

    I’d like to know if you you have time to speak regarding this spin wheel. I have a few questions about how it works, usage, security and configurable control for prize set up. Thank you for your time in advance.

    Kevin Beals

    • Emanuele Feronato

      sure! ask!

  • From 8 prizes, how can I specify only two gifts that be an option when playing?
    prize out only between “50” or “EMPTY (beside the key)”, instead of 8 options.

    help me pls ..

    • Emanuele Feronato

      just change slicePrizes array filling it only with four “50” and four “empty”

  • Bharat

    How to make the background transparent. I am placing this wheel on top of a image and i do not want to see the red color. all i wanted to see is round image.

    Appreciate your help!

    • Betsy

      To set the background as transparent, try adding true like below

      game = new Phaser.Game(458, 488, Phaser.AUTO, “”,null, true);

      reference this
      new Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig);

  • adil

    How to make this Canvas responsive??
    I have modified it but it does not look good on all the screen sizes. Can anyone please help me to make it responsive as I have tried lots of ways but nothing helped so far. Thank you.

    • This turned out to be quite simple, I just did this:

      // giving some color to background
      game.stage.backgroundColor = “#ff0000”;
      game.scale.pageAlignHorizontally = true;
      game.scale.pageAlignVertically = true;
      game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

      Then I set the container of the spinner to be css max-width: 480px; and it worked fine for me.

      • pablo

        how did you set the max-width? how do you control the spin position?

  • adil

    I have modified this wheel with my own Images but I am unable to make it responsive can anyone help me to make it responsive so it looks good on all the devices thank you.

  • Kai

    Nice little Script. I have a question. can i hold the wheel on a given positon?
    what i need is, lets say i will show the user that he has won 500 x than the weel should hold on the 500 place

  • How i can integrated with my database? this is i use to give reward for member :) thanks

  • Sushant Jadhav

    I want to change font in canvas how to do that

  • Sushant Jadhav

    want to change Font family

  • how can I make this responsive?

  • Excellent stuff! Thank you for introducing me to phaser looks very promising and powerful for what I’m looking to accomplish. And thanks again for adding that winPrize function as it’s exactly what I needed.

    To those of you wanting to change the font, you have to edit the image. The wheel is just the wheel.png file.

  • war

    can you please add php script that send reward to mysql database? and control of rate for the prize, if its not free just email me, im willing to pay

  • progamer123

    is it posible to do a coin system that you start with 100 coins and you can bet this on a weel wit 2x Lose ore 10x
    ps if it posible than send me the code thanks

  • Pingback: Wheel demo - test - Galiquis.com()

  • Hong

    How can I send this game through gmail?

  • NgocNinh

    Tks so much :)

  • katta

    TypeError: a is undefined because of this error wheel getting struck. Please help me .

  • Emmanuel Gabriel

    Please i will like to know how to add link to the value which shows below. Can anyone help please?? I really appreciate this great code

  • Julio Cesar

    hi I have a problem, when I try to load the images, I only can see two black squares.

  • andres

    Hi Emanuele, I’m new using Phaser and I try to make the same that you make in this work but, I need to change the click event by drag event.
    Now I’m testing codes but dont work.

    You can give me a hand with this ???

    Thanks guy and excelent work.

    • andres

      Hi guys, I leave my solution: (only excerpts of the code)

      game = new Phaser.Game(720, 1280, Phaser.AUTO, “”, { preload: preload, create: create, update: update });

      function preload() { }

      function create(){

      // Releasing the mouse button begins to spin the wheel
      game.input.onUp.add(spin, this);

      }

      function update() {
      if (game.input.mousePointer.isDown) {
      wheel.rotation = game.physics.arcade.angleToPointer(wheel);
      }
      }

      With the above I can already simulate the launch of the wheel, but now what I need is to calculate the speed of movement between “mouse down” and “mouse release” so that the wheel turns according to this calculation.

      If anyone has any advice, I’d appreciate it.

      Thank you.

  • Adman P

    How to make it work, i just opened index.html and it’s not working

  • Chandra

    i have implemented to my server, but the image won’t showed
    and i used {literal}{/literal} to showing the image..
    have any suggestion?

  • Paul G

    I downloaded the zip file and extracted the file. I then ran the file and it worked great. I then opened the game.js file to edit it and now the program doesnt work. Even if I don’t make any edits to the file or even save it, as long as I open it the program stops working. I tried opening the game.js file in multiple editors and opening index.html in multiple browsers but the same result every time. Any ideas? thanks

  • tarik

    hi,
    i have 4 gifts : (gifts 1 : 60pcs, gifst 2 : 200pcs ; Gifst 3 : 50pcs ; Gifts 4 : 2pcs,) the 4 others pzies its free,
    how can i do if after one time the gift1 is 0 its not be win

    thanks

  • Hi, would you be able to help add my own images to the wheel?

  • I need to Stop This Spin Wheel on a specific part like on 50 points is this possible to stop this on a specific part

    • Lauren

      Hi,
      I was also looking for something like this,

      did you find how to do it?

      Thank you

      • Bianca Morton

        set degrees to a specific degree of where you want to stop
        var degrees = 180;
        should stop on the bottom option

  • hi

    it is not working in chrome and how to remove the black square background

    Please help me

  • Sathiya

    Hi,

    Greate code!!!

    I would like to make a small wobble in this week at the end of rotation. Can you please guide to do that.

    Thankyou

  • rax

    HI, thanks for sharing. I was not able to make run… Can I contact you privately, there you have my email…

    Best regards,

    Rax Max

  • sudhansu sekhar nayak

    hi , the code is not working in chrome. how it will be resolved ?

  • Tondon

    How to control the speed of rotation?

  • PAVANI

    how to make a wheel of another type can iu get the code for an html website

  • Mark

    Hello Emanuele,

    is it normal that your code does’nt work on edge and safari ?