Cuando un proyecto web está casi terminado, los errores más difíciles de detectar aparecen al probar en dispositivos reales. Corregir validaciones, configurar un servidor para servir archivos estáticos y adaptar eventos táctiles para móviles son pasos fundamentales antes de cualquier presentación. Aquí se desglosan las soluciones aplicadas a un juego multijugador construido con JavaScript, Node.js y Express.
¿Cómo evitar que la app se rompa cuando no seleccionamos ningún mokepon?
El primer problema detectado ocurre al presionar el botón "seleccionar" sin haber elegido una mascota. La alerta aparece, pero el flujo de ejecución continúa y la pantalla queda en blanco [01:48].
La solución consiste en dos ajustes dentro de la función seleccionarMascotaJugador:
- Mover la línea que oculta la sección (con
display: none) hacia abajo, después de confirmar que la selección fue válida.
- Agregar un
return vacío dentro del else que muestra la alerta.
La palabra reservada return no solo devuelve valores desde una función, sino que también frena la ejecución de todo el código que viene después. Si el usuario no seleccionó ninguna mascota y entramos al else, el return impide que el resto del flujo se ejecute [03:29]. Con este cambio, al no seleccionar un mokepon, la vista permanece intacta y el usuario puede intentarlo de nuevo.
¿Qué son los archivos estáticos y cómo servirlos con Express?
Para que otra persona pueda acceder al juego desde su dispositivo, necesitamos servir el frontend desde el servidor de Node.js. Esto se logra con una sola línea de código en el archivo index.js del servidor [05:07]:
javascript
app.use(express.static('public'))
Express.static es una función que permite servir archivos estáticos desde una carpeta específica. Un archivo estático es cualquier recurso que el navegador puede interpretar directamente: HTML, CSS, JavaScript del frontend e imágenes.
Para organizar el proyecto se crea una carpeta llamada public y se mueven allí únicamente los archivos que el navegador necesita:
index.html — estructura de la página.styles.css — estilos visuales.mokepon.js — JavaScript que manipula el DOM.- Carpeta de assets — imágenes de los mokepones.
Archivos como package.json o el index.js del servidor no van en esa carpeta, porque son exclusivos del backend [06:15].
¿Cómo conectarse desde el celular usando la red local?
Una vez que el servidor sirve los archivos estáticos, cualquier dispositivo conectado a la misma red wifi puede acceder al juego. El truco está en encontrar la dirección IP local de la computadora [07:42].
En Windows se usa el comando ipconfig en la terminal y se busca la línea que dice "dirección IPv4" bajo el adaptador de red inalámbrica wifi, no el de Ethernet [09:32]. En Linux o macOS se puede usar el comando hostname seguido de .local.
Con esa IP, la URL para acceder desde el celular sería algo como:
http://192.168.10.116:8080
¿Por qué las solicitudes fetch deben apuntar a la IP local?
Al entrar desde el celular, las llamadas a fetch que apuntan a localhost:8080 no encuentran nada, porque localhost se refiere solo a la máquina donde se ejecuta [12:05]. La solución es reemplazar todas las ocurrencias de http://localhost:8080 por la dirección IP local en el archivo mokepon.js.
Un atajo útil en Visual Studio Code es Ctrl+D, que selecciona múltiples ocurrencias del mismo texto para editarlas simultáneamente.
¿Cómo hacer que los botones funcionen con eventos táctiles en el celular?
El juego usa los eventos onMouseDown y onMouseUp para mover a la mascota mientras se mantiene presionado un botón. En dispositivos móviles, el navegador no reconoce estos eventos de ratón al tocar la pantalla [14:55].
Los equivalentes para pantallas táctiles son:
- ontouchstart — reemplaza a
onMouseDown, se activa al tocar.
- ontouchend — reemplaza a
onMouseUp, se activa al soltar.
Cada botón de movimiento necesita ambos pares de eventos para funcionar tanto en computadora como en celular [15:30]:
html
<button onmousedown="moverArriba()" onmouseup="detenerMovimiento()"
ontouchstart="moverArriba()" ontouchend="detenerMovimiento()">
Arriba
</button>
Tras aplicar estos cambios y reiniciar el servidor, el juego responde correctamente al toque prolongado en el celular, permitiendo movimiento continuo de la mascota.
En un entorno profesional, el siguiente paso sería desplegar la aplicación en servicios de cloud computing como los de Google, Amazon o Microsoft para que millones de usuarios puedan conectarse simultáneamente. Si encontraste algún otro error o tienes una forma distinta de resolver estos problemas, compártelo en los comentarios para que la comunidad pueda colaborar.
