Dice Roller
Simple 3D dice roll animator using CSS3 Animation.
Vanilla JS
Copy dist/dice-roller.js into your library folder Load it into your HTML script
<script type="text/javascript" src="path/to/dice-roller.js"></script>
Call the method with its options.
{
element: Element;
numberOfDice: number;
delay: number;
callback: Function;
values: number[];
}
diceRoller(options);
With npm (and CommonJS builder)
Install with npm.
npm install --save dice-roller-3d
import the library
ES5
const diceRoller = require('dice-roller-3d');
ES6
import diceRoller from 'dice-roller-3d';
Call the method
const result = diceRoller({ element, numberOfDice: 2, callback});
const result = diceRoller({ element, numberOfDice: 2, callback, noSound: true});
const result = diceRoller({ element, numberOfDice: 2, callback, delay: 1000});
const result = diceRoller({ element, numberOfDice: 2, callback, values: [3, 4]});
Parameter Definitions
element
: The element to render die animation on. Type: HTMLElementnumberOfDice
: The number of dice to use.` Type: numbercallback
: Called when animation is finished. Returns an array of the values from throw. Type: FunctionnoSound
: Roll the die without sound (Optional). Type: booleandelay
: Time in milliseconds to delay before removing animations (Optional). Type: numbervalues
: Values to show on die face. When provided, it overrides library genrated values. (Optional). Type: Array of numbers
Thanks
- (Sound Effect)
- Forked from: https://github.com/chukwumaijem/roll-a-die
License
MIT License