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

Imágen de perfil
Val: 2.204
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Simular el SLOT de una maquina tragaperrasgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 25 de Abril del 2018 por xve (Publicado el 26 de Febrero del 2018)
7.292 visualizaciones desde el 26 de Febrero del 2018. Una media de 126 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
664 visualizaciones desde el 26 de Febrero del 2018. Una media de 14 por semana

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

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
6.632 visualizaciones desde el 25 de Abril del 2018. Una media de 133 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 (2)

Imágen de perfil
25 de Abril del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
daniel teran
15 de Marzo del 2019
estrellaestrellaestrellaestrellaestrella
buenas amigo, quisiera saber mas del traga perra que realizo , yo hize uno tambien con php y funciona con base de datos descuenta dinero real reflejado en la pagina, quisiera saber si aun estas desarrollando este tipo de juegos, por favor escríbeme a marchiori099@gmail.com
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