Create Ludo Roll Dice with html css and javascript, html css, html css tutorial for beginners, html css full course #css #html #css3 #html5

post

Create Ludo Roll Dice with HTML, CSS and javascript

Creating a Ludo Roll Dice using HTML, CSS and javascript is a great way.Here's a step-by-step guide on how to make a Ludo Roll Dice game.

HTML Code

Ye HTML code hai jo ek web page ka structure define karta hai. Yeh ek container div ke andar ek dice (pasa) element aur ek roll button hai.
- `body`: Yeh tag poora document ko wrap karta hai aur usme visible content ko define karta hai.
- `class="container"`: Is div mein sare elements ko contain kiya jata hai. Ye ek block ko define karta hai jise hum container kehte hain.
- `class="dice"`: Yeh ek cube jaisa element hai jismein 6 alag alag faces (chehre) hain.
- ` class="face"`: Har "face" ek particular direction ko represent karta hai - front (aage), back (peeche), top (upar), bottom (neechay), right (dahini taraf), aur left (baayin taraf).
- ` class="roll"`: Yeh ek button hai jo dice ko roll karne ke liye use hota hai. Isme ek h2 heading hai jo "Start" keh raha hai.
Yeh code ek simple web page ko banaane ke liye hai jismein ek dice game implement kiya gaya hai. Jab "Start" button dabaya jata hai, toh dice roll hota hai.

CSS Code

margin: 0;

padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    border: 0;
    outline: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: deepskyblue;
}
.container{
    display: grid;
    place-items: center;
    width: 300px;
    background: #eee;
    padding: 60px 0 40px;
    border-radius: 30px;
    box-shadow: rgba(0,0,0,0.1);
}
.dice{
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transition: 1s ease;
    
}
@keyframes rolling{
    50%{
        transform: rotateX(455deg) rotateY(455deg);
    }
}
.face{
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid #f6f3f0;
    border-radius: 20px;
    background: linear-gradient(145deg, 
    #dddbd8,skyblue);
    transform-style: preserve-3d;
}
.face::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #f6f3f0;
    transform: translateZ(-1px);
}
.face::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    background: #000;
    border-radius: 50%;
}
.front{
    transform: translateZ(50px);
}
.back{
    transform: rotateX(180deg) translateZ(50px);
}
.top{
    transform: rotateX(90deg) translateZ(50px);
}
.bottom{
    transform: rotateX(-90deg) translateZ(50px);
}
.right{
    transform: rotateY(90deg) translateZ(50px);
}
.left{
    transform: rotateY(-90deg) translateZ(50px);
}
.front::after{
    width: 30px;
    height: 30px;
    background: #000;
    margin: -15px 0 0 -15px;
}
.back::after{
    margin: -35px 0 0 -30px;
    box-shadow: 40px 0,
    0 25px,
    40px 25px,
    0 50px,
    40px 50px;
}
.top::after{
    margin: -30px 0 0 -30px;
    box-shadow: 40px 40px;
}
.bottom::after{
    margin: -36px 0 0 -36px;
    box-shadow: 26px 26px,
    52px 52px,
    52px 0,
    0 52px;
}
.right::after{
    margin: -30px 0 0 -30px;
    box-shadow: 40px 0,
    0 40px,
    40px 40px;
}
.left::after{
    margin: -35px 0 0 -35px;
    box-shadow: 25px 25px,
    50px 50px;
}
.roll{
    color: white;
    background: green;
    margin-top: 60px;
    padding: 5px;
    border-radius: 10px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
    border: 2px outset darkgreen;
    cursor: pointer;
    transition: .2s ease-in-out;
}
.roll:hover{
    color: seagreen;
    background: white;
}

Yeh CSS code hai jo HTML elements ko style karta hai. Yeh ek dice game ke web page ko design karta hai. Yahan kuch important properties aur unki explanations hain:

