spin the wheel html

Solutions on MaxInterview for spin the wheel html by the best coders in the world

Search
showing results for - "spin the wheel html"
Anastasia
01 May 2020
1// winwheel.js is the best js library to build a spin the wheel or wheel of fortune
2<!-- source=> http://dougtesting.net/home -->
3//download the library and you are ready to go
4<html>
5    <head>
6        <title>Wheel of fortune Wheel</title>
7        <script src='Winwheel.js'></script>
8    </head>
9    <body>
10        <canvas id='canvas' width='880' height='300'>
11            Canvas not supported, use another browser.
12        </canvas>
13        <script>
14            let theWheel = new Winwheel({
15                'outerRadius'     : 212,        // Set outer radius so wheel fits inside the background.
16                'innerRadius'     : 75,         // Make wheel hollow so segments dont go all way to center.
17                'textFontSize'    : 24,         // Set default font size for the segments.
18                'textOrientation' : 'vertical', // Make text vertial so goes down from the outside of wheel.
19                'textAlignment'   : 'outer',    // Align text to outside of wheel.
20                'numSegments'     : 24,         // Specify number of segments.
21                'segments'        :             // Define segments including colour and text.
22                [                               // font size and text colour overridden on backrupt segments.
23                   {'fillStyle' : '#ee1c24', 'text' : '300'},
24                   {'fillStyle' : '#3cb878', 'text' : '450'},
25                   {'fillStyle' : '#f6989d', 'text' : '600'},
26                   {'fillStyle' : '#00aef0', 'text' : '750'},
27                   {'fillStyle' : '#f26522', 'text' : '500'},
28                   {'fillStyle' : '#000000', 'text' : 'BANKRUPT', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'},
29                   {'fillStyle' : '#e70697', 'text' : '3000'},
30                   {'fillStyle' : '#fff200', 'text' : '600'},
31                   {'fillStyle' : '#f6989d', 'text' : '700'},
32                   {'fillStyle' : '#ee1c24', 'text' : '350'},
33                   {'fillStyle' : '#3cb878', 'text' : '500'},
34                   {'fillStyle' : '#f26522', 'text' : '800'},
35                   {'fillStyle' : '#a186be', 'text' : '300'},
36                   {'fillStyle' : '#fff200', 'text' : '400'},
37                   {'fillStyle' : '#00aef0', 'text' : '650'},
38                   {'fillStyle' : '#ee1c24', 'text' : '1000'},
39                   {'fillStyle' : '#f6989d', 'text' : '500'},
40                   {'fillStyle' : '#f26522', 'text' : '400'},
41                   {'fillStyle' : '#3cb878', 'text' : '900'},
42                   {'fillStyle' : '#000000', 'text' : 'BANKRUPT', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'},
43                   {'fillStyle' : '#a186be', 'text' : '600'},
44                   {'fillStyle' : '#fff200', 'text' : '700'},
45                   {'fillStyle' : '#00aef0', 'text' : '800'},
46                   {'fillStyle' : '#ffffff', 'text' : 'LOOSE TURN', 'textFontSize' : 12}
47                ],
48                'animation' :           // Specify the animation to use.
49                {
50                    'type'     : 'spinToStop',
51                    'duration' : 10,
52                    'spins'    : 3,
53                    'callbackFinished' : alertPrize,  // Function to call whent the spinning has stopped.
54                    'callbackSound'    : playSound,   // Called when the tick sound is to be played.
55                    'soundTrigger'     : 'pin'        // Specify pins are to trigger the sound.
56                },
57                'pins' :                // Turn pins on.
58                {
59                    'number'     : 24,
60                    'fillStyle'  : 'silver',
61                    'outerRadius': 4,
62                }
63            });
64 
65            // Loads the tick audio sound in to an audio object.
66            let audio = new Audio('tick.mp3');
67 
68            // This function is called when the sound is to be played.
69            function playSound()
70            {
71                // Stop and rewind the sound if it already happens to be playing.
72                audio.pause();
73                audio.currentTime = 0;
74 
75                // Play the sound.
76                audio.play();
77            }
78 
79            // Called when the animation has finished.
80            function alertPrize(indicatedSegment)
81            {
82                // Display different message if win/lose/backrupt.
83                if (indicatedSegment.text == 'LOOSE TURN') {
84                    alert('Sorry but you loose a turn.');
85                } else if (indicatedSegment.text == 'BANKRUPT') {
86                    alert('Oh no, you have gone BANKRUPT!');
87                } else {
88                    alert("You have won " + indicatedSegment.text);
89                }
90            }
91        </script>
92    </body>
93</html>
source
Davide
18 Jul 2019
1aaafsdfsfdsfsfsdfdsfs
similar questions
circular progress bar html csshow to make spinner in htmlshow spinner during api request pure html and jqueryfunction to do when the html done loading
queries leading to this page
javascript spinning wheelhow to make a spin wheel in htmlhow to create a spinning wheel in htmljavascript spin the wheelwheel of fortune javascriptspin wheel in htmlwheel spinhtml wheel spinnerjquery spinning wheel examplehtml spinner wheelspinner wheel css htmlspin the wheel html 5fortune spinner jsspin the wheelcustom spin wheel html codehow to create a spin the wheel game in a website using html nad cssspin wheelspin the wheel html5wheel of fortune jsspin the wheel htmlspinner wheelhow to make spinning wheel in htmlhow to create a number wheel in html cssjavascript wheel of fortunecreate spinner wheel using html and cssspin the wheel html codespin wheel htmlspin wheel html cssjavascript wheel spinspin wheel game javascripthtml5 spin the wheelhtml loading wheelspinning wheel html codespinning wheel htmlwheel spinner javascriptspin wheel html codehow to create a spinning wheel using htmlhtml spinning wheelspin wheel game html codespin wheel game htmlspin a wheel onlinewheel spinnerhtml wheel of fortunespin the wheel html csshtml spin wheelspin wheel csshtml css spinner wheelspin the wheel html