hola a todos, a mi no me funciono el swal que pone sacha. no se por que dice que no esta definido. si alguien me puede sacar de la duda m...

Mauricio Gualteros

Pregunta

student•hace 4 años

hola a todos, a mi no me funciono el swal que pone sacha. no se por que dice que no esta definido. si alguien me puede sacar de la duda muchas gracias.

<!DOCTYPE html>

<html>

<head>

<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: 'Arial';
  }
</style>

</head>

<body>

<button id=“btnEmpezar” class=“btn-start” onclick=“empezarJuego()”>Empezar a jugar!</button>

</div>

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

 swal ('hola')


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

    inicializar() {
      this.siguienteNivel = this.siguienteNivel.bind(this)
      this.elegirColor = this.elegirColor.bind(this)
      btnEmpezar.classList.add('hide')
      this.nivel = 1
      this.colores = {
        celeste, // lo mismo q,  celeste : celeste
        violeta,
        naranja,
        verde
      }
    }
    generarSecuencia(){
      this.secuencia = new Array(ULTIMO_NIVEL).fill(0).map(n => Math.floor(Math.random()* 4))
    }
    siguienteNivel(){
      this.subnivel = 0
      this.iluminarSecuencia()
      this.agregarEventoClick()
    }

    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')
    }
    agregarEventoClick(){
      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 )){
            // gano
          }else{
           setTimeout(this.siguienteNivel,1500)
          }
        }
      } else {
        // perdió
      }
    }
  }

  function empezarJuego() {
      alert (`el juego va a comenzar`)
    window.juego = new Juego()
  }
</script>

</body>

</html>

Daniel Adolfo Ordoñez Rubio

student•hace 4 años

Hola, Mauricio :) Sería de ayuda si compartes una captura de pantalla de tu consola para ver si tiene errores;

En el código que compartes debes corregir el script donde usas sweetalert, también te recomiendo que revises si el script está cargando correctamente.

<script>src= “https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js” </script>

Es posible que si estás trabajando con live-server intente cargar el script de forma local, podrías descargarlo y ponerlo en el folder de tu proyecto para cargarlo desde allí.

También te sugiero que revises los caracteres como las comillas simples ' y dobles "

const celeste = document.getElementById(‘celeste’)

Cuéntame si lo resolviste :)

¡Nunca pares de aprender! 💚

hola a todos, a mi no me funciono el swal que pone sacha. no se por que dice que no esta definido. si alguien me puede sacar de la duda m...

Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018