A Pen by Imersão Dev Alura on CodePen.
Created
April 5, 2021 16:41
-
-
Save D1ng0ls/86bcd4ecd231adbf68ad34be21864e2d to your computer and use it in GitHub Desktop.
Super Trunfo - Dia 8
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title> | |
| Imersão Dev - Aula 08 | |
| </title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/logo-imersao-super-trunfo.png" class="page-logo" | |
| alt=""> | |
| <h1 class="page-title">Super Trunfo</h1> | |
| <button onclick="sortearCarta()" id="btnSortear">Sortear carta</button> | |
| <form id="form"> | |
| <h2>Escolha o seu atributo</h2> | |
| <div class="wrapper"> | |
| <div> | |
| <div id="carta-jogador"> | |
| <img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/card-super-trunfo-transparent-ajustado.png" | |
| style=" width: inherit; height: inherit; position: absolute;"> | |
| <h3></h3> | |
| </div> | |
| </div> | |
| <div> | |
| <div id="carta-maquina" class="carta"><img | |
| src="https://www.alura.com.br/assets/img/imersoes/dev-2021/card-super-trunfo-transparent-ajustado.png" | |
| style=" width: inherit; height: inherit; position: absolute;"></div> | |
| </div> | |
| </div> | |
| <button class="button-jogar" type="button" id="btnJogar" onclick="jogar()" disabled="false">Jogar</button> | |
| <div id="resultado"></div> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var cartaPaulo = { | |
| nome: "Seiya de Pegaso", | |
| atributos: { | |
| ataque: 80, | |
| defesa: 60, | |
| magia: 90 | |
| } | |
| } | |
| var cartaRafa = { | |
| nome: "Bulbasauro", | |
| atributos: { | |
| ataque: 70, | |
| defesa: 65, | |
| magia: 85 | |
| } | |
| } | |
| var cartaGui = { | |
| nome: "Lorde Darth Vader", | |
| atributos: { | |
| ataque: 88, | |
| defesa: 62, | |
| magia: 90 | |
| } | |
| } | |
| var cartaMaquina | |
| var cartaJogador | |
| var cartas = [cartaPaulo, cartaRafa, cartaGui] | |
| // 0 1 2 | |
| function sortearCarta() { | |
| var numeroCartaMaquina = parseInt(Math.random() * 3) | |
| cartaMaquina = cartas[numeroCartaMaquina] | |
| var numeroCartaJogador = parseInt(Math.random() * 3) | |
| while (numeroCartaJogador == numeroCartaMaquina) { | |
| numeroCartaJogador = parseInt(Math.random() * 3) | |
| } | |
| cartaJogador = cartas[numeroCartaJogador] | |
| console.log(cartaJogador) | |
| document.getElementById('btnSortear').disabled = true | |
| document.getElementById('btnJogar').disabled = false | |
| exibirOpcoes() | |
| } | |
| function exibirOpcoes() { | |
| var opcoes = document.getElementById('opcoes') | |
| var opcoesTexto = "" | |
| for (var atributo in cartaJogador.atributos) { | |
| opcoesTexto += "<input type='radio' name='atributo' value='" + atributo + "'>" + atributo | |
| } | |
| opcoes.innerHTML = opcoesTexto | |
| } | |
| function obtemAtributoSelecionado() { | |
| var radioAtributo = document.getElementsByName('atributo') | |
| for (var i = 0; i < radioAtributo.length; i++) { | |
| if (radioAtributo[i].checked) { | |
| return radioAtributo[i].value | |
| } | |
| } | |
| } | |
| function jogar() { | |
| var atributoSelecionado = obtemAtributoSelecionado() | |
| if (cartaJogador.atributos[atributoSelecionado] > cartaMaquina.atributos[atributoSelecionado]) { | |
| alert('Venceu a carta máquina') | |
| } else if (cartaJogador.atributos[atributoSelecionado] < cartaMaquina.atributos[atributoSelecionado]) { | |
| alert('Perdeu. Carta da máquina é maior') | |
| } else { | |
| alert('Empatou!') | |
| } | |
| console.log(cartaMaquina) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: 'Roboto Mono', monospace; | |
| min-height: 854px; | |
| background-image: url('https://www.alura.com.br/assets/img/imersoes/dev-2021/dia-07-super-trunfo-bg.png'); | |
| background-color: #000000; | |
| background-size: cover; | |
| background-position: center top; | |
| background-repeat: no-repeat; | |
| padding-bottom: 20vh; | |
| } | |
| .container { | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .page-title { | |
| color: #ffffff; | |
| margin: 5px 0; | |
| } | |
| button, .button-jogar { | |
| padding: .8rem 1.5rem; | |
| margin: 1rem 0; | |
| border-radius: 5px; | |
| border: none; | |
| font-size: 1rem; | |
| } | |
| h2 { | |
| color: white; | |
| } | |
| #carta-jogador, #carta-maquina { | |
| width: 360px; | |
| height: 500px; | |
| overflow: auto; | |
| border-radius: 10px; | |
| margin-bottom: 20px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: flex-end; | |
| position: relative; | |
| background-size: 350px 300px; | |
| background-repeat: no-repeat; | |
| background-position-x: 5px; | |
| background-position-y: 10px; | |
| border-radius: 33px; | |
| } | |
| #carta-jogador h3 { | |
| text-align: center; | |
| } | |
| .carta-imagem { | |
| border: 1px solid black; | |
| height: 100px; | |
| margin: 10px; | |
| } | |
| .carta-imagem img { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .carta-status { | |
| height: 160px; | |
| margin: 2rem; | |
| color: white; | |
| z-index: 2; | |
| } | |
| .carta-status input { | |
| margin: 20px 10px; | |
| } | |
| .resultado-final { | |
| color: white; | |
| font-size: 2rem; | |
| text-transform: uppercase; | |
| font-weigth: bolder; | |
| padding: 1rem; | |
| border: 2px solid black; | |
| background-color: black; | |
| } | |
| .--spacing { | |
| margin-left: 2.5rem; | |
| } | |
| form { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .wrapper { | |
| display: flex; | |
| justify-content: space-between; | |
| width: 100%; | |
| } | |
| .carta-subtitle { | |
| z-index: 2; | |
| position: absolute; | |
| top: 16px; | |
| left: 37px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| } | |
| #cartas { | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .carta-status p { | |
| margin-bottom: 2rem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment