Skip to content

Instantly share code, notes, and snippets.

@adrianalonso

adrianalonso/index.html

Created May 19, 2021 18:17
Show Gist options
  • Save adrianalonso/7a5365bf5b746a191cbaf00e5b52c302 to your computer and use it in GitHub Desktop.
Save adrianalonso/7a5365bf5b746a191cbaf00e5b52c302 to your computer and use it in GitHub Desktop.
Download ZIP
Piedra Papel Tijera
Raw
index.html
<!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" />
<title>Document</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Piedra papel o tijera</h1>
<section class="choices">
<img class="piedra" src="images/piedra.jpeg" />
<img class="papel" src="images/papel.jpeg" />
<img class="tijeras" src="images/tijeras.jpeg" />
<p id="resultado"></p>
</section>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
const choices = ["piedra", "papel", "tijeras"];
const uiChoices = document.querySelectorAll(".choices img");
const resultado = document.querySelector("#resultado");
uiChoices.forEach((choice) => {
choice.addEventListener("click", () => jugar(choice.className));
});
function jugar(choice) {
const contrincanteNumeroAleatorio = parseInt(Math.random() * choices.length);
const contricante = choices[contrincanteNumeroAleatorio];
let ganado = -1;
if (
(contricante === "piedra" && choice === "papel") ||
(contricante === "papel" && choice === "tijeras") ||
(contricante === "tijeras" && choice === "piedra")
) {
ganado = 1;
}
if (contricante === choice) {
ganado = 0;
}
if (ganado > 0) {
resultado.textContent =
"El contrincante ha elegido " + contricante + " HAS GANADO";
} else if (ganado < 0) {
resultado.textContent =
"El contrincante ha elegido " + contricante + " HAS PERDIDO";
} else {
resultado.textContent = "EMPATE";
}
}
Raw
style.css
.choices img {
max-width: 200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment