Crear un juego de Gomoku en tiempo real

Suba los archivos, despliegue el esquema y abra dos navegadores. Un amigo podrá entrar en la sala creada desde uno de ellos y cada movimiento aparecerá de inmediato en la otra pantalla. El servidor registrará los resultados y las clasificaciones.

No necesita ninguna herramienta adicional para compilar el frontend. Juegue primero una partida con el ejemplo completo y después modifique la estructura de datos, el comportamiento en tiempo real y las reglas del juego.

1. Jugar primero una partida

La forma más rápida de empezar es usar el ZIP con el ejemplo completo. Suba el esquema y los archivos de la interfaz a la misma carpeta y despliegue el esquema para abrir una partida de inmediato.

• Descargar el ZIP completo del ejemplo de Gomoku en tiempo real: incluye el esquema, index.html, style.css, app.js y el archivo README
• Descargar el archivo de esquema de Gomoku (.sfn): úselo para examinar solo el backend o conectarlo a su propia interfaz

El ejemplo permite comprobar lo siguiente:

• Una partida entre dos usuarios mediante un código de sala
• El último movimiento, sus fichas y el turno actual
• Un límite de tres minutos que se reinicia tras cada movimiento
• Una retransmisión de la partida en tiempo real
• La actualización automática del resultado, las partidas recientes y la clasificación

El esquema ya incluye un tablero de 19×19, la victoria con cinco fichas seguidas y una puntuación de 3 por victoria, 1 por empate y 0 por derrota. Cada usuario puede crear hasta tres salas en espera. Las salas sin participantes durante 30 minutos quedan disponibles para su eliminación.

Funciones que intervienen en el juego

El navegador no declara la victoria ni escribe directamente la puntuación. El servidor comprueba el tablero y el turno, guarda solo los movimientos válidos y envía el mismo resultado a ambos usuarios.

2. Subir los archivos a un espacio de trabajo

Si descargó solo el archivo de esquema, súbalo a una carpeta de proyecto de un espacio de trabajo personal o de equipo. Si descargó el ZIP completo, coloque los cinco archivos en la misma carpeta mediante la carga de carpetas o de archivos comprimidos.

오목대국장/
├── gomoku-realtime.sfn
├── index.html
├── style.css
├── app.js
└── README.md

Abra el archivo de esquema y compruebe las tres tablas en DB Structure.

Las partidas y los historiales se guardan por separado, por lo que puede volver a cargar los registros recientes y la clasificación incluso después de abrir de nuevo la página.

3. Comprobar la API y las funciones en tiempo real

Abra API Build en la parte superior y compruebe lo siguiente:

1. El nombre de la base de datos es gomoku.
2. Realtime socket está configurado como Enabled.
3. Server feature está configurado como Turn-based board game (turn-based-board).
4. Los permisos Send y Receive están configurados como Members only.
5. Las API de creación y actualización están desactivadas en las tres tablas.

Las API de creación y actualización se desactivan para impedir que los participantes cambien directamente las victorias o los movimientos mediante REST. Todos los cambios del estado del juego deben pasar por el controlador de eventos del servidor.

4. Desplegar con SQLite3

Para la primera ejecución, seleccione SQLite3 en Storage. No necesitará preparar una dirección ni una cuenta de base de datos aparte, por lo que es la opción más sencilla para probar el ejemplo.

Antes de seleccionar Deploy, revise los cambios y el resumen de permisos que aparecen en pantalla. Si ya hay registros en una base de datos con el mismo nombre, puede que un administrador o responsable del despliegue deba aprobar la operación según la política de sobrescritura del servidor.

Una vez finalizado el despliegue, estarán disponibles una API REST y un WebSocket con estas rutas:

GET /api/web/gomoku/gomoku_games/list
GET /api/web/gomoku/gomoku_players/list
WS  /api/web/gomoku/realtime-ws

Si el servidor de producción usa HTTPS, el navegador debe utilizar una conexión segura wss:// en el mismo dominio. Conviene construir la dirección a partir del host de la página actual en lugar de fijar un dominio de desarrollo en el código.

5. Abrir la interfaz de Gomoku

El archivo de esquema crea la base de datos y el backend del juego, mientras que index.html, style.css y app.js se encargan del tablero y la experiencia de usuario. Al mantener ambas partes separadas, puede rediseñar la interfaz sin perder el historial de partidas.

Si subió el ejemplo completo, seleccione index.html y abra Preview. Si usa solo el esquema, conecte desde su propio HTML la API REST y el WebSocket anteriores.

El cliente envía por WebSocket acciones como board-game.create, board-game.join y board-game.move. Las fichas y la puntuación se muestran únicamente a partir de los eventos confirmados que devuelve el servidor.

6. Jugar con dos usuarios

1. Abra el mismo index.html con dos cuentas de miembro distintas.
2. En la primera cuenta, seleccione Create new match.
3. Envíe a la segunda cuenta el código de sala generado.
4. Introduzca el código en la segunda cuenta y seleccione Join.
5. Jueguen por turnos y compruebe que el mismo movimiento aparece en ambas pantallas.
6. Cuando se alineen cinco fichas, compruebe que se actualizan la indicación de victoria, las partidas recientes y la clasificación.

Para hacer la prueba en un solo equipo, resulta práctico usar navegadores con sesiones separadas, por ejemplo una ventana normal y otra de incógnito.

El servidor registra el resultado

Cuando cinco fichas se alinean en horizontal, vertical o diagonal, el servidor finaliza la partida y guarda el ganador y la puntuación. Si se supera el tiempo de un turno, el servidor determina la derrota por tiempo según su propio reloj.

Si las partidas recientes y la clasificación no cambian de inmediato, compruebe que el cliente vuelve a consultar las listas después de recibir el evento de finalización por WebSocket, en vez de seleccionar repetidamente el botón. Despliegue Developer information para consultar el JSON enviado y recibido y el tiempo de procesamiento del servidor.

Convertirlo en su propio juego

turn-based-board no es un controlador exclusivo de Gomoku. Cambie los siguientes valores en la configuración del controlador del archivo de esquema para usarlo como punto de partida de otro juego por turnos.

Puede crear una partida rápida en un tablero más pequeño, adaptar la puntuación a un evento de su organización o añadir espectadores, clasificaciones por temporada y partidas por equipos sobre la misma base en tiempo real.

Gomoku es tanto un ejemplo completo como el punto de partida de un juego nuevo. Sustituya las fichas por monstruos y objetos para crear un combate por turnos, o las casillas por preguntas y opciones para crear un concurso en tiempo real. Mantenga los datos y las reglas en el esquema y añada a la interfaz la experiencia que quiera ofrecer.

Solución de problemas

Para terminar

El ejemplo de Gomoku reúne en un único servicio una base de datos y una API REST creadas a partir de un archivo de esquema, permisos que limitan la participación a los miembros que hayan iniciado sesión y un estado de juego en tiempo real que el servidor valida directamente. Los demás ejemplos de esta sección muestran un sistema de trabajo creado con AI, un tablón de archivos de carpeta, una incursión cooperativa contra monstruos y un chat de asistencia con AI. Combine las funciones que necesite para crear con Webspace la mayoría de las herramientas internas y para clientes.

Próximos pasos

• Crear una API y desplegar una base de datos
• Rendimiento y escalabilidad
• Servicios y capacidad