Los 4 cuatros

En todo el universo, la Matemática es número y medida. La unidad, símbolo del Creador (*), es el principio de todas las cosas que no existen sino en virtud de las inmutables proporciones y relaciones numéricas. Todos los grandes enigmas de la vida pueden reducirse a simples combinaciones de elementos variables o constantes, conocidos o incógnitos que nos permiten resolverlos.

El hombre que calculaba, capítulo XI. Malba Tahan.

(*) Monesvol.

Estos días estoy leyendo ‘El hombre que calculaba’. El libro tiene cosas curiosas y una de esas cosas curiosas la vamos a convertir en un juego matemático para el navegador.

Los 4 cuatros

El juego lo llamaremos ‘los 4 cuatros’. En realidad no me he inventado el nombre, incluso tiene página en la Wikipedia, o sea que no soy muy original.

Las reglas son muy básicas, tenemos que conseguir distintos números usando cuatro 4’s y varias operaciones matemáticas básicas. En la versión que vamos a programar las operaciones permitidas serán:

  • Suma: +,
  • Resta: -,
  • Multiplicación: *,
  • División: /,
  • Abrir paréntesis: (,
  • Cerrar paréntesis: ),
  • Punto decimal: .,
  • Raiz cuadrada: √,
  • Factorial: !

Por ejemplo, para conseguir el valor 0 podríamos hacer:

  • \(\frac{4}{4} – \frac{4}{4} = 0\)
  • \(44 – 44 = 0\)

El juego

Debajo tienes el juego. Puedes pulsar los distintos botones para jugar al juego:

El objetivo, el número a resolver, se encuentra en el área rosa. Los botones verdes nos permiten crear nuestra expresión. Los botones azules nos permiten evaluar si la expresión es correcta o si queremos resetear el valor porque no conseguimos hallar una solución. Debajo de los botones azules aparecerán mensajes que nos irán informando de determinadas cosas.

Así se hizo

Y ahora voy a explicar un poco cómo está el juego hecho. Pongo todo el código a continuación y os voy explicando poco a poco:

En el código anterior está mezclado el HTML, el CSS y Python (en lugar de javascript) usando Brython.

El cabecero:

Básicamente, tenemos:

  • los scripts con la implementación de Python en javascript (Brython) y parte de la biblioteca estándar Python. Esto nos permite escribir código Python en lugar de javascript y ese código Python se traducirá a javascript al vuelo gracias a la magia de Brython.
  • Por otro lado tenemos un poco de código CSS para demostrar mis nulas dotes de diseño. No voy a entrar en ello.

Lo siguiente es importante:

Abrimos el body del documento HTML y usamos la función brython() (javascript) cuando la página se cargue. Esta función es la que se encarga de buscar en el documento HTML todas las etiquetas script con atributo type que sea igual a text/python. Es decir, busca código Python dentro del documento HTML y lo traduce a javascript para que el navegador lo entienda.

Lo siguiente es un poco de estructura del documento HTML y algo de contenido con las explicaciones oportunas:

Y, a partir de aquí, viene el código Python. Primero importamos unas pocas bibliotecas.

Aquí tenemos la biblioteca browser que es específica de Brython. Esta biblioteca nos permite tener acceso al DOM y añadir nuevas etiquetas al documento.

En lo siguiente añadimos un número aleatorio entre 1 y 10 a la zona rosa. Empezamos con un problema sencillo, por eso solo considero valores del 1 al 10, para que nadie se desanime a las primeras de cambio.

En el código HTML de más arriba habíamos definido

Donde tenemos el elemento span que tiene el atributo id="target". Usando doc['target'] accedemos a ese elemento. Es similar al siguiente código javascript: document.getElementById('target'). Con Brython podemos añadir contenido a un elemento de varias formas. Una de ellas es usando el método append.

En la siguiente parte vamos a definir una serie de botones. Normalmente, un botón tiene una funcionalidad cuando lo pulsamos.

En la primera parte tenemos un bucle donde iteramos sobre un diccionario. Con cada iteración añadimos un botón:

Los botones los añadimos a la etiqueta div con id="controls". Antes hemos usado el método append para añadir contenido. Ahora voy a usar un operador especial de Brython, <=, que es como una flecha que indica que estamos metiendo el valor de la derecha (en este caso un botón) al valor de la izquierda, el div. El operador <= es similar al método append. Con el bucle for hemos añadido 10 botones.

La función write es la que se encarga de hacer varias cosas. Por un lado, escribe contenido en la zona amarilla, que es la zona donde iremos escribiendo nuestra expresión a evaluar. También se encarga de comprobar si estamos usando más de cuatro 4’s. Para actualizar algunas cosas usamos, nuevamente, el método append y el atributo text. El equivalente a text en javascript sería innerText.

Las siguientes líneas nos permiten añadir funcionalidad a cada uno de los botones que acabamos de crear usando el método bind.

doc['open_parenthesis'] accede a uno de los botones que acabamos de crear. Con el método bind hacemos que al evento click (pulsamos el botón) se responda llamando a la función write y ejecutando ese código.

A continuación hacemos algo similar para el botón DELETE pero este tiene una funcionalidad un poco distinta. No lo explico porque creo que ya deberías saber cómo funciona.

El siguiente código se encargará de evaluar la expresión que hayamos escrito y mostrar distintos mensajes en función de si acertamos o no:

Además, creamos el botón evaluate y le añadimos funcionalidad usando un código similar al que hemos usado anteriormente.

Por último, hacemos algo similar para el botón reset. Aquí añadimos funcionalidad para resetear el valor objetivo a calcular. Por si ya hemos acertado o, por si es muy difícil, poder pedir un nuevo valor.

En este caso, el valor a calcular lo actualizamos con valores entre 0 y 50 para hacerlo más difícil.

Y, cerramos las etiquetas HTML que quedaban abiertas.

Y se acabó

Ha sido una explicación rápida.

Para las que quieran, podéis modificar el código para hacer una versión en español, para usar otro número que no sea el 4, para usar otros operadores,…

Si tenéis dudas o nuevas versiones puedes usar los comentarios más abajo.

Saludos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

thirty six + = forty two