Sometimes we often visit a website or Game like Candy-crush in which we can win Prizes/coupons by Spin Wheel to Win contest. Finally, I thought to create a similar Spinner with the help of jQuery / javascript. In this tutorial, we will create a similar Number Spinner as mentioned.

Create a Spin Wheel to Win Game with jQuery / javascript

What is Spinner Wheel

In Candy-crush we can see a Spinner of Daily Prize booster. Spin the wheel of fortune. With a bit of luck, you’ll hit the right wedge and win one in all the prizes. Likewise, you can find it in similar websites which offer user to win a daily gift prize. I always thought that how does it work? Because, it’s a rotating Circle with background image which can’t be pierced. So, How it’s getting the result?

After some calculation, finally I got a trick by which it can be achieve easily. As we know, there are 360 degrees in a circle. So, we can use these numbers and assign them to a FIXED Circular Wheel image.

HTML of Spinner

Html part will be very simple. We will use an circular image of PRIZES display and a Marker which will be used for selecting the PRIZE column.

<div class="wheel-wrap">
   <img class="wheel" src="images/wheelhalf.png" />
   <img class="marker" src="images/marker.png" />
</div>

Beautifying the Spinner Wheel with CSS

For Beautifying the Spinner wheel we will set all the images in a DIV with Class “wheel-wrap”. It’s position will be relative so that the PRIZE WHEEL image will be center aligned always. Next, we will set the MARKER / POINTER image in TOP CENTER of Prize WHEEL image. For more appearance, we will add a FIXED Wheel background image similar to Spinner Wheel. Hence, our CSS will be similar like below.

.wheel-wrap {
	position: relative;
	width:90%; height:90%;
	max-width: 550px; /*Same size of Wheel Image*/
	max-height: 550px; /*Same size of Wheel Image*/
	overflow: hidden;
	margin: 0 auto;
	z-index: 1;
	background-image:url(images/wheels.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover
}
.marker {
	top: 4%;
	left: 45%;
	z-index: 2;
	position: absolute;
}
.wheel {
	margin:12%;
	width:100%;
	max-width: 420px;
	z-index: 1;
}

jQuery/java-script for Calculation and Spinning the Wheel

Now it’s turn of powerful jQuery or java-script. The Prize Fortune Wheel will spin only after clicking on the Wheel image. It will be start rotating and will stop at a RANDOM Degree which is a random numeric value from 1 to 360. After this we will show that PRIZE / NUMBER / COUPON as the Winner result as assigned with that selected Degree / Number.
For above mentioned conditions, I have written a java-script function “WHEELOFFORTUNE” with the help of jQuery as below.

$(function(){
        window.WHEELOFFORTUNE = {
            cache: {},
            init: function () {
                console.log('controller init...');
                var _this = this;
                this.cache.wheel = $('.wheel');
                this.cache.wheelMarker = $('.marker');
                this.cache.wheelSpinBtn = $('.wheel');

                //mapping is backwards as wheel spins clockwise //1=win
                this.cache.wheelMapping = [1,20,14,31,9,22,18,29,7,28,12,35,3,26,0,32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10,5,24,16,33].reverse();

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

                //reset wheel
                this.resetSpin();
            },

            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 = 800; //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: '-40deg'
                }, 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/100) * 36)), 
						
						//segment = Math.ceil((percent *18/100))-1;
						 //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+'!');
						
					
					$('b').text(win).parent().css('visibility','visible');
					$('.wheel-wrap').hide()
                    //re-enable wheel spin
                    _this.cache.wheelSpinBtn.removeClass('disabled');
						//window.open('http://www.css-jquery-design.com','_self',false);
                    }, 1500);/**/

                }, duration);
            },

            resetSpin: function () {
                this.cache.wheel.transition({
                    rotate: '0deg'
                }, 0);
                this.cache.wheelPos = 0;$('.wheel-wrap').show(); $('p').css('visibility','hidden')
            }
        }
        window.WHEELOFFORTUNE.init();
});
		$('#winner').click(function(){ window.WHEELOFFORTUNE.init();})



Enjoy the Spinner Wheel

As a result, now our Fortune Spinner Wheel (Spin to Win) is ready. You can create another spinners like Random Coupons Wheel, Fortune wheel, Prize wheel, Daily gift wheel, Decide Wheel etc similarly. Therefore create any similar spinner wheel and Enjoy with your friends and family.

Now, it’s your turn

I hope you enjoyed this article and the techniques which I used. So, please share your comments and questions below! If you liked this article, please share it by clicking on the share bar below. I’d appreciate it…

view demo

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsGameJAVASCRIPTjQueryMobile Web TechnologyTutorialsadvance web technology,angle brackets,CSS,fortune spinner,fortune spins,free open source,gambling spin,gambling spinner,gaming,interactive web applications,javascript,javascript functions,jquery,jquery clock,jquery mobile tricks,mobile,open source javascript,spinner,tips and tricks,transparent background image,wheel,wheel of fortune daily winnerSometimes we often visit a website or Game like Candy-crush in which we can win Prizes/coupons by Spin Wheel to Win contest. Finally, I thought to create a similar Spinner with the help of jQuery / javascript. In this tutorial, we will create a similar Number Spinner as mentioned. What...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.