Winwheel.js example: Wheel of Fortune

Here is an example of a Wheel of Fortune wheel created on HTML canvas by the JavaScript code of Winwheel.js. As you will see when scrolling down to The code section, creating this type of wheel with Winwheel.js is pretty easy - just specify the number of segments and then the segment properties such as color and text.


After choosing a power level and clicking 'Spin' it animates over a few seconds, spinning to a stop with the prize won alerted to the user.


This example is included in the Winwheel.js download: /examples/wheel_of_fortune/index.html





Power
High
Med
Low

Spin

  Play Again
     (reset)

Sorry, your browser doesn't support canvas. Please try another.



The code


The key bit of code - the parameters to Winwheel.js - used to create this wheel is shown below. To view the full source code used to create this example (including the power selectors and spin button) see the code for this example on Github...


<html>
    <head>
        <title>Wheel of fortune Wheel</title>
        <script src='Winwheel.js'></script>
    </head>
    <body>
        <canvas id='canvas' width='880' height='300'>
            Canvas not supported, use another browser.
        </canvas>
        <script>
			var theWheel = new Winwheel({
				'outerRadius'     : 212,        // Set outer radius so wheel fits inside the background.
				'innerRadius'     : 75,         // Make wheel hollow so segments dont go all way to center.
				'textFontSize'    : 24,         // Set default font size for the segments.
				'textOrientation' : 'vertical', // Make text vertial so goes down from the outside of wheel.
				'textAlignment'   : 'outer',    // Align text to outside of wheel.
				'numSegments'     : 24,         // Specify number of segments.
				'segments'        :             // Define segments including colour and text.
				[                               // font size and text colour overridden on backrupt segments.
				   {'fillStyle' : '#ee1c24', 'text' : '300'},
				   {'fillStyle' : '#3cb878', 'text' : '450'},
				   {'fillStyle' : '#f6989d', 'text' : '600'},
				   {'fillStyle' : '#00aef0', 'text' : '750'},
				   {'fillStyle' : '#f26522', 'text' : '500'},
				   {'fillStyle' : '#000000', 'text' : 'BANKRUPT', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'},
				   {'fillStyle' : '#e70697', 'text' : '3000'},
				   {'fillStyle' : '#fff200', 'text' : '600'},
				   {'fillStyle' : '#f6989d', 'text' : '700'},
				   {'fillStyle' : '#ee1c24', 'text' : '350'},
				   {'fillStyle' : '#3cb878', 'text' : '500'},
				   {'fillStyle' : '#f26522', 'text' : '800'},
				   {'fillStyle' : '#a186be', 'text' : '300'},
				   {'fillStyle' : '#fff200', 'text' : '400'},
				   {'fillStyle' : '#00aef0', 'text' : '650'},
				   {'fillStyle' : '#ee1c24', 'text' : '1000'},
				   {'fillStyle' : '#f6989d', 'text' : '500'},
				   {'fillStyle' : '#f26522', 'text' : '400'},
				   {'fillStyle' : '#3cb878', 'text' : '900'},
				   {'fillStyle' : '#000000', 'text' : 'BANKRUPT', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'},
				   {'fillStyle' : '#a186be', 'text' : '600'},
				   {'fillStyle' : '#fff200', 'text' : '700'},
				   {'fillStyle' : '#00aef0', 'text' : '800'},
				   {'fillStyle' : '#ffffff', 'text' : 'LOOSE TURN', 'textFontSize' : 12}
				],
				'animation' :           // Specify the animation to use.
				{
					'type'     : 'spinToStop',
					'duration' : 8,
					'spins'    : 3,
					'callbackFinished' : 'alertPrize()'
				}
			});

			// Called when the animation has finished.
			function alertPrize()
	        {
	            // Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
	            var winningSegment = theWheel.getIndicatedSegment();

				// Display different message if win/lose/backrupt.
				if (winningSegment.text == 'LOOSE TURN')
	            {
	                alert('Sorry but you loose a turn.');
	            }
	            else if (winningSegment.text == 'BANKRUPT')
	            {
	                alert('Oh no, you have gone BANKRUPT!');
	            }
	            else
	            {
	                alert("You have won " + winningSegment.text);
	            }
	        }
        </script>
    </body>
</html>

Previous:
< Basic Image Wheel
Next:
One Image Per Segment >