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
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>
let 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' : 10,
'spins' : 3,
'callbackFinished' : alertPrize, // Function to call whent the spinning has stopped.
'callbackSound' : playSound, // Called when the tick sound is to be played.
'soundTrigger' : 'pin' // Specify pins are to trigger the sound.
},
'pins' : // Turn pins on.
{
'number' : 24,
'fillStyle' : 'silver',
'outerRadius': 4,
}
});
// Loads the tick audio sound in to an audio object.
let audio = new Audio('tick.mp3');
// This function is called when the sound is to be played.
function playSound()
{
// Stop and rewind the sound if it already happens to be playing.
audio.pause();
audio.currentTime = 0;
// Play the sound.
audio.play();
}
// Called when the animation has finished.
function alertPrize(indicatedSegment)
{
// Display different message if win/lose/backrupt.
if (indicatedSegment.text == 'LOOSE TURN') {
alert('Sorry but you loose a turn.');
} else if (indicatedSegment.text == 'BANKRUPT') {
alert('Oh no, you have gone BANKRUPT!');
} else {
alert("You have won " + indicatedSegment.text);
}
}
</script>
</body>
</html>
|
Previous: < Basic Code Wheel |
Next: Basic image wheel > |