Juego en Ionic 2 - Creación del fantástico ahorcado

Adivina la palabra secreta – vamos a desarrollar un divertido juego en Ionic 2 que nos permitirá adivinar una palabra generada por el propio framework teniendo en cuenta un máximo de fallos. Este juego es lo que conocemos en muchos lugares como el famoso ahorcado.

Índice

¿Qué veremos esta entrada?

En nuestro post anterior hablábamos acerca de la instalación de Ionic 2 paso a paso y de cómo crear nuestra primera aplicación: hola-mundo. En esta ocasión, va a ser mucho más entretenido el ejercicio ya que disfrutaremos de crear un juego sencillo que dará rienda suelta a nuestra imaginación y nos permitirá añadir variables no contempladas en el post.

Instalación del proyecto juego en Ionic 2

Esto ya lo vimos en entradas anteriores, pero como la idea es ir paso a paso y que nadie se pierda, vamos a indicar todo lo que hacemos aunque suene algo repetitivo. Creamos el proyecto desde consola:

ionic start blog-ahorcado blank --v2

Añadiendo elementos a la vista home.html

Una vez se haya instalado la estructura base de nuestro proyecto Ionic 2, modificaremos la única vista con la que vamos a trabajar. Accedemos al directorio del proyecto y desde nuestro editor de texto modificamos el script src/pages/home/home.html
Cambiamos el título y añadimos en la sección contenido un selector que mostrará el listado de letras que podemos seleccionar.

<ion-header>
    <ion-navbar>
        <!-- Título de la aplicación -->
        <ion-title>AHORCADO</ion-title>
    </ion-navbar>
</ion-header>

<!-- Sección contenido -->
<ion-content padding>
    <ion-list>
        <ion-item>
            <!-- Selector que nos permitirá elegir una letra -->
            <ion-label>Seleccione una letra</ion-label>
            <ion-select [(ngModel)]="letra">
                <ion-option value="A">A</ion-option>
                <ion-option value="B">B</ion-option>
                <ion-option value="C">C</ion-option>
                <ion-option value="D">D</ion-option>
                <ion-option value="E">E</ion-option>
                <ion-option value="F">F</ion-option>
                <ion-option value="G">G</ion-option>
                <ion-option value="H">H</ion-option>
                <ion-option value="I">I</ion-option>
                <ion-option value="J">J</ion-option>
                <ion-option value="K">K</ion-option>
                <ion-option value="L">L</ion-option>
                <ion-option value="M">M</ion-option>
                <ion-option value="N">N</ion-option>
                <ion-option value="Ñ">Ñ</ion-option>
                <ion-option value="O">O</ion-option>
                <ion-option value="P">P</ion-option>
                <ion-option value="Q">Q</ion-option>
                <ion-option value="R">R</ion-option>
                <ion-option value="S">S</ion-option>
                <ion-option value="T">T</ion-option>
                <ion-option value="U">U</ion-option>
                <ion-option value="V">V</ion-option>
                <ion-option value="W">W</ion-option>
                <ion-option value="X">X</ion-option>
                <ion-option value="Y">Y</ion-option>
                <ion-option value="Z">Z</ion-option>
            </ion-select>
        </ion-item>
    </ion-list>
</ion-content>

Detalle de la vista home.html en el proyecto juego en Ionic 2

Comentemos el código que acabamos de insertar ya que esto va a ser la plantilla de nuestro juego con Ionic 2.

Entre las etiquetas <ion-header> se inserta un menú de navegación y el título de la aplicación. Por otro lado, entre las etiquetas <ion-content> ponemos el cuerpo de la aplicación, lo que siempre se ha llamado área de contenido. Vamos a detallar más lo que tenemos aquí.

Estamos añadiendo una etiqueta <ion-select> esto viene a tener un comportamiento casi idéntico a un select en HTML. Ahí será donde seleccionaremos las letras que queramos que el sistema valide. [(ngModel)] es semántica de Angular 2, es responsable de hacer el Data Binding entre el valor del select y una variable llamada letra que estará definida en el controlador home.ts.

Añadiendo botón de acción a la vista home.html

Tan solo nos falta añadir un botón en la vista para que nos permita lanzar al controlador la llamada necesaria. Esta línea la vamos a colocar justo después del elemento de cierre </ion-list>

<!-- Mostramos el botón para seleccionar letra  -->
<button ion-button block color="secondary" (click)="compruebaLetra()">Seleccionar</button>

Al insertar (click)=»compruebaLetra()», lo que estamos diciéndole al botón es que vaya a buscar en el controlador la función compruebaLetra y la ejecute.
Ahora vamos a compilar la aplicación para visualizar los cambios hechos hasta el momento, en este caso teclearemos desde cmd (dentro del directorio del proyecto): ionic serve -l

Visualizando lo creado

Tengamos claro que si pulsamos el botón en este momento, nos aparecerá un error puesto que la función aún no la hemos creado en el controlador.

Que nadie se preocupe si se ha perdido, no sabe dónde debe colocar el fuente o casos similares. Al final de cada post dejaré un enlace para descargar los scripts y que podáis comprobar donde están las incoherencias.

Controllador de la página, os hablo de home.ts

Aquí es donde vamos a manejar toda la lógica de la aplicación. En Ionic 2 vi algo que me gustó mucho y es que por cada página creada, dentro disponemos de su hoja de estilos, de su código .ts (javascript) y de su vista en HTML y esto hace que el código fuente quede muy limpio y ordenado.

Os explico primero que es lo que hace el controlador por defecto y posteriormente realizaremos los cambios para darle vida a la vista.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {  }
}

Detalle controlador home.ts

