├── LICENSE ├── README.md ├── Winwheel.js ├── Winwheel.min.js └── examples ├── .gitignore ├── basic_code_wheel ├── index.html ├── main.css ├── spin_off.png ├── spin_on.png └── wheel_back.png ├── basic_image_wheel ├── index.html ├── main.css ├── planes.png ├── spin_off.png ├── spin_on.png └── wheel_back.png ├── continuous_spining_wheel ├── index.html └── main.css ├── hollow_wheel ├── index.html ├── main.css ├── spin_off.png ├── spin_on.png └── wheel_back.png ├── one_image_per_segment ├── alex.png ├── bruce.png ├── index.html ├── jane.png ├── main.css ├── mary.png ├── rose.png ├── sarah.png ├── spin_off.png ├── spin_on.png ├── steve.png ├── tom.png └── wheel_back.png ├── pins_and_sound_wheel ├── index.html ├── main.css ├── spin_off.png ├── spin_on.png ├── tick.mp3 └── wheel_back.png ├── responsive_wheel ├── index.html └── main.css ├── two_part_wheel ├── index.html ├── main.css ├── spin_off.png ├── spin_on.png └── wheel_back.png └── wheel_of_fortune ├── index.html ├── main.css ├── spin_off.png ├── spin_on.png ├── tick.mp3 └── wheel_back.png /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2012-2019 Douglas McKechie 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # javascript-winwheel 2 | Create spinning prize wheels on HTML canvas with Winwheel.js 3 | 4 | ## Description 5 | Winwheel.js is a feature packed JavaScript library that allows you to easily create HTML5 canvas Winning / Prize Wheels, Pie graphs and other things using a highly configurable JavaScript class. 6 | 7 | Wheels can be animated using GreenSock's Animation Platform (TweenMax.js) which contain easing functions and many other powerful animation features. 8 | 9 | Winwheel.js Features Include: 10 | * Easy to use, highly configurable JavaScript classes. 11 | * Draw wheels using code generated segments or graphically rich images. 12 | * Responsive features so wheels display correctly on different sized devices. 13 | * Numerous text orientation, direction, size and colour options. 14 | * Random or Pre-calculated prize stopping location. 15 | * Play sounds while the wheel is spinning including a "tick" sound. 16 | * Ability to get the segment the user clicked upon. 17 | * Fully commented source code. Plenty of tutorials and other documentation. 18 | * Winwheel.js is free to use with an open source license. 19 | 20 | ## Example 21 | ```javascript 22 | let theWheel = new Winwheel({ 23 | 'numSegments' : 4, 24 | 'segments' : 25 | [ 26 | {'fillStyle' : '#eae56f', 'text' : 'Prize One'}, 27 | {'fillStyle' : '#89f26e', 'text' : 'Prize Two'}, 28 | {'fillStyle' : '#7de6ef', 'text' : 'Prize Three'}, 29 | {'fillStyle' : '#e7706f', 'text' : 'Prize Four'} 30 | ], 31 | 'animation' : 32 | { 33 | 'type' : 'spinToStop', 34 | 'duration' : 5, 35 | 'spins' : 8 36 | } 37 | }); 38 | ``` 39 | 40 | ## More examples 41 | See the /examples folder for examples of some of the types of things you can create with Winwheel.js, to see these examples in action please visit the examples section on my website http://dougtesting.net/winwheel/examples 42 | 43 | ## Tutorials and other documentation 44 | Please visit http://dougtesting.net/winwheel/docs to see a complete set of tutorials on how to use Winwheel.js as well as other documentation such as class references. 45 | 46 | ## Maintainer 47 | Douglas McKechie https://github.com/zarocknz 48 | 49 | ## Please note 50 | I am not planning to do any further work on this library as my day job keeps me very busy and after 7 years of Winwheel I would rather spend 51 | any spare time I do have for personal coding on other projects. 52 | 53 | So this means if you would like a version of Winwheel.js for your current JavaScript framework of choice its up to you or others in the community 54 | to create it. If you create one perhaps open an Issue with the details so others can find and use it. Thanks. 55 | 56 | You are welcome to ask questions using the Issues feature of Github, but please don't be offended if I take quite a long time to respond to them. To be honest its probably quicker to ask the Stackoverflow community for help https://stackoverflow.com/search?tab=newest&q=Winwheel 57 | -------------------------------------------------------------------------------- /Winwheel.min.js: -------------------------------------------------------------------------------- 1 | function Winwheel(a,c){defaultOptions={canvasId:"canvas",centerX:null,centerY:null,outerRadius:null,innerRadius:0,numSegments:1,drawMode:"code",rotationAngle:0,textFontFamily:"Arial",textFontSize:20,textFontWeight:"bold",textOrientation:"horizontal",textAlignment:"center",textDirection:"normal",textMargin:null,textFillStyle:"black",textStrokeStyle:null,textLineWidth:1,fillStyle:"silver",strokeStyle:"black",lineWidth:1,clearTheCanvas:!0,imageOverlay:!1,drawText:!0,pointerAngle:0,wheelImage:null,imageDirection:"N", 2 | responsive:!1,scaleFactor:1};for(var b in defaultOptions)this[b]=null!=a&&"undefined"!==typeof a[b]?a[b]:defaultOptions[b];if(null!=a)for(var d in a)"undefined"===typeof this[d]&&(this[d]=a[d]);this.canvasId?(this.canvas=document.getElementById(this.canvasId))?(null==this.centerX&&(this.centerX=this.canvas.width/2),null==this.centerY&&(this.centerY=this.canvas.height/2),null==this.outerRadius&&(this.outerRadius=this.canvas.widthc;d--)this.segments[d]=this.segments[d-1];this.segments[c]=b;b=c}else this.segments[this.numSegments]=b,b=this.numSegments;this.updateSegmentSizes();return this.segments[b]}; 31 | Winwheel.prototype.setCanvasId=function(a){if(a){if(this.canvasId=a,this.canvas=document.getElementById(this.canvasId))this.ctx=this.canvas.getContext("2d")}else this.canvas=this.ctx=this.canvasId=null};Winwheel.prototype.deleteSegment=function(a){if(1d){var n=b.x-d;d="R"}else n=d-b.x,d="L";if(b.y>e){var r=b.y-e;e="B"}else r=e-b.y,e="T";var f=180*Math.atan(r/n)/Math.PI;b=0;n=Math.sqrt(r*r+n*n);"T"==e&&"R"==d?b=Math.round(90-f):"B"==e&&"R"==d?b=Math.round(f+90):"B"==e&&"L"==d?b=Math.round(90-f+180):"T"==e&&"L"== 34 | d&&(b=Math.round(f+270));0!=this.rotationAngle&&(d=this.getRotationPosition(),b-=d,0>b&&(b=360-Math.abs(b)));d=null;for(e=1;e<=this.numSegments;e++)if(b>=this.segments[e].startAngle&&b<=this.segments[e].endAngle&&n>=h&&n<=t){d=e;break}return d};Winwheel.prototype.getIndicatedSegment=function(){var a=this.getIndicatedSegmentNumber();return this.segments[a]}; 35 | Winwheel.prototype.getIndicatedSegmentNumber=function(){var a=0,c=this.getRotationPosition();c=Math.floor(this.pointerAngle-c);0>c&&(c=360-Math.abs(c));for(var b=1;b=this.segments[b].startAngle&&c<=this.segments[b].endAngle){a=b;break}return a}; 36 | Winwheel.prototype.getCurrentPinNumber=function(){var a=0;if(this.pins){var c=this.getRotationPosition();c=Math.floor(this.pointerAngle-c);0>c&&(c=360-Math.abs(c));for(var b=360/this.pins.number,d=0,e=0;e=d&&c<=d+b){a=e;break}d+=b}"clockwise"==this.animation.direction&&(a++,a>this.pins.number&&(a=0))}return a};Winwheel.prototype.getRotationPosition=function(){var a=this.rotationAngle;0<=a?360a&&(a-=360*Math.ceil(a/360)),a=360+a);return a}; 37 | Winwheel.prototype.startAnimation=function(){if(this.animation){this.computeAnimation();winwheelToDrawDuringAnimation=this;var a=Array(null);a[this.animation.propertyName]=this.animation.propertyValue;a.yoyo=this.animation.yoyo;a.repeat=this.animation.repeat;a.ease=this.animation.easing;a.onUpdate=winwheelAnimationLoop;a.onComplete=winwheelStopAnimation;this.tween=TweenMax.to(this,this.animation.duration,a)}}; 38 | Winwheel.prototype.stopAnimation=function(a){winwheelToDrawDuringAnimation&&(winwheelToDrawDuringAnimation.tween&&winwheelToDrawDuringAnimation.tween.kill(),winwheelStopAnimation(a));winwheelToDrawDuringAnimation=this};Winwheel.prototype.pauseAnimation=function(){this.tween&&this.tween.pause()};Winwheel.prototype.resumeAnimation=function(){this.tween&&this.tween.play()}; 39 | Winwheel.prototype.computeAnimation=function(){this.animation&&("spinOngoing"==this.animation.type?(this.animation.propertyName="rotationAngle",null==this.animation.spins&&(this.animation.spins=5),null==this.animation.repeat&&(this.animation.repeat=-1),null==this.animation.easing&&(this.animation.easing="Linear.easeNone"),null==this.animation.yoyo&&(this.animation.yoyo=!1),this.animation.propertyValue=360*this.animation.spins,"anti-clockwise"==this.animation.direction&&(this.animation.propertyValue= 40 | 0-this.animation.propertyValue)):"spinToStop"==this.animation.type?(this.animation.propertyName="rotationAngle",null==this.animation.spins&&(this.animation.spins=5),null==this.animation.repeat&&(this.animation.repeat=0),null==this.animation.easing&&(this.animation.easing="Power3.easeOut"),this.animation._stopAngle=null==this.animation.stopAngle?Math.floor(359*Math.random()):360-this.animation.stopAngle+this.pointerAngle,null==this.animation.yoyo&&(this.animation.yoyo=!1),this.animation.propertyValue= 41 | 360*this.animation.spins,"anti-clockwise"==this.animation.direction?(this.animation.propertyValue=0-this.animation.propertyValue,this.animation.propertyValue-=360-this.animation._stopAngle):this.animation.propertyValue+=this.animation._stopAngle):"spinAndBack"==this.animation.type&&(this.animation.propertyName="rotationAngle",null==this.animation.spins&&(this.animation.spins=5),null==this.animation.repeat&&(this.animation.repeat=1),null==this.animation.easing&&(this.animation.easing="Power2.easeInOut"), 42 | null==this.animation.yoyo&&(this.animation.yoyo=!0),this.animation._stopAngle=null==this.animation.stopAngle?0:360-this.animation.stopAngle,this.animation.propertyValue=360*this.animation.spins,"anti-clockwise"==this.animation.direction?(this.animation.propertyValue=0-this.animation.propertyValue,this.animation.propertyValue-=360-this.animation._stopAngle):this.animation.propertyValue+=this.animation._stopAngle))}; 43 | Winwheel.prototype.getRandomForSegment=function(a){var c=0;if(a)if("undefined"!==typeof this.segments[a]){var b=this.segments[a].startAngle;a=this.segments[a].endAngle-b-2;0=a&&(c=a/100*360);return c} 48 | function winwheelAnimationLoop(){if(winwheelToDrawDuringAnimation){0!=winwheelToDrawDuringAnimation.animation.clearTheCanvas&&winwheelToDrawDuringAnimation.ctx.clearRect(0,0,winwheelToDrawDuringAnimation.canvas.width,winwheelToDrawDuringAnimation.canvas.height);var a=winwheelToDrawDuringAnimation.animation.callbackBefore,c=winwheelToDrawDuringAnimation.animation.callbackAfter;null!=a&&("function"===typeof a?a():eval(a));winwheelToDrawDuringAnimation.draw(!1);null!=c&&("function"===typeof c?c():eval(c)); 49 | winwheelToDrawDuringAnimation.animation.callbackSound&&winwheelTriggerSound()}} 50 | function winwheelTriggerSound(){0==winwheelToDrawDuringAnimation.hasOwnProperty("_lastSoundTriggerNumber")&&(winwheelToDrawDuringAnimation._lastSoundTriggerNumber=0);var a=winwheelToDrawDuringAnimation.animation.callbackSound;var c="pin"==winwheelToDrawDuringAnimation.animation.soundTrigger?winwheelToDrawDuringAnimation.getCurrentPinNumber():winwheelToDrawDuringAnimation.getIndicatedSegmentNumber();c!=winwheelToDrawDuringAnimation._lastSoundTriggerNumber&&("function"===typeof a?a():eval(a),winwheelToDrawDuringAnimation._lastSoundTriggerNumber= 51 | c)}var winwheelToDrawDuringAnimation=null;function winwheelStopAnimation(a){0!=a&&(a=winwheelToDrawDuringAnimation.animation.callbackFinished,null!=a&&("function"===typeof a?a(winwheelToDrawDuringAnimation.getIndicatedSegment()):eval(a)))}var winhweelAlreadyDrawn=!1; 52 | function winwheelLoadedImage(){if(0==winhweelAlreadyDrawn){for(var a=0,c=1;c<=winwheelToDrawDuringAnimation.numSegments;c++)null!=winwheelToDrawDuringAnimation.segments[c].imgData&&winwheelToDrawDuringAnimation.segments[c].imgData.height&&a++;a==winwheelToDrawDuringAnimation.numSegments&&(winhweelAlreadyDrawn=!0,winwheelToDrawDuringAnimation.draw())}} 53 | function winwheelResize(){var a=40;"undefined"!==typeof winwheelToDrawDuringAnimation._responsiveMargin&&(a=winwheelToDrawDuringAnimation._responsiveMargin);var c=window.innerWidth-a,b=winwheelToDrawDuringAnimation._responsiveMinWidth;a=winwheelToDrawDuringAnimation._responsiveMinHeight;cwinwheelToDrawDuringAnimation._originalCanvasWidth&&(c=winwheelToDrawDuringAnimation._originalCanvasWidth);c/=winwheelToDrawDuringAnimation._originalCanvasWidth;winwheelToDrawDuringAnimation.canvas.width= 54 | winwheelToDrawDuringAnimation._originalCanvasWidth*c;winwheelToDrawDuringAnimation._responsiveScaleHeight&&(b=winwheelToDrawDuringAnimation._originalCanvasHeight*c,bwinwheelToDrawDuringAnimation._originalCanvasHeight&&(b=winwheelToDrawDuringAnimation._originalCanvasHeight),winwheelToDrawDuringAnimation.canvas.height=b);winwheelToDrawDuringAnimation.scaleFactor=c;winwheelToDrawDuringAnimation.draw()}; 55 | -------------------------------------------------------------------------------- /examples/.gitignore: -------------------------------------------------------------------------------- 1 | experiments/ 2 | multiwheel/ -------------------------------------------------------------------------------- /examples/basic_code_wheel/index.html: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | HTML5 Canvas Winning Wheel 30 | 31 | 32 | 33 | 34 | 35 |
36 |

