<title>HTML5 Canvas Winning Wheel</title>
<script type="text/javascript" src="Winwheel.js"></script>
<script src="TweenMax.min.js"></script>
<script>
// Define the outer wheel, we will treat this as the PRIMARY which means it clears the canvas when drawing and also
// gets the animaton applied to it. We must callback a function during the animation to move and draw the inner wheel
// so the 2 wheels appear as one thing on the canvas.
var outerWheel = new Winwheel({
'numSegments': 10,
'textMargin' : 0,
'textLineWidth' : 1,
'outerRadius' : 210,
'innerRadius' : 130, // Set inner radius to the size of the inner wheel since the inner part of the wheel
'segments': [ // is being drawn by the inner wheel we don't need to draw there.
{'fillStyle' : '#8C8A42', 'text' : '0'},
{'fillStyle' : '#F2F0A8', 'text' : '1'},
{'fillStyle' : '#519142', 'text' : '2'},
{'fillStyle' : '#B7F7A8', 'text' : '3'},
{'fillStyle' : '#4B898F', 'text' : '4'},
{'fillStyle' : '#B1EFF5', 'text' : '5'},
{'fillStyle' : '#8A4342', 'text' : '6'},
{'fillStyle' : '#F0A9A8', 'text' : '7'},
{'fillStyle' : '#B1EFF5', 'text' : '8'},
{'fillStyle' : '#8A4342', 'text' : '9'},
],
'animation':
{
'type': 'spinToStop', // Define animation more or less as normal, except for the callbackAfter().
'duration': 6,
'spins': 15,
}
});
// Need to create the SECONDARY wheel first because on construct the variable which keeps track of the wheel to animate will
// be set to the last created wheel, and we want the outer one the primary with the animation etc.
var innerWheel = new Winwheel({
'numSegments' : 10,
'outerRadius' : 140, // Set the outer radius to make the wheel smaller than the outer wheel.
'innerRadius' : 20,
'textMargin' : 30,
'segments': [ // is being drawn by the inner wheel we don't need to draw there.
{'fillStyle' : '#8C8A42', 'text' : '0'},
{'fillStyle' : '#F2F0A8', 'text' : '1'},
{'fillStyle' : '#519142', 'text' : '2'},
{'fillStyle' : '#B7F7A8', 'text' : '3'},
{'fillStyle' : '#4B898F', 'text' : '4'},
{'fillStyle' : '#B1EFF5', 'text' : '5'},
{'fillStyle' : '#8A4342', 'text' : '6'},
{'fillStyle' : '#F0A9A8', 'text' : '7'},
{'fillStyle' : '#B1EFF5', 'text' : '8'},
{'fillStyle' : '#8A4342', 'text' : '9'},
],
'animation':
{
'type': 'spinToStop', // Define animation more or less as normal, except for the callbackAfter().
'duration': 8,
'callbackAfter' : drawOuterWheel,
'callbackBefore' : drawInnerMostAgain,
'spins': 15,
}
});
var innerMostWheel = new Winwheel({
'numSegments' : 10,
'outerRadius' : 70, // Set the outer radius to make the wheel smaller than the outer wheel.
'segments': [ // is being drawn by the inner wheel we don't need to draw there.
{'fillStyle' : '#8C8A42', 'text' : '0'},
{'fillStyle' : '#F2F0A8', 'text' : '1'},
{'fillStyle' : '#519142', 'text' : '2'},
{'fillStyle' : '#B7F7A8', 'text' : '3'},
{'fillStyle' : '#4B898F', 'text' : '4'},
{'fillStyle' : '#B1EFF5', 'text' : '5'},
{'fillStyle' : '#8A4342', 'text' : '6'},
{'fillStyle' : '#F0A9A8', 'text' : '7'},
{'fillStyle' : '#B1EFF5', 'text' : '8'},
{'fillStyle' : '#8A4342', 'text' : '9'},
],
'animation':
{
'type': 'spinToStop', // Define animation more or less as normal, except for the callbackAfter().
'duration': 10,
'callbackAfter' : drawOuterWheel,
'callbackBefore' : drawInnerAgain,
'callbackFinished' : alertPrize,
'spins': 15,
}
});
outerWheel.draw();
innerWheel.draw(false);
innerMostWheel.draw(false);
/* function CallInnerAnimation(){
innerWheel.startAnimation();
}
function CallInnerMostAnimation(){
innerMostWheel.startAnimation();
}*/
function drawOuterWheel(){
outerWheel.draw(false);
}
function drawInnerAgain(){
innerWheel.draw(false);
}
function drawInnerMostAgain(){
innerMostWheel.draw(false);
}
// Called when the animation has finished.
function alertPrize()
{
// The the indicated segments from the 2 wheels.
var winningInnerSegment = innerWheel.getIndicatedSegment();
var winningInnerMostSegment = innerMostWheel.getIndicatedSegment();
var winningOuterSegment = outerWheel.getIndicatedSegment();
alert('You won ' + ' Outer Segment : ' + winningOuterSegment.text + ', ' + 'Inner Segment : ' + winningInnerSegment.text + ',' + 'Inner Most Segment : ' + winningInnerMostSegment.text);
// Set things so power and spin button can be clicked again.
wheelSpinning = false;
// Remove all colours from the power level indicators.
document.getElementById('pw1').className = "";
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";
}
// ================================================================================================================
// FUNCTIONS FOR power controls below (All this is not necessary to actually create and spin a wheel)....
// Vars used by the code in this page to do power controls.
var wheelPower = 0;
var wheelSpinning = false;
// -------------------------------------------------------
// Function to handle the onClick on the power buttons.
// -------------------------------------------------------
function powerSelected(powerLevel)
{
// Ensure that power can't be changed while wheel is spinning.
if (wheelSpinning == false)
{
// Reset all to grey incase this is not the first time the user has selected the power.
document.getElementById('pw1').className = "";
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";
// Now light up all cells below-and-including the one selected by changing the class.
if (powerLevel >= 1)
{
document.getElementById('pw1').className = "pw1";
}
if (powerLevel >= 2)
{
document.getElementById('pw2').className = "pw2";
}
if (powerLevel >= 3)
{
document.getElementById('pw3').className = "pw3";
}
// Set wheelPower var used when spin button is clicked.
wheelPower = powerLevel;
// Light up the spin button by changing it's source image and adding a clickable class to it.
document.getElementById('spin_button').src = "spin_on.png";
document.getElementById('spin_button').className = "clickable";
}
}
function resetWheel()
{
outerWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
outerWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
outerWheel.draw();
innerWheel.rotationAngle = outerWheel.rotationAngle; // Call draw to render changes to the wheel.
innerWheel.draw(false);
innerMostWheel.rotationAngle = innerWheel.rotationAngle;
innerMostWheel.draw(false);
document.getElementById('pw1').className = ""; // Remove all colours from the power level indicators.
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";
wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
}
// -------------------------------------------------------
// Click handler for spin button.
// -------------------------------------------------------
function startSpin()
{
if (wheelSpinning == false)
{
if (wheelPower == 1)
{
outerWheel.animation.spins = 3; // Number of spins and/or duration can be altered to make the wheel
}
else if (wheelPower == 2)
{
outerWheel.animation.spins = 8;
}
else if (wheelPower == 3)
{
outerWheel.animation.spins = 15;
}
// Disable the spin button so can't click again while wheel is spinning.
document.getElementById('spin_button').src = "spin_off.png";
document.getElementById('spin_button').className = "";
// Begin the spin animation by calling startAnimation on the wheel object.
outerWheel.startAnimation(0)
innerWheel.startAnimation(1);
innerMostWheel.startAnimation(2);
// Set to true so that power can't be changed and spin button re-enabled during
// the current animation. The user will have to reset before spinning again.
wheelSpinning = true;
}
}
</script>
</body>