JavaScript Animated Digital Dice

Introduction to Dice in JavaScript

Dice are fundamental elements in many games and applications. Using JavaScript, we can create both digital and graphical dice that simulate real-world dice rolling.

Key concepts used in dice implementation:

Random number generation with Math.random()
DOM manipulation to update dice display
setInterval() for animation effects
CSS transitions and animations for visual effects
Event handling for user interactions

Example 1: Digital Dice

A digital dice implementation that generates random numbers between 1 and 6 with animation effects. This example demonstrates the use of random number generation and DOM manipulation.

// Digital Dice Implementation
const diceElement = document.getElementById('dice');
const rollBtn = document.getElementById('rollDice');
const diceValues = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅'];
let rolling = false;

function rollDice() {
    if (rolling) return;
    rolling = true;
    rollBtn.disabled = true;
    
    // Add rolling animation
    diceElement.classList.add('rolling');
    
    // Animation effect
    let rolls = 0;
    const rollInterval = setInterval(() => {
        const randomIndex = Math.floor(Math.random() * diceValues.length);
        diceElement.textContent = diceValues[randomIndex];
        diceElement.style.transform = `rotate(${rolls * 30}deg) scale(${1 + rolls*0.05})`;
        rolls++;
    }, 100);
    
    // Stop animation and show final result
    setTimeout(() => {
        clearInterval(rollInterval);
        const result = Math.floor(Math.random() * 6);
        diceElement.textContent = diceValues[result];
        diceElement.style.transform = 'rotate(0deg) scale(1)';
        diceElement.classList.remove('rolling');
        rollBtn.disabled = false;
        rolling = false;
    }, 1500);
}

rollBtn.addEventListener('click', rollDice);

Digital Dice Live Demo

⚀

Example 2: Graphical Dice

A graphical dice implementation that visually represents each dice value using CSS grid and dot patterns. This example demonstrates more advanced DOM manipulation and CSS techniques.

// Graphical Dice Implementation
const graphicalDice = document.getElementById('graphicalDice');
const rollGraphicalBtn = document.getElementById('rollGraphicalDice');
let graphicalRolling = false;

// Dice dot patterns for each value (positions 1-9 in a 3x3 grid)
const dicePatterns = [
    [], // 0 (not used)
    [5], // 1 - center
    [1, 9], // 2 - top-left, bottom-right
    [1, 5, 9], // 3
    [1, 3, 7, 9], // 4 - corners
    [1, 3, 5, 7, 9], // 5
    [1, 3, 4, 6, 7, 9] // 6
];

function rollGraphicalDice() {
    if (graphicalRolling) return;
    graphicalRolling = true;
    rollGraphicalBtn.disabled = true;
    
    // Add rolling animation
    graphicalDice.classList.add('rolling');
    
    // Animation effect
    let rolls = 0;
    const rollInterval = setInterval(() => {
        const tempValue = Math.floor(Math.random() * 6) + 1;
        drawDice(tempValue);
        graphicalDice.style.transform = `rotate(${rolls * 30}deg) scale(${1 + rolls*0.05})`;
        rolls++;
    }, 100);
    
    // Final result
    setTimeout(() => {
        clearInterval(rollInterval);
        const result = Math.floor(Math.random() * 6) + 1;
        drawDice(result);
        graphicalDice.style.transform = 'rotate(0deg) scale(1)';
        graphicalDice.classList.remove('rolling');
        rollGraphicalBtn.disabled = false;
        graphicalRolling = false;
    }, 1500);
}

function drawDice(value) {
    graphicalDice.innerHTML = '';
    const pattern = dicePatterns[value];
    
    for (let i = 1; i <= 9; i++) {
        const dot = document.createElement('div');
        dot.className = 'dice-dot';
        
        if (pattern.includes(i)) {
            dot.style.opacity = '1';
        } else {
            dot.style.opacity = '0';
        }
        
        graphicalDice.appendChild(dot);
    }
}

rollGraphicalBtn.addEventListener('click', rollGraphicalDice);

// Initialize dice
drawDice(1);

Graphical Dice Live Demo

Key Learning Points

These dice examples demonstrate several important JavaScript concepts:

Random Numbers

Using Math.random() to generate random values for dice rolls

Animation Effects

Creating smooth animations with setInterval() and CSS transitions

DOM Manipulation

Dynamically updating HTML elements based on JavaScript logic

Event Handling

Responding to user clicks to trigger dice rolls