No me funciona. ayuda <code><HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m...

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()
}>

Raphael Vazquez Morales

student•hace 4 años

Te falto referenciar tu hoja de codigo JS, solo usaste el link para el style.css fatla el archivo js referenciado en tu html.

No me funciona. ayuda <code><HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m...

Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018

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;m...

Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018

No me funciona. ayuda <code><HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m...