no me funciona. ayuda. <code>&lt;HTML &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;...

Pregunta de la clase:
Agregando los estados finales del juego
Giovanny Rodriguez Corrales

Giovanny Rodriguez Corrales

Pregunta
student•hace 4 años

no me funciona. ayuda.

<HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

   <section>
       <div class="main">
            <div id="amarillo" class="amarillo" data-color='amarillo'></div>
            <div id="azul"class="azul" data-color='azul'></div>
            <div id="rojo" class="rojo" data-color='rojo'></div>
            <div id="verde" class="verde" data-color='verde'></div>
        </div>
        
        <button id="boton" onclick="empezarJuego()"></button>
        <p id='mensaje'></p>
        <script src="index.js"></script>
   </section>

</body>
</html>

CSS
*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: rgba(1, 208, 255, 0.459);
   
}

section{
    width: 400px;
    height: 400px;

    margin:  auto;
    padding: 5px;
    position: relative;
}

.main{
    width: 100%;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template: 1fr 1fr /1fr 1fr;
    
}

.amarillo{
    background-color: rgb(228, 205, 5);
    border-radius: 100% 0 0 0;
}
.amarillo.light{
    background-color: rgb(255, 239, 98);
}

.azul{
    background-color: rgb(0, 0, 194);
    border-radius: 0 100% 0  0;
}

.azul.light{
    background-color: rgb(104, 104, 255);
}

.rojo{
    background-color: rgb(241, 0, 0);
    border-radius: 0 0 0 100%;
}

.rojo.light{
    background-color:rgb(253, 98, 98)
}
.verde{
    background-color:green;
    border-radius:  0 0 100% 0;
}

.verde.light{
    background-color: rgb(103, 250, 103);
}

#boton{
    width: 120%;
    height: 20%;
    margin: auto;

    position: absolute;
    top: 40%;
    left: -10%;
    background-color: rgb(255, 255, 255);
    border: solid 3px black;
}

p{
    vertical-align: middle;
    color: red;
    font-size: 20px;
}

.hide{
    display: none;
}

JAVASCRIPT
const btnIniciar= document.getElementById('boton')
const amarillo = document.getElementById('amarillo')
const azul = document.getElementById('azul')
const rojo = document.getElementById('rojo')
const verde = document.getElementById('verde')
const mensaje= document.getElementById('mensaje')

class inicio{
    
    constructor(){ 
        this.iniciar()
        setTimeout(()=>this.crearSecuencia(),1000)       
      }

    iniciar(){
        btnIniciar.classList.toggle('hide')
        this.nivel=1
        this.subnivel=0
        this.colores={
            amarillo, 
            azul,
            rojo,
            verde
        }
    }

    crearSecuencia(){
        this.secuencia = new Array(10).fill(0).map(x=>Math.floor(Math.random()*4))
        this.siguienteNivel()
    }
    
    siguienteNivel(){
        this.subnivel=0
        this.registrarEvento()
        this.iluminar()
    }


    numeroAcolor(color){
        switch (color){
            case 0:
                return 'amarillo'
                break
            case 1:
                return 'azul'
                break
            case 2:
                return 'rojo'
                break
            case 3:
                return 'verde'
                break
        }
        
    }

    colorAnumero(numColor){
        switch (numColor){
            case 'amarillo':
                return 0
                break
            case 'azul':
                return 1
                break
            case 'rojo':
                return 2
                break
            case 'verde':
                return 3
                break
        }
        
    }


    iluminar(){
         for(var i=0; i<this.nivel;i++){
             let color =this.numeroAcolor(this.secuencia[i])
             setTimeout(()=>this.encenderLuz(color),500*i)
         } 
    }

    encenderLuz(color){
        this.colores[color].classList.add('light')
        setTimeout(()=>this.apagarLuz(color),200)
    }

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

    registrarEvento(){
        this.colores.amarillo.addEventListener('click', this.elegirColor.bind(this))
        this.colores.rojo.addEventListener('click', this.elegirColor.bind(this))
        this.colores.azul.addEventListener('click',  this.elegirColor.bind(this))
        this.colores.verde.addEventListener('click', this.elegirColor.bind(this))
    }

    removerEvento(){
        this.colores.amarillo.removeEventListener('click', this.elegirColor.bind(this))
        this.colores.rojo.removeEventListener('click', this.elegirColor.bind(this))
        this.colores.azul.removeEventListener('click', this.elegirColor.bind(this))
        this.colores.verde.removeEventListener('click', this.elegirColor.bind(this))
    }


