Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Isaque4nd
Isaque4nd authored Sep 16, 2022
0 parents commit ab2a13a
Show file tree
Hide file tree
Showing 3 changed files with 294 additions and 0 deletions.
42 changes: 42 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/style.css">
<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>
<script src="script.js"></script>
</body>

</html>
133 changes: 133 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
var cartas1 = {
nome: "Naruto",
imagem: "https://narutokonoha.com/wp-content/uploads/2019/10/Imagens-do-anime-Naruto-para-Imprimir-e-Colorir.jpg",
atributos: {
ataque: 40,
defesa: 30,
ninjutsu: 70,
}

};

var cartas2 = {
nome: "Sasuke",
imagem:"https://staticg.sportskeeda.com/editor/2022/07/b5a01-16570752464477-1920.jpg",
atributos: {
ataque: 40,
defesa: 25,
ninjutsu: 65,
}

};

var cartas3 = {
nome: "Sakura",
imagem:"http://pm1.narvii.com/6623/0a327fc32c264fa3d8de36f7ff889e544b27ca6d_00.jpg",
atributos: {
ataque: 50,
defesa: 30,
ninjutsu: 60,
}

};

var cartas4 = {
nome: "Hashirama",
imagem:"https://nerdhits.com.br/wp-content/uploads/2020/05/hashirama-senju-curiosidades-1200x900.jpg",
atributos: {
ataque: 70,
defesa: 60,
ninjutsu: 80,
}

};

var cartas5 = {
nome: "Kakashi",
imagem:"https://besthqwallpapers.com/Uploads/27-12-2020/149054/thumb2-kakashi-hatake-4k-blue-neon-lights-naruto-characters-artwork.jpg",
atributos: {
ataque: 55,
defesa: 50,
ninjutsu: 70,
}

};

var cartas = [cartas1, cartas2, cartas3, cartas4, cartas5];
var cartaMaquina;
var cartaJogador;

function sortearCarta() {
var numeroCartaMaquina = parseInt(Math.random() * 5);
cartaMaquina = cartas[numeroCartaMaquina];

var numeroCartaJogador = parseInt(Math.random() * 5);
while (numeroCartaJogador == numeroCartaMaquina) {
numeroCartaJogador = parseInt(Math.random() * 5);
}
cartaJogador = cartas[numeroCartaJogador];
console.log(cartaJogador);

document.getElementById("btnSortear").disabled = true;
document.getElementById("btnJogar").disabled = false;
exibirCartaJogador();
}

function obtemAtributoSelecionado() {
var radioAtributos = document.getElementsByName("atributo");
for (var i = 0; i < radioAtributos.length; i++) {
if (radioAtributos[i].checked == true) {
return radioAtributos[i].value;
}
}
}

function jogar() {
console.log("chamou");
var atributoSelecionado = obtemAtributoSelecionado();
var divResultado = document.getElementById("resultado");

if (cartaJogador.atributos[atributoSelecionado] > cartaMaquina.atributos[atributoSelecionado]) {
htmlResultado = "<p class='resultado-final'>Venceu</p>";
} else if (cartaJogador.atributos[atributoSelecionado] < cartaMaquina.atributos[atributoSelecionado]) {
htmlResultado = "<p class='resultado-final'>Perdeu</p>";
} else {
htmlResultado = "<p class='resultado-final'>Empatou</p>";
}
divResultado.innerHTML = htmlResultado;

document.getElementById("btnJogar").disabled = true;
exibirCartaMaquina();
}

function exibirCartaJogador() {
var divCartaJogador = document.getElementById("carta-jogador");
divCartaJogador.style.backgroundImage = `url(${cartaJogador.imagem})`;
// divCartaJogador.style.backgroundImage = "url(" + cartaJogador.imagem + ")"
var moldura = '<img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/card-super-trunfo-transparent.png" style=" width: inherit; height: inherit; position: absolute;">';
var tagHTML = "<div id='opcoes' class='carta-status'>";

var opcoesTexto = "";
for (var atributo in cartaJogador.atributos) {
opcoesTexto += "<input type='radio' name='atributo' value='" + atributo + "'>" + atributo + " " + cartaJogador.atributos[atributo] + "<br>";
}
var nome = `<p class="carta-subtitle">${cartaJogador.nome}</p>`;

divCartaJogador.innerHTML = moldura + nome + tagHTML + opcoesTexto + "</div>";
}

function exibirCartaMaquina() {
var divCartaMaquina = document.getElementById("carta-maquina");
divCartaMaquina.style.backgroundImage = `url(${cartaMaquina.imagem})`;
// divCartaJogador.style.backgroundImage = "url(" + cartaJogador.imagem + ")"
var moldura = '<img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/card-super-trunfo-transparent.png" style=" width: inherit; height: inherit; position: absolute;">';
var tagHTML = "<div id='opcoes' class='carta-status'>";

var opcoesTexto = "";
for (var atributo in cartaMaquina.atributos) {
opcoesTexto += "<p type='text' name='atributo' value='" + atributo + "'>" + atributo + " " + cartaMaquina.atributos[atributo] + "</p>";
}
var nome = `<p class="carta-subtitle">${cartaMaquina.nome}</p>`;

divCartaMaquina.innerHTML = moldura + nome + tagHTML + opcoesTexto + "</div>";
}
119 changes: 119 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
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-weight: 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;
}

0 comments on commit ab2a13a

Please sign in to comment.