Códice | Entradas sobre «juego»

El cadáver exquisito

JavGuerra — Sun, 15 May 2022 00:00:00 GMT

Etiquetas: #web, #html, #css, #javascript, #arte, #meiac, #juego

Imagen: Victor Brauner, André Bretón, Jacques Hérold e Yves Tanguy (1935)

«El cadáver / exquisito / beberá / el vino / nuevo»

Alrededor de los años veinte, los pintores surrealistas inventaron un juego para «fabricar» figuras fantásticas. En realidad, era un derivado de un juego que ya se hacía con las palabras y que consistía en componer una frase entre varias personas: uno de los participantes en el juego escribe la primera palabra de una frase y luego pliega la hoja de forma que su palabra quede oculta; el que está a su lado hace lo mismo, pasa la hoja a su vecino y así sucesivamente…

En Francia, el juego con las palabras se llama «Le cadavre exquis» porque la primera frase escrita con este sistema rezaba: «El cadáver / exquisito / beberá / el vino / nuevo».

En lugar de jugar con palabras, los pintores surrealistas utilizaron las partes de una figura: el primer jugador dibuja la cabeza; el segundo, el cuerpo; el tercero, las piernas; y el último, los pies. Basta con indicar, sobre la línea plegada, los puntos donde se dejó el dibujo escondido. Con este sistema es posible dibujar personajes fantásticos, animales y plantas… ¡de otro mundo!

Tomando esta idea como referencia, en un «Taller de experimentación artística por ordenador» que impartí para el Museo Extremeño e Iberoamericano de Arte Contemporáneo (MEIAC) en 1997, llevamos a cabo una versión digital de dicho juego. Aquí el resultado:

Visualmente, el resultado no está a la altura de los estándares de hoy día. Tampoco la codificación de la página es un prodigio, pero su código guarda algo interesante que ahora contaré.

La mecánica del juego es sencilla. Los alumnos hicieron un total de diez (10) dibujos completos de sus personajes fantásticos imaginarios, de cabeza a pies. Estas imágenes fueron escaneadas, divididas en tres partes y almacenadas en tres carpetas distintas: «arriba», «medio» y «abajo» todas con el mismo tamaño. Cada imagen fue numerada como image0.jpg a image9.jpg, y todas ellas usaban los mismos puntos de corte para la cabeza, el cuerpo y las extremidades inferiores.

La página elige al azar una imagen de cada una de las tres carpetas mencionadas, mostrando una composición de ellas totalmente nueva e inesperada. ¡Ahora es el ordenador el que juega al cadáver exquisito!

¿Como funciona?

Esta es la parte sorprendente. En aquellos días los navegadores soportaban JavaScript limitadamente, y las versiones del lenguaje no estaban tan avanzadas. No se disponía de la función matemática Math.random() y el acceso al DOM estaba en pañales. Pero con el siguiente código que me ayudó a escribir en su momento un buen amigo, se hizo posible.

var valor=9;
var fecha=new Date();
var mili=fecha.getTime();	    
var segundo=fecha.getSeconds();
var minuto=fecha.getMinutes();	    
var hora=fecha.getHours();
var numero;

numero=Math.round((mili/segundo)%valor);
document.write('<img src="arriba/image'+numero+'.jpg" width="250" height="130"><br>');
	    
numero=Math.round((mili/minuto)%valor);
document.write('<img src="medio/image'+numero+'.jpg" width="250" height="130"><br>');

numero=Math.round((mili/hora)%valor);
document.write('<img src="abajo/image'+numero+'.jpg" width="250" height="130"><br>');

Para mostrar imágenes al azar, usé los datos de fecha y hora para generar valores pseudo-aleatorios en un rango de enteros entre 0 y 9. Y para poner las imágenes emplee document.write() pasándole como parámetro el código HTML que mostraría cada una de las tres imágenes aleatorias. Para conseguir el número de imagen empleé Math.round() con la fórmula que puede verse en el código. Con dichas operaciones, cada vez que se genera la página se obtienen valores lo suficientemente distintos como para conseguir resultados que no se repiten.

El código JavaScript se inserta en la página en la posición donde se deben mostrar las imágenes, de esa forma el document.write() no requiere localizar el elemento dentro del cual poner las imágenes. El código ya está ahí.

Para generar un nuevo «cadáver exquisito» hacemos clic en el botón «Pulse» que recargará la página, generando un nuevo resultado, pues el momento en el tiempo entre la primera composición de imágenes y la nueva es distinto.

Mosaico JS

JavGuerra — Mon, 27 Jun 2022 00:00:00 GMT

Etiquetas: #web, #código, #css, #html, #javascript, #dom, #juego

Ejercicio que combina lógica de programación en JavaScript, y el uso de eventos asociados a los elementos del DOM que consiste en elegir un pincel y pintar las celdas de una tabla para construir un mosaico de colores.

El juego

La página muestra ocho botones redondos de otros tantos colores de una gama que va de los colores oscuros, empezando por el negro, a los colores claros, terminando con el blanco. Al hacer clic en cada botón elegimos el color deseado.

Debajo de estos botones está la tabla de 16x16 celdas sobre las que vamos a pintar con el color seleccionado. Al hacer clic sobre una celda, esta cambia su color de fondo al nuevo color. Podemos componer dibujos con esta técnica como el que se ve en la imagen.