    elegirColor(ev){
        
        const numColor = ev.target.dataset.color
        const nColor = this.colorAnumero(numColor)
        this.encenderLuz(numColor)
         
        if(this.secuencia[this.subnivel]===nColor){
            //alert('1')
            mensaje.innerHTML='OK'
            this.subnivel++
            
            if(this.nivel===this.subnivel){
                debugger
                
                this.nivel++
                this.removerEvento()
                setTimeout(()=>this.siguienteNivel(),1000)
            }
          }else{
        // //     alert(0)
        //     this.removerEvento()
            
             mensaje.innerHTML='INCORRECTO'
        //     this.nivel=1
        //     setTimeout(()=>this.iniciar(),500)
       
        }
    
    
    }




}

function empezarJuego(){
    var game = new inicio()
}>
1 respuestas
para escribir tu comentario
    Matias Majul

    Matias Majul

    student•hace 4 años

    Buenas giorocor, te paso tu codigo js corregido. Falta incorporar la logica cuando pierde y gana pero ya podrias seguir

    
const btnIniciar= document.getElementById('boton')
const amarillo = document.getElementById('amarillo')
const azul = document.getElementById('azul')
const rojo = document.getElementById('rojo')
const verde = document.getElementById('verde')
const mensaje= document.getElementById('mensaje')

class inicio{
    
    constructor(){ 
        this.iniciar()
        setTimeout(()=>this.crearSecuencia(),1000)       
      }

    iniciar(){
        btnIniciar.classList.toggle('hide')
        this.nivel=1
        this.subnivel=0
        this.colores={
            amarillo, 
            azul,
            rojo,
            verde
        }
    }

    crearSecuencia(){
        this.secuencia = new Array(10).fill(0).map(x=>Math.floor(Math.random()*4))//newArray sin espaciado
        this.siguienteNivel()
    }
    
    siguienteNivel(){
        this.subnivel=0
        this.registrarEvento()
        this.iluminar()
    }


    numeroAcolor(color){
        switch (color){
            case 0:
                return'amarillo'
                break
            case 1:
                return'azul'
                break
            case 2:
                return'rojo'
                break
            case 3:
                return'verde'
                break
        }
        
    }

    colorAnumero(numColor){
        switch (numColor){
            case'amarillo':
                return 0//return0 por return 0, no tenia espaciado
                break
            case'azul':
                return 1
                break
            case'rojo':
                return 2
                break
            case'verde':
                return 3
                break
        }
        
    }


    iluminar(){
         for(var i=0; i<this.nivel;i++){
             let color =this.numeroAcolor(this.secuencia[i])
             setTimeout(()=>this.encenderLuz(color),500*i)
         } 
    }

    encenderLuz(color){
        this.colores[color].classList.add('light')
        setTimeout(()=>this.apagarLuz(color),350)
    }

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

    registrarEvento(){
        this.colores.amarillo.addEventListener('click', this.elegirColor.bind(this))
        this.colores.rojo.addEventListener('click', this.elegirColor.bind(this))
        this.colores.azul.addEventListener('click',  this.elegirColor.bind(this))
        this.colores.verde.addEventListener('click', this.elegirColor.bind(this))
    }

    removerEvento(){
        this.colores.amarillo.removeEventListener('click', this.elegirColor.bind(this))
        this.colores.rojo.removeEventListener('click', this.elegirColor.bind(this))
        this.colores.azul.removeEventListener('click', this.elegirColor.bind(this))
        this.colores.verde.removeEventListener('click', this.elegirColor.bind(this))
    }


    elegirColor(ev){
        
        const numColor = ev.target.dataset.color
        const nColor = this.colorAnumero(numColor)
        this.encenderLuz(numColor)
         
        if(this.secuencia[this.subnivel]===nColor){
            //alert('1')
            //mensaje.innerHTML='OK'
            this.subnivel++
            
            if(this.nivel===this.subnivel){
                //debugger
                
                this.nivel++
                this.removerEvento()
                setTimeout(()=>this.siguienteNivel(),1000)
            }
          }else{
              //Perdio
            
        // //     alert(0)
        //     this.removerEvento()
            
            // mensaje.innerHTML='INCORRECTO'
        //     this.nivel=1
        //     setTimeout(()=>this.iniciar(),500)
       
        }
    
    
    }
}
    function empezarJuego(){
    var game = new inicio()
 
}
Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018

JavaScript es un lenguaje de programación que se trabaja desde el navegador. Construye programas, conoce el entorno, los condicionales y las estructuras repetitivas. Aprende cuáles son y cómo se declaran las variables y las funciones de JS.

Ir al curso
Fundamentos de JavaScript 2018
Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018

JavaScript es un lenguaje de programación que se trabaja desde el navegador. Construye programas, conoce el entorno, los condicionales y las estructuras repetitivas. Aprende cuáles son y cómo se declaran las variables y las funciones de JS.

Ir al curso