- `*`: Yeh selector sabhi elements ke liye apply hota hai, jo margin, padding, aur box-sizing ko reset karta hai, aur saath hi font family ko sans-serif mein set karta hai.
- `body`: Yeh page ka body element ko style karta hai. `display: flex;` se content ko horizontally aur vertically center mein align karta hai. `min-height: 100vh;` page ki minimum height ko viewport ke height ke barabar set karta hai. `background: deepskyblue;` page ka background color set karta hai.
- `.container`: Yeh dice aur button ko contain karne wala div hai. `display: grid;` elements ko grid layout mein display karta hai. `place-items: center;` elements ko center mein place karta hai. `width: 300px;` aur `background: #eee;` container ki width aur background color ko set karta hai. `padding: 60px 0 40px;` container ke padding ko set karta hai. `border-radius: 30px;` container ka border-radius ko round karta hai. `box-shadow: rgba(0,0,0,0.1);` container ko light shadow dete hue define karta hai.
- `.dice`: Yeh dice element ko style karta hai. `position: relative;` dice ka position relative set karta hai. `width: 100px; height: 100px;` dice ki width aur height ko set karta hai. `transform-style: preserve-3d;` dice ke transformations ko preserve karta hai. `transition: 1s ease;` dice ke transitions ko set karta hai.
- `@keyframes rolling`: Yeh ek animation keyframe hai jo dice ko rolling effect deta hai.
- `.face`: Yeh dice ke har face ko style karta hai. `position: absolute;` face ka position absolute set karta hai. `width: 100%; height: 100%;` face ki width aur height ko set karta hai. `border: 5px solid #f6f3f0;` face ke border ko set karta hai. `border-radius: 20px;` face ke border-radius ko set karta hai. `background: linear-gradient(145deg, #dddbd8, skyblue);` face ka background color linear gradient se define karta hai.
- `.face::before` aur `.face::after`: Yeh pseudo-elements hai jo face ke before aur after content ko define karte hain.
- `.front`, `.back`, `.top`, `.bottom`, `.right`, `.left`: Yeh har face ko define karte hain aur unke specific transformations ko set karte hain.
- `.roll`: Yeh roll button ko style karta hai. `color`, `background`, `margin-top`, `padding`, `border-radius`, `font-size`, `text-transform`, `font-weight`, `border`, aur `cursor` properties button ke style ko define karte hain. `transition` property hover effect ke transitions ko set karta hai.
- `.roll:hover`: Yeh button ke hover effect ko style karta hai.

JS Code

const rollBtn = document.querySelector('.roll');

const rollDice = random =>{
            dice.style.animation = 'rolling 4.4s';
            setTimeout(() =>{
                switch (random) {
                    case 1: dice.style.transform = 
                    'rotateX(0deg) rotateY(0deg)';
                    break;
                    case 6: dice.style.transform = 
                    'rotateX(180deg) rotateY(0deg)';
                    break;
                    case 2: dice.style.transform = 
                    'rotateX(-90deg) rotateY(0deg)';
                    break;
                    case 5: dice.style.transform = 
                    'rotateX(90deg) rotateY(0deg)';
                    break;
                    case 3: dice.style.transform = 
                    'rotateX(0deg) rotateY(90deg)';
                    break;
                    case 4: dice.style.transform = 
                    'rotateX(0deg) rotateY(-90deg)';
                    break;

default: break;
                }
                dice.style.animation = 'none';

},4050);
        }

rollBtn.addEventListener('click', randomDice);

Yeh JavaScript code hai jo dice ko roll karne ke functionality ko implement karta hai. Yahan kuch important functions aur unki explanations hain:
- `const rollBtn = document.querySelector('.roll');`: Yeh variable rollBtn ko roll button se select karta hai.
- `const randomDice = () => { ... }`: Yeh ek arrow function hai jo random number generate karta hai aur dice ko roll karta hai. Agar random number 1 se 6 ke beech hai, toh `rollDice()` function ko call karta hai, warna phir se `randomDice()` ko call karta hai takay valid number mil sake.
- `const rollDice = random => { ... }`: Yeh ek function hai jo dice ko actual roll karta hai. Ismein dice ko animate karne ke liye CSS animation ko apply kiya jata hai. Phir, `switch` statement ke zariye random number ke hisaab se dice ko rotate kiya jata hai.
- `setTimeout(() => { ... }, 4050);`: Yeh ek timer hai jo dice ko animate hone ke baad rotate karta hai. Ismein `switch` statement ke hisaab se dice ko sahi rotation di jati hai. Timer ka duration 4050 milliseconds hai, taake animation complete ho sake.
- `rollBtn.addEventListener('click', randomDice);`: Yeh line roll button par click hone par `randomDice()` function ko call karta hai, jisse dice roll hota hai.
Yeh code ek interactive dice game create karta hai jahan user roll button par click karke ek random number ke hisaab se dice roll kar sakta hai.

Output

Youtube whatsapp Facebook

Online Tutorial

Search This Blog