Cuando un videojuego multijugador necesita que cada participante conozca la ubicación de los demás en el mapa, la pieza fundamental es un servicio que reciba y almacene coordenadas en tiempo real. Aquí se construye exactamente ese mecanismo: un endpoint tipo POST que recibe la posición X e Y del Mokepon y la guarda en el servidor, mientras el front-end envía esos datos de forma continua cada vez que el personaje se mueve.
¿Cómo crear un endpoint para recibir coordenadas en Express?
El nuevo servicio sigue la misma lógica del endpoint que ya recibía el nombre del Mokepon, pero ahora espera dos valores numéricos: X e Y [01:42]. La ruta se diseña de forma descriptiva para que sea fácil de entender por cualquier desarrollador que consuma el API:
- Se define como
app.post('/mokepon/:jugadorId/posicion', (req, res) => { ... }).
- El parámetro dinámico
:jugadorId permite identificar qué jugador envía su ubicación.
- Del
req.body se extraen las coordenadas con un valor por defecto de cero: const x = req.body.x || 0 [03:07].
Este patrón de valores por defecto es una práctica defensiva que evita errores cuando el cuerpo de la petición llega incompleto. Una vez obtenidas las coordenadas, se busca al jugador dentro del arreglo de jugadores usando su índice, exactamente igual que en el servicio anterior [03:55].
¿Qué hace el método actualizarPosición en la clase del jugador?
Para que el jugador almacene sus coordenadas, se agrega un nuevo método a la clase Jugador llamado actualizarPosicion(x, y) [04:18]. Dentro de él se asignan los valores recibidos a las propiedades del objeto:
javascript
actualizarPosicion(x, y) {
this.x = x;
this.y = y;
}
De vuelta en el endpoint, se invoca este método y se cierra la respuesta con res.end(), ya que por ahora no es necesario devolver información al cliente [04:52]. El servidor simplemente registra la posición y queda listo para que otros jugadores la consulten más adelante.
¿Cómo enviar la posición desde el front-end con fetch?
En el archivo mokepon.js del lado del cliente, ya existía una función llamada pintarCanvas que en cada ciclo de dibujo actualizaba las coordenadas del personaje [05:32]. Justo después de ese cálculo se agrega la llamada a una nueva función: enviarPosicion(mascotaJugadorObjeto.x, mascotaJugadorObjeto.y).
La función enviarPosicion construye un fetch tipo POST con la estructura completa [06:15]:
javascript
function enviarPosicion(x, y) {
fetch(http://localhost:8080/mokepon/${jugadorId}/posicion, {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ x, y })
});
}
¿Qué es la abreviación de propiedades en JavaScript?
Cuando la clave y el valor de un objeto tienen el mismo nombre, JavaScript permite usar la sintaxis abreviada [07:28]. En lugar de escribir { x: x, y: y }, basta con { x, y }. El motor interpreta automáticamente que la clave es el nombre de la variable y el valor es su contenido. Esta convención reduce código repetitivo y mejora la legibilidad.
¿Cómo verificar que las coordenadas se envían correctamente?
Al recargar el navegador, seleccionar un Mokepon y abrir la pestaña Network de las herramientas de desarrollo, se observa un flujo continuo de peticiones POST hacia /mokepon/{id}/posicion [08:05]. Cada una contiene en su payload los valores actualizados de X e Y.
- Al mover el personaje, los valores cambian en cada petición.
- El servidor ya recibe y almacena esas coordenadas.
- La respuesta está vacía porque aún no se implementa la lectura por parte de otros jugadores.
Este patrón de envío continuo de datos es la base para sincronizar el estado de múltiples clientes con un servidor central. Cada vez que el mapa se redibuja, la posición viaja al backend, lo que garantiza que la información esté siempre actualizada.
Con tres servicios funcionando —obtener un ID, asignar un Mokepon y ahora enviar coordenadas— el flujo completo de comunicación cliente-servidor queda claro. El siguiente paso natural es construir la lectura de coordenadas para que cada jugador pueda ver dónde se encuentran los demás en el mapa. ¿Ya imaginaste cómo estructurarías ese endpoint de tipo GET?