Para borrar emplearemos el color blanco, ya que este es el color por defecto de cada celda de la tabla, o bien podemos corregir errores pintando con otro color distinto.

Para borrar todo el dibujo deberemos recargar la página. Dada la simplicidad del ejemplo, no se han implementado opciones para guardar y cargar los mosaicos creados.

Lo básico, el HTML

El código html es una fuente de información para la aplicación que voy a desarrollar.

<body>
    <header>
        <h1><img id="logo" src="assets/img/mosaico.png" alt="logo" />Mosaico</h1>
        <small>¡Elije un color y haz clic en el mosaico para pintar!</small>
        <nav>
            <button id="btnNegro" class="negro"></button>
            <button id="btnAzul"  class="azul" ></button>
            <button id="btnRojo"  class="rojo" ></button>
            <button id="btnMagen" class="magen"></button>
            <button id="btnVerde" class="verde"></button>
            <button id="btnCian"  class="cian" ></button>
            <button id="btnAmari" class="amari"></button>
            <button id="btnBlanc" class="blanc"></button>
        </nav>
    </header>

    <main></main>
</body>

Dentro de <nav> indico el identificador id y la clase class que definirá el color de cada botón <button>. Esta clase me va a servir para simplificar la codificación del juego, ya que, como veremos más adelante, voy a aprovechar esta información para seleccionar el color del pincel con el que pintaremos, es decir, cuando hagamos clic en cada uno de los botones, dispararemos un evento que me permitirá ejecutar una función que leerá la clase asociada a este. Como la clase indica el color del botón, podemos usarla para saber qué color hemos elegido. Al pulsar el botón rojo estaremos obteniendo la clase .rojo que luego podemos aplicar en las celdas del mosaico.

Por supuesto, en el CSS cada clase definirá el color, por ejemplo:

.rojo {
  background-color: #f00;
}

Sencillo, ¿verdad? Veamos cómo funciona.

El programa en JS

Básicamente el programa hará lo siguiente:

Asociará un evento que llama a la función color() en cada uno de los ocho botones para poder elegir el color con el que pintar.
Dibujará una tabla con las dimensiones deseadas (inicialmente 16x16, pero se puede cambiar), y a cada celda de la tabla le asociará un evento que llama a la función pinta() cuya tarea es cambiar el color de la celda sobre la que se ha echo clic.
Inicializará las dos variables que usaremos en el juego.

Esto último paso es simple:

let btnSel = el('#btnNegro');
let pincel = btnSel.className;

Estas variables servirán para:

Variable	Uso
`btnSel`	Contendrá la referencia al botón que hemos seleccionado. Esto nos permitirá mostrar el botón como seleccionado y desmarcar el botón cuando cambiemos nuestra selección por otro botón seleccionado.
`pincel`	Contendrá la clase relativa al color seleccionado que hemos obtenido al hacer clic en alguno de los botones de la barra de navegación.

Asociando el evento de la función color

Para que los ocho botones de colores funcionen, debo asociarles un evento de tal forma que, al hacer clic en ellos, realicen su función, nunca mejor dicho:

el('#btnNegro').onclick = color;
el('#btnAzul' ).onclick = color;
el('#btnRojo' ).onclick = color;
el('#btnMagen').onclick = color;
el('#btnVerde').onclick = color;
el('#btnCian' ).onclick = color;
el('#btnAmari').onclick = color;
el('#btnBlanc').onclick = color;

La función el() es una forma de abreviar:

function el(el) { return document.querySelector(el); }

Como se aprecia, lo que hace la función el() es devolver un elemento de nuestro HTML tomando como referencia su selector, usando para ello la función querySelector();

Como ya tenemos el elemento HTML que corresponde a cada botón, podemos asignarle un escuchador de evento con .onclick que llame a la función color() al hacer click en ese botón.

¿Y qué hace la función color()?

function color() {
    btnSel.classList.remove('seleccion');
    btnSel = this;
    pincel = this.className;
    btnSel.classList.add('seleccion');
}

Primeramente elimina la clase .seleccion que es la encargada de dar el efecto hundido del botón seleccionado (btnSel).

Seguidamente obtiene la referencia del botón que acabamos de seleccionar haciendo uso de this. Aquí this hace referencia al objeto que llama a la función, es decir, al botón que lanzó el evento. Ahora ya sabemos cual es el botón sobre el que hemos hecho clic.

Para obtener el color del pincel con el que vamos a pintar, leo la clase asociada al botón con .className. Esta clase, como vimos cuando creamos el HTML, es la encargada de definir el color de fondo del botón, y es la que usaremos para pintar las celdas a partir de ahora cuando llamemos a la función pinta().

Para indicar visualmente al usuario el color que ha seleccionado, ponemos la clase .seleccion en el nuevo botón.

En resumen, como sabemos cual fue el botón que seleccionamos anteriormente, quitamos la clase que indica visualmente que el botón está seleccionado, porque ya ha dejado de estarlo, asociamos a la variable btnSel el nuevo botón, y a la variable pincel la clase asociada al botón que indica su color, y finalmente ponemos la marca de selección en el nuevo botón seleccionado.

