Animated Graphical Dice | JavaScript Examples

Introduction

We have shown how to create a dice in our example, Graphical Dice. However, we need to refresh the web page in order to change the faces of the dice, which is not suitable for playing games.

In this example, we will create an animated dice that changes rapidly when we click the roll dice button. To create animation, we use the setInterval method to run a function repeatedly at specified time intervals.

Key Concepts:

setInterval() for animation timing
clearInterval() to stop animation
DOM manipulation to update dice visuals
Random number generation for dice values
CSS transitions for smooth animations

Example 1: Single Dice

A basic animated graphical dice implementation that shows how to create and control a single dice with roll and stop functionality.

// Single Dice Implementation
function rollSingleDice() {
    rollBtn.disabled = true;
    stopBtn.disabled = false;
    
    // Start animation
    diceInterval = setInterval(() => {
        const randomValue = Math.floor(Math.random() * 6) + 1;
        updateDice(dice1, randomValue);
        dice1.style.transform = `rotate(${diceRotation}deg)`;
        diceRotation += 30;
    }, 100);
}

function stopSingleDice() {
    clearInterval(diceInterval);
    const finalValue = Math.floor(Math.random() * 6) + 1;
    updateDice(dice1, finalValue);
    dice1.style.transform = 'rotate(0deg)';
    rollBtn.disabled = false;
    stopBtn.disabled = true;
}

function updateDice(diceElement, value) {
    diceElement.setAttribute('data-value', value);
}

Single Dice Demo

Dice 1

Example 2: Two Dice with Sum

An enhanced version that rolls two dice simultaneously and calculates their sum. This simulates common dice games that use a pair of dice.

// Two Dice with Sum Implementation
function rollTwoDice() {
    rollTwoBtn.disabled = true;
    stopTwoBtn.disabled = false;
    
    // Start animation for both dice
    diceInterval = setInterval(() => {
        const randomValue1 = Math.floor(Math.random() * 6) + 1;
        const randomValue2 = Math.floor(Math.random() * 6) + 1;
        
        updateDice(dice1, randomValue1);
        updateDice(dice2, randomValue2);
        
        dice1.style.transform = `rotate(${diceRotation}deg)`;
        dice2.style.transform = `rotate(${-diceRotation}deg)`;
        diceRotation += 30;
    }, 100);
}

function stopTwoDice() {
    clearInterval(diceInterval);
    
    const finalValue1 = Math.floor(Math.random() * 6) + 1;
    const finalValue2 = Math.floor(Math.random() * 6) + 1;
    
    updateDice(dice1, finalValue1);
    updateDice(dice2, finalValue2);
    
    dice1.style.transform = 'rotate(0deg)';
    dice2.style.transform = 'rotate(0deg)';
    
    // Calculate and display sum
    const sum = finalValue1 + finalValue2;
    diceSum.textContent = `Sum: ${sum}`;
    diceSum.style.display = 'block';
    
    rollTwoBtn.disabled = false;
    stopTwoBtn.disabled = true;
}

Two Dice with Sum Demo

Dice 1

Dice 2

Example 3: Continuous Roll Dice

A dice that rolls continuously until stopped. This example demonstrates how to create a more dynamic animation that simulates a spinning dice.

// Continuous Roll Implementation
function startContinuousRoll() {
    startContinuousBtn.disabled = true;
    stopContinuousBtn.disabled = false;
    
    // Continuous animation
    diceInterval = setInterval(() => {
        const randomValue = Math.floor(Math.random() * 6) + 1;
        updateDice(dice3, randomValue);
        dice3.style.transform = `rotate(${diceRotation}deg)`;
        diceRotation += 30;
    }, 100);
}

function stopContinuousRoll() {
    clearInterval(diceInterval);
    
    const finalValue = Math.floor(Math.random() * 6) + 1;
    updateDice(dice3, finalValue);
    dice3.style.transform = 'rotate(0deg)';
    
    startContinuousBtn.disabled = false;
    stopContinuousBtn.disabled = true;
}

Continuous Roll Demo

Continuous Dice

How It Works

These examples demonstrate the core concepts of creating animated graphical dice with JavaScript:

Technical Implementation:

Each dice is represented as a grid of possible dot positions
CSS classes control which dots are visible based on the dice value
The setInterval() method creates the animation effect
clearInterval() stops the animation when requested
Random number generation determines the dice face
CSS transforms create the rolling effect

To create animation, we use the setInterval method, the syntax is as follows:

myVariable = setInterval(myFunction, timeInterval);

We use the following syntax to create random numbers between 1 and 6:

ranNum = Math.floor(Math.random() * 6) + 1;