Servir tu juego desde un servidor de Node.js y permitir que cualquier persona en tu misma red wifi entre desde el celular es uno de esos momentos donde el proyecto deja de sentirse como código suelto y empieza a parecer un producto real. Aquí vas a ver cómo lograrlo paso a paso, además de arreglar errores típicos de validación, conexión multijugador y eventos táctiles que aparecen al probar en dispositivos distintos.

¿Cómo evitar que la pantalla quede en blanco al no seleccionar mascota?

Uno de los detalles más frecuentes al probar un juego es que el usuario presione el botón sin elegir nada y la app se rompa. En el archivo mokepon.js, dentro de la función seleccionarMascotaJugador, el problema era que se mostraba la alerta pero el flujo seguía ejecutándose y ocultaba la sección de selección con display: none [04:00].

La solución tiene dos partes. Primero, mover la línea que oculta la sección de selección hacia abajo, para que solo se ejecute cuando la mascota sí fue elegida. Segundo, agregar un return vacío dentro del else que lanza la alerta. La palabra reservada return sirve para devolver un valor, pero también para frenar la ejecución de una función. Si el código entra a ese else, no sigue, y el usuario se queda en la vista correcta.

¿Para qué sirve un return vacío en JavaScript? Detiene la ejecución de la función en ese punto. Útil cuando una validación falla y no quieres que el resto del código se ejecute.

¿Cómo servir archivos estáticos con Express en Node.js?

Para que el HTML, CSS, JavaScript del front-end e imágenes se sirvan desde el mismo servidor de Node.js, Express ofrece un middleware llamado express.static. Esto convierte una carpeta del proyecto en el punto desde donde el navegador descarga los recursos.

Los pasos concretos son:

• Crear una carpeta llamada public dentro del proyecto Mokepon.
• Mover ahí todos los archivos estáticos: index.html, styles.css, el mokepon.js del front-end y los assets de imágenes.
• Dejar fuera el package.json y el index.js del backend, porque el navegador no necesita conocerlos.
• En el index.js del servidor, agregar app.use(express.static('public')).

Al reiniciar el servidor con node index.js y entrar a localhost:8080, el front-end carga directamente desde el backend [12:30]. Es un concepto interesante: siempre necesitas un back-end para que tu front-end funcione cuando lo sirves desde un servidor.

¿Qué es un archivo estático?

Un archivo estático es cualquier recurso que el navegador puede interpretar sin procesamiento adicional del servidor: HTML, CSS, JavaScript de cliente, imágenes y fuentes. Los archivos del backend, como el index.js de Node o el package.json, no entran en esta categoría.

¿Cómo conectar tu juego desde el celular en la misma red wifi?

Una vez que el servidor sirve el front-end, falta hacerlo accesible desde otros dispositivos. La idea es entrar al servidor usando la dirección IP local de tu computadora dentro de la red wifi, en lugar de localhost.

Dependiendo del sistema operativo, el comando cambia:

• En Linux y macOS, ejecuta hostname y usa http://nombre-de-tu-computadora.local:8080.
• En Windows, ejecuta ipconfig y busca la línea Dirección IP versión 4 dentro del adaptador de LAN inalámbrica wifi, no del adaptador Ethernet ni del de VirtualBox.

En el ejemplo de la clase, la IP correcta fue 192.168.10.116, y al entrar desde el celular a 192.168.10.116:8080 el juego cargó perfectamente [17:45]. Si quisieras llevar esto más allá y publicarlo para cualquier persona en el mundo, tendrías que desplegar la aplicación en servicios de Cloud Computing como Google, Amazon o Microsoft, tema que se profundiza en la carrera de Cloud Computing y DevOps.

¿Por qué localhost no funciona desde el celular? Porque localhost apunta al dispositivo desde el que se hace la petición. Desde el celular, localhost es el celular mismo, no tu computadora. Necesitas la IP de red local.

¿Cómo arreglar el multijugador y los controles táctiles en móvil?

Al probar desde el celular aparecieron dos errores. El primero: las peticiones fetch seguían apuntando a http://localhost:8080, por lo que el celular no podía comunicarse con el servidor. La solución fue reemplazar todas las ocurrencias de http://localhost por la IP local de wifi (192.168.10.116). En Visual Studio Code, el atajo Ctrl + D selecciona la siguiente coincidencia y permite editar varias al tiempo.

El segundo error: los botones de movimiento usaban los eventos onmousedown y onmouseup, que los navegadores móviles no disparan al tocar la pantalla. Para móvil existen sus equivalentes táctiles:

• ontouchstart reemplaza a onmousedown.
• ontouchend reemplaza a onmouseup.

En el HTML, cada botón de dirección necesita ambos pares de eventos para funcionar tanto en computadora como en celular. Usar múltiples cursores con la tecla Alt y clic facilita aplicar el cambio en varios botones a la vez.

Tras estos ajustes, el juego funciona en computador y celular, con multijugador entre dispositivos conectados al mismo wifi y con movimiento continuo manteniendo el dedo presionado.

¿Encontraste otro error mientras probabas tu propia versión? Cuéntalo en los comentarios y ayuda a quien lo necesite, así llegamos con la mejor versión posible del juego.