Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Casino: funcionalidad general y tragaperras

Para el ejercicio de casino necesitamos tener una función que nos permita leer una cookie y otra que nos permita grabar.  En w3schools tienen unas de ejemplo, pero en internet hay muchas más.

Cuando entramos en la página del casino lo primero que tenemos que hacer es comprobar si existe una cookie que se llame ‘saldo’. Si existe no hacemos nada. Si no existe la creamos con un valor de 100 y mostramos un mensaje al usuario que diga ‘Bienvenido a nuestro casino. Le hemos regalado 100 €’.

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 (comprobarSaldo)
    • 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 9 (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
    • Guardamos el saldo en la cookie (ponSaldo)
    • Mostramos en la página el texto ‘Ha ganado x €’ (sugerencia:  $(‘#texto’).html(‘Ha ganado…’);)

Esto es todo ¡A jugar!

frutas

Ejemplo examen

function pin(){
    var res="";
    for (var i=0;i<4;i++){
        res+=Math.floor(Math.random()*10);
    }
    return res;
}
function sumaPares(tabla){
    var suma=0;
    for (var i=0;i<tabla.length;i++){
        if (tabla[i]%2===0){
            suma+=tabla[i];
        }
    }
    return suma;
}

Ejercicio parientes funcionalizado


$(function () {
    function creaBoton(clase, valor) {
        return '<input type="button" class="btn btn-success ' + clase + '" value="' + valor + '">';
    }
    function lista(elementos, valor) {
        var res = "<ul>";
        for (var i = 0; i < elementos; i++) {
            res += '<li>' + valor + '</li>';
        }
        return res + "</ul>";
    }
    function columna(ancho, elementos) {
        var columna = '<div class="col-sm-' + ancho + '">';
        columna += creaBoton('menos', '-');
        columna += creaBoton('mas', '+');
        columna += creaBoton('otros', '/\\');
        columna += creaBoton('otrosmenos', '\\/');
        columna += lista(elementos, "-");
        columna += "</div>";
        return columna;
    }
    function columnas(ncol, ancho, elementos) {

        var res = "";
        for (var i = 0; i < ncol; i++) {
            res += columna(ancho, elementos);
        }
        return res;

    }
    $('#nuevo').click(function () {

        $('#resultado').html(columnas(4, 3, 5));


        $('.menos').click(function () {

            //  $(this).siblings('ul').children().eq(0) .remove();
            //Buscamos los hermanos de tipo 'ul' y quitamos el último hijo
            $(this).siblings('ul').children().last().remove();
            //Si ya no hay más hijos deshabilitamos el botón
            if ($(this).siblings('ul').children().length === 0) {
                $(this).attr('disabled', 'disabled');
            }
        });
        $('.mas').click(function () {
            //Buscamos el hermano de tipo ul y añadimos un elemento
            $(this).siblings('ul').append('<li>-</li>');
            $(this).siblings('.menos').removeAttr('disabled');
        });
        $('.otros').click(function () {
            //Los hermanos de mi columna tienen listas 'ul' y añadimos un elemento
            $(this).parent().siblings().children('ul').append('<li>-</li>');
            $(this).parent().siblings().children('.menos').removeAttr('disabled');

        });
        $('.otrosmenos').click(function () {
            //Los hermanos de mi columna tienen listas 'ul' y añadimos un elemento
            $(this).parent().siblings().children('ul').each(function () {
                $(this).children().last().remove();
                if ($(this).children().length === 0) {
                    $(this).siblings('.menos').attr('disabled', 'disabled');
                }
            });


        });
    });
});

Uso correcto e incorrecto funciones

 function calcular() {
                var x = document.getElementById("num1").value;
                var y = document.getElementById("num2").value;

                var gx = x;
                var gy = y;
                var w;
                while (y != 0) {
                    w = x % y;
                    x = y;
                    y = w;
                }

                var mcm = gx * gy / x;
                document.getElementById("resultado").value = mcm;
            }
            function calcularBien() {
                var x = document.getElementById("num1").value;
                var y = document.getElementById("num2").value;
                document.getElementById("resultado").value = minimoComunMultiplo(x, y);
            }

            function minimoComunMultiplo(x, y) {
                var gx = x;
                var gy = y;
                var w;
                while (y != 0) {
                    w = x % y;
                    x = y;
                    y = w;
                }
                return gx * gy / x;
            }
            var frase="Juanito";
            console.log(alReves('Viva la Pepa'));
            function alReves(frase){
                return frase.split('').reverse().join('');
            }

Plugins para jQuery

http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/

http://www.creativebloq.com/jquery/top-jquery-plugins-6133175

https://designmodo.com/jquery-ui-framework-plugins/

Ejercicio tablas completo


$(function () {
    function celdas(){
        $('td').mouseenter(function () {
            $(this).addClass("destacado");
        });
        $('td').mouseleave(function () {
            $(this).removeClass("destacado");
        });
    }
    $('#crear').click(function () {

        var tabla = "";
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        for (var i = 0; i < filas; i++) {
            tabla += "";
            for (var j = 0; j < columnas; j++) {
                tabla += "";
            }
            tabla += "";
        }

        tabla += "
#
";

        $('#resultado').html(tabla);
        celdas();

    });
    $('#crear2').click(function () {

        var tabla = "";
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        var fila = "";
        for (var i = 0; i < columnas; i++) {
            fila += "";
        }
        for (var i = 0; i < filas; i++) {
            tabla += "" + fila + "";
        }
        tabla += "
#
";

        $('#resultado').html(tabla);
    });

    $('#crear3').click(function () {
        var tabla = "
";
        $('#resultado').html(tabla);
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        for (var i = 0; i < filas; i++) {
            $('tbody').append("");
        }
        for (var i = 0; i < columnas; i++) {
            $('tr').append("#");
        }
    });
    
    $('#aumentar').click(function () {
        $('#fila_nueva').click();
        $('#col_nueva').click();
    });
    $('#fila_nueva').click(function () {
        var fila = $('tr').html();
        $('table').append("" + fila + "");
        celdas();
    });
    $('#col_nueva').click(function () {
        $('tr').append("#");
        celdas();
    });
    $('#rellenar').click(function () {
        $('td').text($('#contenido').val());
    });
    $('#numerar').click(function () {
        var cont = 1;
        $('td').each(function () {
            $(this).text(cont);
            cont++;
        });

    });
});