jQuery Wheel of Fortune Demo

Sam Deering
Sam Deering
Share

Just a quick demo of a the Wheel of Fortune. Random spin animating wheel of fortune with win/lose realize. Note: For better testing of the demo below open it in jsfiddle.

Requirements:

Demo Code

The Code – jQuery

window.WHEELOFFORTUNE = {

    cache: {},

    init: function () {
        console.log('controller init...');

        var _this = this;
        this.cache.wheel = $('.wheel');
        this.cache.wheelMarker = $('.marker');
        this.cache.wheelSpinBtn = $('.wheel'); //im using the wheel as the spin button but simply change this to a button if you want.

        //mapping is backwards as wheel spins clockwise //1=win
        this.cache.wheelMapping = [400, 120, 80, 750, 150, 300, 60, 175, 500, 125, 75, 1000, 120, 200, 90, 600, 100, 250].reverse();

        this.cache.wheelSpinBtn.on('click', function (e) {
            e.preventDefault();
            if (!$(this).hasClass('disabled')) _this.spin();
        });

        //reset wheel
        this.resetSpin();

        //setup prize events
        this.prizeEvents();
    },

    spin: function () {
        console.log('spinning wheel');

        var _this = this;

        // reset wheel
        this.resetSpin();

        //disable spin button while in progress
        this.cache.wheelSpinBtn.addClass('disabled');

        /*
            Wheel has 10 sections.
            Each section is 360/10 = 36deg.
        */
        var deg = 1500 + Math.round(Math.random() * 1500),
            duration = 6000; //optimal 6 secs

        _this.cache.wheelPos = deg;

        //transition queuing
        //ff bug with easeOutBack
        this.cache.wheel.transition({
            rotate: '0deg'
        }, 0)
            .transition({
            rotate: deg + 'deg'
        }, duration, 'easeOutCubic');

        //move marker
        _this.cache.wheelMarker.transition({
            rotate: '-20deg'
        }, 0, 'snap');

        //just before wheel finish
        setTimeout(function () {
            //reset marker
            _this.cache.wheelMarker.transition({
                rotate: '0deg'
            }, 300, 'easeOutQuad');
        }, duration - 500);

        //wheel finish
        setTimeout(function () {
            // did it win??!?!?!
            var spin = _this.cache.wheelPos,
                degrees = spin % 360,
                percent = (degrees / 360) * 100,
                segment = Math.ceil((percent / 6)),  //divided by number of segments
                win = _this.cache.wheelMapping[segment - 1]; //zero based array

            console.log('spin = ' + spin);
            console.log('degrees = ' + degrees);
            console.log('percent = ' + percent);
            console.log('segment = ' + segment);
            console.log('win = ' + win);

            //display dialog with slight delay to realise win or not.
            setTimeout(function () {
                alert('you won '+win+'!');
            }, 700);

            //re-enable wheel spin
            _this.cache.wheelSpinBtn.removeClass('disabled');

        }, duration);

    },

    resetSpin: function () {
        this.cache.wheel.transition({
            rotate: '0deg'
        }, 0);
        this.cache.wheelPos = 0;
    }

}

window.WHEELOFFORTUNE.init();

The Code – CSS

.wheel-wrap {
    position: relative;
    width: 550px;
    height: 550px;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
}
.marker {
    top: 10px;
    left: 250px;
    z-index: 2;
    position: absolute;
}
.wheel {
    top: 90px;
    left: 75px;
    width: 550px;
    z-index: 1;
}

The Code – HTML

wheeloffortune

Frequently Asked Questions (FAQs) about jQuery Wheel of Fortune

How Can I Customize the jQuery Wheel of Fortune?

Customizing the jQuery Wheel of Fortune is quite simple. You can change the colors, number of segments, and the content of each segment. This is done by modifying the ‘segments’ array in the JavaScript code. Each segment is an object with ‘fillStyle’ (color), ‘text’ (content), and ‘textFillStyle’ (text color) properties. You can add as many segments as you want by adding more objects to the array.

How Can I Control the Spin Speed and Duration?

The spin speed and duration can be controlled by modifying the ‘animation’ object in the JavaScript code. The ‘type’ property controls the type of animation (spinToStop or spinOngoing), the ‘duration’ property controls the duration of the spin in seconds, and the ‘spins’ property controls the number of full 360-degree spins.

Can I Use Images Instead of Text in the Wheel Segments?

Yes, you can use images instead of text in the wheel segments. This can be done by replacing the ‘text’ property of the segment objects with an ‘image’ property. The value of the ‘image’ property should be the URL of the image.

How Can I Make the Wheel Responsive?

Making the wheel responsive involves modifying the CSS code. You can use media queries to change the size of the wheel based on the screen size. You can also use the ‘resize’ event in JavaScript to adjust the size of the wheel when the window size changes.

How Can I Add Sound Effects to the Wheel?

Adding sound effects to the wheel can be done by using the HTML5 Audio API. You can create an Audio object and play it when the wheel starts spinning and when it stops. The ‘startSpin’ and ‘stopSpin’ events can be used to trigger the sound effects.

Can I Use the Wheel in a Mobile App?

Yes, you can use the wheel in a mobile app. The wheel is built with HTML, CSS, and JavaScript, which are all supported by mobile web browsers. You can also use frameworks like Cordova or React Native to integrate the wheel into a native app.

How Can I Save the Spin Results?

Saving the spin results can be done by using a database or a server-side language like PHP or Node.js. When the ‘stopSpin’ event is triggered, you can send an AJAX request to the server with the result of the spin. The server can then save the result in the database.

Can I Use the Wheel Without jQuery?

Yes, you can use the wheel without jQuery. The wheel is built with vanilla JavaScript, so it doesn’t require jQuery. However, if you want to use jQuery for other parts of your project, the wheel will still work perfectly.

How Can I Add a Button to Start the Spin?

Adding a button to start the spin is quite simple. You just need to create a button element in your HTML code and add an ‘onclick’ event to it. The ‘onclick’ event should call the ‘startSpin’ function of the wheel.

Can I Use the Wheel in a Commercial Project?

Yes, you can use the wheel in a commercial project. The wheel is open source and free to use. However, it’s always a good idea to check the license of the project to make sure there are no restrictions.