Dibujando la tabla con las celdas sobre las que pintaremos

Creo la tabla y la conecto al DOM mediante:

el('main').appendChild( creaTabla(numCols, numFils) );

La función creaTabla() recibe dos parámetros que indican su altura y anchura en celdas. Si lo deseamos, podemos cambiar el valor de estas variables para hacer que el mosaico tenga otras dimensiones cambiando los valores en:

const numCols = 16;
const numFils = 16;

Esta función creaTabla() no destaca especialmente si no es por dos cosas:

function creaTabla(numCols, numFils) {
    let table, tbody, tr, td;
    tbody = creaEl('tbody');
    for (let i = 1; i <= numFils; i++) {
        tr = creaEl('tr');
        for (let i = 1; i <= numCols; i++) {
            td = creaEl('td');
            td.classList.add('blanc');
            td.onclick = pinta; // ¡Magia!
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
    table = creaEl('table');
    table.appendChild(tbody);
    return table;
}

Hago uso de la función .creaEl() para acortar la instrucción encargada de la creación de elementos del DOM:

function creaEl(el) { return document.createElement(el); }

Cada vez que creo un <td> (celda) le asigno un evento que llama a la función pinta():

    td = creaEl('td');
    td.classList.add('blanc');
    td.onclick = pinta; // ¡Magia!

Estas tres líneas dentro del bucle anidado crean las celdas de cada fila, les asignan la clase .blanc que pone el fondo de las celdas de color blanco por defecto, y luego asocia la función pinta() al evento .onclick de cada celda de forma que al hacer click en ella su fondo se pintará del color que indique pincel:

function pinta() { this.className = pincel; }

De nuevo aquí this es fundamental para poder trabajar con la celda seleccionada, que es la que lanzó el evento. Al hacer clic en la celda, cambiamos de color esa misma celda. Así de simple.

En resumen

Esto sería todo. Resumiendo la operativa de la aplicación, partiendo de un HTML con las clases que indican el color de cada uno de los botones del juego que sirven para seleccionar el color, asocio un evento a cada botón para saber el color del pincel con el que vamos a pintar las celdas. Inicialmente, el color seleccionado es el negro, y el botón seleccionado es el que corresponde a ese color.

Al hacer clic en cada celda, hacemos que el fondo de esta cambie al color seleccionado.

Puedes jugar al juego y ver el código completo en el repositorio haciendo clic en los siguientes enlaces.

¿Te animas a hacer tus propios dibujos pixel art?

Enlaces

Repositorio JavGuerra/MosaicoJS

Mastermind en PHP

JavGuerra — Sat, 06 Aug 2022 00:00:00 GMT

Etiquetas: #web, #código, #php, #juego, #formularios

Este juego interactúa con el usuario y pasa parámetros mediante POST a través de un formulario. El reto es hacerlo de tal forma que esos parámetros sean recibidos y procesados en la misma página que los envió, por lo tanto, la página debe contener toda la operativa de los distintos escenarios posibles del juego: al iniciar el juego, tras una tirada, si se producen errores, si se termina el juego… Veamos cómo.

El juego

Mastermind es un juego simple. Se trata de adivinar un número de 4 dígitos distintos (no repetidos). Cada dígito tendrá un valor entre 0 y 9. A través de un formulario, introducimos los cuatro dígitos. Al enviar el formulario recibiremos la respuesta de cuantos dígitos hemos acertado, o si hemos acertado el número completo con los dígitos en su orden correcto.

Si un dígito está en su posición correcta dentro del número, se contabilizará como un «muerto». Con cuatro muertos ganamos el juego, es decir, habremos acertado el número.

Si un dígito forma parte del número de cuatro dígitos, pero su posición en él no es la correcta, se contabilizará como un «herido». Esto nos permitirá sospechar que vamos por buen camino, y podremos probar nuevas combinaciones.

Para enviar el formulario debemos completar las casillas con los cuatro dígitos.

Para iniciar otra partida, ya sea a mitad de jugada o tras haber ganado, es suficiente con recargar la página sin enviar el formulario.

Escenarios

Dado que tenemos un juego en una SPA (Simple Page Aplication), la lógica del juego tiene que estar contenida en ella al completo, y mediante condicionales, actuar de una forma u otra según sea el caso. Estos casos son:

La primera vez que accedemos a la página del juego.
La recepción de datos y comprobaciones tras una tirada.
Cuando el juego ha terminado: Se ha averiguado el número.
Enviar datos y comprobar si hay errores en el formulario.

Puedes ver el código del juego completo al final de esta entrada.

Veamos cada escenario y su correspondiente código. Obviaré en esta entrada los estilos CSS que son incluidos en el head de la página. Pero antes, vamos con el formulario.

Formulario

El formulario es simple. Emplea una serie de campos ocultos, que veremos después, para pasar la información recabada del formulario (los 4 dígitos) y de las tiradas anteriores en el juego. Su estructura será:

<form name="input" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
    // Campos ocultos
    // Campos de formulario (4 input)
    // Comprobaciones de error de cada campo input
    <input type="submit" name="enviar" class="boton" value="Enviar" />
</form>

Con <?php echo $_SERVER['PHP_SELF'];?> indico la dirección donde debo enviar (mediante POST) el resultado del formulario, en este caso la misma página (PHP_SELF), esté en la ruta que esté.

Con name="enviar" podré indicar si estoy enviando los datos del formulario. Empleando el botón submit tengo esa garantía, ya que es el medio de que dispongo (el botón) para hacer justamente el envío.

1. Empezando a jugar

Empiezo averiguando si he recibido algún dato del formulario. Si no es así es que estamos ante la primera tirada.

$enviado = isset($_POST['enviar']);
$muertos = 0;
$mostrarNum = true;

if ($enviado) {
    // Procesar los datos recibidos del formulario
} else {
    // Generar un número al azar de cuatro dígitos no repetidos
    $numero = range(0, 9);
    shuffle($numero);
    $numero = array_slice($numero, 0, 4);
    $numero = implode($numero);
}

Con isset($_POST['enviar']) obtengo true si he recibido datos del formulario (el valor asociado al botón submit) o false en caso contrario. La variable $enviado contendrá ese valor booleano que determinará que rumbo tomará el programa. $_POST['enviar'] nos lo dirá si contiene el valor "Enviar" recibido del formulario (value="Enviar") o no.

Inicializo la variable $muertos que contendrá el número de dígitos acertados en su posición correcta. Al principio será 0, porque aún no hay aciertos. Usaré esta variable como condicional más adelante.

La variable $mostrarNum es un swich que me provee de una característica del juego, la de mostrar o no un interrogante en pantalla. Al pasar con el ratón sobre este interrogante puedo comprobar el número que estoy intentando acertar. Esta opción se implementó para hacer comprobaciones durante el desarrollo, pero ha quedado como una característica. Pon la variable en false si sientes que vas a tener la tentación de hacer trampas…

Esta ayuda se mostrará en el programa con la siguiente línea:

if ($mostrarNum) echo "<dfn id='numero' title='$numero'>?</dfn>" . "\n\n";

Con la comprobación if ($enviado), como decía, discrimino si debo procesar los datos recibidos del formulario o por el contrario debo inicializar el juego. El número de cuatro dígitos a averiguar es lo que necesito en este caso. Para obtenerlo al azar, empleo lo siguiente:

$numero = range(0, 9);
shuffle($numero);
$numero = array_slice($numero, 0, 4);
$numero = implode($numero);

En el arreglo $numero introduzco los dígitos del 0 al 9 con range(), y luego los mezclo (altero su posición en el arreglo) con shuffle(). Con array_slice() recorto el arreglo para que contenga sólo los cuatro primeros elementos, osea, los cuatro dígitos al azar. Finalmente, con implode() concateno esos cuatro elementos en uno, siendo ahora $numero una cadena de cuatro caracteres.

Podría haber obtenido un número al azar entre 0 y 9999 con rand() o incluso con mt_rand(), pero esto conllevaría conversiones de número a cadena, rellenado de 0 a la izquierda si el número obtenido al azar es menor que 1000, y comprobar que cada dígito sea distinto. Esta solución propuesta es más divertida e imaginativa, ¿verdad?

2. Recibiendo datos del formulario

Desde el formulario recibimos los siguientes valores:

El número que estamos intentando averiguar para poder hacer comprobaciones
Los cuatro dígitos que hemos introducido en el formulario.
El arreglo con las tiradas que hemos realizado hasta ahora. En la primera tirada no contendrá nada.

Veamos cómo recuperar y procesar los datos recibidos:

if ($enviado) {
    // Recuperar número
    if (isset($_POST['numero'])) $numero = $_POST['numero'];
    // Recuperar dígitos
    if (isset($_POST['d1'])) $d1 = $_POST['d1'];
    if (isset($_POST['d2'])) $d2 = $_POST['d2'];
    if (isset($_POST['d3'])) $d3 = $_POST['d3'];
    if (isset($_POST['d4'])) $d4 = $_POST['d4'];
    // Recuperar $tiradas[]
    if (isset($_POST['tiradas'])) $tiradas = $_POST['tiradas'];

    if (validaEntero($d1) && validaEntero($d2) && validaEntero($d3) && validaEntero($d4)) {

        $numEnviado = $d1 . $d2 . $d3 . $d4;
        
        // Comprobar datos entrantes
        $muertos = numMuertos($numero, $numEnviado);
        $heridos = numHeridos($numero, $numEnviado, $muertos);

        // Añadir tirada
        $tiradas[] = array($numEnviado, $muertos, $heridos);
    }
} else {
    // Generar un número al azar de cuatro dígitos no repetidos
}

Si cierta variable está presente, obtengo su valor. Por ejemplo con:

if (isset($_POST['numero'])) $numero = $_POST['numero'];

Cuando he recuperado el resto de valores, hago una comprobación básica por cada uno de los 4 dígitos recibidos con la función validaEntero(). Esta función hace lo siguiente:

// Validar un número entero entre 0 y 9, ambos inclusive
function validaEntero($numero) {
    return isset($numero) && ctype_digit($numero) && $numero <= 9 && $numero >= 0;
}

Devuelve true o false si el dígito que le pasamos es un número entre 0 y 9 o no.

De esta forma, podemos usarlo para tratar y obtener el número enviado:

    if (validaEntero($d1) && validaEntero($d2) && validaEntero($d3) && validaEntero($d4)) {
        $numEnviado = $d1 . $d2 . $d3 . $d4;
        // Comprobar datos entrantes
        // Añadir tirada
    }

Si los cuatro dígitos validan, en la cadena $numEnviado guardo el número de cuatro dígitos que estoy probando en esta jugada.

Compruebo a continuación el total de muertos y heridos a partir de ese dato.

// Comprobar datos entrantes
$muertos = numMuertos($numero, $numEnviado);
$heridos = numHeridos($numero, $numEnviado, $muertos);

Las funciones numMuertos() y numHeridos() calcularán los aciertos:

// Calcular el número de muertos
function numMuertos($numero, $numEnviado) {
    $contador = 0;
    $l = strlen($numero);
    for($i = 0; $i < $l; $i++) {
        if (substr($numero, $i, 1) == substr($numEnviado, $i, 1)) $contador++;
    }
    return $contador;
}        

// Calcular el número de heridos
function numHeridos($numero, $numEnviado, $muertos) {
    $contador = 0;
    $l = strlen($numero);
    for($i = 0; $i < $l; $i++) {
        if (strpos($numEnviado, substr($numero, $i, 1)) !== false) $contador++;
    }
    return $contador - $muertos;
}

La función numMuertos() comparará los valores de cada posición de los caracteres de cada una de las dos cadenas, el número que intentamos averiguar y el numero que hemos enviado por el formulario. Con cada coincidencia,el $contador se incrementa en 1. La función devuelve el número de coincidencias exactas, osea, el número de muertos.

La función numHeridos() por otra parte, recorre los caracteres del número que hemos enviado y comprueba si están contenido en el número que debemos acertar. Si es así el $contador se incrementa en 1. La función devuelve la diferencia entre el número de heridos y el número de muertos, ya que los aciertos en esta función no discriminan si los valores coincidentes están en su posición correcta o no, y los contabiliza como heridos, cuando puede que realmente estos valores sean muertos, y estos ya estaban contabilizados en la variable $muertos.

Cuando tenemos los datos, ya podemos añadir el resultado a la lista de tiradas:

// Añadir tirada
$tiradas[] = array($numEnviado, $muertos, $heridos);

El arreglo $tiradas[] contendrá un arreglo por cada tirada que almacenará el número que enviamos, el numero de muertos y el número de heridos obtenido.

3. ¿El juego terminó?

Pero ¿habremos acertado el número? Vamos a comprobarlo.

if ($enviado && $muertos == 4) { 
    // Partida finalizada
    echo "\t\t<br />\n\t\t<h3>¡¡¡Enhorabuena!!! Has acertado el número " . $numero . " en " . count($tiradas) . " jugadas.</h3>\n";
} else {
    // Seguir jugando
    if (isset($tiradas)) {
    foreach ($tiradas as $indice => $valor) {
        echo "\t\t" . "<p>" . ($indice + 1) . ". Con el número introducido: " . $valor[0] . ", tienes " . $valor[1] . " muertos y " . $valor[2]. " heridos.</p>" . "\n";
        }
    }

// Formulario

}

Si tengo cuatro muertos, ¡he ganado!. habré acertado el número en una serie de intentos que muestro con count($tiradas). En caso contrario, sigo jugando.

Si hay tiradas if (isset($tiradas)) muestro los datos de cada una de ellas con un foreach: número introducido, muertos y heridos de cada tirada, y a continuación muestro el formulario para seguir intentándolo.

4. El formulario completo y sus comprobaciones

Aquí el código que iré desgranado y que va dentro de la comprobación anterior, en el else, en caso de que no acertara el número:

<h3>Introduce tu número:</h3>
<form name="input" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">

    <!-- Campos ocultos -->
    <?php
        echo '<input type="hidden" name="numero" value="' . $numero . '" />' . "\n";

        if ($enviado && !empty($tiradas)) {
            foreach ($tiradas as $indice => $valor){
                echo "\n\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][0]" value="' . $valor[0] . '" />' . "\n";
                echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][1]" value="' . $valor[1] . '" />' . "\n";
                echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][2]" value="' . $valor[2] . '" />' . "\n";
        }}
    ?>

    <!-- Dígito 1 -->
    <input type="number" name="d1" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Dígito 2 -->
    <input type="number" name="d2" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d2)) echo $d2; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d2)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Dígito 3 -->
    <input type="number" name="d3" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d3)) echo $d3; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d3)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Dígito 4 -->
    <input type="number" name="d4" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d4)) echo $d4; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d4)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Enviar -->
    &nbsp;&nbsp;<input type="submit" name="enviar" class="boton" value="Enviar" />
