Mes: septiembre 2021

Buscaminas

por

Tomando como referencia el Buscaminas de Windows XP, he implementado este clon del juego inventado por Robert Donner en 1989.

Detalles de la implementación

Entre las diferentes acciones que tiene la mecánica de juego, cabe destacar, cuando el jugador realiza un ‘click’ en un área en la que no hay ninguna mina y que a su vez, tiene celdas vecinas vacías. Esta acción requiere que se descubran todas las celdas que no contienen minas, propagándose hasta encontrar una celda vecina que si contenga una mina a su alrededor.

Para ello he implementado un algoritmo iterativo de rellenado por difusión (floodfill), utilizando una cola de prioridad y evitando la vertiente recursiva. Ya que una implementación recursiva puede provocar una desbordamiento de memoria, debido a la cantidad de ramificaciones que se generan al recorrer los estados vecinos.

Minesweeper Game - Sergio Soriano

Por lo demás es un juego fácil de implementar, en que he optado prescindir del elemento Canvas (por ninguna razón en especial), utilizando 100% elementos HTML y estilos CSS para la representación gráfica, y claro está, Javascript para la lógica.

Código Fuente

https://github.com/sergiss/minesweeper

Generador de arte ASCII

por

Conversor de imagen a texto, en el que se realiza una representación de una imagen en código ASCII.

ascii-art Dragon Ball - Sergio Soriano

En resumen la conversión consiste en iterar los píxeles de la imagen y operando del siguiente modo:

  1. Pasamos el píxel actual escala de grises. Para ello sumamos los componentes RGB y dividimos entre 3, obteniendo la media de color.
grayscale = (red + green + blue) / 3;

2. Teniendo en cuenta que la variable grayscale tendrá un valor entre 0 y 255, hay que encontrar una representación de estos valores con caracteres. Una forma de hacer esto, es crear un array o cadena de texto, el cual se almacene los caracteres ordenados por densidad de píxeles. Como ejemplo podemos ver que la letra ‘O’ tiene más pixeles que el signo de puntuación ‘.’, por lo que la letra ‘O’ estaría almacenada antes que el signo de puntuación ‘.’.

A continuación se muestra una secuencia de caracteres que funciona bastante bien, para este menester:

characters = '#####********+++++++++=========--------:::::::::..';

3. Finalmente almacenamos o representamos en pantalla el carácter calculado:

character = characters[(characters.length - 1) * (grayscale / 255)];

Código Fuente

https://github.com/sergiss/image-ascii