La página de tragaperras dispondrá de una barra lateral donde se mostrarán la lista de premios. En la parte del contenido veremos tres imágenes y un botón de jugar. Cada vez que se presione ese botón se realizará el proceso siguiente:
- Se restará al saldo una unidad (coste del juego)
- Se mostrarán tres frutas aleatorias
- Si las tres frutas son iguales avisaremos al usuario que ha ganado un premio y actualizaremos el saldo.
Es decir, el comportamiento habitual de una máquina tragaperras. Vamos a desglosar el proceso general en pasos más pequeños y a dar pistas de resolución:
- Se restará al saldo una unidad (coste del juego)
- Obtener el saldo actual
- Restar uno
- Se mostrarán tres frutas aleatorias
- Necesitamos siete imágenes de frutas (recomendación: fruta0.jpg, fruta1.jpg,….)
- Obtenemos un valor aleatorio entre 0 y 6 (Math.random) para cada fruta (pos1,pos2 y pos3)
- Cambiamos el origen de cada una de las imágenes con el valor aleatorio (Recordemos: $(‘#imagen’).attr(‘src’, ‘img/fruta?.jpg’);)
- Podemos ponerle alguna animación (ej: slideDown)
- Si las tres frutas son iguales (pos1==pos2==pos3)
- Sumamos el premio al saldo
- Mostramos en la página el texto ‘Ha ganado x €’ (sugerencia: $(‘#texto’).html(‘Ha ganado…’);)
Esto es todo ¡A jugar!