Evaluating bids

Cuadróbelo (Nombre Juego)

Published on the September 22, 2024 in Design & Multimedia

About this project

Open

<!Doctype html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cuadróbelu</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #B0B0B0;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(1, 100px);
            gap: 10px;
            margin-top: 10px;
        }

        .grid-item {
            background-color: grey;
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: black;
            border-radius: 10px;
            position: relative;
        }

        .grid-item .percentage {
            position: absolute;
            bottom: 5px;
            right: 5px;
            font-size: 12px;
            color: white;
        }

        .buttons {
            margin-top: 20px;
        }

        .buttons button {
            padding: 15px 30px;
            margin: 0 5px;
            border: none;
            cursor: pointer;
            border-radius: 10px;
            font-size: 24px;
            background-color: orange;
            color: white;
        }

        .buttons button.disabled {
            background-color: lightblue;
            cursor: not-allowed;
        }

        .monto-container {
            color: green;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .inputs-container {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .inputs-container input {
            width: 60px;
            height: 30px;
            font-size: 20px;
            text-align: center;
            margin: 0 10px;
        }

        .inputs-container input[type="number"] {
            width: 100px;
        }

        .win-message {
            font-size: 24px;
            color: green;
            margin-top: 10px;
            visibility: hidden;
        }

        .gain-animation {
            font-size: 20px;
            color: blue;
            margin-top: 5px;
            visibility: hidden;
        }

        .grid-options {
            display: none;
            margin-top: 10px;
            flex-direction: column;
            align-items: center;
        }

        .grid-options button {
            padding: 10px 20px;
            margin: 5px 0;
            border: none;
            cursor: pointer;
            border-radius: 10px;
            font-size: 18px;
            background-color: lightgreen;
            color: black;
        }
    </style>
</head>

<body>
    <div class="monto-container">
        <span>MD:</span>
        <span id="monto">1000</span>
    </div>
    <div class="inputs-container">
        <input type="number" id="numero-elegido" min="1" max="5" placeholder="1-5">
        <button id="grid-options-button">$√$</button>
        <input type="number" id="cantidad-apuesta" placeholder="Apuesta">
    </div>
    <div class="grid-options" id="grid-options">
        <button data-size="3">1×3</button>
        <button data-size="6">2×3</button>
        <button data-size="9">3×3</button>
    </div>
    <div class="grid-container" id="grid-container">
        <!-- Initially only 3 grid items -->
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
    <div class="buttons">
        <button id="ejecutar">ejecutar</button>
    </div>
    <div class="win-message" id="win-message">¡ganado!</div>
    <div class="gain-animation" id="gain-animation"></div>
    <script>
        const montoelement = document.getElementById('monto');
        const numeroElegidoElement = document.getElementById('numero-elegido');
        const cantidadApuestaElement = document.getElementById('cantidad-apuesta');
        const ejecutarButton = document.getElementById('ejecutar');
        const winMessageElement = document.getElementById('win-message');
        const gainAnimationElement = document.getElementById('gain-animation');
        const gridContainer = document.getElementById('grid-container');
        const gridOptionsButton = document.getElementById('grid-options-button');
        const gridOptions = document.getElementById('grid-options');
        let monto = parseFloat(montoElement.textContent) || 2000;

        gridOptionsButton.addEventListener('click', () => {
            gridOptions.style.display = gridOptions.style.display === 'none' ? 'flex' : 'none';
        });

        document.querySelectorAll('.grid-options button').forEach((button) => {
            button.addEventListener('click', (event) => {
                const size = parseInt(event.target.getAttribute('data-size'));
                updateGridSize(size);
                gridOptions.style.display = 'none';
            });
        });

        function updateGridSize(size) {
            gridContainer.innerHTML = ''; // Clear current grid items
            gridContainer.style.gridTemplateColumns = `repeat(3, 100px)`;
            gridContainer.style.gridTemplateRows = `repeat(${Math.ceil(size / 3)}, 100px)`;

            for (let i = 0; i < size; i++) {
                const gridItem = document.createElement('div');
                gridItem.className = 'grid-item';
                gridContainer.appendChild(gridItem);
            }

            if (size === 3) {
                numeroElegidoElement.setAttribute('max', '5');
                numeroElegidoElement.setAttribute('placeholder', '1-5');
            } else if (size === 6) {
                numeroElegidoElement.setAttribute('max', '20');
                numeroElegidoElement.setAttribute('placeholder', '1-20');
            } else if (size === 9) {
                numeroElegidoElement.setAttribute('max', '50');
                numeroElegidoElement.setAttribute('placeholder', '1-50');
            }
        }

        ejecutarButton.addEventListener('click', () => {
            const numeroElegido = parseInt(numeroElegidoElement.value);
            const cantidadApuesta = parseFloat(cantidadApuestaElement.value);

            if (isNaN(numeroElegido) || numeroElegido < 1 || numeroElegido > parseInt(numeroElegidoElement.getAttribute('max'))) {
                alert(`Por favor, ingresa un número entre 1 y ${numeroElegidoElement.getAttribute('max')}.`);
                Return;
            }

            if (isNaN(cantidadApuesta) || cantidadApuesta <= 0 || cantidadApuesta > monto) {
                alert('Por favor, ingresa una cantidad válida para la apuesta que no supere tu monto disponible.');
                Return;
            }

            let ganancia = 0;
            let allRed = true;

            document.querySelectorAll('.grid-item').forEach((item) => {
                const maxRandomNumber = parseInt(numeroElegidoElement.getAttribute('max'));
                const rand = Math.floor(Math.random() * maxRandomNumber) + 1; // Generate random number
                const chance = Math.random() * 100; // Probability for special color

                if (chance <= 1) { // 1% chance for green
                    item.style.backgroundColor = 'green';
                    ganancia += cantidadApuesta * 5; // 500% gain
                    item.innerHTML = `<span>${rand}</span><span class="percentage">500%</span>`;
                    allRed = false;
                } else if (chance <= 6) { // 5% chance for yellow
                    item.style.backgroundColor = 'yellow';
                    ganancia += cantidadApuesta * 0.5; // 50% gain
                    item.innerHTML = `<span>${rand}</span><span class="percentage">50%</span>`;
                    allRed = false;
                } else {
                    item.textContent = rand;
                    if (rand === numeroElegido) {
                        item.style.backgroundColor = 'blue';
                        ganancia += cantidadApuesta * 0.1; // 10% gain
                        item.innerHTML = `<span>${rand}</span><span class="percentage">10%</span>`;
                        allRed = false;
                    } else {
                        item.style.backgroundColor = 'red';
                        item.innerHTML = `<span>${rand}</span>`; // Red number
                    }
                }
            });

            if (allRed) {monto -= cantidadApuesta; // Subtract 100% if all are red
            } else {
                monto += ganancia; // Add winnings
                animateGain(ganancia);
            }

            montoElement.textContent = monto.toFixed(2);
        });

        function animateGain(ganancia) {
            if (ganancia > 0) {
                winMessageElement.style.visibility = 'visible';
                gainAnimationElement.style.visibility = 'visible';
                let currentGain = 0;
                const increment = ganancia / 10; // Adjust speed and steps
                const interval = setInterval(() => {
                    currentGain += increment;
                    gainAnimationElement.textContent = `+${currentGain.toFixed(2)}`;
                    if (currentGain >= ganancia) {
                        clearInterval(interval);
                        gainAnimationElement.textContent = `+${ganancia.toFixed(2)}`;
                        setTimeout(() => {
                            winMessageElement.style.visibility = 'hidden';
                            gainAnimationElement.style.visibility = 'hidden';
                        }, 2000);
                    }
                }, 100);
            }
        }
    </script>
</body>

</html>

Quiero que en este código html tenga más decoración, sea más llamativo y que tenga alguna musica llamativa.

Category Design & Multimedia
Subcategory Web design
What do you need? Medium-sized change
Is this a project or a position? Project
Required availability As needed

Delivery term: Not specified

Skills needed

Other projects posted by J. D. B.