Wheel Of Fortune
This project will help you to create Wheel Of Fortune with specific angle and custom design, so you can focus to create a wheel design.
Installation
Manual Download
Download from source on this link
Use CDN
Insert this following code on your project file
Documentation
Example configuration
const WOF = // Image file wheel: './assets/basic.svg' // Position of caret pointer caretPosition: 'top' // If you want use probability alogirthm probability: true // Configuration of pieces pieces: angle: 60 from: 300 gift: 'Gift 1' prob: 20 angle: 40 from: 0 gift: 'Gift 2' prob: 5 angle: 50 from: 40 gift: 'Gift 3' prob: 10 angle: 45 from: 90 gift: 'Gift 4' prob: 15 angle: 45 from: 135 gift: 'Gift 5' prob: 15 angle: 90 from: 180 gift: 'Gift 6' prob: 30 angle: 30 from: 270 gift: 'Gift 7' prob: 5 // Maximum spining maximumSpin: 4 // Set external start button startButton: document // Set external reset button resetButton: document // Detect finish event { console } ;
Set Pieces Angle
If you create piece of wheel like image above, you can set the angle with 60 and from 0 because the piece location start on 0 degrees.
Image Support
You can use JPG / PNG / SVG image to show a wheel, i use svg.js to load SVG image to wrapper.
License
This project under MIT License