¿Por qué escribir todo el juego (incluidos los gráficos) en un archivo JavaScript codificado a mano?

01 de julio de 2021 [Games, JavaScript, Programming, Smolpxl]

¡Mi nuevo juego, Rightwaves, ya está disponible! Es un homenaje al gran R-Type clásico.

La implementación completa, incluidos todos los gráficos, está contenida en un archivo JavaScript de ~5000 líneas. ¿Por qué?

Esta es una mala idea

Permítanme comenzar diciendo que no recomiendo escribir código de esta manera. Esta es una mala idea y algunos aspectos del proceso de desarrollo se ven seriamente obstaculizados debido a esto.

Complejidad

Uno de mis objetivos para Smolpxl es devolver la codificación a su estado más simple.

En los últimos 40 años, la programación ha cambiado mucho: la cantidad y variedad de herramientas que tenemos que usar ha aumentado más allá de lo que puedo comprender, y casi todo esto es absolutamente brillante.

No me imagino escribiendo un juego como Eat Apples Quick usando el editor orientado a líneas que uso en el ZX Spectrum. Realmente disfruto la finalización del código Rust y la documentación que obtengo al ejecutar el servidor de lenguaje Rust dentro de NeoVim. (Incluso he oído hablar de editores que trabajan en un entorno de ventanas, pero no fui lo suficientemente valiente como para intentarlo).

No puedo imaginarme escribiendo un motor de física simple para Spring en lenguaje ensamblador, o tratando de concentrarme en eso mientras tengo que desentrañar convenciones y tiempos de representación de gráficos complejos. En cambio, puedo escribir código que se parezca a las matemáticas que representa y dejar que el navegador maneje la tarjeta gráfica.

Sin embargo, junto con todas las herramientas poderosas como lenguajes de programación de alto nivel, componentes de interfaz de usuario multiplataforma y bibliotecas que simplifican la escritura de bucles de juegos, surge un nuevo problema: la complejidad.

Tenemos que elegir qué herramientas, bibliotecas y paradigmas usaremos, y para tomar esa decisión debemos comprenderlos.

La biblioteca Smolpxl toma algunas de estas decisiones por usted, implementando la división de modelo/actualización/vista estilo Elm, proporcionando un lienzo pixelado de un tamaño conocido y manejando bucles de juego con una velocidad de fotogramas fija. Es perfecto para escribir juegos pequeños de estilo retro, similares a los que solía escribir en AMOS Basic en mi Amiga.

Quiero mantener las cosas simples, pero quiero que nuestro juego funcione en las computadoras de las personas. La única plataforma que podemos elegir de manera realista es el navegador: el mismo código se puede utilizar en casi todas partes.

Nada de esto explica por qué escribiría un juego dentro de un único archivo de código fuente, pero espero que empiece a mostrar de dónde vengo.

Sencillez

Otro objetivo de Smolpxl es enseñar programación y veo que una gran barrera para comenzar es el proceso de construcción.

Sin desarrollo

Puedes escribir un juego Smolpxl en Rust y compilarlo en WASM (así es como se hace Eat Apples Quick), y también puedes empaquetar JavaScript con webpack o similar, pero quiero una forma de primera clase de usar Smolpxl que involucre ningún desarrollo en absoluto: Quiero que puedas copiar en index.html y smolpxl.js estándar, luego escribir tu código en game.js y que funcione cuando hagas doble clic en index.html.

El objetivo de Rightwaves es demostrar que se puede escribir un juego completo en Smolpxl, sin desviarse de esa simple historia: simplemente haga doble clic en index.html.

Todo está dentro del juego.js.

Entonces, Rightwaves es un único archivo JavaScript* que contiene código, descripciones de niveles y, quizás lo más inusual, gráficos.

* Nota: Hice trampa: los datos de “reproducción de acción” están en un archivo separado; es mucho más grande que el código fuente y lo haría demasiado difícil de manejar. Si quisiera mantenerlo puro, tendría que eliminar la repetición de acción predeterminada del juego, pero me gusta demasiado.

diseño de niveles

A menudo, cuando escribía Rightwaves, deseaba haber escrito un editor de niveles. De hecho, a menudo se me cita diciendo

“Un juego sin editor de niveles es sólo la mitad del juego.”
— Andy Balaam, bastante a menudo

Pero en cambio, el diseño de niveles es un código como este:

NIVEL constante = [
    {
        scenery: [
            { x:   0, y: 80, image: "machinery-20x16-01"},
            { x:  20, y: 88, image: "machinery-20x08-01"},
// ... etc.
        ]ancho: 1526, extranjero: [
            newRedFlat(130, 20),
            newRedFlat(145, 25),
// ... etc.

The full code is at gitlab.com/smolpxl/rightwaves/-/blob/main/public/game.js#L3478.

It’s not a lot of fun to edit, but on the other hand, every time you make a change a simple refresh in the browser lets you see what it really looks like. No build process; no waiting.

Graphics

I drew the graphics for Rightwaves using GIMP, exported the images as PNG files, and converted them to text using a little Rust utility I wrote.

When I wanted to change an image, it was a nightmare, and I would recommend this approach to no-one whatsoever.

The reason why Smolpxl supports creating images in the source code is so you can hand-craft them right there, using an ASCII-art style.

Here’s the spaceship:

and here is the code for it:

const IMAGES = {
    "ship": {
        pixels: [
            "..www.......",
            "dddddww.bbb.",
            "rllldddcccwb",
            "dddhlllccccb",
            "rddddddaccb.",
            "..aaa......."
        ]clave: { "w": [255, 255, 255]"D": [88, 88, 88]"B": [77, 111, 249]"R": [141, 0, 0]"I": [126, 125, 125]"H": [192, 192, 192]"DO": [3, 157, 157]"A": [42, 42, 42]
        } }, //... muchos, y quiero decir muchos, más aquí para obtener más gráficos...

El código completo está en gitlab.com/smolpxl/rightwaves/-/blob/main/public/game.js#L41.

Tenga en cuenta que lo codifiqué minuciosamente por colores para usted, para esta publicación de blog. ¡En código no existe tal lujo!

Franqueza

Todos los juegos de Smolpxl son, por supuesto, software gratuito/de código abierto. Al eludir la compilación, cualquiera puede ver el código fuente, tal como lo escribí, en su navegador. Cualquiera (incluyéndome a mí) puede solucionar el problema sin realizar ningún paso adicional. Poner todo en un archivo hace que sea más fácil encontrar el código (pero puede hacer que sea más difícil de entender).

Mejoramiento

La ola derecha se carga muy rápidamente. En mi máquina, la primera vez que visitas la página, ésta gira en 1,4 segundos, luego de descargar 5 archivos que suman un total de 149kB (gzip). Si excluimos las repeticiones de acción incluidas, son mucho más pequeñas.

Todo ello, sin ningún proceso de fabricación.

Quizás esa no sea una mala idea.

Esta es una mala idea

No intentes esto.

Para divertirse

A menos, por supuesto, que te guste divertirte. Probé esto porque fue divertido. Realmente recomiendo probar cosas diferentes porque pueden ser divertidas.

Además, si te gusta divertirte, prueba jugar en los juegos de Smolpxl o escribe los tuyos propios.