</form>

Ya expliqué, más arriba, los parámetros de form y el envío del formulario. Entendido esto, el formulario tiene tres cuestiones de interés.

Preparar los datos que se enviarán en el formulario, incluyendo los que llegaron a través del anterior formulario.
Recibir los datos en los cuatro campos input para ser enviados. En cada campo deberá estar el valor de cada dígito recibido del formulario anterior. Las características de HTML se ocupan de que los valores introducidos estén en rango antes de enviarse, pero aún así podemos recibir datos alterados por POST, luego:
Comprobar que los datos recibidos sean los correctos, y si no, reseñar el error.

4.1. Campos ocultos

En esta parte del formulario, completo los distintos campos ocultos con información necesaria para la siguiente tirada: el número a acertar, y cada uno de los arreglos de cada tirada anterior, conteniendo el número que enviamos en la tirada, el número de muertos y el número de heridos.

<!-- Campos ocultos -->
<?php
    echo '<input type="hidden" name="numero" value="' . $numero . '" />' . "\n";

    if ($enviado && !empty($tiradas)) {
        foreach ($tiradas as $indice => $valor){
            echo "\n\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][0]" value="' . $valor[0] . '" />' . "\n";
            echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][1]" value="' . $valor[1] . '" />' . "\n";
            echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][2]" value="' . $valor[2] . '" />' . "\n";
    }}
