Agregando los estados finales del juego

Clase 46 de 55 • Fundamentos de JavaScript 2018

Resumen

Incluiremos una librería de mensajes con estilos mucho más agradables que el mensaje básico de javascript para mostrar los estados finales del juego al usuario.

Jose Carlo Rojas Mora

student•

https://jcarlorm.github.io/platzi-game/

Agregue el puntaje, bootstrap y modifique los mensajes 😃

Sergio Ivan Santacruz Madrigal

student•

Muy bueno

Ivan Santiago

student•

Genial 😄

Jaime Diaz

student•

Hola, agregué unas leves mejoras al juego y este ha sido el resultado:
Link juego
Saludos y espero manito arriba 😄

Aarón Espasandín

student•

Menos mal que eran “leves” 😂
Está increíble 👏

Bryan Estiven Silva Mercado

student•

Esta increíble

Sergio V.

student•

Lo integre al proyecto y temática que use en el curso de frontend developer, le agregue sonido y estados al botón. Dejo el link para compartir: https://sergiovg91.github.io/common/juego_secuencia.html Lo probé en mi celular y me va genial, me gusto mucho el curso así que a continuar trabajando para mejorar el proyecto :3

Juego Maki Secuncia

Anderson Alexander Contreras Villarena

student•

Te mamaste. Soy tu fan

Willy David Da Conceicao Lozada

student•

todo fino pero no me gusta el anime

Guadalupe Giovanni Hernández Medina

student•

Hola compañeros así quedo mi versión ¿qué les parece? Demo: https://giovannihm.github.io/Thanos-Says/ Repositorio: https://github.com/GiovanniHM/Thanos-Says

Ezequiel Dominguez

student•

Hola Giovanni, esta buenisimo!. Te quedó increible. Como pequeña recomendacion, modifica el css de las gemas para que, cuando se iluminan, sea mucho mas fuerte ya que no se llega a apreciar bien si no estas mirando las gemas de manera fija, es como que apenas se puede ver de reojo. 2 preguntas, espero que no te molesten: Que utlizas para hacer esas imagenes a modo de screenshot, se ven geniales, y la ultima: Utilizas alguna libreria para los sonidos o es JS puro?. Saludos!

Guadalupe Giovanni Hernández Medina

student•

Hola Ezequiel muchas gracias por las recomendaciones, respondiendo a tus preguntas, es JS puro no use ninguna librería, JS cuenta con una función para reproducir contenido multimedia llamada play, agregue archivos ".wav", si quieres revisar esa parte más a detalle puedes verlo en el repositorio.

var soun= document.getElementById("mySoun");

function playSoun() {
    soun.play();
}

Y para las imágenes realice un mockup con Photoshop. Saludos.

Ivan Santiago

student•

En vez de hacer la condicional del btnEmpezar seria mejor solo usar la clase toggle de classList asi que no hay que crear la funcion toggleStartButton(), solo hay que añadir a la funcion inicializar() la siguiente linea:

$btnEmpezar.classList.toggle('hide')

Daniel Páez

student•

Gracias, lo acabo de implementar

Jesús Andrés Monge Loor

student•

Excelente así queda mas prolijo el código 👏 Syntax:

.classList.toggle.('clase')
	
Descripcion = 'Si la clase no existe, la añade. Si no, la elimina.'

Andres Felipe Giraldo

student•

Tu explicas bien pero creo que en la parte de este proyecto no explicaste bien. Todo muy bien explicado, tema a tema. Pero ya en el proyecto salieron temas que no se vieron en el curso y que no les dedicaste lo suficiente para explicar. Ibas usando un montón de cosas que no explicaste. Tienes que tener en cuenta que no todos los que nos metimos al curso somos ingenieros. Hice todo el proyecto y me funcionó pero muchas cosas no las entendí. De todas maneras gracias por todo.

Andrés Argote

student•

Deberias de reportar a clase para que pongan más atención

rodrigo roque

student•

same amigo

José Daniel Navarrete Díaz

student•

MI PROYECTO

Omar Zurita

student•

Te quedo excelente.

platzerito02112019 platzerito02112019

student•

que buenas graficas

Eduardo Rasgado Ruiz

student•

Genial, solo vine a refrescar conocimientos para inciarme de lleno a NodeJS.
Javascript es de los lenguajes de programacion mejores pagados hoy en dia chicxs, aprendan nodejs y una que otra librería de frontend, Angular4/5(framework) o React. Van a obtener superpoderes literales de la mano de JS.

Kevin Josué Calderón Peraza

student•

Suerte compañero, yo estoy igual… ahorita estoy en el curso basico de node, pienso hacer todos los de nodejs y luego pasarme a React!. ¿Cuál es tu ruta de aprendisaje o piensas aprender?

Alex John Chamba Macas

