Jogo de azar aleatório em programação linguagem HTML
É importante lembrar que sites de apostas reais são regulamentados e podem ser ilegais em muitas jurisdições. Vou criar um site educativo que simula um jogo de azar, mas sem envolver dinheiro real, apenas para fins de entretenimento.
Aqui está um exemplo de site com um jogo de sorte simples:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roleta da Sorte - Jogo Educativo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: white;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
header {
text-align: center;
margin-bottom: 30px;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.warning {
background-color: #ffcc00;
color: #333;
padding: 15px;
border-radius: 10px;
margin: 20px 0;
text-align: center;
font-weight: bold;
}
.game-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.wheel-container {
position: relative;
width: 300px;
height: 300px;
margin: 20px auto;
}
.wheel {
width: 100%;
height: 100%;
border-radius: 50%;
background: conic-gradient(
red 0deg 45deg,
black 45deg 90deg,
red 90deg 135deg,
black 135deg 180deg,
red 180deg 225deg,
black 225deg 270deg,
red 270deg 315deg,
black 315deg 360deg
);
position: relative;
transition: transform 3s cubic-bezier(0.17, 0.67, 0.83, 0.67);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.pointer {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 40px;
background-color: gold;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
z-index: 10;
}
.controls {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
max-width: 300px;
}
button {
padding: 15px 25px;
border: none;
border-radius: 50px;
background: linear-gradient(to right, #ff8a00, #da1b60);
color: white;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
button:active {
transform: translateY(1px);
}
.result {
margin-top: 20px;
padding: 15px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
text-align: center;
min-height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.stats {
display: flex;
justify-content: space-around;
margin-top: 20px;
background-color: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 10px;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 1.5rem;
font-weight: bold;
color: gold;
}
footer {
margin-top: 30px;
text-align: center;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 600px) {
.container {
padding: 15px;
}
h1 {
font-size: 2rem;
}
.wheel-container {
width: 250px;
height: 250px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Roleta da Sorte</h1>
<p>Jogo educativo de simulação - Sem apostas reais</p>
</header>
<div class="warning">
⚠️ ATENÇÃO: Este é um jogo educativo de simulação. Não envolve apostas com dinheiro real e não oferece prêmios monetários. Jogos de azar reais podem ser viciantes e causar problemas financeiros.
</div>
<div class="game-area">
<div class="wheel-container">
<div class="pointer"></div>
<div class="wheel" id="wheel"></div>
</div>
<div class="controls">
<button id="spin-btn">Girar Roleta</button>
<div class="result" id="result">
Clique em "Girar Roleta" para começar!
</div>
</div>
<div class="stats">
<div class="stat-item">
<div class="stat-label">Rodadas</div>
<div class="stat-value" id="rounds">0</div>
</div>
<div class="stat-item">
<div class="stat-label">Vermelho</div>
<div class="stat-value" id="red-count">0</div>
</div>
<div class="stat-item">
<div class="stat-label">Preto</div>
<div class="stat-value" id="black-count">0</div>
</div>
</div>
</div>
<footer>
<p>Este site é apenas para fins educativos e de entretenimento. Não envolve apostas reais.</p>
<p>Desenvolvido para demonstrar conceitos de probabilidade e aleatoriedade.</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const wheel = document.getElementById('wheel');
const spinBtn = document.getElementById('spin-btn');
const result = document.getElementById('result');
const roundsElement = document.getElementById('rounds');
const redCountElement = document.getElementById('red-count');
const blackCountElement = document.getElementById('black-count');
let isSpinning = false;
let rounds = 0;
let redCount = 0;
let blackCount = 0;
spinBtn.addEventListener('click', function() {
if (isSpinning) return;
isSpinning = true;
result.textContent = "Girando...";
// Gerar um ângulo aleatório (mínimo de 3 rotações completas)
const degrees = 1080 + Math.floor(Math.random() * 360);
// Aplicar a rotação à roleta
wheel.style.transform = `rotate(${degrees}deg)`;
// Calcular o resultado após a rotação
setTimeout(function() {
const actualDegrees = degrees % 360;
let color;
if (actualDegrees >= 0 && actualDegrees < 45) {
color = "vermelho";
redCount++;
} else if (actualDegrees >= 45 && actualDegrees < 90) {
color = "preto";
blackCount++;
} else if (actualDegrees >= 90 && actualDegrees < 135) {
color = "vermelho";
redCount++;
} else if (actualDegrees >= 135 && actualDegrees < 180) {
color = "preto";
blackCount++;
} else if (actualDegrees >= 180 && actualDegrees < 225) {
color = "vermelho";
redCount++;
} else if (actualDegrees >= 225 && actualDegrees < 270) {
color = "preto";
blackCount++;
} else if (actualDegrees >= 270 && actualDegrees < 315) {
color = "vermelho";
redCount++;
} else {
color = "preto";
blackCount++;
}
rounds++;
// Atualizar a interface
result.innerHTML = `Resultado: <strong style="color: ${color === 'vermelho' ? 'red' : 'black'}">${color.toUpperCase()}</strong>`;
roundsElement.textContent = rounds;
redCountElement.textContent = redCount;
blackCountElement.textContent = blackCount;
isSpinning = false;
}, 3000);
});
});
</script>
</body>
</html>