?>

Véase que cada tirada debe incluirse con sus correspondientes valores como input ocultos por separado en el cuerpo de la página, ya que no podemos pasar un arreglo como valor de un campo de un formulario. Afortunadamente, sí podemos recibir estas tiradas como un arreglo para tratarlas. Recuerda, como vimos antes:

// Recuperar $tiradas[]
if (isset($_POST['tiradas'])) $tiradas = $_POST['tiradas'];

4.2. Recibir los datos de los input

El código para los cuatro campos input es el siguiente:

<!-- Dígito 1 -->
<input type="number" name="d1" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>" required="required" />
<?php if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

<!-- Dígito 2 -->
<input type="number" name="d2" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d2)) echo $d2; ?>" required="required" />
<?php if ($enviado && !validaEntero($d2)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

<!-- Dígito 3 -->
<input type="number" name="d3" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d3)) echo $d3; ?>" required="required" />
<?php if ($enviado && !validaEntero($d3)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

<!-- Dígito 4 -->
<input type="number" name="d4" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d4)) echo $d4; ?>" required="required" />
<?php if ($enviado && !validaEntero($d4)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

Mediante este código, repetido en cada input (convenientemente modificado), muestro el valor de cada dígito recibido de la jugada anterior, si esta se produjo. Sino no muestro nada.

value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>"

4.3. Si hay error en los datos recibidos, resaltarlo

Para asegurarnos que los dígitos que recibimos del formulario anterior son correctos, es necesario comprobarlos de nuevo del lado del servidor (ahora con PHP), aunque ya lo hiciéramos con las funcionalidades de HTML. Esto garantiza que los datos no fueron alterados en el envío mediante, tal vez, una modificación de la fuente HTML a través de las herramientas del navegador.

if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n";

Con este código tras cada campo, señalaremos aquellos campos input que contengan un error, en este caso añadiendo una flecha (←) y pintándola de color rojo con la clase CSS alerta.

Completado el formulario, con sus campos ocultos y los datos de todos los input, -que son campos obligatorios y tienen rangos numéricos definidos-, ya podemos enviarlo (botón sent) a la misma página para ser procesados tal como se indicó en el punto 2 de esta entrada, y así hasta acertar el número o hasta que recarguemos la página, caso en el que empezaremos de cero, en el punto 1 de esta entrada.

El programa completo

El HTML con el código PHP completo es el siguiente:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Mastermind</title>
    <meta name="description" content="Mastermind" />
    <meta name="keywords" content="DWES, DAW, Juego, Tarea 2" />
    <meta name="author" content="Javier Guerra" />
    <meta name="license" content="CC-BY" />
    <meta name="date" content="2019-01-31" scheme="YYYY-MM-DD" />
    <style>
        html,body{padding:0;margin:0;width:100%;height:100%;font-family:sans-serif;font-weight:300;background-color:#efeffb}.contenedor{margin:25px auto;padding:10px 20px 20px;width:100%;max-width:100%;border-radius:10px;background-color:#FFF;-webkit-box-shadow:5px 5px 5px 0 rgba(0,0,0,0.10);-moz-box-shadow:5px 5px 5px 0 rgba(0,0,0,0.10);box-shadow:5px 5px 5px 0 rgba(0,0,0,0.10)}@media(min-width:1023px){.contenedor{padding:20px 30px 30px;width:67%}}@media(min-width:1215px){.contenedor{padding:30px 40px 40px;width:50%}}#numero{display:block;text-align:right;height:0}h1,h2{margin-top:0;margin-bottom:5px;color:#1883ba}h3{margin-top:10px;margin-bottom:0;color:#1883ba}p{margin-top:5px;margin-bottom:5px}hr{border:0;margin:0;height:1px;background-image:linear-gradient(to right,rgba(0,0,0,0.50),rgba(0,0,0,0))}.campo,.boton{margin-top:5px;padding:5px;font-weight:600;font-size:16px;border-radius:5px;border:2px solid #1883ba;color:#1883ba}.campo{width:64px}.boton{width:128px;text-decoration:none;color:#fff;background-color:#1883ba}.boton:hover{color:#1883ba;background-color:#efeffb}#autor{display:block;text-align:center;font-size:small;margin-bottom:25px}.alerta{color:red}
    </style>
</head>

<body>
    <div class="contenedor">

        <?php
        
        $enviado = isset($_POST['enviar']);
        $muertos = 0;
        $mostrarNum = true;
        
        // Calcular el número de muertos
        function numMuertos($numero, $numEnviado) {
            $contador = 0;
            $l = strlen($numero);
            for($i = 0; $i < $l; $i++) {
                if (substr($numero, $i, 1) == substr($numEnviado, $i, 1)) $contador++;
            }
            return $contador;
        }        
        
        // Calcular el número de heridos
        function numHeridos($numero, $numEnviado, $muertos) {
            $contador = 0;
            $l = strlen($numero);
            for($i = 0; $i < $l; $i++) {
                if (strpos($numEnviado, substr($numero, $i, 1)) !== false) $contador++;
            }
            return $contador - $muertos;
        }
        
        // Validar un número entero entre 0 y 9, ambos inclusive
        function validaEntero($numero) {
            return isset($numero) && ctype_digit($numero) && $numero <= 9 && $numero >= 0;
        }

         
        if ($enviado) {

            // Recuperar número
            if (isset($_POST['numero'])) $numero = $_POST['numero'];
            // Recuperar dígitos
            if (isset($_POST['d1'])) $d1 = $_POST['d1'];
            if (isset($_POST['d2'])) $d2 = $_POST['d2'];
            if (isset($_POST['d3'])) $d3 = $_POST['d3'];
            if (isset($_POST['d4'])) $d4 = $_POST['d4'];
            // Recuperar $tiradas[]
            if (isset($_POST['tiradas'])) $tiradas = $_POST['tiradas'];

            if (validaEntero($d1) && validaEntero($d2) && validaEntero($d3) && validaEntero($d4)) {

                $numEnviado = $d1 . $d2 . $d3 . $d4;
                
                // Comprobar datos entrantes
                $muertos = numMuertos($numero, $numEnviado);
                $heridos = numHeridos($numero, $numEnviado, $muertos);

                // Añadir tirada
                $tiradas[] = array($numEnviado, $muertos, $heridos);
            }

        } else {

            // Generar un número al azar de cuatro dígitos no repetidos
            $numero = range(0, 9);
            shuffle($numero);
            $numero = array_slice($numero, 0, 4);
            $numero = implode($numero);

        }
        

        if ($mostrarNum) echo "<dfn id='numero' title='$numero'>?</dfn>" . "\n\n";
        echo "\t\t" . "<!-- Encabezado -->\n";
        echo <<< CADENA
        <h1><svg width=24 height=24>
        <circle cx=6 cy=6 r=6 fill="red" />
        <circle cx=18 cy=6 r=6 fill="yellow" />
        <circle cx=6 cy=18 r=6 fill="yellow" />
        <circle cx=18 cy=18 r=6 fill="lawngreen" />
        </svg> Mastermind</h1>
        <h2>El juego de los muertos y heridos</h2>\n
         <!-- Jugadas -->
        <br />
        <hr />\n
CADENA;
        
        if ($enviado && $muertos == 4) { 
            
            // Partida finalizada
            echo "\t\t<br />\n\t\t<h3>¡¡¡Enhorabuena!!! Has acertado el número " . $numero . " en " . count($tiradas) . " jugadas.</h3>\n";

        } else {

        // Seguir jugando

        if (isset($tiradas)) {
        foreach ($tiradas as $indice => $valor) {
            echo "\t\t" . "<p>" . ($indice + 1) . ". Con el número introducido: " . $valor[0] . ", tienes " . $valor[1] . " muertos y " . $valor[2]. " heridos.</p>" . "\n";
            }
        }

        echo "\t\t<hr />\n\t\t<br />\n"
        ?>

        <!-- Formulario -->
        <h3>Introduce tu número:</h3>
        <form name="input" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">

            <!-- Campos ocultos -->
            <?php
                echo '<input type="hidden" name="numero" value="' . $numero . '" />' . "\n";

                if ($enviado && !empty($tiradas)) {
                    foreach ($tiradas as $indice => $valor){
                        echo "\n\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][0]" value="' . $valor[0] . '" />' . "\n";
                        echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][1]" value="' . $valor[1] . '" />' . "\n";
                        echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][2]" value="' . $valor[2] . '" />' . "\n";
                }}
            ?>

            <!-- Dígito 1 -->
            <input type="number" name="d1" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Dígito 2 -->
            <input type="number" name="d2" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d2)) echo $d2; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d2)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Dígito 3 -->
            <input type="number" name="d3" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d3)) echo $d3; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d3)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Dígito 4 -->
            <input type="number" name="d4" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d4)) echo $d4; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d4)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Enviar -->
            &nbsp;&nbsp;<input type="submit" name="enviar" class="boton" value="Enviar" />

        </form>

        <?php } ?>

    </div>
    <span id="autor">2019 (CC-BY) Javier Guerra</span>
