spin the wheel html

// winwheel.js is the best js library to build a spin the wheel or wheel of fortune
<!-- source=> http://dougtesting.net/home -->
//download the library and you are ready to go
<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>

View another examples Add Own solution

4.14

Honza Brabec 90 points

aaaaaaaaa

Thank you! 7

4.14 (7 Votes)

Robbie Goodwin 95 points

                                    aaafsdfsfdsfsfsdfdsfs

Thank you! 2

4 (2 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Html

Html 2022-03-27 21:55:05 how to kill html
Html 2022-03-27 21:55:02 How to create web urls without extensions
Html 2022-03-27 21:45:11 space between 2 h tags without break
Html 2022-03-27 21:40:13 how to resize submit button in html
Html 2022-03-27 20:40:18 https://www.codegrepper.com
Html 2022-03-27 19:55:09 show image inside table with innerhtml
Html 2022-03-27 19:30:47 html email input
Html 2022-03-27 18:45:01 how to add favicon in html
Html 2022-03-27 18:15:21 picture html
Html 2022-03-27 18:15:11 ex: javaasdasdasdasd

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

spin wheel html spin the wheel html code spinner wheel css html how to make a spin wheel in html spin the wheel html 5 how to create a spinning wheel in html html5 spin the wheel spin the wheel html5 spin wheel css spinning wheel html how to create a spin the wheel game in a website using HTML nad CSS how to create a spinning wheel using html create spinner wheel using html and css spin wheel game html spin wheel html code spin wheel game html code spin the wheel html css html spinner wheel Spinning wheel HTML code javascript wheel of fortune spin a wheel online wheel spin wheel spinner spinner wheel spin wheel html spin wheel javascript wheel spin javascript spin the wheel how to create a number wheel in html css spin the wheel spin wheel game javascript jquery spinning wheel example javascript spinning wheel fortune spinner js Wheel of Fortune js html wheel of fortune wheel of fortune javascript wheel spinner javascript how to make spinning wheel in html spin wheel in html spin the wheel html

spin the wheel html

Welcome Back!

Create a Free Account