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:
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
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.
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
