Generation

generate functionSun, 29 Dec 2024

Faça-o um pequeno site de um jogo

Vou criar um exemplo simples de um jogo de "Pedra, Papel e Tesoura" em JavaScript. Este jogo será implementado em um arquivo HTML e um arquivo JavaScript. **index.html** ```html <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jogo de Pedra, Papel e Tesoura</title> <style> body { font-family: Arial, sans-serif; } #jogo { width: 300px; margin: 40px auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #jogo h2 { text-align: center; } #jogo button { width: 100%; padding: 10px; margin-bottom: 10px; border: none; border-radius: 5px; background-color: #4CAF50; color: #fff; cursor: pointer; } #jogo button:hover { background-color: #3e8e41; } #resultado { text-align: center; font-size: 24px; font-weight: bold; margin-top: 20px; } </style> </head> <body> <div id="jogo"> <h2>Jogo de Pedra, Papel e Tesoura</h2> <button id="pedra">Pedra</button> <button id="papel">Papel</button> <button id="tesoura">Tesoura</button> <p id="resultado"></p> </div> <script src="script.js"></script> </body> </html> ``` **script.js** ```javascript // Função para gerar um número aleatório entre 0 e 2 function getAleatorio() { return Math.floor(Math.random() * 3); } // Função para jogar o jogo function jogar() { // Obter o número aleatório do jogador const jogador = getAleatorio(); // Obter o número aleatório do computador const computador = getAleatorio(); // Obter as opções do jogador const opcoes = document.querySelectorAll('button'); // Verificar quem ganhou if (jogador === computador) { // Empate document.getElementById('resultado').innerHTML = 'Empate!'; } else if ((jogador === 0 && computador === 1) || (jogador === 1 && computador === 2) || (jogador === 2 && computador === 0)) { // Jogador ganhou document.getElementById('resultado').innerHTML = 'Você ganhou!'; } else { // Computador ganhou document.getElementById('resultado').innerHTML = 'Computador ganhou!'; } // Atualizar a tela com as opções do jogador e do computador opcoes.forEach((opcao, index) => { opcao.disabled = true; opcao.style.backgroundColor = ''; opcao.style.color = ''; if (index === jogador) { opcao.style.backgroundColor = '#4CAF50'; opcao.style.color = '#fff'; } else if (index === computador) { opcao.style.backgroundColor = '#f44336'; opcao.style.color = '#fff'; } }); } // Adicionar evento de clique nos botões document.querySelectorAll('button').forEach((botao) => { botao.addEventListener('click', jogar); }); ``` Este código cria um jogo de "Pedra, Papel e Tesoura" com três opções: Pedra, Papel e Tesoura. Ao clicar em uma opção, o jogo gera um número aleatório para o jogador e para o computador. Em seguida, ele verifica quem ganhou e atualiza a tela com as opções do jogador e do computador.

Javascript
Generate More

Questions about programming?Chat with your personal AI assistant