Voldemorth
No recomendado
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
- Desde
- 10 Ene 2012
- Mensajes
- 928
Bien primero que nada les comentare que el titulo es solo para atraer gente, ya que en realidad es solo con html y js, no tengo dotes de diseñador y mucho menos ganas de hacer que el resultado de este tutorial quede vistoso. Eso se los dejo a lo que gusten hacerlo.
Aclarado esto, y suponiendo que se fue la chusma que pasa por los totorales esperando llevarse un código hecho y derecho al 100% empecemos...
Para este tutorial se requiere:
1-Conocimientos de html y js (usaremos jQuery).
2-Un archivo index.html
3-Un archivo js donde escribiremos la lógica del juego (en mi caso pptls.js)
4-Opcionalmente un archivo css para dar estilo a gusto.
Lo primero que haremos sera tomar nuestro index.html y colocar dentro una plantilla básica de html, obtendrán algo, mas o menos así:
Una vez tengan esto crearemos la estructura de nuestro juego, en mi caso sera algo como esto:
Como notaran no les mentí respecto a el CSS... En fin, veamos que tenemos en este ejemplo:
1-Un titulo que dice "¿Piedra, Papel, Tijera, Lagrato, o Spock?".
2-Los marcadores de el usuario y el ordenador.
3-Una breve descripción de la jugada.
4-Las opciones de "Piedra Papel Tijera Lagarto Spock"
Tener en cuenta que:
1-El marcador cambia dinamicamente incrementando en +1 para el ganador de cada partida.
2-La descripción dela jugada solo se mostrara cuando se haya hecho una jugada, es decir cuando elijan entre piedra, papel, etc.
Así pues en nuestro html ahora podríamos tener algo como esto:
en resumidas cuentas es html puro, las opciones son radiobuton cuyo valor levantaremos con un archivo js y una vez evaluado quien gana pasaremos el nuevo marcador así como la descripción breve de la jugada.
Hasta qui no he hecho nada nuevo, incluso creo que muchos de los que leen el tutorial se estarán muriendo de aburrimiento bien vamos a lo que hace que este juego tome vida, el js.
Desde un punto de vista muy abstracto este juego funciona así, tu escoges una opción de las 5 posibilidades, un js se activa al dicha opción, genera un numero random entre 1 y 5 donde cada valor corresponde a una de las opciones. Se comparan ambas opciones de forma que:
- Si ambas opciones son iguales es un empate, entonces se indica en al descripción que ambos jugadores escogieron lo mismo y los marcadores quedan como estaban.
- Si la opción que has marcado es mas fuerte que la escogido el ordenador (respetando las normas de el juego) se indica que tu ganas y tu marcador se incrementa en +1.
-Si fallan las dos opciones anteriores por lógica tu pierdes (porque no ganas ni empatas), se indica en la descripción lo ocurrido y el marcador del ordenador se incrementa +1.
Todo eso que explique de forma larga y seguramente no del todo entendible se resume en una función de js que contiene 28 lineas de código aunque se podría hacer incluso mas breve.
Dicha funciona es:
Eso es todo, ahora solo queda invocar en nuestro html 2 scripts, el primero sera jQuery y el segundo nuestra función, Tener en cuenta que la lógica de este juego se vale de ambos así que si no esta uno de ellos el resultado no sera el esperado.
En resumen tendremos algo así:
Suponiendo claro que son tan desordenados como yo y dejaron todos sus archivos en la raíz
De aqui en mas solo deben agregar su css para que se vea bien, a modo e ejemplo les dejo el que uso en el ejemplo de la imagen:
Saludos y espero disfruten de este tutorial y les sea util.
Para los que gusten ver el resultado final es este: Demo
Y algo que había olvidado, por si no las conocen estas son las reglas el juego:
“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.”
Aclarado esto, y suponiendo que se fue la chusma que pasa por los totorales esperando llevarse un código hecho y derecho al 100% empecemos...
Para este tutorial se requiere:
1-Conocimientos de html y js (usaremos jQuery).
2-Un archivo index.html
3-Un archivo js donde escribiremos la lógica del juego (en mi caso pptls.js)
4-Opcionalmente un archivo css para dar estilo a gusto.
Lo primero que haremos sera tomar nuestro index.html y colocar dentro una plantilla básica de html, obtendrán algo, mas o menos así:
Insertar CODE, HTML o PHP:
<html>
<head>
</head>
<body>
</body>
</html>Una vez tengan esto crearemos la estructura de nuestro juego, en mi caso sera algo como esto:
Como notaran no les mentí respecto a el CSS... En fin, veamos que tenemos en este ejemplo:
1-Un titulo que dice "¿Piedra, Papel, Tijera, Lagrato, o Spock?".
2-Los marcadores de el usuario y el ordenador.
3-Una breve descripción de la jugada.
4-Las opciones de "Piedra Papel Tijera Lagarto Spock"
Tener en cuenta que:
1-El marcador cambia dinamicamente incrementando en +1 para el ganador de cada partida.
2-La descripción dela jugada solo se mostrara cuando se haya hecho una jugada, es decir cuando elijan entre piedra, papel, etc.
Así pues en nuestro html ahora podríamos tener algo como esto:
Insertar CODE, HTML o PHP:
<html>
<head>
</head>
<body>
<h1>¿Piedra, Papel o Tijera?</h1>
<div class="u">Usuario: </div><div class="usuario">0</div>
<div class="ordenador">0</div><div class="o">Ordenador: </div>
<div class="clear"></div>
<div id="resultado"></div>
<div id="opciones">
<input type="radio" name="elemento" id="piedra" value="piedra"><label for="piedra">Piedra</label>
<input type="radio" name="elemento" id="papel" value="papel"><label for="papel">Papel</label>
<input type="radio" name="elemento" id="tijera" value="tijera"><label for="tijera">Tijera</label>
<input type="radio" name="elemento" id="lagarto" value="lagarto"><label for="lagarto">Lagarto</label>
<input type="radio" name="elemento" id="spock" value="spock"><label for="spock">Spock</label>
</div>
</body>
</html>en resumidas cuentas es html puro, las opciones son radiobuton cuyo valor levantaremos con un archivo js y una vez evaluado quien gana pasaremos el nuevo marcador así como la descripción breve de la jugada.
Hasta qui no he hecho nada nuevo, incluso creo que muchos de los que leen el tutorial se estarán muriendo de aburrimiento bien vamos a lo que hace que este juego tome vida, el js.
Desde un punto de vista muy abstracto este juego funciona así, tu escoges una opción de las 5 posibilidades, un js se activa al dicha opción, genera un numero random entre 1 y 5 donde cada valor corresponde a una de las opciones. Se comparan ambas opciones de forma que:
- Si ambas opciones son iguales es un empate, entonces se indica en al descripción que ambos jugadores escogieron lo mismo y los marcadores quedan como estaban.
- Si la opción que has marcado es mas fuerte que la escogido el ordenador (respetando las normas de el juego) se indica que tu ganas y tu marcador se incrementa en +1.
-Si fallan las dos opciones anteriores por lógica tu pierdes (porque no ganas ni empatas), se indica en la descripción lo ocurrido y el marcador del ordenador se incrementa +1.
Todo eso que explique de forma larga y seguramente no del todo entendible se resume en una función de js que contiene 28 lineas de código aunque se podría hacer incluso mas breve.
Dicha funciona es:
Insertar CODE, HTML o PHP:
//Defino mi función
$(function() {
//Indico que se active al clickear en un radiobuton
$('input[type="radio"]').click(function(){
//Guardo el valor de el radio button seleccionado en la variable "elemento"
var elemento = $('input:radio[name=elemento]:checked').val();
//Creo una nueva variable "aleatorio" que tendrá un valor entre 1 y 5
var aleatorio=Math.floor(Math.random() * 5) + 1;
//Segun el valor de "aleatorio" le asigno una opción
if (aleatorio == 1) elemento_contra = "piedra";
else if (aleatorio == 2) elemento_contra = "papel";
else if (aleatorio == 3) elemento_contra = "tijera";
else if (aleatorio == 4) elemento_contra = "lagarto";
else elemento_contra = "spock";
var ganador;
//Compruebo si ambas opciones (elemento y elemento_contra) son iguales y si esto ocurre digo que ganador es empate
if (elemento == elemento_contra) ganador = "empate";
//Si esto no pasa y la opción de usuario es gana a la del ordenador digo que igualo ganador = gana usuario
else if ((elemento == "piedra" && ( elemento_contra == "tijera" || elemento_contra == "lagarto" )) || (elemento == "lagarto" && ( elemento_contra == "spock" || elemento_contra == "papel" )) || (elemento == "spock" && ( elemento_contra == "tijera" || elemento_contra == "piedra" )) || (elemento == "papel" && ( elemento_contra == "piedra" || elemento_contra == "spock" )) || (elemento == "tijera" && ( elemento_contra == "papel" || elemento_contra == "lagarto" ))) {
ganador = "gana usuario";
// Por ultimo me sumo un punto
var actual = parseInt($('.usuario').html());
actual += parseInt(1);
$('.usuario').html(actual);
}
// Si ninguna de las dos cosas anteriores pasan, entonces usuario a perdido, entonces igualo ganador = gana ordenador
else {
ganador = "gana ordenador";
// y claro le sumo un punto al ordenador.
var actual = parseInt($('.ordenador').html());
actual += parseInt(1);
$('.ordenador').html(actual);
}
//Finalmente genero un html con la descripción de la partida valiéndome de las variables que ya tengo y solo agregándole alguna texto que siempre sera el mismo
$('#resultado').html("Usuario juega " + elemento + " - Ordenador juega " + elemento_contra + "<br> El resultado es " + ganador);
});
});Eso es todo, ahora solo queda invocar en nuestro html 2 scripts, el primero sera jQuery y el segundo nuestra función, Tener en cuenta que la lógica de este juego se vale de ambos así que si no esta uno de ellos el resultado no sera el esperado.
En resumen tendremos algo así:
Insertar CODE, HTML o PHP:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>¿Piedra, Papel o Tijera?</h1>
<div class="u">Usuario: </div><div class="usuario">0</div>
<div class="ordenador">0</div><div class="o">Ordenador: </div>
<div class="clear"></div>
<div id="resultado"></div>
<div id="opciones">
<input type="radio" name="elemento" id="piedra" value="piedra"><label for="piedra">Piedra</label>
<input type="radio" name="elemento" id="papel" value="papel"><label for="papel">Papel</label>
<input type="radio" name="elemento" id="tijera" value="tijera"><label for="tijera">Tijera</label>
<input type="radio" name="elemento" id="lagarto" value="lagarto"><label for="lagarto">Lagarto</label>
<input type="radio" name="elemento" id="spock" value="spock"><label for="spock">Spock</label>
</div>
<script type="text/javascript" src="pptls.js"></script>
</body>
</html>Suponiendo claro que son tan desordenados como yo y dejaron todos sus archivos en la raíz
De aqui en mas solo deben agregar su css para que se vea bien, a modo e ejemplo les dejo el que uso en el ejemplo de la imagen:
Insertar CODE, HTML o PHP:
html {
background: #444444;
}
body {
width: 450px;
padding:15% 25px 25px 25px;
margin:auto;
background: #fff;
text-align:center;
}
.usuario, .u {
float: left;
font-size: 30px;
}
.ordenador, .o {
float:right;
font-size:30px;
}
.o{
margin-left:40px;
}
.clear {
clear:both;
}
input.radio {
width: 50px;
}
#resultado {
margin-top: 30px;
text-align: center;
}
#opciones {
margin-top: 30px;
font-size:30px;
text-align:center;
}
input{display: none}Saludos y espero disfruten de este tutorial y les sea util.
Para los que gusten ver el resultado final es este: Demo
Y algo que había olvidado, por si no las conocen estas son las reglas el juego:
“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.”
Última edición:
