JavaScript

jQuery Wheel of Fortune Demo

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