JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<div id="dice" class="dice_6"></div>
<br /><br />
<button id="throw">throw dice</button>

CSS

#dice{
    background-image:url('http://www.clker.com/cliparts/e/7/4/4/1194991183406177705six-sided_dice_faces_lio_01.svg.med.png');
    height:49px;
    width:49px;
}

.dice_1{background-position:0px 0px;}
.dice_2{background-position:-50px 0px;}
.dice_3{background-position:-101px 0px;}
.dice_4{background-position:-151px 0px;}
.dice_5{background-position:-201px 0px;}
.dice_6{background-position:-251px 0px;}

JavaScript

$('#throw').click(
    function(){
        throwAnimatedDice();
        //console.log( throwAnimatedDice() );
    }
);

function throwAnimatedDice(elem)
{
    var value = Math.round(Math.random() * 5) + 1;
    displayDice(10, value, $('#dice') );

    return value;
}

function displayDice(times, final, element)
{
    element.removeClass();
    if (times > 1)
    {
        element.addClass('dice_' + (Math.round(Math.random() * 5) + 1));
        setTimeout(function(){displayDice(times-1,final, element);},100);
    }
    else
        element.addClass('dice_' + final);
}