Código de JQuery - Juego del Simon

Imágen de perfil

Juego del Simongráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 18 de Febrero del 2015 por Xavi
1.255 visualizaciones desde el 18 de Febrero del 2015. Una media de 14 por semana
Este código simula el juego del "Simon" en el cual tienes que ir pulsando una combinación de colores que te va dando Simon. Cada vez que completas dicha secuencia, Simon te muestra la misma secuencia añadiendo un nuevo color cada vez, haciendo cada vez mas difícil de recordar.
En el momento que no pulsas la secuencia correcta de colores el juego finaliza mostrándote donde has fallado.
simon-jquery

Versión 1.0
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 18 de Febrero del 2015gráfica de visualizaciones de la versión: Versión 1.0
1.256 visualizaciones desde el 18 de Febrero del 2015. Una media de 14 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

A esta versión le falta añadir el sonido!!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>Simon dice</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
 
    <style>
    * {
        -moz-box-sizing:border-box; box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
    }
    #simon {width:420px;}
    #simon div {width:200px;height:200px;float:left;margin:5px;opacity:0.5;}
    #simon div:hover {border:5px solid #000;cursor:pointer;}
 
    .showColor {opacity:1!important;}
 
    #verde {background-color:green;}
    #rojo {background-color:red;}
    #amarillo {background-color:yellow;}
    #azul {background-color:blue;}
 
    #verde:active {opacity:1!important;}
    #rojo:active {opacity:1!important;}
    #amarillo:active {opacity:1!important;}
    #azul:active {opacity:1!important;}
 
    #mensaje {margin-top:20px;}
    </style>
 
    <script>
    // historial contendra un array con los colores a pulsar
    var historial=Array();
 
    // pulsado contendra un array con los valores pulsados por el usuario
    var pulsado=Array();
 
    // esta variable define cuando el usuario puede empezar a jugar
    var jugando=false;
 
    $(document).ready(function(){
 
        // Evento que se ejecuta cuando se pulsa el botón para empezar a jugar
        $("input[type=button]").click(function(){
 
            // inicializamos el array del historial
            historial=Array();
 
            // Indicamos que inicie un nuevo movimiento
            nuevoMovimiento();
        });
 
        // Evento que se ejecuta cuando se pulsa sobre uno de los cuadros
        $("#simon div").click(function(){
            if(jugando)
            {
 
                // Añadimos la pulsacion al array pulsado
                pulsado.push($(this).index());
 
                // Verificamos que nuestra pulsacion sea correcta
                // Esta funcion nos devuelve:
                //  1 Todos los colores pulsados son correctos y hay que mostrar un nuevo color
                //  2 Todos los colores pulsados son correctos pero todavia falta pulsar mas colores
                //  0 Ha habido un error
                verificacion=verificarPulsacion();
 
                if(verificacion==1)
                {
 
                    // Todo va bien, añadimos un nuevo movimiento
                    nuevoMovimiento();
                }else if(verificacion==0){
 
                    // El usuario se ha equivocado, mostraremos el error
                    mostrarError();
                }
            }
        });
    });
 
    /**
     * Esta funcion genera un nuevo color
     */
    function nuevoMovimiento()
    {
        jugando=false;
        $("#mensaje").html("Mostrando los colores...");
        pulsado=Array();
        var nuevoMovimiento=Math.floor(Math.random()*4)
        historial.push(nuevoMovimiento);
        $("#movimientos").html(historial.length);
        mostrarColores(0);
    }
 
    /**
     * Esta funcion muestra todos los colores que el usuario tendra que pulsar
     * Recibe el indice del array de colores a mostrar
     */
    function mostrarColores(indice)
    {
        $("#simon div").removeClass("showColor")
        if(historial[indice]>=0)
        {
            $("#simon div:nth-child("+(historial[indice]+1)+")").addClass("showColor");
            setTimeout(function(){ocultarColores(indice+1)},800);
        }else{
            jugando=true;
            $("#mensaje").html("Ya puedes empezar...");
        }
    }
 
    /**
     * Esta funcion forma parte del proces de mostrar los colores mostrarColores()
     * Esconde el color
     */
    function ocultarColores(indice)
    {
        $("#simon div").removeClass("showColor")
        setTimeout(function(){mostrarColores(indice)},500);
    }
 
    /**
     * Esta funcion verifica las pulsaciones del usuario
     * Devuelve:
     *  1 Todos los colores pulsados son correctos y hay que mostrar un nuevo color
     *  2 Todos los colores pulsados son correctos pero todavia falta pulsar mas colores
     *  0 Ha habido un error
     */
    function verificarPulsacion()
    {
        for(var i=0;i<historial.length;i++)
        {
            if(pulsado.length>i)
            {
                if(historial[i]!=pulsado[i])
                {
                    return 0;
                }
            }else{
                return 2;
            }
        }
 
        if(pulsado.length==historial.length)
            return 1;
        return 2;
    }
 
    /**
     * Esta funcion muestra los colores que se tenia que haber pulsado y los
     * colores que el usuario ha pulsado
     */
    function mostrarError()
    {
        var colores=["verde", "rojo", "amarillo", "azul"];
        var cadenaColores=" | ";
        var cadenaColoresPulsados=" | ";
 
        for(var i=0;i<historial.length;i++)
        {
            cadenaColores+=colores[historial[i]]+" | ";
        }
        for(var i=0;i<pulsado.length;i++)
        {
            cadenaColoresPulsados+=colores[pulsado[i]]+" | ";
        }
        $("#mensaje").html("Te has equivocado, los colores eran:<br>"+cadenaColores+"<br>y tu has pulsado:<br>"+cadenaColoresPulsados);
    }
    </script>
</head>
 
<body>
 
<div id="simon">
    <div id="verde"></div>
    <div id="rojo"></div>
    <div id="amarillo"></div>
    <div id="azul"></div>
</div>
 
<div>
    <br><input type="button" value="empezar/reiniciar">
    <div><span id="movimientos">0</span> movimientos</div>
    <div id="mensaje"></div>
</div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (1)

RobertoPI
19 de Febrero del 2015
estrellaestrellaestrellaestrellaestrella
Fantástico código
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3044