Winwheel.js tutorial: #13 Getting the segment (prize) pointed to
In this tutorial I will show you how to get the segment / prize pointed to after the spinning has stopped, or at any time, by using the getIndicatedSegment() or getIndicatedSegmentNumber() methods.
The getIndicatedSegment() function returns a reference to the segment object located under the pointer so you can get information from it such as the name or change any of its values. The getIndicatedSegmentNumber() just returns the position in the segments array of the wheel that is pointed to.
There are a number of things you might want to use this information for, for example confirming with the user the details of the prize they have won by using the text property of the segment in a alert, or perhaps changing the background colour of the segment, or altering some other property of it.
Alert segment text (prize name)
In this example I use the getIndicatedSegment() function after the spinning has stopped to create an alert informing the user of the prize won by using the text of the segment.
<script>
var myWheel = new Winwheel({
'numSegments' : 8,
'outerRadius' : 170,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 5,
'spins' : 8,
// Remember to do something after the animation has finished specify callback function.
'callbackFinished' : 'alertPrize()',
// During the animation need to call the drawTriangle() to re-draw the pointer each frame.
'callbackAfter' : 'drawTriangle()'
}
});
// This function called after the spin animation has stopped.
function alertPrize()
{
// Call getIndicatedSegment() function to return pointer to the segment pointed to on wheel.
var winningSegment = myWheel.getIndicatedSegment();
// Basic alert of the segment text which is the prize name.
alert("You have won " + winningSegment.text + "!");
}
// Function to draw pointer using code (like in a previous tutorial).
drawTriangle();
function drawTriangle()
{
// Get the canvas context the wheel uses.
var tx = myWheel.etx;
tx.strokeStyle = 'navy'; // Set line colour.
tx.fillStyle = 'aqua'; // Set fill colour.
tx.lineWidth = 2;
tx.beginPath(); // Begin path.
tx.moveTo(170, 5); // Move to initial position.
tx.lineTo(230, 5); // Draw lines to make the shape.
tx.lineTo(200, 40);
tx.lineTo(171, 5);
tx.stroke(); // Complete the path by stroking (draw lines).
tx.fill(); // Then fill.
}
</script>
| Reset |
Changing the background colour of the winning segment
In this next example I use the getIndicatedSegmentNumber() function when the spinning stops to change the background colour of the winning segment to yellow and gray all the others.
I also play a sound when the spinning has stopped, which is something you might want to do to make the winning more rewarding for the user. This is achieved using the HTML5 audio tag and a little bit of JavaScript to play the file.
In this example the pointer is located to the right, so as you can see in the code it is important to specify where the pointer is around the wheel by setting the pointerAngle property.
// To add audio use HTML5 audio tag, also give it Id so can get DOM object with
// javascript to play the sound in the function called after spinning has stopped.
<audio id="winsound">
<source src="winbeat.mp3" />
</audio>
<script>
var colourWheel = new Winwheel({
'numSegments' : 8,
'outerRadius' : 170,
'canvasId' : 'colourCanvas',
'pointerAngle' : 90, // Remember to specify if not default of 0 degrees.
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 5,
'spins' : 8,
// To do something after the animation has finished specify callback function.
'callbackFinished' : 'winAnimation()',
// During the animation need to call function to re-draw triangle.
'callbackAfter' : 'drawColourTriangle()'
}
});
// This function called after the spin animation has stopped.
function winAnimation()
{
// Get the audio with the sound it in, then play.
var winsound = document.getElementById('winsound');
winsound.play();
// Get the number of the winning segment.
var winningSegmentNumber = colourWheel.getIndicatedSegmentNumber();
// Loop and set background colour of all segments to gray.
for (var x = 1; x < colourWheel.segments.length; x ++)
{
colourWheel.segments[x].fillStyle = 'gray';
}
// Make the winning one yellow.
colourWheel.segments[winningSegmentNumber].fillStyle = 'yellow';
// Call draw function to render changes.
colourWheel.draw();
// Also re-draw the pointer, otherwise it disappears.
drawColourTriangle();
}
drawColourTriangle();
// Draw pointer on canvas, this time on the right.
function drawColourTriangle()
{
// Get context used by the wheel.
var tx2 = colourWheel.etx;
tx2.strokeStyle = 'navy'; // Set line colour.
tx2.fillStyle = 'aqua'; // Set fill colour.
tx2.lineWidth = 2;
tx2.beginPath(); // Begin path.
tx2.moveTo(390, 174); // Move to initial position.
tx2.lineTo(390, 226); // Draw lines to make the shape.
tx2.lineTo(360, 200);
tx2.lineTo(390, 175);
tx2.stroke(); // Complete the path by stroking (draw lines).
tx2.fill();
}
</script>
| Reset |
| < #12 Spinning a Wheel - More Details | #14: Setting the Prize to be won before spinning > |