Lanzar una moneda

3,011 Andev.web

Remix Abrir en el editor Publica tu código

Recomendado

16 December 2024

Una página de inicio con color León

16 November 2024

Cómo crear una barra lateral de cuadrícula en CSS

9 October 2026

Juego de recolección de monedas conduciendo un coche en JavaScript Canvas

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="stats">
            <p id="heads-count">Heads: 0</p>
            <p id="tails-count">Tails: 0</p>
        </div>
        <div class="coin" id="coin">
            <div class="heads">
                <img src="https://i.postimg.cc/8C3SmCRC/heads.png">
            </div>
            <div class="tails">
                <img src="https://i.postimg.cc/MTQ8P85m/tails.png">
            </div>
        </div>
        <div class="buttons">
            <button id="flip-button">
                Flip Coin
            </button>
            <button id="reset-button">
                Reset
            </button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Rubik",sans-serif;
}
body{
    height: 100%;
    background: linear-gradient(
        to right,
        #575ce5 50%,
        #f9fbfc 50%
    ) fixed;
}
.container{
    background-color: #ffffff;
    width: 400px;
    padding: 50px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    box-shadow: 15px 30px 35px rgba(0,0,0,0.1);
    border-radius: 10px;
    -webkit-perspective: 300px;
    perspective: 300px;
}
.stats{
    text-align: right;
    color: #101020;
    font-weight: 500;
    line-height: 25px;
}
.coin{
    height: 150px;
    width: 150px;
    position: relative;
    margin: 50px auto;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.coin img{
    width: 145px;
}
.heads,.tails{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.tails{
    transform: rotateX(180deg);
}
@keyframes spin-tails{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(1980deg);
    }
}
@keyframes spin-heads{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(2160deg);
    }
}
.buttons{
    display: flex;
    justify-content: space-between;
}
button{
    width: 120px;
    padding: 10px 0;
    border: 2.5px solid #424ae0;
    border-radius: 5px;
    cursor: pointer;
}
#flip-button{
    background-color: #424ae0;
    color: #ffffff;
}
#flip-button:disabled{
    background-color: #e1e0ee;
    border-color: #e1e0ee;
    color: #101020;
}
#reset-button{
    background-color: #ffffff;
    color: #424ae0;
}

let heads = 0;
let tails = 0;
let coin = document.querySelector(".coin");
let flipBtn = document.querySelector("#flip-button");
let resetBtn = document.querySelector("#reset-button");

flipBtn.addEventListener("click", () => {
    let i = Math.floor(Math.random() * 2);
    coin.style.animation = "none";
    if(i){
        setTimeout(function(){
            coin.style.animation = "spin-heads 3s forwards";
        }, 100);
        heads++;
    }
    else{
        setTimeout(function(){
            coin.style.animation = "spin-tails 3s forwards";
        }, 100);
        tails++;
    }
    setTimeout(updateStats, 3000);
    disableButton();
});
function updateStats(){
    document.querySelector("#heads-count").textContent = `Heads: ${heads}`;
    document.querySelector("#tails-count").textContent = `Tails: ${tails}`;
}
function disableButton(){
    flipBtn.disabled = true;
    setTimeout(function(){
        flipBtn.disabled = false;
    },3000);
}
resetBtn.addEventListener("click",() => {
    coin.style.animation = "none";
    heads = 0;
    tails = 0;
    updateStats();
});