Código de JavaScript - Simular el SLOT de una maquina tragaperras

Imágen de perfil

Simular el SLOT de una maquina tragaperrasgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 25 de Abril del 2018 por xve (Publicado el 26 de Febrero del 2018)
3.234 visualizaciones desde el 26 de Febrero del 2018. Una media de 112 por semana
Aquí os muestro una manera de simular el "slot" de una maquina tragaperras.

He obtenido la idea de la pagina http://odhyan.com/slot/ y lo he modificado para intentar hacerlo mas sencillo con un solo "slot" y sin objetos a modo de practica.

slot-inicial slot-funcionando

slot

Versión 1.0
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 27 de Febrero del 2018 (Publicado el 26 de Febrero del 2018)gráfica de visualizaciones de la versión: Versión 1.0
615 visualizaciones desde el 26 de Febrero del 2018. Una media de 28 por semana

Versión 2 - Indica el elemento seleccionado cuando finaliza
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 07 de Mayo del 2018 (Publicado el 25 de Abril del 2018)gráfica de visualizaciones de la versión: Versión 2 - Indica el elemento seleccionado cuando finaliza
2.620 visualizaciones desde el 25 de Abril del 2018. Una media de 126 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Gracias a Antonio, que en el chat me solicito haber como podía obtener el elemento seleccionado en el slot. Aquí publico el código modificado.

slot-elemento-seleccionado
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
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
 
    <style>
    #slot {
        background:url("slot.png") repeat-y;
        border:1px solid;
        height:75px;
        width:86px;
    }
    #resultado {
        height:26px;
        width:76px;
        border:1px solid #aaa;
        padding:2px 5px;
    }
    </style>
</head>
 
<body>
 
    <div id="slot"></div>
    <div id="resultado"></div>
 
    <button onclick="iniciar()" id="iniciar">Iniciar</button>
    <button onclick="parar()" id="parar" disabled>Parar</button>
 
    <script>
    // variable que contiene la posicion de la imagen
    var contador=0;
 
    // variable que contiene la velocidad de movimiento
    var velocidad=0;
 
    // variable que incremente y decrementa la velocidad de la imagen
    var incremento=0;
 
    // variables que controlar los intervalor de tiempo
    var interval1,interval2;
 
    // creamos un array con las posiciones de los slots y el contenido de cada una
    // Las posiciones empiezan de abajo hacia arriba, ya que el movimiento del slot va hacia abajo
    var posicionFiguras={0:"naranja", 375:"siete", 300:"bar", 225:"pera", 150:"platano", 75:"cerezas"}
 
    function iniciar() {
        document.getElementById("iniciar").disabled=true;
 
        // inicializalos los valores
        incremento=velocidad=1;
 
        // intervalo de tiempo en el que se ejecuta el movimiento
        interval1=setInterval(function() {
 
            // vamos modificando la posicion de la imagen de fondo para realizar el movimiento
            document.getElementById("slot").style["background-position"]="0% "+contador+"px";
 
            // si incremento es negativo, quiere decir que estamos parando la imagen
            if(velocidad<100 || incremento<0) {
                // incrementamos la velocidad de movimiento
                velocidad=velocidad+incremento;
            }
            if(velocidad>50) {
                document.getElementById("parar").disabled=false;
            }
 
            // Si la velocidad es inferior o igual a 0, paramos y nos posicionamos
            // en el punto exacto de la siguiente imagen
            if(velocidad<=3 && incremento<0) {
                document.getElementById("parar").disabled=true;
                clearInterval(interval1);
                finalizarMovimiento();
            }
            contador+=velocidad;
        }, 50);
    }
 
    function parar() {
        incremento=-3;
    }
 
    // Función para finalizar el movimiento en un elemento centrado
    function finalizarMovimiento() {
        // obtenemos la posicion exacta de la imagen
        pos = document.getElementById("slot").style.backgroundPosition;
        pos = parseInt(pos.split(" ")[1]);
 
        // obtenemos la posicion final donde parar para que quede la imagen
        // bien encuadrada
        var relativePos = pos%75;
        var posicionFinal = pos-relativePos+75;
 
        // intervalo de tiempo hasta que se centra la imagen en el recuadro
        interval2=setInterval(function() {
            contador+=velocidad;
            document.getElementById("slot").style["background-position"]="0% "+contador+"px";
            if(contador>=posicionFinal)
            {
                clearInterval(interval2);
                document.getElementById("slot").style["background-position"]="0% "+(posicionFinal)+"px";
                document.getElementById("iniciar").disabled=false;
 
                // obtenemos la posicion exacta de donde se ha parado dentro de la imagen
                posicion=posicionFinal-(450*parseInt(posicionFinal/450));
                document.getElementById("resultado").innerHTML=posicionFiguras[posicion];
            }
        }, 1);
    }
    </script>
</body>
</html>



Comentarios sobre la versión: Versión 2 - Indica el elemento seleccionado cuando finaliza (1)

Imágen de perfil
ScriptShow
25 de Abril del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 2 - Indica el elemento seleccionado cuando finaliza

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4453  
Revisar política de publicidad