</body>

</html>

Enlaces

Buscaminas en JavaScript

JavGuerra — Thu, 28 Apr 2022 00:00:00 GMT

Etiquetas: #portfolio, #web, #código, #css, #html, #javascript, #bootstrap, #jquery, #juego

Programé Buscaminas en JavaScript como un juego atípico que no consiste en evitar las minas, como estamos acostumbrados en los juegos de escritorio del mismo nombre, sino en hacerlas estallar.

Una vez se genera el tablero con las dimensiones que deseemos, tendremos una serie de intentos para acertar la posición de las minas. Cada fallo cuenta, así como cada acierto. Termina la partida cuando se han superado el número de fallos posibles o cuando se encuentran todas las minas.

Realicé este juego durante una semana, como práctica de programación de la asignatura de Desarrollo Web en Entorno Cliente de Formación Profesional de Grado Superior de Desarrollo de Aplicaciones Web (DAW).

La aplicación, programada en JavaScript, usa Bootstrap y JQuery, es cross-browser y compatible con navegadores antiguos, tiene diseño responsive, cumple con los estándares W3C, de accesibilidad web y de accesibilidad de contenidos dinámicos (WAI-ARIA).

Como ejercicio de programación, es un buen ejemplo de manejo de eventos en JavaScript para interactuar con las casillas del tablero.

