Sobre este projeto
design-multimedia / web-design-1
Aberto
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de Apuestas</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #ccc; /* Fondo gris */
transition: background-color 0.5s ease;
}
.dimms {
font-size: 30px; /* Incremento de tamaño */
margin-bottom: 30px;
}
.bet-field {
margin-bottom: 30px;
}
input[type="number"] {
width: 150px; /* Aumenta el tamaño */
padding: 15px;
font-size: 18px;
border: 5px solid;
border-image: linear-gradient(to right, red, yellow) 1;
}
.multiplier-box {
width: 150px; /* Aumenta el tamaño */
height: 150px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px; /* Incremento de tamaño */
margin-bottom: 30px;
border: 5px solid;
border-image: linear-gradient(to right, green, blue) 1;
}
.mini-box {
width: 150px; /* Aumenta el tamaño */
height: 40px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
margin: 15px;
border: 3px solid;
border-image: linear-gradient(to right, blue, red) 1;
}
button {
padding: 10px 20px;
font-size: 16px; /* Incremento de tamaño */
cursor: pointer;
margin: 10px;
border: 2px solid black;
transition: border-color 0.2s ease;
width: 140px; /* Botones más grandes */
}
#start-button {
background-color: #4CAF50;
color: white;
}
#cash-out-button {
background-color: cyan;
color: black;
display: none;
}
#ir-button {
background-color: red;
color: white;
display: none;
}
</style>
</head>
<body>
<div class="dimms">D$ <span id="dimms">10.000,00</span></div>
<div class="bet-field">
<input type="number" id="bet" placeholder="BET (Mín 5)" min="0.01" step="0.01" oninput="validateBetInput(this)">
</div>
<div class="mini-box" id="multiplier-indicator">×1</div>
<div class="multiplier-box" id="multiplier">×1</div>
<button id="start-button" onclick="startGame()">START</button>
<button id="ir-button" onclick="rollDice()">GO</button>
<button id="cash-out-button" onclick="cashOut()">CashOut</button>
<script>
let dimms = 10000;
let multiplier = 1;
let betAmount = 0;
let originalBet = 0;
let gameStarted = false;
function validateBetInput(input) {
let value = input.value;
if (value.includes(".")) {
Let parts = value.split(".");
If (parts[1] && parts[1].length > 2) {
input.value = parts[0] + "." + Parts[1].slice(0, 2);
}
}
}
function startGame() {
const betInput = document.getElementById("bet").value;
if (betInput === "") return alert("Por favor, ingresa una apuesta válida.");
BetAmount = parseFloat(betInput);
originalBet = betAmount;
if (betAmount < 5) {
return alert("No puedes poner una apuesta menor que D$ 5");
}
if (betAmount > 0 && betAmount <= dimms) {
gameStarted = true;
dimms -= betAmount;
document.getElementById("dimms").innerText = dimms.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
document.getElementById("bet").disabled = true;
document.getElementById("start-button").style.display = "none";
document.getElementById("cash-out-button").style.display = "inline-block";
document.getElementById("ir-button").style.display = "inline-block";
} else {
alert("Por favor, ingresa una apuesta válida.");
}
}
Function rollDice() {
if (!gameStarted) return;
if (Math.random() < 0.01) { // 1% de probabilidad de multiplicador especial en cualquier clic
document.body.style.backgroundColor = 'blue';
const specialMultiplier = Math.floor(Math.random() * (30 - 5 + 1) + 5); // Multiplicador especial entre ×5 y ×15
multiplier *= specialMultiplier; // Multiplica el multiplicador total
betAmount *= specialMultiplier; // Multiplica la apuesta actual
document.getElementById("multiplier").innerText = `×${multiplier.toFixed(2)}`;
document.getElementById("bet").value = betAmount.toFixed(2);
document.getElementById("multiplier-indicator").innerText = `×${specialMultiplier.toFixed(2)}`;
flashScreen('blue');
return;
}
const chance = Math.random();
if (chance < 0.65) {
handleLoss();
} else {
handleWin();
}
if (multiplier <= 0) {
endGame();
}
}
function handleWin() {
const winMultiplier = getWinningMultiplier();
multiplier *= winMultiplier;
betAmount *= winMultiplier;
document.getElementById("multiplier").innerText = `×${multiplier.toFixed(2)}`;
document.getElementById("bet").value = betAmount.toFixed(2);
document.getElementById("multiplier-indicator").innerText = `×${winMultiplier.toFixed(2)}`;
flashScreen('green');
}
function getWinningMultiplier() {
const rand = Math.random();
if (rand < 0.3) return 1.10; // 30% de probabilidad de ganar ×1.10
if (rand < 0.5) return 1.20; // 20% de probabilidad de ganar ×1.20
if (rand < 0.6) return 1.30; // 10% de probabilidad de ganar ×1.30
if (rand < 0.7) return 1.40; // 10% de probabilidad de ganar ×1.40
if (rand < 0.75) return 1.50; // 5% de probabilidad de ganar ×1.50
if (rand < 0.8) return 1.60; // 5% de probabilidad de ganar ×1.60
if (rand < 0.85) return 1.70; // 5% de probabilidad de ganar ×1.70
if (rand < 0.9) return 1.80; // 5% de probabilidad de ganar ×1.80
if (rand < 0.95) return 1.90; // 5% de probabilidad de ganar ×1.90
return 2; // 5% de probabilidad de ganar ×2
}
function handleLoss() {
const lossMultiplier = getLosingMultiplier();
multiplier *= lossMultiplier;
betAmount *= lossMultiplier;
if (multiplier <= 0.1) {
multiplier = 0; // Si es menor o igual a 0.1, se asigna 0
betAmount = 0;
flashScreen('purple'); // Pantalla morada cuando pierdes todo
} else {
document.getElementById("multiplier").innerText = `×${multiplier.toFixed(2)}`;
document.getElementById("bet").value = betAmount.toFixed(2);
document.getElementById("multiplier-indicator").innerText = `×${lossMultiplier.toFixed(2)}`;
flashScreen('red');
}
}
function getLosingMultiplier() {
const rand = Math.random();
if (rand < 0.4) return 0.5; // 40% de probabilidad de perder ×0.5
if (rand < 0.6) return 0.6; // 20% de probabilidad de perder ×0.6
if (rand < 0.75) return 0.7; // 15% de probabilidad de perder ×0.7
if (rand < 0.9) return 0.8; // 15% de probabilidad de perder ×0.8
return 0.9; // 10% de probabilidad de perder ×0.9
}
function endGame() {
setTimeout(cashOut, 1000);
}
function cashOut() {
dimms += betAmount;
document.getElementById("dimms").innerText = dimms.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
document.getElementById("bet").value = originalBet.toFixed(2);
resetGame();
}
function resetGame() {
document.getElementById("bet").disabled = false;
document.getElementById("start-button").style.display = "inline-block";
document.getElementById("ir-button").style.display = "none";
document.getElementById("multiplier").innerText = "×1";
multiplier = 1;
gameStarted = false;
document.getElementById("cash-out-button").style.display = "none";
document.getElementById("multiplier-indicator").innerText = "×1";
}
function flashScreen(color) {
const irButton = document.getElementById("ir-button");
irButton.disabled = true; // Deshabilita el botón "Go"
document.body.style.backgroundColor = color;
setTimeout(() => {
document.body.style.backgroundColor = '#ccc'; // Fondo gris al volver a normal
irButton.disabled = false; // Habilita el botón "Go" después de que el color regresa a gris
}, 1000);
}
</script>
</body>
</html>
Este código previo que se ve encima es un juego en donde se trata de que pones una apuesta y esa apuesta se puede multiplicar por la cantidad que diga el cuadrado grande y el rectángulo te va diciendo por cuánto se multiplicó la última vez.
Lo que quiero es que en este juego en códigos quiero que lo diseñen para que tenga un fondo atrás y que esté mejor decorado, detalles que quiero:
Los detalles que quiero pueden ser que hayan diamantes en el programa, oro y puede ser un paisaje atrás, por ejemplo también puede ser que el cuadrado que pone el multiplicador que está enredado con hojas y que también haya música que puede ser de casino y efectos de sonido.
Presupuesto: ARS 5.000.
O sea quiero que me hagan un diseño de lo que dije de ARS 5000.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de Apuestas</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #ccc; /* Fondo gris */
transition: background-color 0.5s ease;
}
.dimms {
font-size: 30px; /* Incremento de tamaño */
margin-bottom: 30px;
}
.bet-field {
margin-bottom: 30px;
}
input[type="number"] {
width: 150px; /* Aumenta el tamaño */
padding: 15px;
font-size: 18px;
border: 5px solid;
border-image: linear-gradient(to right, red, yellow) 1;
}
.multiplier-box {
width: 150px; /* Aumenta el tamaño */
height: 150px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px; /* Incremento de tamaño */
margin-bottom: 30px;
border: 5px solid;
border-image: linear-gradient(to right, green, blue) 1;
}
.mini-box {
width: 150px; /* Aumenta el tamaño */
height: 40px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
margin: 15px;
border: 3px solid;
border-image: linear-gradient(to right, blue, red) 1;
}
button {
padding: 10px 20px;
font-size: 16px; /* Incremento de tamaño */
cursor: pointer;
margin: 10px;
border: 2px solid black;
transition: border-color 0.2s ease;
width: 140px; /* Botones más grandes */
}
#start-button {
background-color: #4CAF50;
color: white;
}
#cash-out-button {
background-color: cyan;
color: black;
display: none;
}
#ir-button {
background-color: red;
color: white;
display: none;
}
</style>
</head>
<body>
<div class="dimms">D$ <span id="dimms">10.000,00</span></div>
<div class="bet-field">
<input type="number" id="bet" placeholder="BET (Mín 5)" min="0.01" step="0.01" oninput="validateBetInput(this)">
</div>
<div class="mini-box" id="multiplier-indicator">×1</div>
<div class="multiplier-box" id="multiplier">×1</div>
<button id="start-button" onclick="startGame()">START</button>
<button id="ir-button" onclick="rollDice()">GO</button>
<button id="cash-out-button" onclick="cashOut()">CashOut</button>
<script>
let dimms = 10000;
let multiplier = 1;
let betAmount = 0;
let originalBet = 0;
let gameStarted = false;
function validateBetInput(input) {
let value = input.value;
if (value.includes(".")) {
Let parts = value.split(".");
If (parts[1] && parts[1].length > 2) {
input.value = parts[0] + "." + Parts[1].slice(0, 2);
}
}
}
function startGame() {
const betInput = document.getElementById("bet").value;
if (betInput === "") return alert("Por favor, ingresa una apuesta válida.");
BetAmount = parseFloat(betInput);
originalBet = betAmount;
if (betAmount < 5) {
return alert("No puedes poner una apuesta menor que D$ 5");
}
if (betAmount > 0 && betAmount <= dimms) {
gameStarted = true;
dimms -= betAmount;
document.getElementById("dimms").innerText = dimms.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
document.getElementById("bet").disabled = true;
document.getElementById("start-button").style.display = "none";
document.getElementById("cash-out-button").style.display = "inline-block";
document.getElementById("ir-button").style.display = "inline-block";
} else {
alert("Por favor, ingresa una apuesta válida.");
}
}
Function rollDice() {
if (!gameStarted) return;
if (Math.random() < 0.01) { // 1% de probabilidad de multiplicador especial en cualquier clic
document.body.style.backgroundColor = 'blue';
const specialMultiplier = Math.floor(Math.random() * (30 - 5 + 1) + 5); // Multiplicador especial entre ×5 y ×15
multiplier *= specialMultiplier; // Multiplica el multiplicador total
betAmount *= specialMultiplier; // Multiplica la apuesta actual
document.getElementById("multiplier").innerText = `×${multiplier.toFixed(2)}`;
document.getElementById("bet").value = betAmount.toFixed(2);
document.getElementById("multiplier-indicator").innerText = `×${specialMultiplier.toFixed(2)}`;
flashScreen('blue');
return;
}
const chance = Math.random();
if (chance < 0.65) {
handleLoss();
} else {
handleWin();
}
if (multiplier <= 0) {
endGame();
}
}
function handleWin() {
const winMultiplier = getWinningMultiplier();
multiplier *= winMultiplier;
betAmount *= winMultiplier;
document.getElementById("multiplier").innerText = `×${multiplier.toFixed(2)}`;
document.getElementById("bet").value = betAmount.toFixed(2);
document.getElementById("multiplier-indicator").innerText = `×${winMultiplier.toFixed(2)}`;
flashScreen('green');
}
function getWinningMultiplier() {
const rand = Math.random();
if (rand < 0.3) return 1.10; // 30% de probabilidad de ganar ×1.10
if (rand < 0.5) return 1.20; // 20% de probabilidad de ganar ×1.20
if (rand < 0.6) return 1.30; // 10% de probabilidad de ganar ×1.30
if (rand < 0.7) return 1.40; // 10% de probabilidad de ganar ×1.40
if (rand < 0.75) return 1.50; // 5% de probabilidad de ganar ×1.50
if (rand < 0.8) return 1.60; // 5% de probabilidad de ganar ×1.60
if (rand < 0.85) return 1.70; // 5% de probabilidad de ganar ×1.70
if (rand < 0.9) return 1.80; // 5% de probabilidad de ganar ×1.80
if (rand < 0.95) return 1.90; // 5% de probabilidad de ganar ×1.90
return 2; // 5% de probabilidad de ganar ×2
}
function handleLoss() {
const lossMultiplier = getLosingMultiplier();
multiplier *= lossMultiplier;
betAmount *= lossMultiplier;
if (multiplier <= 0.1) {
multiplier = 0; // Si es menor o igual a 0.1, se asigna 0
betAmount = 0;
flashScreen('purple'); // Pantalla morada cuando pierdes todo
} else {
document.getElementById("multiplier").innerText = `×${multiplier.toFixed(2)}`;
document.getElementById("bet").value = betAmount.toFixed(2);
document.getElementById("multiplier-indicator").innerText = `×${lossMultiplier.toFixed(2)}`;
flashScreen('red');
}
}
function getLosingMultiplier() {
const rand = Math.random();
if (rand < 0.4) return 0.5; // 40% de probabilidad de perder ×0.5
if (rand < 0.6) return 0.6; // 20% de probabilidad de perder ×0.6
if (rand < 0.75) return 0.7; // 15% de probabilidad de perder ×0.7
if (rand < 0.9) return 0.8; // 15% de probabilidad de perder ×0.8
return 0.9; // 10% de probabilidad de perder ×0.9
}
function endGame() {
setTimeout(cashOut, 1000);
}
function cashOut() {
dimms += betAmount;
document.getElementById("dimms").innerText = dimms.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
document.getElementById("bet").value = originalBet.toFixed(2);
resetGame();
}
function resetGame() {
document.getElementById("bet").disabled = false;
document.getElementById("start-button").style.display = "inline-block";
document.getElementById("ir-button").style.display = "none";
document.getElementById("multiplier").innerText = "×1";
multiplier = 1;
gameStarted = false;
document.getElementById("cash-out-button").style.display = "none";
document.getElementById("multiplier-indicator").innerText = "×1";
}
function flashScreen(color) {
const irButton = document.getElementById("ir-button");
irButton.disabled = true; // Deshabilita el botón "Go"
document.body.style.backgroundColor = color;
setTimeout(() => {
document.body.style.backgroundColor = '#ccc'; // Fondo gris al volver a normal
irButton.disabled = false; // Habilita el botón "Go" después de que el color regresa a gris
}, 1000);
}
</script>
</body>
</html>
Este código previo que se ve encima es un juego en donde se trata de que pones una apuesta y esa apuesta se puede multiplicar por la cantidad que diga el cuadrado grande y el rectángulo te va diciendo por cuánto se multiplicó la última vez.
Lo que quiero es que en este juego en códigos quiero que lo diseñen para que tenga un fondo atrás y que esté mejor decorado, detalles que quiero:
Los detalles que quiero pueden ser que hayan diamantes en el programa, oro y puede ser un paisaje atrás, por ejemplo también puede ser que el cuadrado que pone el multiplicador que está enredado con hojas y que también haya música que puede ser de casino y efectos de sonido.
Presupuesto: ARS 5.000.
O sea quiero que me hagan un diseño de lo que dije de ARS 5000.
Categoria Design e Multimedia
Subcategoria Web Design
Do que você precisa? Alteração média
Isso é um projeto ou uma posição de trabalho? Um projeto
Disponibilidade requerida Conforme necessário
Prazo de Entrega: Não estabelecido
Habilidades necessárias