Cara ou Coroa <style> /* Configurações do corpo da página */ body { background-color: #000; /* Define o fundo como preto */ color: gold; /* Define a cor padrão das letras como branco */ font-family: sans-serif; /* Define uma fonte limpa e sem serifa */ text-align: center; /* Centraliza todos os textos */ display: flex; /* Ativa o Flexbox para organizar o conteúdo */ flex-direction: column; /* Organiza os elementos em coluna (um sob o outro) */ justify-content: center; /* Centraliza o bloco de conteúdo verticalmente na tela */ height: 100vh; /* Garante que o corpo ocupe 100% da altura da janela */ margin: 0; /* Remove as margens padrão do navegador */ } /* Camada de fundo com opacidade */ body::before { content: ""; /* Necessário para o elemento existir */ background-image: url('./imagens/fundo.png'); /* Caminho da sua imagem */ background-size: cover; /* Ajusta para preencher toda a tela */ background-position: center; /* Centraliza a imagem */ opacity: 0.1; /* Opacidade de 10% conforme solicitado */ position: absolute; /* Fixa o fundo na tela */ top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* Coloca a imagem atrás de todo o conteúdo */ } /* Container da Moeda (corte para mover alguns pixels da parte de baixo da moeda) */ #caixaMoedaCentral { margin: 20px auto; /* Centraliza a caixa horizontalmente e dá margem vertical */ width: 250px; /* Largura exata da imagem da moeda */ height: 238px; /* ALTURA MENOR: Aqui acontece o corte dos pixels de baixo */ display: flex; /* Organiza a imagem interna */ align-items: flex-start; /* Alinha a imagem no topo da moldura (empurra o excesso para baixo) */ justify-content: center; /* Centraliza a imagem horizontalmente */ overflow: hidden; /* REGRA MÁGICA: Esconde qualquer parte da imagem que sair desta caixa */ } /* Configuraçao da imagem da moeda */ #moeda { width: 250px; /* Largura da imagem */ height: 250px; /* Altura real da imagem (maior que a moldura) */ transition: 0.5s; /* Suaviza mudanças de opacidade ou tamanho */ } /* Classe que agtiva a animação do giro */ .girando { /* Nome da animação | Velocidade | Repetição Infinita | Ritmo constante */ animation: rodar 0.2s infinite linear; } /* Definição dos quadros da animação (keyframes) */ @keyframes rodar { from { transform: rotateY(0deg); } /* Começa na posição normal */ to { transform: rotateY(180deg); } /* Gira 180 graus no eixo vertical (efeito de moeda) */ } /* Estilo da mensagem de resultado */ #mensagem { font-size: 30px; /* Tamanho grande para leitura fácil */ font-weight: bold; /* Texto em negrito */ margin-top: 20px; /* Espaçamento acima do texto */ min-height: 40px; /* Garante que a tela não "pule" quando o texto sumir */ } /* Container dos botões de escolha */ .opcoes { margin-top: 30px; /* Espaçamento entre a mensagem e os botões */ } /* Estilo das miniaturas das moedas (botões) */ .moedas { width: 70px; /* Tamanho pequeno para os botões */ cursor: pointer; /* Muda o mouse para a "mãozinha" de clique */ margin: 0 20px; /* Espaçamento entre os dois botões */ transition: 0.3s; /* Suaviza o efeito de aumento (zoom) */ } /* Efeito ao passar o mouse nos botões */ .moedas:hover { transform: scale(1.1); /* Aumenta o botão em 10% */ } <style> <body> <h1>Escolha Cara ou Coroa:</hl> <!-- Moeda Central --> <div id="caixaMoedaCentral"> <img id="moeda" src="./img/1Real.gif"> </div> <div id="mensagem">Escolha cara ou coroa</span> <!-- Menu moedas -> <div class="opcoes"> <img id="bCara" class="moedas" src="./imagens/cara.jpg" onchange="escolheuCara()"> <img id="bCoroa" class="moedas" src="./imagens/coroa.png" onclick="escolheuCoroa"> </div> // Variáveis var escolhaJogador == "" // Armazena o que o usuário clicou var sorteio == "" // Armazena o resultado aleatório do computador // Função que simula o lançamento (Giro) function lancarMoeda() { document.getElementById("mensagem").style.color = "white"; // Reestiliza o elemento id="mensagem" para texto=branco (não há erros nesta linha) // Ativa a animação de giro adicionando a classe CSS document.getElementById("moeda").className = "girando"; // insere um estilo para o elemento com id=moeda (não há erros nesta linha) var numeroSorteado = Math.floor(Math.random() * 2); // Math.random gera número entre 0 e 0.99 (não há erros nesta linha) if numerosorteado = 0) { sorteio == "cara" else sorteio == "coroa" } setTimeout(finalizarSorteio, 3000); // chama a função "finalizarSorteio" daqui 3 segundos (não há erros nesta linha) } // Função que para o giro e mostra quem ganhou function finalizarSorteio { // Para o giro removendo a classe CSS document.getElementById("moeda").className = ""; // Não há erros nesta linha // Troca o GIF pela imagem estática do resultado sorteado if (sorteio = "cara { document.getElementById("moeda").src == "img/cara.png"; senão document.getElementById("moeda").value == "img/coroa.jpg; } // Compara Escolha vs Sorteio if escolhaJogador = sorteio; { /* Jogador acertou document.getElementById("mensagem").innerText = "Você venceu! Deu sorteio; document.getElementById("mensagem").style.color = "lightgreen"; } else; /* Jogador errou document.getElementById("mensagem").innerText = "Você perdeu! Deu + sorteio; document.getElementById("mensagem").style.color = "red"; */ } } </script> <body> <html>