En este artículo, vamos a hacer el famoso juego de piedra papel y tijera de JavaScript. Este ejercicio es ideal para practicar los objetos que ya vimos anteriormente en el artículo: ¿Qué es un objeto en JS?.

Sin más preámbulo comenzamos.

Vamos a hacer el juego, para ello usaremos:

  • Chrome para mostrar los resultados por consola
  • JavaScript vanilla

Creando el objeto

Para ello, creamos un directorio y lo abrimos con VSC en el que añadimos:

  • main.js: será el fichero de javascript sobre el que trabajaremos.
  • index.html: en el que asociamos el script de JavaScript.

A partir de este punto, vamos a trabajar únicamente sobre nuestro JavaScript. Vamos a comenzar creando un objeto llamado game:

Añadiendo la personalización del nombre y la validación Reggex

El código será:

Vamos a añadir una funcionalidad que nos permita cambiar el nombre del jugador1. Esto lo haremos con window.prompt  y una validación con reggex ya que no vamos a permitir que nos introduzca un parámetro no valido.

Todo ello, separado por funciones unas con return y otras sin. El uso o no del return dependerá del uso que le vayamos a dar a cada función y de nuestra manera de programar. En mi caso, personalmente utilizaré un return dentro de una función principalmente cuando la utilice esos datos como parámetro en otra funcion.

window.prompt(“Mensaje”); nos permitirá añadir la ventana que nos capturará el posible nuevo nombre del player1

La validación la realizaremos con Reggex y será: ^[a-zA-Z]+

Esta validación, no dejará que se introduzca un nombre que con menos de 2 letras y que no sean letras de la A a la Z (tanto en mayúsculas como minúsculas).

Para verificar si la validación se realiza correctamente en reggex la introducimos dentro de un bloque if. Para que JavaScript entienda que nos encontramos ante una validación de reggex englobamos la validación de dos contra barras (/) una inicial y otra final (/). El resultante sería /^[a-zA-Z]+/

Finalmente utilizamos el método test() de tal manera que nos quedará /^[a-zA-Z]+/.test()

Dentro de los paréntesis del método test añadimos el nombre que almacenamos dentro del window.prompt para verificar y el resultado nos devolverá true or false.

Si ponemos un nombre correcto, podemos ver que el nombre del player1 cambia correctamente.

Os aconsejo darle zoom al navegador (con control++ o bien con control + la rueda del ratón) ya que, con ello, veremos la consola más grande y apreciaremos mejor los iconos, etc. Vamos a ver el resultado:

En cambio, si ponemos un nombre no valido, podemos ver que:

El resultado de una partida al completo será:

Si os fijáis, podemos ver que tenemos un puño arriba cuando existe un empate ambos, o cuando es un ganado el player ganador. Tenemos arrow functions, etc.

Mostrando el resultado en un documento HTML

Para ello utilizamos document.write donde utilizábamos console.log.

Una manera de realizar esto bastante rápido es seleccionar un console.log:

E ir a:

Con esto cambiaremos todos los elementos de una forma mucho más rápida por document.write:

Si volvemos a cargar la web vemos que nos sale todo apelotonado:

Esto se produce debido a que hemos cambiado el console.log por un document.write y este necesita un <BR> para hacer un salto de línea al final de cada instrucción. También debemos de cambiar el “\t” por múltiples espacios mediante a &nbsp;

Aunque nos acaban de pegar una paliza, vemos que con las últimas modificaciones ahora sí que se nos carga correctamente en el HTML:

Espero que os haya gustado. Un saludo y hasta la próxima