Con las dos primeras líneas lo que hacemos es importar las librerías necesarias. Component pertenece a Angular y es necesario para el funcionamiento base de la aplicación, mientras que NavController lo utilizaremos para navegar entre páginas (Aquí de momento no vamos a utilizar la navegación, pero lo dejamos por si acaso).

En el código vemos que @Component tiene dos atributos, selector:’page-home’, que es el css que se va a aplicar a la página, y templateUrl:’home.html’ que es la plantilla html que va a renderizar la página.

Y luego vemos el método constructor, poco más hay que destacar.

Modificando el controlador home.ts

Lo primero que vamos a hacer es crear una variable justo encima de la línea del constructor. Esta misma podrá ser utilizada dentro de la función compruebaLetra().
Y una vez declarada, vamos a crear la función que dará el resultado de si la letra seleccionada existe o no en la palabra secreta.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
  
export class HomePage {
  // Definimos las variables
  letra: string = '';

  constructor(public navCtrl: NavController) {  }

  // Método que valida la letra seleccionada.	
  public compruebaLetra() {
    // Formateamos a mayúsculas para mejorar la legibilidad.
    let letraMayusculas = this.letra.toUpperCase();
    alert(letraMayusculas);
  }
}

Si ahora pulsamos sobre el botón del navegador, veremos que nos muestra una ventana emergente con la letra seleccionada.
Vamos a darle algo más de encanto a esta función.

Mejorando el cotrolador home.ts

Vamos a crear un nuevo método llamado palabraAleatoria(primer, ultimo), como vemos tiene 2 parámetros obligatorios de entrada (le pasaremos un 0 y un length del valor del array nombres que veremos a continuación). Este método será el encargado de generar una palabra aleatoria comprendida entre las que se encuentren dentro de un array. Coloca esta función justo entre el constructor y el método compruebaLetra().

// Método que genera una palabra aleatoria comprendida en el array nombres.	
public palabraAleatoria(primer, ultimo) {
  let numberOfName = Math.round(Math.random() * (ultimo - primer) + (primer));
  return this.nombres[numberOfName];
}

Y ahora definiremos el array e invocaremos a la función que genera la palabra aleatoria al iniciar la aplicación. Justo debajo de la variable letra colocamos las siguientes líneas:

nombres: any = ['COCHE', 'MOTO', 'CARTEL', 'COCHECITO', 'RAQUETA'];
nombreSecreto: any = this.palabraAleatoria(0, (this.nombres.length - 1));

Continuamos ampliando el método compruebaLetra() del controlador home.ts

Vamos a continuar aplicando condicionales, lo primero que debemos hacer es comprobar si la letra ha sido seleccionada o viene el selector vacío.

// Si se ha seleccionado una letra...

if (letraMayusculas) { …bla blaHecho esto, añadimos otra condición que recorra la palabra generada al azar y nos indique si hay coincidencias o no. En un caso u otro mostramos un ventana emergente con el resultado.

if (this.nombreSecreto.indexOf(letraMayusculas) != -1) {
  alert('GENIAL!!! La letra ' + letraMayusculas + ' se encuentra en la palabra secreta.');
}
else {
  alert('FALLO!!! La letra ' + letraMayusculas + ' no se encuentra en la palabra secreta.');
}

Como queda el código completo del controlador hasta ahora

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
  
export class HomePage {
  // Definimos las variables
  letra: string = '';
  nombres: any = ['COCHE', 'MOTO', 'CARTEL', 'COCHECITO', 'RAQUETA'];
  nombreSecreto: any = this.palabraAleatoria(0, (this.nombres.length - 1));

  constructor(public navCtrl: NavController) {  }

  // Método que genera una palabra aleatoria comprendida en el array nombres.	
  public palabraAleatoria(primer, ultimo) {
    let numberOfName = Math.round(Math.random() * (ultimo - primer) + (primer));
    return this.nombres[numberOfName];
  }

  // Método que valida la letra seleccionada.	
  public compruebaLetra() {
    // Formateamos a mayúsculas para mejorar la legibilidad.
    let letraMayusculas = this.letra.toUpperCase();
    
    // Si se ha seleccionado una letra...		
    if (letraMayusculas) {

      if (this.nombreSecreto.indexOf(letraMayusculas) != -1) {
        alert('GENIAL!!! La letra ' + letraMayusculas + ' se encuentra en la palabra secreta.');
      }
      else {
        alert('FALLO!!! La letra ' + letraMayusculas + ' no se encuentra en la palabra secreta.');
      }
    }
  }
}

Pues poco más, de momento vamos a dejar esta entrada aquí ya que se ha extendido más de lo que pensaba por entrar mucho en detalle, además en breve ampliaré este post dedicado al juego en Ionic 2 añadiendo funcionalidades como recuadros para conocer el número de letras que compone la palabra, límite de vidas, iconos, control de fallos, sistema de puntos, mensajes, etc.

Descargas

home.html: https://drive.google.com/open?id=0B_sqK8lXq9J9RmtuNzRTRDlBNEU
home.ts: https://drive.google.com/open?id=0B_sqK8lXq9J9T1I2cW0xS2g0b1E

Continuación: Juego en Ionic 2 – Creación del fantástico ahorcado – Parte 2

Y recuerda, si quieres estar al día acerca de la creación de nuevas entradas, no te olvides de suscribirte al blog.

Versiones utilizadas, tiempo y dificultad de desarrollo:

Dificultad del ejercicio: Iniciación.
Tiempo de realización: 30 minutos.
Ionic versión: 2.2.1
Node versión: 7.5.0
NPM versión: 4.3.0
Cordova versión: 6.5.0
Sistema operativo: Windows 8

Summary

Article Name