Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Casino: Slot Machine (máquina tragaperras)

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!

frutas

Casino: diseño

Deberemos construir una página de un casino con los siguientes apartados:
– Página de inicio (index.html)
Puede incluir fotos, slider, lo que queráis. Tiene que resultar atractiva.
– Registro
Típico formulario para darse de alta SIN FUNIONALIDAD

Además de los siguientes juegos:

Slot Machine
Dados
Blackjack
Ruleta

Desde cualquier página deberíamos poder ir a cualquier otra, por lo que no estaría de más tener un menú.

La primera funcionalidad que tenemos que implementar es la siguiente:

Necesitamos poder guardar el saldo del jugador, y para eso utilizaremos una cookie. Nada más entrar en la página comprobaremos si existe la cookie ‘saldo’:
– Si no existe, la creamos con valor de 100
– Si existe, recuperamos el valor y lo asignamos a una variable global saldo.

Para ello no nos vendría mal disponer de algunas funciones para poner/recuperar cookies. Ejemplos:

https://www.w3schools.com/js/js_cookies.asp
o esto:

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}

Animaciones

Página de descarga:

https://daneden.github.io/animate.css/

 <h1>Hola, ¿Qué tal?</h1>
        <input type="button" class="btn btn-success" value="Animar" id="animar">
        <script>
            $('#animar').click(function () {
                
                $('h1').addClass("rubberBand").addClass("animated")
                        .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
                        function (e) {
                            //Quitamos las clases al acabar la animación
                            $('h1').removeClass();

                        });
            });
        </script>

Calendario equipos

 <p>Inicio campeonato:</p>
        <input type="text" id="fecha">
        <ul id="equipos">
            <li>Logroñés</li>
            <li>Alcoyano</li>
            <li>Numancia</li>
            <li>Albacete</li>
            <li>Huelva</li>
            <li>Osasuna</li>
        </ul>
        <input type="button" class="btn btn-success" id="partidos" value="Partidos">
        <input type="button" class="btn btn-success" id="aleatorio" value="Aleatorio">
        <div id="res"></div>
        <script>
            $(function () {

                $.datepicker.regional['es'] = {
                    closeText: 'Cerrar',
                    prevText: '< Ant',
                    nextText: 'Sig >',
                    currentText: 'Hoy',
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
                    dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
                    weekHeader: 'Sm',
                    dateFormat: 'dd/mm/yy',
                    firstDay: 1,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: ''
                };
                $.datepicker.setDefaults($.datepicker.regional['es']);
                $('#fecha').datepicker();
                $('#equipos').sortable();
                $('#partidos').click(function () {
                    var equipos = $('#equipos li');
                    var f = $('#fecha').val().split("/");
                    var fecha = new Date(f[2], f[1] - 1, f[0]);
                    $('#res').empty();
                    for (var i = 0; i < equipos.length; i += 2) {
                        $('#res').append("<p>" + fecha.toLocaleDateString() + " : " + equipos[i].innerText + " - " +
                                equipos[i + 1].innerText + "</p>");
                        fecha.setDate(fecha.getDate() + 1);
                    }
                });
                $('#aleatorio').click(function () {
                    $('#mensaje').dialog();
                    var equipos = $('#equipos li');
                    equipos.sort(function () {
                        return Math.random() - .5
                    });
                    $('#equipos').empty();
                    for (var i = 0; i < equipos.length; i++) {
                        $('#equipos').append(equipos[i]);
                    }
                });


            });
        </script>

Datepicker

 <input type="text" id="fecha">
 $.datepicker.regional['es'] = {
                    closeText: 'Cerrar',
                    prevText: '< Ant',
                    nextText: 'Sig >',
                    currentText: 'Hoy',
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
                    dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
                    weekHeader: 'Sm',
                    dateFormat: 'dd/mm/yy',
                    firstDay: 1,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: ''
                };
                $.datepicker.setDefaults($.datepicker.regional['es']);
                $('#fecha').datepicker();

