Ruleta

Vamos a usar una versión simplificada de la ruleta. Aunque en la ruleta original se pueden hacer muchos tipos de apuestas, aquí sólo vamos a permitir tres:

  • Rojo o Negro: si el  número es rojo o negro
  • Par o impar: si es par o impar
  • Passe o Manque: si es mayor o menor que 18

Las dos últimas las podemos averiguar fácilmente a partir del número. La primera hay que saberse la lista, que es la siguiente:

 var colorNum=[1,2,1,2,1,2,1,2,1,2,2,1,2,1,2,1,2,1,1,2,1,2,1,2,1,2,1,2,2,1,2,1,2,1,2,1]; //1=Rojo, 2=Negro

En la página tendremos una tabla con seis elementos, para las diferentes apuestas y tres o más imágenes de fichas (aquí dejo cuatro: fichas)

Estas fichas las arrastraremos hasta la tabla y así se harán las apuestas. Si suelto la ficha de $5 en el elemento ‘rojo’ se entiende que estoy apostando 5 al rojo. Para facilitar la cosa las fichas pueden tener en el title el valor y los elementos lo mismo.

Después tendremos un botón de jugar, donde obtendremos un número aleatorio y dependiendo de lo que salga y las apuestas le daremos el premio.

Preguntas jQuery

Selectores:

  • Seleccionar los párrafos dentro de un div
  • Seleccionar el segundo tr de una tabla con id ‘datos’

Estilos

  • Poner todos los enlaces de color de fondo gris
  • Añadir a todas las cabeceras ‘h1’ la clase ‘cabecera’
  • A todos los elementos que tengan la clase ‘supercool’, quitársela.

Eventos

  • Cuando se pulse el botón con id ‘alerta’ mostrar un alert con un texto
  • Al pasar por encima de cualquier párrafo que se ponga el fondo de color rojo
  • Y cuando se salga de color blanco

Contenido

  • Añadir un elemento ‘<li>hola</li>’ a la lista con id ‘lista’
  • Vaciar el contenido de todos los span de la página
  • Obtener el valor de un input con id ‘sueldo’

Parentela:

  • Eliminar todos los hijos del elemento con id ‘contenedor’
  • Añadir al padre del elemento con id ‘lista’ la clase ‘destacado’
  • Ocultar todos los hermanos del elemento con id ‘lista’
  • Crear un duplicado de la lista con id ‘lista’

Efectos

  • Al pinchar en cualquier elemento de la página (menos el body) que se desvanezca
  • Al pinchar en cualquier elemento ‘li’ de la lista con id ‘lista’ que aparezcan/desaparezcan sus hermanos
  • Cuando se pinche en una imagen con id ‘cohete’ que suba ‘parriba’ y luego baje ‘pabajo’

jquery

Juego dados

Las reglas del juego de dados pueden leerse en la wikipedia: Craps

Cuando se juega en un casino contra la banca, o casa, uno o varios jugadores realizan diversas apuestas al resultado que se obtendrá en los dados que lance alguno de los jugadores, el cual es designado «tirador» o «shooter» por su nombre en inglés. Para comenzar el juego, durante lo que se conoce como «tiro de salida», el jugador necesita realizar una apuesta que se conoce como «línea de pase», en la que se busca obtener un siete (conocido como «siete natural» o «siete ganador») o un once en la combinación de dados para ganar la apuesta, que paga uno a uno. Si por el contrario obtiene un dos, tres o doce (números conocidos como «craps») pierde automáticamente su apuesta y necesitará colocar de nuevo una apuesta para seguir tirando. Si durante el primer lanzamiento no obtiene un siete u once (con que gana), o un dos, tres o doce (con que pierde), el juego entrará en una segunda etapa, en la que se marcará el «punto» en el número que se obtenga en dicho lanzamiento (cuatro, cinco, seis, ocho, nueve o diez). En esta etapa, el tirador buscará volver a obtener ese número en los dados, con lo que ganará el «roll» o «ronda», antes de obtener un siete, llamado «siete fuera» o «seven out». Si logra repetir el número del punto, el jugador ganará su apuesta y se le pagará uno a uno el monto. Si por el contrario si aparece un siete, perderá su apuesta. En ambos casos se considera que la ronda ha terminado y el juego vuelve a comenzar, aunque si la ronda culminó debido a un siete fuera se designará un nuevo tirador de entre los distintos jugadores.

Para nuestro programa tendremos, entonces, dos ramas diferentes.

Cuando el usuario le de a jugar tiramos los dados.

  • Si sale siete u once, ha ganado
  • Si sale 2, 3 o 13, ha perdido.

En cualquier otro caso tenemos que guardar la puntuación (y mostrarla en cualquier sitio). A partir de aquí tendremos otro botón de tirar en el que iremos tirando los datos hasta que:

  • Salga siete: ha perdido
  • Salga el mismo numero: ha ganado

Lo más fácil es tener dos botones, que se irán mostrando u ocultando dependiendo de como vaya el juego.

En el primer botón:

  • Realizar tirada (dos números aleatorios entre 1 y seis) Poner imagen. Estaría bien tener una función para esto.
  • Si sale siete u once, aumentamos uno al saldo y decimos que ha ganado
  • Si sale 2, 3 o 13 quitamos uno al saldo y decimos que ha perdido
  • Si sale otro número lo almacenamos en una variable, ocultamos el botón y mostramos el segundo

En el segundo botón:

  • Realizar tirada. Idem anterior

Si sale siete, ha perdido

Si sale el número, ha ganado

En cualquier otro caso, sigue jugando

 

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('');
            }