Friday JS: juego de 0 líneas JS y CSS

Quizás muchos de los veteranos recordarán una epidemia de artículos con titulares como "% something% en 30 líneas de JS". Y también la publicación épica " Juego en 0 líneas de código en JS puro " que siguió, después de lo cual la epidemia disminuyó abruptamente. Totalmente consciente de que nunca superaría esta obra maestra, sin embargo, decidí cinco años después terminar mis cinco centavos.

Señoras y señores, le ofrecemos el juego "Tic-Tac-Toe" en cero líneas de JS y también, a diferencia del juego mencionado anteriormente, en cero líneas de CSS (incluidos los estilos en línea). Solo HTML desnudo, solo hardcore.


→ Enlace al juego

Se ve feo, pero funcionará en cualquier navegador. Debajo del corte, te diré por qué el juego sin JS estaba en la sección "Viernes JS", así como otros detalles sucios. Sin embargo, no abriré América a nadie, si eres un programador experimentado, ni siquiera puedes pasar por debajo del corte

En realidad, todo es muy estúpido. El juego consta de casi 6 mil páginas de HTML estático, vinculadas entre sí. Cuando tocas una celda del campo de juego, vas a la página donde ya se ha realizado el movimiento a esta celda. Obviamente, escribir 6k páginas con las manos es un placer por debajo del promedio. Por lo tanto (¡sorpresa!) Las páginas son generadas por scripts JS usando NodeJS.


Primero, creamos el llamado árbol del juego: la totalidad de todos los posibles estados de juego y transiciones entre ellos. El estado inicial del juego en mi código es el siguiente:

const initialState = { player: PLAYER_X, field: Array.from(Array(9)).map(() => EMPTY_CELL), moves: {} } 

Contiene información sobre el turno de quién es ahora y cuál es el estado del campo de juego. En el futuro, también contendrá información sobre qué movimientos se pueden hacer y a qué estados conducirán, así como algunas otras cosas agradables.

Luego comenzamos, me disculpo por la tautología, desde el estado inicial y hago lo siguiente:

1. Verificamos si el estado es terminal (victoria de las cruces, victoria de las fichas, empate).
2. Si es así, agregue información sobre esto al objeto de estado y finalice.
3. Si no, pase por todas las celdas en el campo.
4. Para cada celda vacía en el campo, cree un nuevo estado de juego en el que el jugador actual hizo un movimiento a esta celda, y el movimiento pasó al siguiente jugador.
5. En el campo de moves del estado actual, agregue un registro de un posible movimiento. La clave de esta entrada es el índice de celda, y el valor es el enlace al nuevo estado.
6. Repetimos este algoritmo recursivamente para todos los estados recién aparecidos.

De hecho, mi código es un poco más complicado, por costumbre desplegué la recursión en un bucle y, en lugar de referencias a otros estados en moves sus claves de cadena se almacenan en una determinada matriz asociativa. Pero estos son todos los detalles.

Luego, a partir de cada objeto de estado del juego, generamos una página HTML. Caminando a través del objeto de moves , llenamos las celdas vacías del campo con enlaces a las páginas correspondientes a los movimientos realizados en estas celdas. Luego convertimos la matriz unidimensional del campo en una tabla HTML bidimensional. Agregamos todo tipo de cosas agradables, como instrucciones que el jugador camina, y enlaces a la página de inicio, ¡y listo!

Además del modo, cuando una persona coloca tanto las cruces como los ceros, en mi golpe mega-indie también existe la oportunidad de jugar contra el cerebro de hierro. Esto se logra de la siguiente manera:

1. Primero, de forma recursiva (en realidad no) para cada estado del juego, se calcula el resultado esperado del juego, el que se logrará si ambas partes juegan perfectamente.
2. Luego, el árbol del juego se modifica de la siguiente manera: en lugar del movimiento del jugador, ahora hacemos dos movimientos a la vez. El segundo movimiento es el movimiento de la inteligencia artificial. Además, de todas las respuestas posibles al movimiento del jugador, se selecciona la que tiene el mejor resultado esperado. Por lo tanto, después de haber tocado una jaula vacía, el jugador va inmediatamente a la posición donde apareció una cruz (o cero) en esta celda, y un cero (o cruz) apareció en otra celda.
3. Todas las posiciones de juego correspondientes a movimientos que la IA no realiza se descartan sin piedad.
4. Luego se genera HTML a partir de las posiciones restantes en una carpeta separada, exactamente igual que para el caso de dos jugadores.

Por principios similares, puedes implementar cualquier juego con un árbol no muy grande. Sin embargo, si quiero hacer ajedrez de esta manera, me parece que el github se negará a alojar esto =)

Hablando de github: puedes ver el código completo allí (el enlace está en la página principal del juego). Sobre esto, en general, eso es todo. Adiós, niñas y niños. Nos vemos de nuevo.

PS Reemplazar saltos de línea del estilo Windows al estilo Unix es mucho tiempo cuando se trata de 6 mil archivos. Lamenté no ocuparme de esto en la etapa de escribir el código, pero aún así soporté valientemente git add to the end.