Catalá:

 $.datepicker.regional['ca'] = {
  closeText: 'Tancar',
  prevText: 'Prv',
        nextText: 'Seg;',
  currentText: 'Avui',
  monthNames:['Gener','Febrer','Març','Abril','Maig','Juny','Juliol','Agost','Setembre','Octubre','Novembre','Desembre'],
  monthNamesShort: ['Gen','Feb','Mar','Abr','Mai','Jun','Jul','Ago','Set','Oct','Nov','Des'],
  dayNames: ['Diumenge','Dilluns','Dimarts','Dimecres','Dijous','Divendres','Dissabte'],
  dayNamesShort: ['Dug','Dln','Dmt','Dmc','Djs','Dvn','Dsb'],
  dayNamesMin: ['Dg','Dl','Dt','Dc','Dj','Dv','Ds'],
  weekHeader: 'Sm',
  dateFormat: 'dd/mm/yy',
  firstDay: 1,
  isRTL: false,
  changeMonth: true,
  changeYear: true,
  showMonthAfterYear: false,
  yearSuffix: ''};
  $.datepicker.setDefaults($.datepicker.regional['ca']);

Cabecera jquery + jquery ui (cdn)

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Ejemplos funciones



function masLarga(tabla) {
    var res = "";
    for (var i = 0; i < tabla.length; i++) {
        if (res.length<tabla[i].length){
            res=tabla[i];
        }
    }
    return res;
}
function masLargaWhile(tabla) {
    var res = "";
    var i=0;
    while(i<tabla.length){
        if (res.length<tabla[i].length){
            res=tabla[i];
        }
        i++;
    }
    return res;
}
function masLargaSort(tabla){
    tabla.sort(function(a,b){return b.length-a.length;});
    return tabla[0];
}

function password(longitud){
    var caracteres="ABCDEFGGHIJKLMNÑOPQRSTUVWXYZ1234567890;:_-.,!·$%&/()";
    var pass="";
    for(var i=0;i<longitud;i++){
        pass+=caracteres.charAt(aleatorio(0,caracteres.length));
    }
    return pass;
}
function aleatorio(min,max){
    return Math.floor(Math.random()*(max-min))+min;
}

jQuery dinámico

 <input type="button" class="btn btn-info" id="nuevo" value="+">
        <div id="contenido">
            <ul>
                <li>1</li>
            </ul>
        </div>

#contenido{
    background-color: lightblue;
    min-height: 300px;
    display:flex;
}
#contenido ul{
    background-color: lightpink;  
}

$(function () {
    var cont=2;
    enlazar();
    
    $('#nuevo').click(function () {
        $('#contenido').append("<ul><li>"+(cont++)+"</li></ul>");
        enlazar();
        dobleclick()
    });
    function enlazar() {
        $('li').off("click");
        $('li').click(function () {
            $(this).after("<li>"+(cont++)+"</li>");
            enlazar();
            dobleclick()
        });
    }
    function dobleclick(){
        $('li').dblclick(function () {
            $(this).remove();
        }); 
    }
})

Traversing


 <body>
        <div>
            <h1>hola</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>tres</li>
            </ul>
        </div>
        <div>
            <h1>adios</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>cuatro</li>
                <li>cinco</li>
                <li>seis</li>
            </ul>
        </div>
        <div>
            <h1>hola</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>tres</li>
            </ul>
        </div>
        <script>
            $(function () {
                $('li').click(function () {
                    //Cambio el color del elemento clicado a rojo
                    $(this).css("color", "red");
                    //Cambio el color de los hermanos a azul
                    $(this).siblings().css("color", "blue");
                    //Cambiar el color del hermano del padre h1
                    $(this).parent().siblings("h1").css("color", "green");
                    //Cambiar el color de los otros li's a gris
                    $(this).parents("div").siblings().find("li").css("color", "grey");
                    //Cambiar el color de los otros h1 a negro
                    $(this).parents("div").siblings().find("h1").css("color", "black");
                    
                });
            });
        </script>
    </body>