¿Te apetece una partidita?

Ver el codigo fuente en Github.

PS.: La ayuda depara alguna sorpresa… pero intenta jugar sin hacer trampa.

Summer Quiz

JavGuerra — Tue, 21 Jun 2022 00:00:00 GMT

Etiquetas: #portfolio, #web, #código, #html, #css, #javascript, #juego, #accesibilidad, #responsive

«Fun 10-question quiz to test your knowledge». Práctica final del módulo de JavaScript avanzado del Bootcamp de FSWD, por Alejandro Rodríguez y Javier Guerra.

El juego

El bootcamp de FSWD que estoy realizando, consta de varios módulos. El de JavaScript avanzado termina ahora, y este es el ejercicio final de esta fase de mi formación.

Se trata de un ejercicio que comprende todos los conceptos generales aprendidos, y que, como siempre, incluye alguna que otra cosa más allá del enunciado.

Enunciado

El ejercicio consiste en elaborar una SPA que consulte una API de preguntas y respuestas y que cuente con tres partes: 1. bienvenida y gráficas de estadísticas, 2. mostrar diez preguntas, una a una, con sus respectivas opciones de respuesta, y 3. página de resultado.

Conceptualmente hablando, las estadísticas de la parte 1 bien podrían aparecer en la fase 3, la de resultados, pero este es, en resumidas cuentas, el enunciado.

