jQuery Wheel of Fortune Demo
Share:
Free JavaScript Book!
Write powerful, clean and maintainable JavaScript.RRP $11.95
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
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.
New books out now!
Get practical advice to start your career in programming!
Master complex transitions, transformations and animations in CSS!
Latest Remote Jobs




