Imitacion de moneda dimm online 2 - Freelance Job in Web design

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">

<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

HTML CSS JavaScript

Cuadróbelo (Nombre Juego)

About this project

design-multimedia / web-design-1

Open

Other projects posted by J. D. B.