Criando uma Roleta com JavaScript: Um Guia Abrangente
Introdução
A roleta é um jogo de cassino clássico que envolve girar uma roda com números e cores e apostar em onde a bola cairá. Neste artigo,bbrbet - vamos criar uma roleta simples usando JavaScript, HTML e CSS.
HTML e CSS
Primeiro, vamos criar a estrutura HTML e o estilo CSS para nossa roleta:
```html
Roleta
```
```css
roleta {
width: 600px;
height: 600px;
border: 1px solid black;
border-radius: 50%;
position: relative;
.slot {
width: 30px;
height: 600px;
position: absolute;
background-color: red;
.bola {
width: 20px;
height: 20px;
border: 1px solid black;
border-radius: 50%;
background-color: yellow;
position: absolute;
bottom: 5px;
```
JavaScript
Agora, vamos criar o código JavaScript para animar a roleta e girar a bola:
```javascript
// Obter elementos DOM
const roleta = document.getElementById('roleta');
const bola = document.querySelector('.bola');
// Definir velocidade e direção da roleta
const velocidade = 5;
let direcao = 1;
// Animação da roleta
function animarRoleta() {
// Limpar animação anterior
cancelAnimationFrame(requestId);
// Rotacionar a roleta
const rotacao = roleta.style.transform;
const novaRotacao = `${ rotacao} rotate(${ direcao velocidade}deg)`;
roleta.style.transform = novaRotacao;
// Chamar animação novamente
requestId = requestAnimationFrame(animarRoleta);
// Escolher slot aleatório
function escolherSlot() {
return Math.floor(Math.random() 36) + 1;
// Girar a bola
function girarBola() {
// Interromper animação da bola
cancelAnimationFrame(bolaId);
// Selecionar slot aleatório
const slotVencedor = escolherSlot();
const anguloVencedor = (slotVencedor - 1) 10;
// Animação da bola
let anguloBola = 0;
function animarBola() {
// Limpar animação anterior
cancelAnimationFrame(bolaId);
// Rotacionar a bola
anguloBola += velocidade direcao;
// Verificar se a bola completou uma volta
if (anguloBola >= 360) {
direcao = -1;
anguloBola = 0;
}
// Verificar se a bola atingiu o slot vencedor
if (anguloBola >= anguloVencedor && direcao == -1) {
bolaId = cancelAnimationFrame(bolaId);
alert(`Você ganhou! O número vencedor é ${ slotVencedor}.`);
}
// Atualizar posição da bola
const x = Math.cos(anguloBola Math.PI / 180) (roleta.clientWidth / 2 - bola.clientWidth / 2);
const y = Math.sin(anguloBola Math.PI / 180) (roleta.clientHeight / 2 - bola.clientHeight / 2);
bola.style.transform = `translate(${ x}px, ${ y}px)`;
// Chamar animação novamente
bolaId = requestAnimationFrame(animarBola);
}
bolaId = requestAnimationFrame(animarBola);
// Inicializar animação da roleta
animarRoleta();
```
Conclusão
Criamos com sucesso uma roleta simples usando JavaScript, HTML e CSS. Ao compreender os conceitos de animação e aleatoriedade, você pode criar jogos ainda mais complexos e envolventes.