Introduccion
Hola que tal estimados lectores, en esta entrada le mostraremos como hacer un juego de piedras papel y tijeras, para que se diviertan jugando contra la computadora, todo hecho con javascript, empezaremos describiendo los detalles del juego que no son muchos, simplemente :
- Papel Cubre Piedra
- Piedra Abolla Tijeras
- Tijeras Corta Papel
Para este ejemplo vamos a usar las siguientes imagenes (o podra usar las que ustedes deseen), que serviran para simbolizar los objetos de piedra papel, tijera, y estaran en los iconos de los botones… o
Tambien para este ejemplo usaremos, la generacion de numeros aleatorios de javascript , para simular las opciones elegidas por la computadora ..
Manos a la Obra Con La Apariencia
Para la apariencia de nuestra pagina solo vamos a usar :
- El titulo de pagina “Piedra papel, Tijeras”
- 3 botones para cada opcion elegida por nosotros, que tendran una imagen para simbolizar o simplemente texto
- Una seccion donde se mostrara laopcion elegida por nosotros, la que eligio la computadora y quien gano …
- El script que usaremos para darle vida a la applicacion.
EL Codigo de La Pagina es :
<html>
<head>
<title>
Piedras , Papel y Tijeras
</title>
<style>
ul {
list-style : none ;
}
ul li {
display : inline ;
margin-left : 10px ;
}
div#game {
height : 200px ;
width : 450px ;
border : 1px black dashed ;
margin-left : 50px ;
}
</style>
</head>
<body>
<h2>Jugando Piedras vs Papel vs Tijeras v1.0</h2>
<ul>
<li> <button id="piedras"><img src="http://www.definicionabc.com/wp-content/uploads/original.jpg" alt="Piedras" width="100" height="100" /></li>
<li> <button id="papel"><img src="http://www.papelesguga.com/FOTOS%20PAGINA%20GUGA%20NOV.2010/papel%20para%20alim.jpg" alt="Papel" width="100" height="100" /></li>
<li> <button id="tijeras"><img src="http://bc-learning.com/wp-content/uploads/2011/09/tijeras.jpg" alt="Tijeras" width="100" height="100" /></li> </ul>
<div id="game"> </div>
</body>
</html>
Tras Guardar el codigo tml en un archivo *.html obtendremos el siguiente resultado :
En el cuadro que esta punteado aparecera la opcion que uso cada quien y quien gana.
Manos a la Obra Con La Funcionalidad
Para lo que a este ejemplo respecta el diseño todavia no nos sirve de nada pues es un juego por lo que le echaremos manos a javascript para que el juego tome vida :
// 0 : piedras
// 1 : papel
// 2 : tijeras
// Parte 1 del Script
function computer(){
numerx = (Math.random() * 10)%3;
numero = Math.floor(numerx);
return numero;
}
function traduce(opcion){
if(opcion==0){
data="Piedras";
}
else if(opcion==1){
data="Papel";
}
else if(opcion==2){
data="Tijeras";
}
return data;
}
function me(opcion){
gamec = document.getElementById("game");
gamec.innerHTML="Iniciando ...";
gamec.innerHTML="";
// Parte 1 Para Piedras
compute = computer();
usuario=traduce(opcion);
computadora=traduce(compute);
gamec.innerHTML="Usuario : "+usuario+" vs Computadora : " + computadora + "
";
// si el usuario es píedra y la computadora tijera
if(opcion==0 && compute ==2){
gamec.innerHTML=gamec.innerHTML+"EL Usuario Gana";
}
// si el usuario es píedra y la computadora papel
else if(opcion==0 && compute==1){
gamec.innerHTML=gamec.innerHTML+"La Computadora Gana";
}
// Parte 2 Para Papel
// si el usuario pone Papel y la computadora piedras
else if(opcion==1 && compute ==0){
gamec.innerHTML=gamec.innerHTML+"El Usuario Gana";
}
// si el usuario pone Papel y la computadora Tijeras
else if(opcion==1 && compute ==2){
gamec.innerHTML=gamec.innerHTML+"La Computadora Gana";
}
// Parte 3 Para Tijeras
// si el usuario pone tijeras y la computadora piedras
else if(opcion==2 && compute==0){
gamec.innerHTML=gamec.innerHTML+"La Computadora Gana";
}
// si el usuario pone tijeras y la computadora papel
else if(opcion==2&&compute==1){
gamec.innerHTML=gamec.innerHTML+"El Usuario Gana";
}
// si Los dos Son Lo mismo
else {
gamec.innerHTML=gamec.innerHTML+"Nadie Gana";
}
}
Como podran ver se usa mucho codigo javascript, quizas en otra ocacion utilizemos jquery para hacer que el codigo se vea un poco mas limpio …
Al comienzo del codigo tenemos lo siguiente :
// 0 : piedras // 1 : papel // 2 : tijeras
Esto es solo unos comentarios y vemos los valores enteros que tomara cada elemento …
Tambien tenemos esta funcion :
function computer(){
numerx = (Math.random() * 10)%3;
numero = Math.floor(numerx);
return numero;
}
La tarea de esta funcion es generar un numero aleatorio entre 0 y 2 que ya vimos para que seran estos numeros, estos numeros seran la opcion de la computadora ,con Math.random() generamos un numero aleatorio … lo multiplicamos por 10 para que nos de numeros mayores de 10 porque normalmente esta funcion solo da numeros con punto decimal entre 0 y 3, AL multiplicarlo por 10 obtendremos valores cercanos a los que utilizaremos.
Y le aplicamos Modulo % 3 para obtener numeros entre 0 y 2.
Al final redondeamos el resultado para obtener limpiamente el valor que vamos a usar…
Esta funcion es la raiz de todo la aplicacion :
function me(opcion){
gamec = document.getElementById("game");
gamec.innerHTML="Iniciando ...";
gamec.innerHTML="";
// Parte 1 Para Piedras
compute = computer();
usuario=traduce(opcion);
computadora=traduce(compute);
gamec.innerHTML="Usuario : "+usuario+" vs Computadora : " + computadora + "
";
// si el usuario es píedra y la computadora tijera
if(opcion==0 && compute ==2){
gamec.innerHTML=gamec.innerHTML+"EL Usuario Gana";
}
// si el usuario es píedra y la computadora papel
else if(opcion==0 && compute==1){
gamec.innerHTML=gamec.innerHTML+"La Computadora Gana";
}
// Parte 2 Para Papel
// si el usuario pone Papel y la computadora piedras
else if(opcion==1 && compute ==0){
gamec.innerHTML=gamec.innerHTML+"El Usuario Gana";
}
// si el usuario pone Papel y la computadora Tijeras
else if(opcion==1 && compute ==2){
gamec.innerHTML=gamec.innerHTML+"La Computadora Gana";
}
// Parte 3 Para Tijeras
// si el usuario pone tijeras y la computadora piedras
else if(opcion==2 && compute==0){
gamec.innerHTML=gamec.innerHTML+"La Computadora Gana";
}
// si el usuario pone tijeras y la computadora papel
else if(opcion==2&&compute==1){
gamec.innerHTML=gamec.innerHTML+"El Usuario Gana";
}
// si Los dos Son Lo mismo
else {
gamec.innerHTML=gamec.innerHTML+"Nadie Gana";
}
}
Esta funcion obtiene la opcion que introduce el usuario y la compara con el numero aleatorio generado por la computadora y dependiendo de los numeros se obtendra quien es el ganador.
Para que la aplicacion funciones bien habra que hacerle unos ligeros cambios a la aplicacion.