Algunas características destacables del enunciado son que la aplicación se debe ejecutar en una sola página web (SPA), que realiza consultas a una API, que guarda las puntuaciones en localStorage y que muestra estadísticas. Esta última parte, aunque accesoria, pues no se ha visto en el bootcamp, supuso un reto interesante, ya que ha dado para escribir varias entradas previas en este blog: Spinner loader asíncrono, Creación de un contador de resultados, Gráfica de lineas dinámica con SVG y Cargar SVG dinámicamente, todas ellas técnicas incluidas en el ejercicio.

Es un buen ejercicio para practicar, e igualmente espero que puedas disfrutarlo jugándolo. Este ejercicio lo he llevado a cabo con el apoyo del compañero Alejando.

Características destacables

Operativa de la aplicación

Aplicación de una sola página (SPA).
Integración de 25 preguntas propias en un JSON. Usa una en cada partida.
Hace uso de localStorage pata guardar y leer las puntuaciones.
Gráficas dinámicas en SVG de elaboración propia y uso de DOM para su gestión.
- Gráfica de líneas para mostrar estadísticas. Manejo del id ‘theline’.
- Contador visual para mostrar el resultado final del quiz. Manejo del id ‘hand’.
Animaciones CSS de gráfica de líneas y personajes.
Carga de las gráficas SVG al inicio de la app con fetch para hacer uso de los id que incorporan y poder así hacer cambios dinámicos. Con <img> esto no funcionaría.
Los posibles errores se muestran a través de una ventana modal <dialog>.
Usa JavaScript puro (Vanilla JS) sin frameworks.
Recopila librería de funciones propia en el fichero js/functions.js
Repositorio compartido en Github y web alojada en Github pages.

Usabilidad

La web implementa los criterios del estándar XHTML (revisado con Nu Html Checker).
El diseño es adaptable (responsive) según el dispositivo.
Es accesible (revisado con el complemento del navegador WAVE):
- Hace uso de etiquetas WAI-ARIA para describir eventos interactivos.
Tiene temática coherente y un cuidado aspecto visual trabajado con CSS.
Interfaz en inglés acorde al contenido de la API.
Emplea un ‘spin’ asíncrono para informar al usuario de que se está gestionado la consultas.
Los botones no se activan hasta que terminan los procesos asíncronos: cargas, consultas…
La selección de las opciones de cada pregunta se hace a través de botones de radio cuyo aspecto modificado con CSS simula el aspecto de botones de selección.
Muestra barra de puntuaciones medias y barra de progreso del cuestionario.
Implementa el protocolo Open Graph (en el head) para la correcta inserción de la web en RRSS.
Es compatible con Progessive Web Aplication (PWA) a través de fichero manifest.json, por lo que la página puede ser instalada en dispositivos móviles como una web app.
Se dispone de un código QR para acceso rápido a la web a través de dispositivos móviles.
Ha sido probada con los navegadores web Firefox y Chrome.
Extra: La consola del navegador muestra ayuda con las respuestas.