Winwheel.js example wheel - basic code wheel

37 |

Here is an example of a basic code drawn wheel which spins to a stop with the prize won alerted to the user.

38 |
39 |

Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.

40 |
41 | 42 | 43 | 67 | 72 | 73 |
44 |
45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
Power
High
Med
Low
61 |
62 | Spin 63 |

64 |   Play Again
     (reset) 65 |
66 | 		68 | 69 |

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

70 | 71 |
74 |
75 | 195 | 196 | 197 | -------------------------------------------------------------------------------- /examples/basic_code_wheel/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Description: 3 | Contains all the styles for the winning wheel page. 4 | 5 | Verison History: 6 | 2012-01-28, Douglas McKechie 7 | - Created based off earlier version. 8 | 9 | 2015-09-26, Douglas McKechie 10 | - Minor updates for the 2.0 winwheel example. 11 | */ 12 | 13 | body 14 | { 15 | font-family: arial; 16 | } 17 | 18 | /* Sets the background image for the wheel */ 19 | td.the_wheel 20 | { 21 | background-image: url(./wheel_back.png); 22 | background-position: center; 23 | background-repeat: none; 24 | } 25 | 26 | /* Do some css reset on selected elements */ 27 | h1, p 28 | { 29 | margin: 0; 30 | } 31 | 32 | div.power_controls 33 | { 34 | margin-right:70px; 35 | } 36 | 37 | div.html5_logo 38 | { 39 | margin-left:70px; 40 | } 41 | 42 | /* Styles for the power selection controls */ 43 | table.power 44 | { 45 | background-color: #cccccc; 46 | cursor: pointer; 47 | border:1px solid #333333; 48 | } 49 | 50 | table.power th 51 | { 52 | background-color: white; 53 | cursor: default; 54 | } 55 | 56 | td.pw1 57 | { 58 | background-color: #6fe8f0; 59 | } 60 | 61 | td.pw2 62 | { 63 | background-color: #86ef6f; 64 | } 65 | 66 | td.pw3 67 | { 68 | background-color: #ef6f6f; 69 | } 70 | 71 | /* Style applied to the spin button once a power has been selected */ 72 | .clickable 73 | { 74 | cursor: pointer; 75 | } 76 | 77 | /* Other misc styles */ 78 | .margin_bottom 79 | { 80 | margin-bottom: 5px; 81 | } -------------------------------------------------------------------------------- /examples/basic_code_wheel/spin_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/basic_code_wheel/spin_off.png -------------------------------------------------------------------------------- /examples/basic_code_wheel/spin_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/basic_code_wheel/spin_on.png -------------------------------------------------------------------------------- /examples/basic_code_wheel/wheel_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/basic_code_wheel/wheel_back.png -------------------------------------------------------------------------------- /examples/basic_image_wheel/index.html: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | HTML5 Canvas Winning Wheel 30 | 31 | 32 | 33 | 34 | 35 |
36 |

Winwheel.js example wheel - basic image wheel

37 |

Here is an example of a basic image drawn wheel, where the entire face of the wheel has been created out of a graphically rich image.

38 |
39 |

Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.

40 |
41 | 42 | 43 | 67 | 72 | 73 |
44 |
45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
Power
High
Med
Low
61 |
62 | Spin 63 |

64 |   Play Again
     (reset) 65 |
66 | 		68 | 69 |

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

70 | 71 |
74 |
75 | 216 | 217 | 218 | -------------------------------------------------------------------------------- /examples/basic_image_wheel/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Description: 3 | Contains all the styles for the winning wheel page. 4 | 5 | Verison History: 6 | 2012-01-28, Douglas McKechie 7 | - Created based off earlier version. 8 | 9 | 2015-09-26, Douglas McKechie 10 | - Minor updates for the 2.0 winwheel example. 11 | */ 12 | 13 | body 14 | { 15 | font-family: arial; 16 | } 17 | 18 | /* Sets the background image for the wheel */ 19 | td.the_wheel 20 | { 21 | background-image: url(./wheel_back.png); 22 | background-position: center; 23 | background-repeat: none; 24 | } 25 | 26 | /* Do some css reset on selected elements */ 27 | h1, p 28 | { 29 | margin: 0; 30 | } 31 | 32 | div.power_controls 33 | { 34 | margin-right:70px; 35 | } 36 | 37 | div.html5_logo 38 | { 39 | margin-left:70px; 40 | } 41 | 42 | /* Styles for the power selection controls */ 43 | table.power 44 | { 45 | background-color: #cccccc; 46 | cursor: pointer; 47 | border:1px solid #333333; 48 | } 49 | 50 | table.power th 51 | { 52 | background-color: white; 53 | cursor: default; 54 | } 55 | 56 | td.pw1 57 | { 58 | background-color: #6fe8f0; 59 | } 60 | 61 | td.pw2 62 | { 63 | background-color: #86ef6f; 64 | } 65 | 66 | td.pw3 67 | { 68 | background-color: #ef6f6f; 69 | } 70 | 71 | /* Style applied to the spin button once a power has been selected */ 72 | .clickable 73 | { 74 | cursor: pointer; 75 | } 76 | 77 | /* Other misc styles */ 78 | .margin_bottom 79 | { 80 | margin-bottom: 5px; 81 | } -------------------------------------------------------------------------------- /examples/basic_image_wheel/planes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/basic_image_wheel/planes.png -------------------------------------------------------------------------------- /examples/basic_image_wheel/spin_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/basic_image_wheel/spin_off.png -------------------------------------------------------------------------------- /examples/basic_image_wheel/spin_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/basic_image_wheel/spin_on.png -------------------------------------------------------------------------------- /examples/basic_image_wheel/wheel_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/basic_image_wheel/wheel_back.png -------------------------------------------------------------------------------- /examples/continuous_spining_wheel/index.html: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | HTML5 Canvas Winning Wheel 30 | 31 | 32 | 33 | 34 | 35 |
36 |

Winwheel.js example wheel - ongoing spin wheel

37 |

Example of a continuously spinning wheel - uses the spinOngoing animation type

38 |
39 | 40 |

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

41 | 42 |
43 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /examples/continuous_spining_wheel/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Description: 3 | Contains all the styles for the winning wheel page. 4 | 5 | Verison History: 6 | 2012-01-28, Douglas McKechie 7 | - Created based off earlier version. 8 | 9 | 2015-09-26, Douglas McKechie 10 | - Minor updates for the 2.0 winwheel example. 11 | */ 12 | 13 | body 14 | { 15 | font-family: arial; 16 | } 17 | 18 | /* Sets the background image for the wheel */ 19 | td.the_wheel 20 | { 21 | background-image: url(./wheel_back.png); 22 | background-position: center; 23 | background-repeat: none; 24 | } 25 | 26 | /* Do some css reset on selected elements */ 27 | h1, p 28 | { 29 | margin: 0; 30 | } 31 | 32 | div.power_controls 33 | { 34 | margin-right:70px; 35 | } 36 | 37 | div.html5_logo 38 | { 39 | margin-left:70px; 40 | } 41 | 42 | /* Styles for the power selection controls */ 43 | table.power 44 | { 45 | background-color: #cccccc; 46 | cursor: pointer; 47 | border:1px solid #333333; 48 | } 49 | 50 | table.power th 51 | { 52 | background-color: white; 53 | cursor: default; 54 | } 55 | 56 | td.pw1 57 | { 58 | background-color: #6fe8f0; 59 | } 60 | 61 | td.pw2 62 | { 63 | background-color: #86ef6f; 64 | } 65 | 66 | td.pw3 67 | { 68 | background-color: #ef6f6f; 69 | } 70 | 71 | /* Style applied to the spin button once a power has been selected */ 72 | .clickable 73 | { 74 | cursor: pointer; 75 | } 76 | 77 | /* Other misc styles */ 78 | .margin_bottom 79 | { 80 | margin-bottom: 5px; 81 | } -------------------------------------------------------------------------------- /examples/hollow_wheel/index.html: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | HTML5 Canvas Winning Wheel 30 | 31 | 32 | 33 | 34 | 35 |
36 |

Winwheel.js example wheel - hollow wheel

37 |

Here is an example of a basic hollow (doughnut) code drawn wheel which spins to a stop with the prize won alerted to the user.

38 |
39 |

40 | The point of this example is to show how with a hollow wheel you can put text or other visual elements on the background image 41 | and it will show in the middle of the wheel and stay stationary when the wheel spins. 42 |

43 |
44 |

Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.

45 |
46 | 47 | 48 | 72 | 77 | 78 |
49 |
50 |
51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
Power
High
Med
Low
66 |
67 | Spin 68 |

69 |   Play Again
     (reset) 70 |
71 | 		73 | 74 |

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

75 | 76 |
79 |
80 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /examples/hollow_wheel/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Description: 3 | Contains all the styles for the winning wheel page. 4 | 5 | Verison History: 6 | 2012-01-28, Douglas McKechie 7 | - Created based off earlier version. 8 | 9 | 2015-09-26, Douglas McKechie 10 | - Minor updates for the 2.0 winwheel example. 11 | */ 12 | 13 | body 14 | { 15 | font-family: arial; 16 | } 17 | 18 | /* Sets the background image for the wheel */ 19 | td.the_wheel 20 | { 21 | background-image: url(./wheel_back.png); 22 | background-position: center; 23 | background-repeat: none; 24 | } 25 | 26 | /* Do some css reset on selected elements */ 27 | h1, p 28 | { 29 | margin: 0; 30 | } 31 | 32 | div.power_controls 33 | { 34 | margin-right:70px; 35 | } 36 | 37 | div.html5_logo 38 | { 39 | margin-left:70px; 40 | } 41 | 42 | /* Styles for the power selection controls */ 43 | table.power 44 | { 45 | background-color: #cccccc; 46 | cursor: pointer; 47 | border:1px solid #333333; 48 | } 49 | 50 | table.power th 51 | { 52 | background-color: white; 53 | cursor: default; 54 | } 55 | 56 | td.pw1 57 | { 58 | background-color: #6fe8f0; 59 | } 60 | 61 | td.pw2 62 | { 63 | background-color: #86ef6f; 64 | } 65 | 66 | td.pw3 67 | { 68 | background-color: #ef6f6f; 69 | } 70 | 71 | /* Style applied to the spin button once a power has been selected */ 72 | .clickable 73 | { 74 | cursor: pointer; 75 | } 76 | 77 | /* Other misc styles */ 78 | .margin_bottom 79 | { 80 | margin-bottom: 5px; 81 | } -------------------------------------------------------------------------------- /examples/hollow_wheel/spin_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/hollow_wheel/spin_off.png -------------------------------------------------------------------------------- /examples/hollow_wheel/spin_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/hollow_wheel/spin_on.png -------------------------------------------------------------------------------- /examples/hollow_wheel/wheel_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/hollow_wheel/wheel_back.png -------------------------------------------------------------------------------- /examples/one_image_per_segment/alex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/one_image_per_segment/alex.png -------------------------------------------------------------------------------- /examples/one_image_per_segment/bruce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/one_image_per_segment/bruce.png -------------------------------------------------------------------------------- /examples/one_image_per_segment/index.html: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | HTML5 Canvas Winning Wheel 30 | 31 | 32 | 33 | 34 | 35 |
36 |

Winwheel.js example wheel - one image per segment

37 |
38 |

Here is an example of a wheel created using one image per segment, also includes code drawn text.

39 |
40 |

Choose a power setting then press the Spin button.

41 |
42 | 43 | 44 | 68 | 73 | 74 |
45 |
46 |
47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
Power
High
Med
Low
62 |
63 | Spin 64 |

65 |   Play Again
     (reset) 66 |
67 | 		69 | 70 |

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

71 | 72 |
75 |
76 | 205 | 206 | 207 | -------------------------------------------------------------------------------- /examples/one_image_per_segment/jane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/one_image_per_segment/jane.png -------------------------------------------------------------------------------- /examples/one_image_per_segment/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Description: 3 | Contains all the styles for the winning wheel page. 4 | 5 | Verison History: 6 | 2012-01-28, Douglas McKechie 7 | - Created based off earlier version. 8 | 9 | 2015-09-26, Douglas McKechie 10 | - Minor updates for the 2.0 winwheel example. 11 | */ 12 | 13 | body 14 | { 15 | font-family: arial; 16 | } 17 | 18 | /* Sets the background image for the wheel */ 19 | td.the_wheel 20 | { 21 | background-image: url(./wheel_back.png); 22 | background-position: center; 23 | background-repeat: no-repeat; 24 | } 25 | 26 | /* Do some css reset on selected elements */ 27 | h1, p 28 | { 29 | margin: 0; 30 | } 31 | 32 | div.power_controls 33 | { 34 | margin-right:70px; 35 | } 36 | 37 | div.html5_logo 38 | { 39 | margin-left:70px; 40 | } 41 | 42 | /* Styles for the power selection controls */ 43 | table.power 44 | { 45 | background-color: #cccccc; 46 | cursor: pointer; 47 | border:1px solid #333333; 48 | } 49 | 50 | table.power th 51 | { 52 | background-color: white; 53 | cursor: default; 54 | } 55 | 56 | td.pw1 57 | { 58 | background-color: #6fe8f0; 59 | } 60 | 61 | td.pw2 62 | { 63 | background-color: #86ef6f; 64 | } 65 | 66 | td.pw3 67 | { 68 | background-color: #ef6f6f; 69 | } 70 | 71 | /* Style applied to the spin button once a power has been selected */ 72 | .clickable 73 | { 74 | cursor: pointer; 75 | } 76 | 77 | /* Other misc styles */ 78 | .margin_bottom 79 | { 80 | margin-bottom: 5px; 81 | } -------------------------------------------------------------------------------- /examples/one_image_per_segment/mary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/one_image_per_segment/mary.png -------------------------------------------------------------------------------- /examples/one_image_per_segment/rose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/one_image_per_segment/rose.png -------------------------------------------------------------------------------- /examples/one_image_per_segment/sarah.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/one_image_per_segment/sarah.png -------------------------------------------------------------------------------- /examples/one_image_per_segment/spin_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/one_image_per_segment/spin_off.png -------------------------------------------------------------------------------- /examples/one_image_per_segment/spin_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/one_image_per_segment/spin_on.png -------------------------------------------------------------------------------- /examples/one_image_per_segment/steve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/one_image_per_segment/steve.png -------------------------------------------------------------------------------- /examples/one_image_per_segment/tom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/one_image_per_segment/tom.png -------------------------------------------------------------------------------- /examples/one_image_per_segment/wheel_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/one_image_per_segment/wheel_back.png -------------------------------------------------------------------------------- /examples/pins_and_sound_wheel/index.html: -------------------------------------------------------------------------------- 1 | 32 | 33 | 34 | HTML5 Canvas Winning Wheel 35 | 36 | 37 | 38 | 39 | 40 |
41 |

Winwheel.js example wheel - pins and sound wheel

42 |

43 | Here is an example of a wheel that contains pins around the outside (these represent the metal rods real prizewheels normally have). 44 |
Also this wheel plays a tick sound when one of the pins passes the pointer. 45 |

46 |
47 |

Choose a power setting then press the Spin button. Tick sound will play when a pin passes the pointer.

48 |
49 | 50 | 51 | 75 | 80 | 81 |
52 |
53 |
54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
Power
High
Med
Low
69 |
70 | Spin 71 |

72 |   Play Again
     (reset) 73 |
74 | 		76 | 77 |

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

78 | 79 |
82 |
83 | 229 | 230 | 231 | -------------------------------------------------------------------------------- /examples/pins_and_sound_wheel/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Description: 3 | Contains all the styles for the winning wheel page. 4 | 5 | Verison History: 6 | 2012-01-28, Douglas McKechie 7 | - Created based off earlier version. 8 | 9 | 2015-09-26, Douglas McKechie 10 | - Minor updates for the 2.0 winwheel example. 11 | */ 12 | 13 | body 14 | { 15 | font-family: arial; 16 | } 17 | 18 | /* Sets the background image for the wheel */ 19 | td.the_wheel 20 | { 21 | background-image: url(./wheel_back.png); 22 | background-position: center; 23 | background-repeat: none; 24 | } 25 | 26 | /* Do some css reset on selected elements */ 27 | h1, p 28 | { 29 | margin: 0; 30 | } 31 | 32 | div.power_controls 33 | { 34 | margin-right:70px; 35 | } 36 | 37 | div.html5_logo 38 | { 39 | margin-left:70px; 40 | } 41 | 42 | /* Styles for the power selection controls */ 43 | table.power 44 | { 45 | background-color: #cccccc; 46 | cursor: pointer; 47 | border:1px solid #333333; 48 | } 49 | 50 | table.power th 51 | { 52 | background-color: white; 53 | cursor: default; 54 | } 55 | 56 | td.pw1 57 | { 58 | background-color: #6fe8f0; 59 | } 60 | 61 | td.pw2 62 | { 63 | background-color: #86ef6f; 64 | } 65 | 66 | td.pw3 67 | { 68 | background-color: #ef6f6f; 69 | } 70 | 71 | /* Style applied to the spin button once a power has been selected */ 72 | .clickable 73 | { 74 | cursor: pointer; 75 | } 76 | 77 | /* Other misc styles */ 78 | .margin_bottom 79 | { 80 | margin-bottom: 5px; 81 | } -------------------------------------------------------------------------------- /examples/pins_and_sound_wheel/spin_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/pins_and_sound_wheel/spin_off.png -------------------------------------------------------------------------------- /examples/pins_and_sound_wheel/spin_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/pins_and_sound_wheel/spin_on.png -------------------------------------------------------------------------------- /examples/pins_and_sound_wheel/tick.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/pins_and_sound_wheel/tick.mp3 -------------------------------------------------------------------------------- /examples/pins_and_sound_wheel/wheel_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/pins_and_sound_wheel/wheel_back.png -------------------------------------------------------------------------------- /examples/responsive_wheel/index.html: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | 30 | HTML5 Canvas Winning Wheel 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |

Winwheel.js - responsive wheel example

39 |
40 |

Here is an example of a responsive Winwheel.js which resizes the canvas and wheel to fit the window / device viewed on.

41 |
42 |

43 | This can be achieved by setting the responsive parameter on the wheel and optionally a several data-attributes 44 | on the canvas. 45 |

46 |
47 | 48 | 49 |

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

50 | 51 |

52 |

Tap the wheel to spin.

53 |
54 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /examples/responsive_wheel/main.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | font-family: arial; 4 | } 5 | 6 | /* Do some css reset on selected elements */ 7 | h1, p 8 | { 9 | margin: 0; 10 | } 11 | 12 | h1 { 13 | font-size: 1.5em; 14 | } 15 | 16 | p { 17 | font-size: 0.8em; 18 | } 19 | -------------------------------------------------------------------------------- /examples/two_part_wheel/index.html: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | HTML5 Canvas Winning Wheel 30 | 31 | 32 | 33 | 34 | 35 |
36 |

Winwheel.js example wheel - 2 part wheel

37 |

38 | Here is an example of a 2 part wheel, where there are 2 rings of segments. This is achieved by creating a second 39 | Winwheel object and positioning it over the top of the first wheel. One wheel acts as the "primary" and has the 40 | animation applied to it, the other wheel is the "secondary" which we just update during the animation loop to have 41 | the same rotation angle as the primary wheel. 42 |

43 |
44 |

45 | 2019-01-01 Note: Currently Winwheel.js does not support animating multiple independent wheels on the same page, 46 | nor do I really recommend trying to create games made up of multiple wheels. While I do know how to add multiwheel support to Winwheel.js, 47 | experience in helping people to do this over the last year or so has shown that, depending on the options used, the framerate is so bad with 48 | as little as three wheels that any game made does not look good and is almost unusable. Best to stick to single wheel uses of Winwheel.js for now. 49 |

50 |
51 |

Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.

52 |
53 | 54 | 55 | 77 | 82 | 83 |
56 |
57 |
58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
Power
High
Med
Low
73 |
74 | Spin 75 |
76 | 		78 | 79 |

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

80 | 81 |
84 |
85 | 242 | 243 | 244 | -------------------------------------------------------------------------------- /examples/two_part_wheel/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Description: 3 | Contains all the styles for the winning wheel page. 4 | 5 | Verison History: 6 | 2012-01-28, Douglas McKechie 7 | - Created based off earlier version. 8 | 9 | 2015-09-26, Douglas McKechie 10 | - Minor updates for the 2.0 winwheel example. 11 | */ 12 | 13 | body 14 | { 15 | font-family: arial; 16 | } 17 | 18 | /* Sets the background image for the wheel */ 19 | td.the_wheel 20 | { 21 | background-image: url(./wheel_back.png); 22 | background-position: center; 23 | background-repeat: none; 24 | } 25 | 26 | /* Do some css reset on selected elements */ 27 | h1, p 28 | { 29 | margin: 0; 30 | } 31 | 32 | div.power_controls 33 | { 34 | margin-right:70px; 35 | } 36 | 37 | div.html5_logo 38 | { 39 | margin-left:70px; 40 | } 41 | 42 | /* Styles for the power selection controls */ 43 | table.power 44 | { 45 | background-color: #cccccc; 46 | cursor: pointer; 47 | border:1px solid #333333; 48 | } 49 | 50 | table.power th 51 | { 52 | background-color: white; 53 | cursor: default; 54 | } 55 | 56 | td.pw1 57 | { 58 | background-color: #6fe8f0; 59 | } 60 | 61 | td.pw2 62 | { 63 | background-color: #86ef6f; 64 | } 65 | 66 | td.pw3 67 | { 68 | background-color: #ef6f6f; 69 | } 70 | 71 | /* Style applied to the spin button once a power has been selected */ 72 | .clickable 73 | { 74 | cursor: pointer; 75 | } 76 | 77 | /* Other misc styles */ 78 | .margin_bottom 79 | { 80 | margin-bottom: 5px; 81 | } -------------------------------------------------------------------------------- /examples/two_part_wheel/spin_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/two_part_wheel/spin_off.png -------------------------------------------------------------------------------- /examples/two_part_wheel/spin_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/two_part_wheel/spin_on.png -------------------------------------------------------------------------------- /examples/two_part_wheel/wheel_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/two_part_wheel/wheel_back.png -------------------------------------------------------------------------------- /examples/wheel_of_fortune/index.html: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | HTML5 Canvas Winning Wheel 30 | 31 | 32 | 33 | 34 | 35 |
36 |

Winwheel.js example wheel - wheel of fortune

37 |

Here is an example of a code-drawn Wheel of Fortune looking wheel which spins to a stop with the prize won alerted to the user.

38 |
39 |

40 | With some additional coding it could be made so that the prize won is added to a total after each spin rather than 41 | just alerting the prize to make a proper wheel of fortune like game. 42 |

43 |
44 |

Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.

45 |
46 | 47 | 48 | 72 | 77 | 78 |
49 |
50 |
51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
Power
High
Med
Low
66 |
67 | Spin 68 |

69 |   Play Again
     (reset) 70 |
71 | 		73 | 74 |

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

75 | 76 |
79 | 246 | 247 | 248 | -------------------------------------------------------------------------------- /examples/wheel_of_fortune/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Description: 3 | Contains all the styles for the winning wheel page. 4 | 5 | Verison History: 6 | 2012-01-28, Douglas McKechie 7 | - Created based off earlier version. 8 | 9 | 2015-09-26, Douglas McKechie 10 | - Minor updates for the 2.0 winwheel example. 11 | */ 12 | 13 | body 14 | { 15 | font-family: arial; 16 | } 17 | 18 | /* Sets the background image for the wheel */ 19 | td.the_wheel 20 | { 21 | background-image: url(./wheel_back.png); 22 | background-position: center; 23 | background-repeat: none; 24 | } 25 | 26 | /* Do some css reset on selected elements */ 27 | h1, p 28 | { 29 | margin: 0; 30 | } 31 | 32 | div.power_controls 33 | { 34 | margin-right:70px; 35 | } 36 | 37 | div.html5_logo 38 | { 39 | margin-left:70px; 40 | } 41 | 42 | /* Styles for the power selection controls */ 43 | table.power 44 | { 45 | background-color: #cccccc; 46 | cursor: pointer; 47 | border:1px solid #333333; 48 | } 49 | 50 | table.power th 51 | { 52 | background-color: white; 53 | cursor: default; 54 | } 55 | 56 | td.pw1 57 | { 58 | background-color: #6fe8f0; 59 | } 60 | 61 | td.pw2 62 | { 63 | background-color: #86ef6f; 64 | } 65 | 66 | td.pw3 67 | { 68 | background-color: #ef6f6f; 69 | } 70 | 71 | /* Style applied to the spin button once a power has been selected */ 72 | .clickable 73 | { 74 | cursor: pointer; 75 | } 76 | 77 | /* Other misc styles */ 78 | .margin_bottom 79 | { 80 | margin-bottom: 5px; 81 | } -------------------------------------------------------------------------------- /examples/wheel_of_fortune/spin_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/wheel_of_fortune/spin_off.png -------------------------------------------------------------------------------- /examples/wheel_of_fortune/spin_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/wheel_of_fortune/spin_on.png -------------------------------------------------------------------------------- /examples/wheel_of_fortune/tick.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/wheel_of_fortune/tick.mp3 -------------------------------------------------------------------------------- /examples/wheel_of_fortune/wheel_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/examples/wheel_of_fortune/wheel_back.png --------------------------------------------------------------------------------