Códice | Entradas sobre «formularios»

Validación de formularios

JavGuerra — Fri, 13 May 2022 00:00:00 GMT

Etiquetas: #código, #html, #javascript, #formularios, #usabilidad

¿Cómo procesar un formulario antes de enviarlo, realizando validaciones propias en sus campos y aprovechando simultáneamente la validación de restricciones implícita en HTML5?

Que ambos tipos de validaciones se den al mismo tiempo es importante, ya que si esto se hiciera consecutivamente, es decir, una a continuación de la otra, llevando a cabo primero nuestra validación y luego la de HTML5, correríamos el riesgo de que los campos propios ya validados pudieran ser alterados por el usuario una vez pasada la primera validación, si en la segunda validación hay campos erróneos que obligan al usuario a editarlos, y por tanto el formulario se enviaría con errores. Veamos cómo se haría.

Tenemos un formulario con tres campos requeridos (obligatorios): «nombre», «edad» y «correo», y al campo «edad» le añado una restricción propia, que su valor debe ser mayor o igual a 16, y si esto no se cumple, deberé mostrar un mensaje de error personalizado en el mismo campo (al estilo de los mensajes de error de HTML5). El formulario cuenta con dos botones: «Borrar» y «Enviar».

Si no tuviésemos que realizar nuestra validación, el proceso sería sencillo, ya que HTML se ocupa de todo por nosotros. Al hacer click en el botón enviar de tipo submit (<button type="submit">Enviar</button>), se lanza el evento submit(), y el formulario se envía si no hay errores tras validarlo, o nos muestra los errores de validación de campos implícita en HTML5. Pero para poder realizar nuestras propias validaciones debemos romper este flujo, y tomar el control de la validación.

Tomando el control

Esto podemos hacerlo de dos formas:

Capturamos el evento submit() asociado al botón «Enviar» con enviar.addEventListener('click', validaForm); en JavaScript, incluyendo en function validaForm(evento) un evento.preventDefault(); que evite que el action del formulario se procese, y realizando por nuestra cuenta todas las validaciones (las propias y las de HTML5), usando su (API), para terminar lanzando el evento form.submit() que retomará el curso del formulario.
Usamos un botón «Enviar» que no incluya el type="submit", y asociamos este botón a un evento que llame a la función de validación validaForm() desde la cual, al final, lanzaremos también el form.requestSubmit() si se cumplan las dos condiciones de este ejemplo: edad correcta y campos obligatorios rellenados.

La opción elegida aquí es la segunda por ser la más simple para cumplir el objetivo marcado de llevar a cabo ambas validaciones. Desde la mencionada función validaForm() comprobamos la edad con la función validaEdad() que debe devolver True o False, y comprobamos nosotros mismos si el formulario tiene errores con form.checkValidity(), que también devuelve True o False. Si ambas comprobaciones son True, el formulario se envía.

Al utilizar form.requestSubmit(), el navegador se comporta exactamente igual que si el usuario hiciera clic en un botón de envío: ejecuta automáticamente la validación nativa (respetando atributos como required o pattern), muestra los mensajes de error al usuario si algo falla y dispara el evento submit, permitiendo que el formulario se gestione de forma segura y completa.

Veamos el código JavaScript:

01. const enviar = document.querySelector('#enviar');
02. const form   = document.formulario;
03. 
04. enviar.addEventListener('click', validaForm);
05. 
06. function validaForm(evento) {
07.   evento.preventDefault();
08.   if (validaEdad() && form.checkValidity()) {
09.     alert('Ambas validaciones son correctas.');
10.     form.requestSubmit();
11.   } else {
12.     alert( 'El formulario contiene errores.' );
13.   }
14. }
15. 
16. /* Comprueba que el usuario tenga más de 16 años */
17. function validaEdad() {
18.   const edad = Number(form.edad.value);
19.   if (edad < 16) {
20.     form.edad.setCustomValidity('Demasiado joven.');
21.     return false;
22.   }
23.   form.edad.setCustomValidity('');
24.   return true;
25. }

Para llegar a esta solución me inspiré en una pregunta realizada en StackOverflow, y en el enlace de W3Schools que aparece en la señalada como mejor respuesta de esa pregunta.

En caso de tener que llevar a cabo más validaciones propias, bastaría con encadenarlas en el ìf() de la línea 8, o crear una función a parte que incluya todas nuestras validaciones, que sustituya a validaEdad() y que devuelva True o False.

La función validaEdad()

Cuando se ejecuta la función validaEdad(), pueden pasar dos cosas:

Si la edad no es la adecuada, se marca el error en la línea 20: Al pasar un texto como 'Demasiado joven.', el navegador marca el campo como inválido. Mientras exista este mensaje, el formulario estará bloqueado y no se podrá enviar.

Si la edad es la adecuada, se limpiar el error en la línea 23: Es imprescindible pasar una cadena vacía '' cuando el dato sea correcto. Esto indica al navegador que el campo vuelve a ser válido, permitiendo así el envío. Si no “limpias” el mensaje al cumplirse la condición, el campo quedará marcado como erróneo permanentemente.

Debes aplicar esta misma lógica en cada validación propia que realices.

Valida / NO valida

¿Qué ocurre si la edad no es correcta o si uno de los campos obligatorios está vacío? Como el formulario no es correcto, se mostrará la alerta de la línea 12. Podemos sustituir esta alerta del ejemplo por una serie de acciones de aviso al usuario u otras para informar de que algo no ha ido bien (o no hacer nada, si no necesitamos el else). En caso contrario, si todo ha ido bien, el formulario será válido, y se llevará a cabo lo estipulado en las líneas 9 y 10.

La alerta de la línea 9 del ejemplo puede sustituirse por cualquier cosa que queramos llevar a cabo antes de enviar el formulario en la línea 10, por ejemplo, mostrar los valores de los campos para que el usuario los revise antes de enviar, si estamos realizando una compra, un envío de dinero… Por último, en la línea 10, enviamos el formulario con form.requestSubmit().

Eso es todo. Puedes ver el ejemplo empleado en esta entrada y más información relacionada en los siguientes enlaces:

Enlaces

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>