Piedra, papel, tijera, lagarto, Spock
How do I make an piedra, papel, tijera, lagarto, spock?
Segundo ejercicio para aprender a programar con JavaScript. What is a piedra, papel, tijera, lagarto, spock? How do you make a piedra, papel, tijera, lagarto, spock? This script and codes were developed by Arkev on 10 August 2022, Wednesday.
Piedra, papel, tijera, lagarto, Spock Previews
Piedra, papel, tijera, lagarto, Spock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Piedra, papel, tijera, lagarto, Spock</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
.asap { font-family: 'Asap', sans-serif;
}
.boxShadow { box-shadow: #0d5d9e 1px 1px, #0d5d9e 2px 2px, #0d5d9e 3px 3px, #0d5d9e 4px 4px, #0d5d9e 5px 5px;
}
.textShadow { text-shadow: #2e81ad 1px 1px, #2e81ad 2px 2px, rgba(46, 129, 173, 0.8) 3px 3px, rgba(46, 129, 173, 0.7) 4px 4px, rgba(46, 129, 173, 0.6) 5px 5px, rgba(46, 129, 173, 0.5) 6px 6px, rgba(46, 129, 173, 0.4) 7px 7px, rgba(46, 129, 173, 0.3) 8px 8px, rgba(46, 129, 173, 0.2) 9px 9px, rgba(46, 129, 173, 0.1) 10px 10px, rgba(46, 129, 173, 0) 11px 11px;
}
html { font-size: 6.25%; /* Sets up the Base 10 stuff */
}
body { background: #0067b5; color: white; font-size: 16px; font-size: 16rem; font-family: 'Asap', sans-serif;
}
#container { width: 100%; margin: 0 auto; max-width: 500px;
}
h1 { font-weight: bold; text-align: center; margin: 0.1em; font-size: 50px; font-size: 50rem;
}
@media only screen and (min-width: 320px) { h1 { font-size: 30px; font-size: 30rem; }
}
@media only screen and (min-width: 569px) { h1 { font-size: 50px; font-size: 50rem; }
}
@media only screen and (min-width: 320px) and (orientation: landscape) { h1 { display: none; }
}
@media only screen and (min-width: 800px) and (orientation: landscape) { h1 { display: block; }
}
h2 { font-weight: bold; font-size: 36px; font-size: 36rem;
}
#versus { width: 62.5%; max-width: 600px; display: flex; margin: 0 auto; text-align: center;
}
@media only screen and (min-width: 320px) { #versus { height: 90px; max-width: 216px; }
}
@media only screen and (min-width: 569px) { #versus { height: 124px; max-width: 313px; }
}
@media only screen and (min-width: 768px) { #versus { width: 70%; height: 137px; max-width: 350px; }
}
@media only screen and (min-width: 800px) { #versus { width: 50%; height: 104px; }
}
@media only screen and (min-width: 1024px) { #versus { width: 75%; height: 145px; }
}
#versus .opcion { width: 33%; font-size: 30px; font-size: 30rem;
}
#versus .opcion img { width: 100%; display: none;
}
#versus .opcion:first-child { display: flex; align-items: flex-start; justify-content: flex-start; flex-flow: column wrap;
}
#versus .opcion:nth-child(2n) { display: flex; align-items: center; justify-content: center; flex-flow: column wrap;
}
#versus .opcion:nth-child(3) { display: flex; align-items: flex-end; justify-content: flex-end; flex-flow: column wrap;
}
#nombre-usuario,
#sheldon { width: 100%; margin-top: 3px; height: 1em; overflow: hidden; font-size: 16px; font-size: 16rem;
}
#resultado { width: 100%; display: block; text-align: center; height: 1.2em; font-size: 30px; font-size: 30rem;
}
#opciones { margin: 2rem auto 0; position: relative; width: 250px; height: 215px;
}
@media only screen and (min-width: 320px) { #opciones { width: 250px; height: 215px; }
}
@media only screen and (min-width: 320px) and (orientation: landscape) { #opciones { display: none; }
}
@media only screen and (min-width: 569px) { #opciones { width: 450px; height: 385px; }
}
@media only screen and (min-width: 800px) { #opciones { height: 270px; width: 320px; display: block; }
}
@media only screen and (min-width: 1024px) { #opciones { height: 400px; width: 450px; }
}
#opciones a { width: 31%; position: absolute;
}
#opciones a img { width: 100%;
}
#opciones #piedra { left: 34.5%; top: 0%;
}
#opciones #papel { left: 3%; top: 22%;
}
#opciones #tijera { right: 3%; top: 22%;
}
#opciones #lagarto { left: 15%; top: 63%;
}
#opciones #spock { right: 15%; top: 63%;
}
@media only screen and (min-width: 320px) and (orientation: landscape) { #tablero { display: none; }
}
@media only screen and (min-width: 800px) { #tablero { display: block; }
}
#botones { margin-top: .5em; display: flex; height: 45px;
}
#botones .col50 { width: 50%; display: flex; align-items: flex-start; justify-content: flex-start; flex-flow: column wrap;
}
#botones .col50 .colCenter { width: 100%; display: flex; align-items: center; justify-content: center; flex-flow: column wrap;
}
@media only screen and (min-width: 320px) and (orientation: landscape) { #botones { display: none; }
}
@media only screen and (min-width: 569px) { #botones { width: 320px; margin: 2em auto 0; }
}
@media only screen and (min-width: 800px) { #botones { display: flex; }
}
.boton { background-color: #2d8ec2; height: 36px; width: 36px; text-align: center; line-height: 1.5em; font-size: 24px; font-size: 24rem; border-radius: 8px; text-shadow: #2e81ad 1px 1px, #2e81ad 2px 2px, rgba(46, 129, 173, 0.8) 3px 3px, rgba(46, 129, 173, 0.7) 4px 4px, rgba(46, 129, 173, 0.6) 5px 5px, rgba(46, 129, 173, 0.5) 6px 6px, rgba(46, 129, 173, 0.4) 7px 7px, rgba(46, 129, 173, 0.3) 8px 8px, rgba(46, 129, 173, 0.2) 9px 9px, rgba(46, 129, 173, 0.1) 10px 10px, rgba(46, 129, 173, 0) 11px 11px; box-shadow: #0d5d9e 1px 1px, #0d5d9e 2px 2px, #0d5d9e 3px 3px, #0d5d9e 4px 4px, #0d5d9e 5px 5px;
}
.boton:link,
.boton:visited,
.boton:hover,
.boton:active { color: white; text-decoration: none;
}
.boton:active { text-shadow: initial; box-shadow: initial; background-color: #217bac; margin: 5px 0 0 5px;
}
@media only screen and (min-width: 320px) and (orientation: portrait) { #lanscape { display: none; }
}
@media only screen and (min-width: 320px) and (orientation: landscape) { #lanscape { display: block; } #lanscape h2 { text-align: center; } #lanscape img { margin: 1em auto 0; width: 35%; display: block; }
}
@media only screen and (min-width: 800px) { #lanscape { display: none; }
}
.show { display: block!important;
}
.hide { display: none;
}
/* Reglas */
.md-modal { position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px; min-width: 320px; height: auto; z-index: 2000; visibility: hidden; backface-visibility: hidden; transform: translateX(-50%) translateY(-50%);
}
.md-show { visibility: visible;
}
.md-show ~ .md-overlay { opacity: 1; visibility: visible;
}
.md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(2, 54, 89, 0.8); transition: all 0.3s;
}
/* Content styles */
.md-content { background: #0067b5; position: relative; margin: 0 auto; border-radius: 3px;
}
.md-content h3 { margin: 0; padding: 0.4em; font-weight: 300; opacity: 0.8; background: #0a529c; border-radius: 3px 3px 0 0; text-align: center; font-size: 24px; font-size: 24rem;
}
.md-content > div { padding: 15px 40px 30px; margin: 0; font-weight: 300; font-size: 16px; font-size: 16rem;
}
.md-content > div p { margin: 0; padding: 10px 0 1.5em; line-height: 1.3em;
}
.md-content > div ul { margin: 0; padding: 0 0 30px 20px;
}
.md-content > div ul li { padding: 5px 0;
}
.md-content .boton { padding: 7px; margin: 1em auto;
}
/* Effect 8: 3D flip horizontal */
.md-effect-8.md-modal { perspective: 1300px;
}
.md-effect-8 .md-content { transform-style: preserve-3d; transform: rotateY(-70deg); transition: all 0.3s; opacity: 0;
}
.md-show.md-effect-8 .md-content { transform: rotateY(0deg); opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- !Reglas-->
<section class="md-modal md-effect-8" id="modal-8"> <div class="md-content"> <h3>Reglas</h3> <div> <p> Tal como las explicó Sheldon en The big bang theory:<br>
“Las tijeras cortan el papel, el papel cubre a la piedra, la piedra aplasta al lagarto, el lagarto envenena a Spock, Spock destroza las tijeras, las tijeras decapitan al lagarto, el lagarto se come el papel, el papel refuta a Spock, Spock vaporiza la piedra, y, como es habitual… la piedra aplasta las tijeras.” </p> <a class="boton md-close"><span class="fa fa-arrow-left"></span> Volver</a> </div> </div> </section>
<!-- /Reglas-->
<!-- !#container -->
<section id="container"> <!-- !Marcador -->
<h1><span id="M-Usuario">0</span> / <span id="M-Maquina">0</span></h1>
<!-- !Versus -->
<section id="tablero"> <div id="versus"> <div id="usuario" class="opcion"> <img src="http://arkev.com/shared/PPTLS/piedra.jpg" class="uspiedra"> <img src="http://arkev.com/shared/PPTLS/papel.jpg" class="uspapel"> <img src="http://arkev.com/shared/PPTLS/tijera.jpg" class="ustijera"> <img src="http://arkev.com/shared/PPTLS/lagarto.jpg" class="uslagarto"> <img src="http://arkev.com/shared/PPTLS/spock.jpg" class="usspock"> <div id="nombre-usuario">Usuario</div> </div> <div class="opcion">V.S.</div> <div id="maquina" class="opcion"> <img src="http://arkev.com/shared/PPTLS/piedra.jpg" class="mapiedra"> <img src="http://arkev.com/shared/PPTLS/papel.jpg" class="mapapel"> <img src="http://arkev.com/shared/PPTLS/tijera.jpg" class="matijera"> <img src="http://arkev.com/shared/PPTLS/lagarto.jpg" class="malagarto"> <img src="http://arkev.com/shared/PPTLS/spock.jpg" class="maspock"> <div id="sheldon">Sheldon</div> </div> </div> <div id="resultado"></div>
</section>
<!-- /Versus -->
<!-- !#Opciones -->
<section id="opciones"> <a href="#" id="piedra" onclick="rock()" class="opcion"><img src="http://arkev.com/shared/PPTLS/piedra.jpg"></a> <a href="#" id="papel" onclick="paper()" class="opcion"><img src="http://arkev.com/shared/PPTLS/papel.jpg"></a> <a href="#" id="tijera" onclick="ciseaux()" class="opcion"><img src="http://arkev.com/shared/PPTLS/tijera.jpg"></a> <a href="#" id="lagarto" onclick="lizard()" class="opcion"><img src="http://arkev.com/shared/PPTLS/lagarto.jpg"></a> <a href="#" id="spock" onclick="mrSpock()" class="opcion"><img src="http://arkev.com/shared/PPTLS/spock.jpg"></a>
</section>
<!-- /Opciones -->
<!-- !#Botones -->
<section id="botones"> <div class="col50"> <div class="colCenter"> <a class="boton md-trigger" data-modal="modal-8" href="#"> <span class="fa fa-info"></span> </a> </div> </div> <div class="col50"> <div class="colCenter"> <a class="boton" href="#" onclick="resetear()"> <span class="fa fa-refresh"></span> </a> </div> </div>
</section>
<!-- /Botones -->
<!-- !#Lanscape -->
<section id="lanscape"> <img src="http://arkev.com/shared/PPTLS/girar.png"> <h2>Gira tu dispositivo</h2>
</section>
<!-- /lanscape -->
</section>
<!-- /container -->
<!-- !the overlay element -->
<div class="md-overlay"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://arkev.com/shared/PPTLS/classie.js'></script>
<script src='http://arkev.com/shared/PPTLS/modalEffects.js'></script> <script src="js/index.js"></script>
</body>
</html>
Piedra, papel, tijera, lagarto, Spock - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
.asap { font-family: 'Asap', sans-serif;
}
.boxShadow { box-shadow: #0d5d9e 1px 1px, #0d5d9e 2px 2px, #0d5d9e 3px 3px, #0d5d9e 4px 4px, #0d5d9e 5px 5px;
}
.textShadow { text-shadow: #2e81ad 1px 1px, #2e81ad 2px 2px, rgba(46, 129, 173, 0.8) 3px 3px, rgba(46, 129, 173, 0.7) 4px 4px, rgba(46, 129, 173, 0.6) 5px 5px, rgba(46, 129, 173, 0.5) 6px 6px, rgba(46, 129, 173, 0.4) 7px 7px, rgba(46, 129, 173, 0.3) 8px 8px, rgba(46, 129, 173, 0.2) 9px 9px, rgba(46, 129, 173, 0.1) 10px 10px, rgba(46, 129, 173, 0) 11px 11px;
}
html { font-size: 6.25%; /* Sets up the Base 10 stuff */
}
body { background: #0067b5; color: white; font-size: 16px; font-size: 16rem; font-family: 'Asap', sans-serif;
}
#container { width: 100%; margin: 0 auto; max-width: 500px;
}
h1 { font-weight: bold; text-align: center; margin: 0.1em; font-size: 50px; font-size: 50rem;
}
@media only screen and (min-width: 320px) { h1 { font-size: 30px; font-size: 30rem; }
}
@media only screen and (min-width: 569px) { h1 { font-size: 50px; font-size: 50rem; }
}
@media only screen and (min-width: 320px) and (orientation: landscape) { h1 { display: none; }
}
@media only screen and (min-width: 800px) and (orientation: landscape) { h1 { display: block; }
}
h2 { font-weight: bold; font-size: 36px; font-size: 36rem;
}
#versus { width: 62.5%; max-width: 600px; display: flex; margin: 0 auto; text-align: center;
}
@media only screen and (min-width: 320px) { #versus { height: 90px; max-width: 216px; }
}
@media only screen and (min-width: 569px) { #versus { height: 124px; max-width: 313px; }
}
@media only screen and (min-width: 768px) { #versus { width: 70%; height: 137px; max-width: 350px; }
}
@media only screen and (min-width: 800px) { #versus { width: 50%; height: 104px; }
}
@media only screen and (min-width: 1024px) { #versus { width: 75%; height: 145px; }
}
#versus .opcion { width: 33%; font-size: 30px; font-size: 30rem;
}
#versus .opcion img { width: 100%; display: none;
}
#versus .opcion:first-child { display: flex; align-items: flex-start; justify-content: flex-start; flex-flow: column wrap;
}
#versus .opcion:nth-child(2n) { display: flex; align-items: center; justify-content: center; flex-flow: column wrap;
}
#versus .opcion:nth-child(3) { display: flex; align-items: flex-end; justify-content: flex-end; flex-flow: column wrap;
}
#nombre-usuario,
#sheldon { width: 100%; margin-top: 3px; height: 1em; overflow: hidden; font-size: 16px; font-size: 16rem;
}
#resultado { width: 100%; display: block; text-align: center; height: 1.2em; font-size: 30px; font-size: 30rem;
}
#opciones { margin: 2rem auto 0; position: relative; width: 250px; height: 215px;
}
@media only screen and (min-width: 320px) { #opciones { width: 250px; height: 215px; }
}
@media only screen and (min-width: 320px) and (orientation: landscape) { #opciones { display: none; }
}
@media only screen and (min-width: 569px) { #opciones { width: 450px; height: 385px; }
}
@media only screen and (min-width: 800px) { #opciones { height: 270px; width: 320px; display: block; }
}
@media only screen and (min-width: 1024px) { #opciones { height: 400px; width: 450px; }
}
#opciones a { width: 31%; position: absolute;
}
#opciones a img { width: 100%;
}
#opciones #piedra { left: 34.5%; top: 0%;
}
#opciones #papel { left: 3%; top: 22%;
}
#opciones #tijera { right: 3%; top: 22%;
}
#opciones #lagarto { left: 15%; top: 63%;
}
#opciones #spock { right: 15%; top: 63%;
}
@media only screen and (min-width: 320px) and (orientation: landscape) { #tablero { display: none; }
}
@media only screen and (min-width: 800px) { #tablero { display: block; }
}
#botones { margin-top: .5em; display: flex; height: 45px;
}
#botones .col50 { width: 50%; display: flex; align-items: flex-start; justify-content: flex-start; flex-flow: column wrap;
}
#botones .col50 .colCenter { width: 100%; display: flex; align-items: center; justify-content: center; flex-flow: column wrap;
}
@media only screen and (min-width: 320px) and (orientation: landscape) { #botones { display: none; }
}
@media only screen and (min-width: 569px) { #botones { width: 320px; margin: 2em auto 0; }
}
@media only screen and (min-width: 800px) { #botones { display: flex; }
}
.boton { background-color: #2d8ec2; height: 36px; width: 36px; text-align: center; line-height: 1.5em; font-size: 24px; font-size: 24rem; border-radius: 8px; text-shadow: #2e81ad 1px 1px, #2e81ad 2px 2px, rgba(46, 129, 173, 0.8) 3px 3px, rgba(46, 129, 173, 0.7) 4px 4px, rgba(46, 129, 173, 0.6) 5px 5px, rgba(46, 129, 173, 0.5) 6px 6px, rgba(46, 129, 173, 0.4) 7px 7px, rgba(46, 129, 173, 0.3) 8px 8px, rgba(46, 129, 173, 0.2) 9px 9px, rgba(46, 129, 173, 0.1) 10px 10px, rgba(46, 129, 173, 0) 11px 11px; box-shadow: #0d5d9e 1px 1px, #0d5d9e 2px 2px, #0d5d9e 3px 3px, #0d5d9e 4px 4px, #0d5d9e 5px 5px;
}
.boton:link,
.boton:visited,
.boton:hover,
.boton:active { color: white; text-decoration: none;
}
.boton:active { text-shadow: initial; box-shadow: initial; background-color: #217bac; margin: 5px 0 0 5px;
}
@media only screen and (min-width: 320px) and (orientation: portrait) { #lanscape { display: none; }
}
@media only screen and (min-width: 320px) and (orientation: landscape) { #lanscape { display: block; } #lanscape h2 { text-align: center; } #lanscape img { margin: 1em auto 0; width: 35%; display: block; }
}
@media only screen and (min-width: 800px) { #lanscape { display: none; }
}
.show { display: block!important;
}
.hide { display: none;
}
/* Reglas */
.md-modal { position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px; min-width: 320px; height: auto; z-index: 2000; visibility: hidden; backface-visibility: hidden; transform: translateX(-50%) translateY(-50%);
}
.md-show { visibility: visible;
}
.md-show ~ .md-overlay { opacity: 1; visibility: visible;
}
.md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(2, 54, 89, 0.8); transition: all 0.3s;
}
/* Content styles */
.md-content { background: #0067b5; position: relative; margin: 0 auto; border-radius: 3px;
}
.md-content h3 { margin: 0; padding: 0.4em; font-weight: 300; opacity: 0.8; background: #0a529c; border-radius: 3px 3px 0 0; text-align: center; font-size: 24px; font-size: 24rem;
}
.md-content > div { padding: 15px 40px 30px; margin: 0; font-weight: 300; font-size: 16px; font-size: 16rem;
}
.md-content > div p { margin: 0; padding: 10px 0 1.5em; line-height: 1.3em;
}
.md-content > div ul { margin: 0; padding: 0 0 30px 20px;
}
.md-content > div ul li { padding: 5px 0;
}
.md-content .boton { padding: 7px; margin: 1em auto;
}
/* Effect 8: 3D flip horizontal */
.md-effect-8.md-modal { perspective: 1300px;
}
.md-effect-8 .md-content { transform-style: preserve-3d; transform: rotateY(-70deg); transition: all 0.3s; opacity: 0;
}
.md-show.md-effect-8 .md-content { transform: rotateY(0deg); opacity: 1;
}
Piedra, papel, tijera, lagarto, Spock - Script Codes JS Codes
//Variables
var piedra = 0;
var papel= 1;
var tijera = 2;
var lagarto = 3;
var spock = 4;
var puntosUsuario = 1;
var puntosMaquina = 1;
var opcionUsuario;
var opcionMaquina;
var opciones = ["Piedra","Papel","Tijera","Lagarto","Spock"];
//Funciones
function aleatorio(minimo, maximo)
{ var numero = Math.floor( Math.random() * (maximo - minimo +1) + minimo); return numero;
}
var nombreUsuario = prompt("¿Cúal es tu nickname?" , "Usuario");
document.getElementById("nombre-usuario").innerHTML = nombreUsuario;
function resetear()
{ puntosUsuario = 1; puntosMaquina = 1; document.getElementById("M-Usuario").innerHTML = 0; document.getElementById("M-Maquina").innerHTML = 0; document.getElementById("resultado").innerHTML = ""; document.getElementsByClassName("uspiedra")[0].classList.remove("show"); document.getElementsByClassName("uspapel")[0].classList.remove("show"); document.getElementsByClassName("ustijera")[0].classList.remove("show"); document.getElementsByClassName("uslagarto")[0].classList.remove("show"); document.getElementsByClassName("usspock")[0].classList.remove("show"); document.getElementsByClassName("mapiedra")[0].classList.remove("show"); document.getElementsByClassName("mapapel")[0].classList.remove("show"); document.getElementsByClassName("matijera")[0].classList.remove("show"); document.getElementsByClassName("malagarto")[0].classList.remove("show"); document.getElementsByClassName("maspock")[0].classList.remove("show");
}
//Piedra
function rock() { opcionUsuario = 0;
if (opcionUsuario == piedra) { //Usuario document.getElementsByClassName("uspiedra")[0].className += " show"; document.getElementsByClassName("uspapel")[0].classList.remove("show"); document.getElementsByClassName("ustijera")[0].classList.remove("show"); document.getElementsByClassName("uslagarto")[0].classList.remove("show"); document.getElementsByClassName("usspock")[0].classList.remove("show"); //Maquina document.getElementsByClassName("mapiedra")[0].classList.remove("show"); document.getElementsByClassName("mapapel")[0].classList.remove("show"); document.getElementsByClassName("matijera")[0].classList.remove("show"); document.getElementsByClassName("malagarto")[0].classList.remove("show"); document.getElementsByClassName("maspock")[0].classList.remove("show"); opcionMaquina = aleatorio (0,4); opciones[opcionMaquina]; if (opcionMaquina == piedra) { document.getElementsByClassName("mapiedra")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Empate!"; } else if (opcionMaquina == papel) { document.getElementsByClassName("mapapel")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Perdiste!"; document.getElementById("M-Maquina").innerHTML = puntosMaquina++; } else if (opcionMaquina == tijera) { document.getElementsByClassName("matijera")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Ganaste!"; document.getElementById("M-Usuario").innerHTML = puntosUsuario++; } else if (opcionMaquina == lagarto) { document.getElementsByClassName("malagarto")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Ganaste!"; document.getElementById("M-Usuario").innerHTML = puntosUsuario++; } else if (opcionMaquina == spock) { document.getElementsByClassName("maspock")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Perdiste!"; document.getElementById("M-Maquina").innerHTML = puntosMaquina++; } }
}
//Papel
function paper() { opcionUsuario = 1;
if (opcionUsuario == papel) { //Usuario document.getElementsByClassName("uspapel")[0].className += " show"; document.getElementsByClassName("uspiedra")[0].classList.remove("show"); document.getElementsByClassName("ustijera")[0].classList.remove("show"); document.getElementsByClassName("uslagarto")[0].classList.remove("show"); document.getElementsByClassName("usspock")[0].classList.remove("show"); //Maquina document.getElementsByClassName("mapiedra")[0].classList.remove("show"); document.getElementsByClassName("mapapel")[0].classList.remove("show"); document.getElementsByClassName("matijera")[0].classList.remove("show"); document.getElementsByClassName("malagarto")[0].classList.remove("show"); document.getElementsByClassName("maspock")[0].classList.remove("show"); opcionMaquina = aleatorio (0,4); opciones[opcionMaquina]; if (opcionMaquina == piedra) { document.getElementsByClassName("mapiedra")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Ganaste!"; document.getElementById("M-Usuario").innerHTML = puntosUsuario++; } else if (opcionMaquina == papel) { document.getElementsByClassName("mapapel")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Empate!"; } else if (opcionMaquina == tijera) { document.getElementsByClassName("matijera")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Perdiste!"; document.getElementById("M-Maquina").innerHTML = puntosMaquina++; } else if (opcionMaquina == lagarto) { document.getElementsByClassName("malagarto")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Perdiste!"; document.getElementById("M-Maquina").innerHTML = puntosMaquina++; } else if (opcionMaquina == spock) { document.getElementsByClassName("maspock")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Ganaste!"; document.getElementById("M-Usuario").innerHTML = puntosUsuario++; } }
}
//Tijeras
function ciseaux() { opcionUsuario = 2; if (opcionUsuario == tijera) { //Usuario document.getElementsByClassName("ustijera")[0].className += " show"; document.getElementsByClassName("uspapel")[0].classList.remove("show"); document.getElementsByClassName("uspiedra")[0].classList.remove("show"); document.getElementsByClassName("uslagarto")[0].classList.remove("show"); document.getElementsByClassName("usspock")[0].classList.remove("show"); //Maquina document.getElementsByClassName("mapiedra")[0].classList.remove("show"); document.getElementsByClassName("mapapel")[0].classList.remove("show"); document.getElementsByClassName("matijera")[0].classList.remove("show"); document.getElementsByClassName("malagarto")[0].classList.remove("show"); document.getElementsByClassName("maspock")[0].classList.remove("show"); opcionMaquina = aleatorio (0,4); opciones[opcionMaquina];
if (opcionMaquina == piedra) { document.getElementsByClassName("mapiedra")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Perdiste!"; document.getElementById("M-Maquina").innerHTML = puntosMaquina++; } else if (opcionMaquina == papel) { document.getElementsByClassName("mapapel")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Ganaste!"; document.getElementById("M-Usuario").innerHTML = puntosUsuario++; } else if (opcionMaquina == tijera) { document.getElementsByClassName("matijera")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Empate!"; } else if (opcionMaquina == lagarto) { document.getElementsByClassName("malagarto")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Ganaste!"; document.getElementById("M-Usuario").innerHTML = puntosUsuario++; } else if (opcionMaquina == spock) { document.getElementsByClassName("maspock")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Perdiste!"; document.getElementById("M-Maquina").innerHTML = puntosMaquina++; } }
}
//Lagarto
function lizard() { opcionUsuario = 3; if (opcionUsuario == lagarto) { //Usuario document.getElementsByClassName("uslagarto")[0].className += " show"; document.getElementsByClassName("uspapel")[0].classList.remove("show"); document.getElementsByClassName("ustijera")[0].classList.remove("show"); document.getElementsByClassName("uspiedra")[0].classList.remove("show"); document.getElementsByClassName("usspock")[0].classList.remove("show"); //Maquina document.getElementsByClassName("mapiedra")[0].classList.remove("show"); document.getElementsByClassName("mapapel")[0].classList.remove("show"); document.getElementsByClassName("matijera")[0].classList.remove("show"); document.getElementsByClassName("malagarto")[0].classList.remove("show"); document.getElementsByClassName("maspock")[0].classList.remove("show"); opcionMaquina = aleatorio (0,4); opciones[opcionMaquina];
if (opcionMaquina == piedra) { document.getElementsByClassName("mapiedra")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Perdiste!"; document.getElementById("M-Maquina").innerHTML = puntosMaquina++; } else if (opcionMaquina == papel) { document.getElementsByClassName("mapapel")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Ganaste!"; document.getElementById("M-Usuario").innerHTML = puntosUsuario++; } else if (opcionMaquina == tijera) { document.getElementsByClassName("matijera")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Perdiste!"; document.getElementById("M-Maquina").innerHTML = puntosMaquina++; } else if (opcionMaquina == lagarto) { document.getElementsByClassName("malagarto")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Empate!"; } else if (opcionMaquina == spock) { document.getElementsByClassName("maspock")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Ganaste!"; document.getElementById("M-Usuario").innerHTML = puntosUsuario++; } }
}
//Spock
function mrSpock() { opcionUsuario = 4; if (opcionUsuario == spock) { //Usuario document.getElementsByClassName("usspock")[0].className += " show"; document.getElementsByClassName("uspapel")[0].classList.remove("show"); document.getElementsByClassName("ustijera")[0].classList.remove("show"); document.getElementsByClassName("uslagarto")[0].classList.remove("show"); document.getElementsByClassName("uspiedra")[0].classList.remove("show"); //Maquina document.getElementsByClassName("mapiedra")[0].classList.remove("show"); document.getElementsByClassName("mapapel")[0].classList.remove("show"); document.getElementsByClassName("matijera")[0].classList.remove("show"); document.getElementsByClassName("malagarto")[0].classList.remove("show"); document.getElementsByClassName("maspock")[0].classList.remove("show"); opcionMaquina = aleatorio (0,4); opciones[opcionMaquina];
if (opcionMaquina == piedra) { document.getElementsByClassName("mapiedra")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Ganaste!"; document.getElementById("M-Usuario").innerHTML = puntosUsuario++; } else if (opcionMaquina == papel) { document.getElementsByClassName("mapapel")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Perdiste!"; document.getElementById("M-Maquina").innerHTML = puntosMaquina++; } else if (opcionMaquina == tijera) { document.getElementsByClassName("matijera")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Ganaste!"; document.getElementById("M-Usuario").innerHTML = puntosUsuario++; } else if (opcionMaquina == lagarto) { document.getElementsByClassName("malagarto")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Perdiste!"; document.getElementById("M-Maquina").innerHTML = puntosMaquina++; } else if (opcionMaquina == spock) { document.getElementsByClassName("maspock")[0].className += " show"; document.getElementById("resultado").innerHTML = "¡Empate!"; } }
}
| Developer | Arkev |
| Username | arkev |
| Uploaded | August 10, 2022 |
| Rating | 3 |
| Size | 9,227 Kb |
| Views | 44,528 |
Do you need developer help for Piedra, papel, tijera, lagarto, Spock?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Arkev (arkev) Script Codes
| Name | Size |
| Leyenda de Tifis | 2,919 Kb |
| Fake Login page with jQuery | 4,733 Kb |
| Stopwatch using CSS3 | 4,569 Kb |
| CSS3 pricing table | 3,204 Kb |
| Easily create stunning animated charts with Chart.js | 3,470 Kb |
| Slider vertical | 5,978 Kb |
| Snake game using HTML5 | 3,114 Kb |
| Lightbox Gallery with Jquery and CSS3 | 4,723 Kb |
| Mapa hgm prueba | 2,781 Kb |
| Encabezados persistentes | 3,489 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
| Flex Chart | James_zedd | 4,111 Kb |
| DFF Website | Hawcubite | 10,123 Kb |
| Weather App | OmranAbazid | 2,596 Kb |
| Old calculator | Gnarfugh | 2,815 Kb |
| Matrix | Stathisnikolaidis | 1,922 Kb |
| CSS Variables | Jdsteinbach | 4,759 Kb |
| Ripples in water | Nobitagit | 2,704 Kb |
| Sinclair Research Computers | MattCowley | 3,068 Kb |
| Simple Responsive Text | Fbrz | 2,282 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!