Hola!! yo tengo el código como Sacha pero no me muestra el botón empezar cuando ya finalice una partida, no se cual puede ser mi error <c...

Sandra Carolina Peña Ortiz

Pregunta

student•hace 5 años

Hola!! yo tengo el código como Sacha pero no me muestra el botón empezar cuando ya finalice una partida, no se cual puede ser mi error

 inicializar() {
        this.siguienteNivel = this.siguienteNivel.bind(this)
        this.elegirColor = this.elegirColor.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')
        }
    }

Esto es lo que tengo respecto al botón, justo como lo tiene Sacha

Sandra Carolina Peña Ortiz

student•hace 5 años

😁 muchas gracias!! kevinjzea

Kevin J. Zea Alvarado

student•hace 5 años

¡Súper! Me alegro que ya funcione bien.

Y felicitaciones por aprobar el curso. 👏👏🥳

Sandra Carolina Peña Ortiz

student•hace 5 años

Jajajaj siii, ya lo probé con los 4 niveles y todo nice XDD

Kevin J. Zea Alvarado

student•hace 5 años

JAJAJAJA Chale. Ese tipo de errores son más comunes de lo que imaginamos.

Y no hay problema. Es un gusto apoyarte. 🙌 Entonces, ¿ya comprobaste que te funciona bien en los 4 niveles hasta el final?

Sandra Carolina Peña Ortiz

student•hace 5 años

kevinjzea ya encontré mi error, en el js, había puesto inicilizar en lugar de inicializar y por eso no me tomaba la función 😂😅😅 pero muchas gracias por toda la ayuda 😊

Sandra Carolina Peña Ortiz

student•hace 5 años

Este es mi codigo HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./estilos.css">
    <title>Simon Dice</title>
</head>
  <body>
    <div class="gameboard">
      <div id="celeste" class="color celeste left" data-color="celeste"></div>
      <div id="violeta" class="color violeta right" data-color="violeta"></div>
      <div id="naranja" class="color naranja left" data-color="naranja"></div>
      <div id="verde" class="color verde right" data-color="verde"></div>
      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script src="juego.js"></script>
  </body>
</html>

Y este es mi css

body {
  margin: 0;
  background: #dedede;
  display: flex;
  align-items: center;
  height: 100vh;
}

.gameboard {
  height: 100vh;
  width: 100vh;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  max-height: 60vh;
  max-width: 60vh;
}

.color {
  width: 50%;
  height: 50%;
  display: inline-block;
}

.left {
  float: left;
}

.right {
  float: left;
}

.celeste {
  background: #22a6b3;
}

.celeste.light {
  background: #7ed6df;
}

.violeta {
  background: #be2edd;
}

.violeta.light {
  background: #e056fd;
}

.naranja {
  background: #f0932b;
}

.naranja.light {
  background: #ffbe76;
}

.verde {
  background: #6ab04c;
}

.verde.light {
  background: #badc58;
}

.btn-start {
  width: 400px;
  height: 100px;
  background: #ecf0f1;
  color: #2c3e50;
  font-size: 2.5rem;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 200px);
}

.hide {
  display: none;
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

Sandra Carolina Peña Ortiz

student•hace 5 años

kevinjzea fíjate que yo tengo en tres archivos el proyecto, el javascript en un .js, el estilo en .css y solo la estructura de los botones en html, ya probé poniéndole 4 en ULTIMO_NIVEL y pues no me tira errores en consola, solo eso que después de decirme que gane o perdí, no me muestra el boton de empezar de nuevo

Kevin J. Zea Alvarado

student•hace 5 años

Okay, copié tu JS a una copia del HTML del curso. Sólo corregí como 3 cosas que salieron en consola. Pero creo que fueron más errores del formato que se pone aquí en la plataforma que errores en tu código como tal.

Mi idea es que ejecutes tu código en tu navegador y veas y compartas la consola para ver los errores que te muestra.

Y cámbiale el

ULTIMO_NIVEL

a 4 para ver mejor los errores.

P.D.: Yo no tuve los enlaces de

swal

, así que los cambié por un

alert()

Sandra Carolina Peña Ortiz

student•hace 5 años

Kevinjzea ya probé lo del navegador y nada. este es el código completo, y considero que esta igual :')

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 = 1 

class Juego {
    constructor() {
        this.inicializar = this.inicializar.bind(this)
        this.inicializar()
        this.generarSecuencia()
        setTimeout(this.siguienteNivel, 500)
    }

    inicializar() {
        this.siguienteNivel = this.siguienteNivel.bind(this)
        this.elegirColor = this.elegirColor.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(10).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++) {
            const color = this.transformarNumeroAColor(this.secuencia[i])
            setTimeout(() => 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!','success')
            .then(this.inicilizar)
    }
    perdioElJuego() {
        swal('Platzi', 'Lo lamentamos, perdiste :(','error')
            .then(() => {
                this.eliminarEventosClick()
                this.inicilizar
            })
    }
}


function empezarJuego() {
    window.juego = new Juego()
}```

Kevin J. Zea Alvarado

student•hace 5 años

Me ha pasado numerosas veces que digo que tengo el código igual que el profesor pero no es así. 😅

Si puedes, comparte tu código completo o un enlace al repositorio en el que lo tengas, así podemos ver si tienes algo diferente.

Hola!! yo tengo el código como Sacha pero no me muestra el botón empezar cuando ya finalice una partida, no se cual puede ser mi error <c...

Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018