Reto Jackpot – JavaScript, aprende a través de ejercicios

Máquinas tragaperras

Se trata de crear un juego sencillo de JackPot, a través de ejercicios de JavaScript.

Existen varias formas de solucionar los ejercicios que os vamos a ir planteando. Nosotros usaremos el método que creemos que es más didáctico para que aprendas JavaScript, recuerda que este ejercicio está enfocado al aprendizaje.

¿Qué vas a aprender en esta práctica?

Esta práctica está compuesta de 9 ejercicios de dificultad ascendente donde vas a usar variables, constantes, arrays, objetos, funciones, eventos.

Empezaremos a usar variables para almacenar las jugadas pero pronto, a medida que el ejercicio se va complicando, veremos que el uso de arrays va a ser mucho más adecuado y sencillo para resolver ciertas tareas. Lo mismo pasará más adelante con el uso de objetos cuando necesitemos almacenar más de una característica a cada jugada.

¿A quién va dirigida esta práctica?

Para resolver esta práctica hemos de tener conocimientos de HTML, CSS básico y algo de JavaScript.

No te preocupes si no consigues hacer algún ejercicio por completo ya que a través de la ayuda vamos a ir solucionando aquellas dudas que te puedan surgir. A parte, cada uno de los ejercicios va a ir acompañado de nuestra propuesta de solución y la correspondiente explicación en vídeo.

Has de empezar desde el primer ejercicio para poder solucionarlos todos.

Subscríbete a nuestro canal de Youtube https://www.youtube.com/c/WebCreación para no perderte la solución de los ejercicios que se publicarán en enero 2022.

Ejercicio 1.1

Creando la carpeta de proyecto

En una carpeta de proyecto llamada Jackpot crea el archivo index.html con una estructura básica. Crea una carpeta dentro de la carpeta Jackpot con el nombre js y dentro de ésta el archivo jackpot.js. Enlaza los dos archivos.

Ayuda

Puedes utilizar el editor de texto que prefieras: Visual Studio Code, Sublime Text, Atom, Notepad++, …

Solución

La solución se publicará en enero 2022.

Ejercicio 1.2

Números aleatorios

Almacena en la variable aleatorio1 un número aleatorio del 0 al 4 tal que al recargar la página se impriman en pantalla 5 posibles resultados: 0, 1, 2, 3 o 4.

Para ello puedes usar la función de salida predeterminada document.write().

Se podría usar también console.log() para ver el resultado en la consola del navegador pero pronto estos números los cambiaremos por símbolos gráficos y tendrán que aparecer en el cuerpo de la web

Ayuda

Math.random()

Para almacenar un número aleatorio en una variable usamos el método random() del objeto predeterminado Math. Este método genera un número aleatorio entre el 0 y el 1.

Por ejemplo el resultado podría ser el 0.5465342301543987

parseInt()

Como el ejercicio pide que resultado sea un número entero comprendido entre el 0 y el 4 multiplicaremos Math.random()*4 y lo englobaremos todo con el método parseInt()

Solución

Ejercicio 1.3

3 números aleatorios para crear el juego

Crea 2 variables más llamadas aleatorio2 y aleatorio3 con las mismas características que aleatorio1. Cuando al recargar la página los números resultantes sean iguales, lanza una alerta con el texto: “Felicidades has acertado”

Ayuda

Para comparar las tres variables usaremos la estructura condicional if.

Estructura if
if(si aleatorio1 es igual a aleatorio2 y aleatorio1 es igual a aleatorio3){
     //Ejecuta este código
}

Solución

Ejercicio 1.4

Sustituye los números por símbolos gráficos

Sustituye los números generados aleatoriamente por dibujos de frutas Unicode:

  • El número 0 será la manzana 🍎
  • El número 1 será la uva 🍇
  • El número 2 será el limón 🍋
  • El número 3 será la fresa 🍓
  • El número 4 será el plátano 🍌

Fuente dibujos Unicode: https://www.mclibre.org/consultar/htmlcss/html/html-unicode-dibujos.html#simbolos-pict-misc

Ayuda

Símbolos Unicode

Los símbolos Unicode son un estándar muy sencillo creado para representar caracteres gráficos en un sistema informático. El navegador interpreta el string Unicode y muestra un gráfico. Para dibujar un símbolo código Unicode simplemente tienes que usar un document.write() del texto Unicode entre comillas:

document.write(‘🍎’); imprimirá una manzana en el cuerpo del navegador web.

Solución

Ejercicio 1.5

