ayuda con este error. gracias juego.html:221 Uncaught ReferenceError: swal is not defined at Juego.ganoElJuego (juego.html:221) at Juego....

Julian Vallejo

Pregunta

student•hace 6 años

ayuda con este error. gracias

juego.html:221 Uncaught ReferenceError: swal is not defined

at Juego.ganoElJuego (juego.html:221)

at Juego.elegirColor (juego.html:210)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simon Dice</title>
    <style>
      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: 'ArialBlack';
    }
    </style>
  </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"https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script>

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

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

      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(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++){
        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.inicializar()
     })
   }

      perdioElJuego() {
        swal('LOSIENTO','PERDISTE!',':(')
        .then (() =>{
          this.eliminarEventosClick()
          this.inicializar()
    })
    }
}
    function empezarJuego() {
      window.juego = new Juego()
    }

    </script>
  </body>
</html>```

Diego Forero

Team Platzi•hace 6 años

Tienes un error al importar la librería de sweet alert debe ser

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>     <script>

ayuda con este error. gracias juego.html:221 Uncaught ReferenceError: swal is not defined at Juego.ganoElJuego (juego.html:221) at Juego....

Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018