JavaScript Spin Wheel Game: Display a wheel that rotates until it is stopped

Recommend this page to a friend!
  Info   Documentation   Screenshots   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 90 All time: 435 This week: 3Up
Version License JavaScript version Categories
spin-wheel 1.0.1BSD License5Animation, Games
Description 

Author

This is a jQuery plugin that can display a wheel that rotates until it is stopped.

It can animate a wheel that is rotating inside a Web page element with several details that can be configurable programatically like:

- The text orientation, direction, size and colours
- The prize stopping position
- Sounds to be outputted while the wheel is spinning

Picture of Harish Chauhan
Name: Harish Chauhan <contact>
Classes: 2 packages by
Country: India India
Age: ???
All time rank: 747 in India India
Week rank: 6 Up1 in India India Up
Innovation award
Innovation award
Nominee: 1x

Winner: 1x

Documentation

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Spin Wheel</title> <script src="lib/jquery.min.js"></script> <script src="src/jquery.spin-wheel.js"></script> <script src="src/jquery.spin-wheel-skins.js"></script> </head> <body> <div id="spinwheel"></div> <button type="button" id="spin">Spin</button> <script> $(function () { SpinWheelSkins['myskin'] = $.extend({}, SpinWheelSkins.default); //SpinWheelSkins['myskin'].innerCircle[0]['shadow'].type = 'outer'; SpinWheelSkins['myskin'].innerCircle[1]['color'] = null; SpinWheelSkins['myskin'].innerCircle[1]['image'] = 'logo.png'; $("#spinwheel").spinWheel({ slices: [ { label: 'Better Luck Next Time', chance: 30, prize: false }, { label: 'MobileFused Guide', chance: 30, prize: true }, { label: 'Movie Ticket', chance: 20, prize: true, style: { text: { color: '#ffffff', font: 'sans-serif', font_size: 10, shadow: { blur: 6, color: '#d011dd' }, stroke: { width: 1, color: '#d011dd' } } } }, { label: '10% Discount', chance: 8, prize: true }, { label: '50% Discount', chance: 2, prize: true }, ], skin: 'myskin', radius: 300, tick_sound: 'tick.mp3', duration:3000, speed:2, onStop: function (idx, slice) { console.log('winner is ', idx, slice); } }); $("#spin").click(function () { $("#spinwheel").spinWheel().spin(); }) }); </script> </body> </html>

Details

spin-wheel

spin-wheel

  • 10 Sep 2018

This library needs jquery to run. Create spinning prize wheels using HTML canvas.

Description

This is a feature packed JavaScript library that allows you to easily create HTML5 canvas Spin Wheels highly configurable jQuery plugin class.

Wheels can be animated using inbuild easing functions and many other powerful animation features.

Features Include: * Easy to use, highly configurable. * Draw wheels using code generated. * Numerous text orientation, direction, size and colour options. * Priority wise prize stopping location. * Play sounds while the wheel is spinning including a "tick" sound. * It is free to use with an open source licence.

Options

  • slices: wheel slice data, you can provide additional style for each style to overload default text style like style: { text: { color: '#ffffff', font: 'sans-serif', font_size: 10, shadow: { blur: 6, color: '#d011dd' }, stroke: { width: 1, color: '#d011dd' } } }
  • skin: right now 2 skins available, default and wood. You can extend or create new skins easily. Check example code to check to extend skin
  • radius: radius of wheel
  • tick_sound: if you want to tick on each slice pass
  • duration: rotation duration
  • speed: speed of duration, min speed is 1
  • events: onStop and onArrowTick

Spin function have 2 parameters to overload default speed and duration like spin(seed, duration)

Example

Spin Wheel options

Check example.html included in source

Guide

TODO: I am not having time to write a guide for now, but in future will do so.


Screenshots (2)  
  • screen.png
  • spin-wheel
  Files folder image Files (9)  
File Role Description
Files folder imagelib (1 file)
Files folder imagesrc (2 files)
Accessible without login Plain text file example.html Doc. Example
Accessible without login Image file logo.png Icon Icon image
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Image file wood.jpg Icon Icon image

  Files folder image Files (9)  /  lib  
File Role Description
  Plain text file jquery.min.js Class Class source

  Files folder image Files (9)  /  src  
File Role Description
  Accessible without login Plain text file jquery.spin-wheel-skins.js Aux. Auxiliary script
  Plain text file jquery.spin-wheel.js Class Class source

 Version Control Unique User Downloads Download Rankings  
 88%
Total:90
This week:0
All time:435
This week:3Up