Agregar frutas al array

Queremos agregar más frutas al array, por ejemplo una pera que tiene el símbolo Unicode 🍐

El ejercicio consiste en que se calcule un número aleatorio correspondiente al número de frutas que hay en el array, es decir, si agregamos la pera el número aleatorio generado ha de ser del 0 al 5. Y que esto lo haga de forma automática al modificarl el número de elementos del array.

Ayuda

Para saber la cantidad de elementos que tiene un array usamos la propiedad length de los arrays.

Solución

Ejercicio 1.6

Creación de evento de botón ejecutar el juego

Hasta ahora hemos ejecutado el juego recargando la página, como puedes imaginar no es una buena opción por lo que ha llegado el momento de crear una función que almacene el juego y que llamaremos desde un botón.

Crea un botón con id “start” tal que al hacer clic llame a la función “play” y ejecute el juego.

Para cargar el juego en el documento lo más sencillo es crear una estructura HTML con el contenido del juego y luego introducir de forma dinámica el contenido necesario. La estructura HTML puede ser la siguiente:

<body>
    <header>
        <h1>Jackpot</h1>
        <p>Crea el juego a través de ejercicios</p>                
    </header>
    <hr />
    <section id="gameContainer">
        <div id="gamePlay">
            <span class="play">&#127822;</span>
            <span class="play">&#127822;</span>
            <span class="play">&#127822;</span>
        </div>
        <button class="start">Start</button>
   </section>
   
</body>

El aspecto resultante ha de ser parecido a:

Ayuda

Captura en constantes los elementos necesarios para que el juego funcione: El evento «start» y el directorio «gamePlay»

Solución

Ejercicio 1.7

Asigna un valor diferente a cada trío de frutas

Hasta ahora cuando se gana el mensaje es el mismo independientemente de la fruta que hayas acertado, pero ha llegado la hora de asignar un valor diferente a cada fruta siguiendo la siguiente lista:

Por ejemplo si ganas con 3 fresas el mensaje podría ser: Felicidades, has acertado 3 Fresas. Premio 25 puntos.  

Ayuda

Ahora la fruta que almacenemos en la variable no ha de tener solo una imagen, también hemos de almacenar un premio asociado a esa imagen y ya que estamos también almacenamos un nombre. Así que almacenaremos en un mismo lugar el nombre, el símbolo y el valor (el premio). Para hacer esto necesitamos lo que se llama en javascript un objeto.

Solucionar este ejercicio sin el uso de objetos requiere de mucho código y es poco escalable.

Crea un objeto llamado Fruta que almacene la siguiente información de cada una de las frutas almacenadas:

  1. nombre: String
  2. simbolo: String
  3. valor: Number

Un objeto almacena información diferente de un solo elemento, en este caso se ha de almacenar el nombre, el símbolo y el valor de cada una de las frutas. Por ejemplo para almacenar las manzanas usaremos:

const Fruta = {
      nombre: "manzanas",
      simbolo: "&#127822;",
      valor: 1

}

Pero ten en cuenta que el objeto Fruta no almacena solo la manzana, almacena todas las frutas por lo tanto has de crear un array de objetos de la siguiente forma:



const Fruta = [
    {
      nombre: "manzanas",
      simbolo: "&#127822;",
      valor: 10

    },{
      nombre: "uvas",
      simbolo: "&#127815;",
      valor: 15

    },...
]

Por último, has de saber que para acceder a las propiedades almacenadas en un objeto se hace de la siguiente manera:

Objeto[indice].propiedad, por ejemplo para ver en consola el nombre manzanas pondremos:

 console.log(Fruta[0].nombre)

//manzanas

Solución

Ejercicio 1.8

Mostrar de forma dinámica los premios

Crea antes del final del header una lista de premios de forma dinámica, es decir, no crees la lista en HTML, créala en JavaScript y recorre el objeto para poner los valores correspondientes de tal forma que si modificas el objeto también se modifique la lista de premios.

El aspecto ha de ser similar a este:

Solución

Ejercicio 1.9

Gestión del capital

Vamos a gestionar el capital. El usuario empezará la partida con un capital inicial de 20 puntos. Si no acierta el capital irá disminuyendo de 1 en 1. Si acierta se le sumará la cantidad de puntos que vale la fruta correspondiente.

Cuando el capital se acabe ha de salir una alerta que diga “Capital acabado, has perdido” y que no se pueda jugar más.

El aspecto ha de ser el siguiente:

Solución

Comments are closed, but trackbacks and pingbacks are open.