Roll A Die

Simple 3D dice roll animator by CSS3 Animation.

Demo

Vanilla JS

Copy dist/roll-a-die.js into your library folder Load it into your HTML script

<script type="text/javascript" src="path/to/roll-a-die.js"></script>

You can use the UNPKG link https://unpkg.com/[email protected]/dist/roll-a-die.js. Remember to update the package number to the most recent.

Call the method with its options.

rollADie({ element, numberOfDice: 2, callback});

With npm (and CommonJS builder)

Install with npm.

npm install --save roll-a-die

Install with yarn.

yarn add roll-a-die

import the library

ES5

const rollADie = require('roll-a-die');

ES6

import rollADie from 'roll-a-die';

Call the method

rollADie({ element, numberOfDice: 2, callback});
rollADie({ element, numberOfDice: 2, callback, noSound: true});
rollADie({ element, numberOfDice: 2, callback, delay: 1000});
rollADie({ element, numberOfDice: 2, callback, values: [3, 4]});

Parameter Definitions

• element: The element to render die animation on. Type: HTMLElement
• numberOfDice: The number of dice to use.` Type: number
• callback: Called when animation is finished. Returns an array of the values from throw. Type: Function
• noSound: Roll the die without sound (Optional). Type: boolean
• delay: Time in milliseconds to delay before removing animations (Optional). Type: number
• values: Values to show on die face. When provided, it overrides library genrated values. (Optional). Type: Array of numbers

Thanks

• (Sound Effect)
  • http://commons.nicovideo.jp/material/nc93322

License

MIT License