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(1)
Publicado el 26 de Febrero del 2018 por xve
538 visualizaciones desde el 26 de Febrero del 2018. Una media de 77 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
539 visualizaciones desde el 26 de Febrero del 2018. Una media de 77 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
 
	<style>
	#slot {
		background:url("slot.png") repeat-y;
		border:1px solid;
		height:75px;
		width:86px;
	}
	</style>
</head>
 
<body>
 
	<div id="slot"></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;
 
	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;
			}
		}, 1);
	}
	</script>
</body>
</html>



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

Imágen de perfil
Marte
26 de Febrero del 2018
estrellaestrellaestrellaestrellaestrella
Muchas Gracias
Responder

Comentar la versión: Versión 1.0

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

http://lwp-l.com/s4453