Buscaminas

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

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

CHIP 8

Implementación en Javascript del interprete CHIP-8.

CHIP-8 is an interpreted programming language, developed by Joseph Weisbecker. It was initially used on the COSMAC VIP and Telmac 1800 8-bit microcomputers in the mid-1970s. CHIP-8 programs are run on a CHIP-8 virtual machine. It was made to allow video games to be more easily programmed for these computers

wikipedia

Live Demo

Chip-8 Space Invaders
Space Invaders

Código Fuente

https://github.com/sergiss/chip-8

Juego de puzzle Puyo Puyo

Ejemplo de implementación del juego Puyo Puyo usando HTML5 y Javascript.

El objetivo del juego es:

  • Se debe de hacer coincidir 4 puyos o más del mismo color para hacer que desaparezcan.
  • Generar el máximo de puntos luchando contra el incremento de velocidad.
  • El juego termina si el tablero se llena de puyos y no se pueden insertar más piezas.

Live Demo (CPU)

arrows = move, space = rotate

Características:

  • Inteligencia Artificial (modo CPU) para partida autónoma.
  • Algoritmo Flood fill para la detección de combinaciones de Puyos del mismo color.
  • Personalización de número de columnas y adatación dinamica de filas.
  • Generación aleatoria de estados de tablero.

Código Fuente

https://github.com/sergiss/puyo-puyo

Game of Life

Implementación en Javascrip del autómata celular el Juego de la Vida.

El universo del juego de la vida consiste en una cuadrícula ortogonal infinita de dos dimensiones de celdas cuadradas, cada una de las cuales se encuentra en dos estados posibles, vivo o muerto.

Página del proyecto: https://github.com/sergiss/game-of-life

Voxel Engine

Este proyecto escrito en Java lo realicé hace unos años, con el fin de entender los procesos que envuelven la generación de escenarios de forma procedural, en concreto escenarios tipo Minecraft. Para ello se ha utilizado el framework libGDX basado en OpenGL para la representación de gráficos 3D.

Voxel Engine Java libGDX like Minecraft

Página del proyecto: https://github.com/sergiss/voxel-engine

HTML 2D Game Engine

En esta entrada se muestra un recopilatorio de herramientas y las técnicas utilizadas para implementar este pequeño motor de juegos en 2D. Se basa en el dibujado de graficos usando el canvas de HTML5 y Javascript.

Live Demo

arrows = move, x or space = Jump

Código fuente

Este es el código fuente del proyecto, recordar que requiere de un servidor web para su correcta ejecución:

https://github.com/sergiss/html-2d

Implementación: WebSockets Parte 2 – agar.io

En esta segunda parte de la entrada WebSockets, he desarrollado una pequeña versión del juego agar.io. Al igual que en la primera parte del post (WebSockets Parte 1), el juego se ha realizado con la arquitectura cliente-servidor, pero con la diferencia que este incorpora la posibilidad de multijugador.

Mejoras:

Aunque la implementación es 100% funcional, se pueden aportar las siguientes mejoras.

  • Implementación de sistema de suavizado de movimiento en la parte del cliente.
  • Nombre y puntuación de los jugadores.
  • Ranking de puntuación.

Código fuente: https://github.com/sergiss/agario-ws

Implementación: WebSockets Parte 1 – Arkanoid

Como ejemplo de una aplicación web en tiempo real, he implementado el juego Arkanoid utilizando WebSockets. A diferencia de una arquitectura clásica, donde el programa corre íntegramente en la máquina que ejecuta el código, en esta implementación la lógica del juego corre en la parte del servidor, y el cliente se dedica a comunicar a este el estado de los controles y a dibujar los gráficos en el navegador (thin client).

Arkanoid Web Sockets
Arkanoid Screenshot

Entre otras, esta estrategia suele utilizarse para la creación de juegos multijugador. Como se ha explicado, las reglas del juego y el estado de los jugadores – posición, puntuación, nivel, vida, etc. – son controlados por el servidor. La carga gráfica y el estado de los controles es manejada por el cliente.

Aunque este juego es de un solo jugador, sirve de muestra de aplicación distribuida usando tecnología WebSockets. En una segunda parte implementaré el juego agar.io como ejemplo de juego multijugador.

Código fuente: https://github.com/sergiss/arkanoid-ws