DiceJS is a free JavaScript plugin to simulate six-sided dice in webpages.
Download from GitHub.
Meet the creator, Param Siddharth.
The only dependencies are JavaScript (ES6 onwards) and HTML canvases.
To use DiceJS in the webpage, dice.js must be referenced via a <script> tag in the webpage.
<!DOCTYPE html>
<html>
<head>
<script src='dice.js'></script>
</head>
...
makeDice(), makeDie(), and rollDie() to be used.
The functions may then be used via a <script> tag in the very end of the webpage body.
<body>
...
<script>
// The functions may be used here.
</script>
</body>
makeDice()
Appends a die with the desired characteristics as a child canvas to the selected element(s) and returns an array of die objects when selecting elements belonging to a particular class or with a particular tag name, and a single die object when selecting an element with a particular ID.
makeDice(ver = 10, hor = 10, invert = false, elem = '.jdie', rollonclick = true, bgcl = '#FFFFFF', dcl = '#000000')
ver - The height of the die in pixels (10 by default).
hor - The width of the die in pixels (10 by default).
invert - Decides whether or not to invert the die/dice (false by default).bgcl and dcl. Passing true would reverse them.
elem - Decides which elements to affect ('.jdie' by default)..foo would select all elements of the class foo.#viniet would select the element with the ID viniet.p would select all <p> elements.makeDice() would append a child canvas which would function as a die with the desired characteristics.
rollonclick - Decides whether or not clicking the die would roll it (true by default).bgcl - The colour for the inner background ('#FFFFFF' (white) by default).dcl - The colour for the border and dots. ('#000000' (black) by default).makeDie()
Creates a die using the passed <canvas> element with the desired characteristics and returns a die object pertaining to the same.
It is automatically called by makeDice() for creating individual dice.
Note that it doesn't affect the dimensions of the canvas. In order to do that, use makeDice() instead.
makeDie(canvas, invert = false, rollonclick = true, bgcl = '#FFFFFF', dcl = '#000000')
canvas - The canvas element to modify i. e. Create a die using.
invert - Decides whether or not to invert the die/dice (false by default).true would reverse that.
rollonclick - Decides whether or not clicking the die would roll it (true by default).bgcl - The colour for the inner background ('#FFFFFF' (white) by default).dcl - The colour for the border and dots. ('#000000' (black) by default).rollDie()
Rolls the die represented by the passed <canvas> element and returns the number on the top of the die after rolling.
Note that it expects a canvas as the first argument and not a die object. To roll the die represented by a die object, call obj.roll() instead, where obj is the object.
rollDie(canvas, invert = false, bgcl = '#FFFFFF', dcl = '#000000')
canvas - The canvas element to modify i. e. Create a die using.
bgcl - The colour for the inner background ('#FFFFFF' (white) by default).dcl - The colour for the border and dots. ('#000000' (black) by default).A die object would refer to an object of the following form:
{
name: ,
roll:
}
jdie by default.<!DOCTYPE html>
<html>
<head>
<script src='dice.js'></script>
</head>
<body>
<p>Hey! I got a die over here: <span class='jdie'></span></p>
<script>makeDice();</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src='dice.js'></script>
</head>
<body>
<p>Hey! I got a die over here: <span class='jdie'></span></p>
<script>makeDice(20,24,true);</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src='dice.js'></script>
</head>
<body>
<p>Hey! I got a die over here: <span class='haha'></span></p>
One here as well: <i class='haha'></i>
<script>
makeDice(30,30,false,".haha");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src='dice.js'></script>
</head>
<body>
<p><div><div>This die is nice: <b></b></div>
<div>This die is good: <b></b></div>
<script>
var t = makeDice(20,50,false,"b");
var p = t.length-1;
t[p].element.parentNode.style += 'line-height:'+t[p].element.height+2+'pxx;vertical-align:middle;';
t[p].element.width = 40;
t[p].element.height = 60;
t[p]=makeDie(t[p].element,true,false);
t[p].element.style.borderColor = '#0000ff';
t[p].element.style.borderWidth = '6px';
t[p].element.style.borderRadius = '10px';
var a = setInterval(t[p].roll,100);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src='dice.js'></script>
</head>
<body>
<u id='lallu'></u>
<script>
makeDice(30,30,false,'#lallu',true,'red','blue');
</script>
</body>
</html>
Hey there! It's me, Param. 
I am a simple person who wants to become wise and loves the nature. I love learning new things and making stuff, like songs, computer applications, art, et cetera.
Here is my Facebook page.
I post often on Twitter.
I am quite active on Instagram.
Sometimes, I post videos on YouTube.
I am an artist, so you will find me in places like Spotify and DeviantArt too.
That's all for now. :) Stay happy and healthy!