student•

Buen consejo

Alberto Daniel Castillo Mendoza

student•

Hola a todos, así quedó el mío, agregandole varias cosas. Por si quieren checarlo Juego: https://albertodaniel-castillo.github.io/Simon-dice/ Repositorio https://github.com/AlbertoDaniel-Castillo/Simon-dice

Jhon Carlos Colorado Angulo

student•

Felicitaciones está super.

Marco Soudre Oliva

student•

buenísimo

Jeison Sneider Ruiz Zemanate

student•

código JS final juego SIMON DICE

const celeste = document.getElementById('celeste')
      const violeta = document.getElementById('violeta')
      const naranja = document.getElementById('naranja')
      const verde = document.getElementById('verde')
      const btnEmpezar = document.getElementById('btnEmpezar')
      const ULTIMO_NIVEL = 10
      

      

      class Juego {
        constructor() {
            this.inicializar = this.inicializar.bind(this)
          this.inicializar()
          this.generarSecuencia()

          setTimeout(this.siguienteNivel(),500)
          
        }
        inicializar() {
            this.elegirColor= this.elegirColor.bind(this)
            this.siguienteNivel = this.siguienteNivel.bind(this)
            this.toggleBtnEmpezar()
             this.nivel= 1
             this.colores= {
            celeste,
            violeta,
            naranja,
            verde
          }
        }

        toggleBtnEmpezar(){
            if(btnEmpezar.classList.contains('hide')){
                btnEmpezar.classList.remove('hide')
            }else{
                btnEmpezar.classList.add('hide')
            }
        }

        generarSecuencia(){
        this.secuencia= new Array(ULTIMO_NIVEL).fill(0).map(n=> Math.floor(Math.random()*4))
       }

       siguienteNivel(){
           this.subnivel = 0
           this.iluminarSecuencia()
           this.agregarEventosClick()
       }

       transformarNumeroAColor(numero)
       {

        switch(numero){

            case 0:
            return 'celeste'
            case 1:
            return 'violeta'
            case 2:
            return 'naranja'
            case 3:
            return 'verde'

        }

       }

       transformarColorANumero(color)
       {

        switch(color){

            case 'celeste':
            return 0
            case 'violeta':
            return 1
            case 'naranja':
            return 2
            case 'verde':
            return 3

        }

       }


       iluminarSecuencia(){

        for(let  i=0; i <  this.nivel; i++)
        {
            let color =this.transformarNumeroAColor(this.secuencia[i])
            
           setTimeout(() => {
            console.log(color)
            this.iluminarColor(color)
        },  1000 * i ) 
       
           
            }
       }
       
       iluminarColor(color){

        this.colores[color].classList.add('light')
        setTimeout(() => this.apagarColor(color),350)

       }

       apagarColor(color) {
           this.colores[color].classList.remove('light')
       }

       agregarEventosClick(){
           this.colores.celeste.addEventListener('click',this.elegirColor)
           this.colores.verde.addEventListener('click',this.elegirColor)
           this.colores.violeta.addEventListener('click',this.elegirColor)
           this.colores.naranja.addEventListener('click',this.elegirColor)
        }

        eliminarEventosClick(){
            this.colores.celeste.removeEventListener('click',this.elegirColor)
           this.colores.verde.removeEventListener('click',this.elegirColor)
           this.colores.violeta.removeEventListener('click',this.elegirColor)
           this.colores.naranja.removeEventListener('click',this.elegirColor)
      
        }

        elegirColor(ev){
           const nombreColor = ev.target.dataset.color
           const numeroColor = this.transformarColorANumero(nombreColor)
            
           this.iluminarColor(nombreColor)
           if(numeroColor === this.secuencia[this.subnivel]){

            this.subnivel++
            if(this.subnivel==this.nivel){
                this.nivel++
                this.eliminarEventosClick()
                if(this.nivel ==(ULTIMO_NIVEL + 1)){
                    this.ganoElJuego()
                }else{
                    setTimeout(this.siguienteNivel,1500)
                }
            }

           }else{
               this.perdioElJuego()
           }
        }

        ganoElJuego(){
            swal('Platzi','Felicitaciones,Ganaste el JUEGO perro','success')
            .then(this.inicializar)
        }

        perdioElJuego(){
            swal('Platzi','Lo lamentamos ,PERDISTEEE','error')
            .then(() =>{
                    this.eliminarEventosClick()
                this.inicializar()
                })
        }
    
    }
      function empezarJuego() {
        window.juego = new Juego()
      
    }

Juan Miguel Garcia Carballo

student•

uh no puedo verificar el codigo, no me deja copiarlo

Juan Miguel Garcia Carballo

student•

que mal la verdad :(

Danelia Sanchez Sanchez

student•

Hola a todos. Comparto el enlace del proyecto al cual le agregué sonidos y puntuación.
https://daneliasanchz.github.io/simon-dice-game/

Daniel J. Pérez

student•

¡Te quedó muy bien!, felicidades

William Cortés

student•

¡¡Gané!! jajjaja me debes mi premio...

Andrés José Pineda Robles

student•

Jorge Velasquez

student•

Les comparto mi version de Simon Dice: https://jorgevels.github.io/SimonDice/

Christian Aqueveque

student•

Lo probé pero cuando presiono el color la primera vez no lo toma en cuenta, si lo presiono nuevamente me dice que perdí T_T

Emilio Nicolás Mendoza Patti

student•

Esta buenísimo, te felicito, lo único que por mi parte no me gusto mucho es la música pero supongo que es porque tengo auriculares y bueno, el resto quedo espectacular

Brian Jose Coronel Ortiz

student•

Comparto mi mejora del proyecto :)

https://boogst.github.io/Simon-dice/

edinson salamanca

student•

comparto la mi versión del juego.

juego: simon dice repositorio: simon dice

Franyer Verjel

student•

Excelente, te quedó muy bien, felicitaciones!

camilo esteban davila

student•

te quedo genial leyendo tu código aprendí varias cosas también estaba pensando en utilizar sweet Alerts para las alertas

Carlos Daniel

student•

Se que no es la gran cosa, pero se siente increíble haber podido terminar el reto y haber cumplido con mis propias metas, me siento satisfecho por dentro. Les comparto mi simón. https://github.com/darkOwlWood/SimonChallange

Arturo Mauricio Terceros Beltrán

student•

como colocaste la animación???

Carlos Daniel

student•

No se exactamente a cual animación te refieras, pero tratare de ser lo más conciso y breve posible, espero responder tu pregunta. Para generar todas las animaciones use transition.

Barra de tiempo:

Le agrego un width de 100% para mostrarla llena.
Para vaciarla le doy un width de 0% donde la transición dura del turno del jugador.

Tarjeta de indicación:

Es un contenedor con 2 hijos
Les doy una perspectiva 3d y una profundidad para que se puedan solapar en el eje z.
Aplicó backface-visibility: hidden que vuelve "invisible la parte trasera" de los hijos.
Roto un hijo en el eje Y 180 grados.
Aplicó una transición para rotar el contenedor entero, así, el hijo rotado queda de frente.

Panel de victoria:

Cada elemento hijo es transparente y no muestran lo que está fuera de sus límites.
Cada hijo tiene un span cuyo background es una raya blanca (el destello).
Colocó el span arriba a la derecha afuera de cada elemento hijo.
Cuando el usuario gana, generó una transición para que el span se mueva abajo a la izquierda hacia afuera (genera el destello).
Al final quitó la transparencia al elemento hijo y lo hago opaco.

Melissa Guerra

student•

![](

Diver Joao Mesa Pérez

student•

Hola! comparto mi versión del juego ¡Simon Dice!, al cual le agregue cieratas característica para hacerlo mas entretenido. ¿Qué les parece?. Demo: https://mesajoao91.github.io/simondice/ Repositorio: https://github.com/mesajoao91/simondice/

Pablo Victor Vargas

student•

aca dejo mi juego le cambie la ui!

Andyno Cortez

student•

Buenardo, donde lo puedo ver?

Pablo Victor Vargas

student•

uhhh perdona ahi lo subo a github!

Sergio González

student•

Así quedó mí versión.

Bernardo Aguayo Ortega

student•

increibe

Sergio González

student•

Si lo desean pueden revisar el código por aquí. https://github.com/Sergio9815/JsGame

Agregando los estados finales del juego

Introducción al curso

¡Alto! Tenemos una nueva versión de este curso para ti

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this

La verdad oculta sobre las clases en JavaScript

Clases en JavaScript

Asincronismo

Funciones como parámetros

Cómo funciona el asincronismo en JavaScript

Cómo funciona el tiempo en JavaScript

¿Qué pasó con swapi.co?

Callbacks

Haciendo múltiples requests

Manejando el Orden y el Asincronismo en JavaScript

Manejo de errores con callbacks

Promesas

Promesas Encadenadas

Múltiples promesas en paralelo

Async-await: lo último en asincronismo

Juego de HTML

Comenzando el juego

Generando una secuencia de números

Iluminando la secuencia de colores

Obteniendo el input del usuario

Agregando la verificación del color elegido

Agregando los estados finales del juego

Conclusiones del curso

Complementos

Diferencias entre var, let y const

Memoización: ahorrando cómputo

¿Hace cuántos días naciste?

Funciones recursivas

Entiende los closures de JavaScript

Estructuras de datos inmutables

Cambiando de contexto al llamar a una función

¿Cuándo hace falta poner el punto y coma al final de la línea?