Ajuste Responsivo de Mapas en Pantallas con JavaScript

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:04

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Curso Gratis de Programación Básica 2022

Clase 69 de 84

Clase 69 / 84

Recursos

Asegurar que tu mapa digital se adapte perfectamente a cualquier tamaño de pantalla es fundamental en el desarrollo de juegos y aplicaciones web. En esta guía práctica, te mostraré cómo lograr que tu mapa sea responsivo usando simples técnicas de programación y cómo añadir dinamismo en la ubicación de elementos dentro de tu mapa.

¿Cómo hacer un mapa responsivo que se adapte a la pantalla?

La clave para un diseño responsivo es asegurarse de que los elementos se escalen adecuadamente a diferentes tamaños de pantalla. Para lograrlo con un mapa, necesitas utilizar proporciones y ajustes de tamaño dinámicos en el código. Veamos cómo es posible.

¿Qué técnica podemos usar para mantener la proporción del mapa?

Para mantener la relación de aspecto del mapa, utilizamos una regla de tres simple. Si nuestro mapa tiene dimensiones originales de 800x600, queremos que cualquier nuevo ancho mantenga esta proporción. La fórmula sería:

anchoNuevo * 600 / 800 = alturaBuscada

Esta fórmula nos permite calcular la altura adecuada para cualquier ancho que deseamos establecer, preservando la relación de aspecto original del mapa.

¿Cómo aplicamos estas medidas en el código?

El proceso inicia con la eliminación de las dimensiones estáticas asignadas al mapa y la declaración de nuevas variables que serán responsables de ajustar dinámicamente el tamaño del mapa. He aquí los pasos básicos:

Define las variables alturaBuscada y anchoDelMapa.
Utiliza window.innerWidth para obtener el ancho de la pantalla y ajusta según necesitas, por ejemplo, restando 20px para los márgenes laterales.
Calcula la alturaBuscada con la fórmula proporcionada anteriormente.
Asigna mapa.width el valor de anchoDelMapa y mapa.height el de alturaBuscada.

¿Y si queremos que el mapa tenga un ancho máximo?

A veces no queremos que un mapa crezca desmesuradamente en pantallas muy anchas. En ese caso, podemos:

Establecer una constante de anchoMáximoDelMapa.
Crear una condicional que ajuste el anchoDelMapa al anchoMáximoDelMapa si se excede, manteniendo márgenes.

¿Cómo ubicar elementos de forma aleatoria en el mapa?

Ubicar elementos en un mapa de manera aleatoria agrega un nivel de interactividad y sorpresa al juego. El proceso para lograrlo sería:

¿Cómo se calcula la posición aleatoria dentro de los límites del mapa?

Para nuestros elementos, en este caso Mokepones, que se ubiquen dentro del mapa de forma aleatoria sin salirse de los bordes, seguimos estos pasos:

Tomamos el ancho del mapa y le restamos el ancho del Mokepon para calcular la coordenada x máxima.
Hacemos lo mismo con la altura para la coordenada y máxima.
Utilizamos una función que genere valores aleatorios entre 0 y estas máximas para definir las nuevas coordenadas de cada Mokepon.

Recuerda que estas técnicas de diseño responsivo y ubicación dinámica de elementos resultan extremadamente útiles en distintos contextos de desarrollo web. Al aplicar estas prácticas, mejoras la experiencia de usuario y aseguras un mejor funcionamiento de tu aplicación en diferentes dispositivos. ¡Sigue aprendiendo y experimentando con nuevas ideas y desafíos que te ayudarán a crecer como desarrollador!

Cristian Cano

Hace 4 años

Yo quería que los personajes siguieran apareciendo en las posiciones siempre por lo que se me ocurrió hacer: una variable que mida la diferencia de escala entre la original (800px x 600px) a la nueva escala

let sizeScale = 1

if(window.innerWidth < 800){
    sizeScale = mapWidth/800
}

Luego en el constructor multiplicó la posición original por la escala

        this.x = x * sizeScale
        this.y = y * sizeScale

Y listo, ahora la posición de los personajes se adapta a todas las escalas para estar siempre en la misma parte del mapa.

Otra cosa que hice fué reescalar el tamaño de la imagen de los personajes para que se adecuen al tamaño de la pantalla. También multiplicando el ancho y alto de la imagen por la escala en el constructor:

        this.width = 60 * sizeScale
        this.height = 60 * sizeScale

Juan José Díaz Montoya

Hace 4 años

¡Brillante apreciación! Justo estaba pensando en cómo hacerlo.

Cristian Cano

Hace 4 años

Vengo de clases futuras a ayudar por si te trancas con el problema que me surgió al hacer el escalado de esta forma. Cuando llegues a la clase donde movemos a los personajes por la pantalla desde distintos clientes todo aparenta ir bien, eso siempre que los clientes tengan la misma resolución (si ya llegaste a estas clases y nos te diste cuenta del problema intenta usar un cliente con la pantalla mas chica y la otra mas grande), al tener las resoluciones distintas nosotros estamos pasando la X y la Y escaladas. Para solucionarlo solo hay que dividir la X y la Y entre sizeScale para pasar las coordenadas que obtendríamos teniendo la resolución "estandar" y luego en el otro cliente multiplicarla por la escala de esa pantalla. Sí aun no has llegado te será útil en algún momento, y si llegaste y me explique muy mal respóndeme y lo explico de forma clara jaja

Comentarios (90)90 comentarios

Angel Manrique M

Marcos Monteverde

Arnaldo Medina

Hace 3 años

Brayan Estiben Rodallega Saavedra

wilking trinidad

Usuario anónimo

User

Juan Castro

Profesor

Jesús Correa

Juan José Moreno

Carlos López

Raul Santos

Chema F

Diego Alejandro Moreno Pedroza

Daniel Aguilar

Hace 2 años

Ameth Ordoñez Erazo

Ivan Alejandro Maidana

Alvaro Andres Alfonso Rodriguez

Carlos Armando Hernández Godoy

Raimond José Vargas Hernández

Emmanuel Aliaga

Patricio Sorrento

Olga Berenice Hernández Cruz

Eddie Mora

Andres Vergara

Jacob Moronta Martínez

Miguel Jonathan Madrigal González

Nestor Rios Garcia

Antonio Delgado

Diego Twaska

Pablo Alejandro Figueroa

Isaac Labrador

Ronald Becerra

Jonathan Fernando Ramirez Valencia

Jesús Ramon

Paola Gonzalez

Kenneth Angulo L

Hace un año

Cala Femia

Jesus Sierra

Diego Peraza

Javier Criado Criado Gómez

Fundamentos de Programación

Programa tu primer videojuego desde cero

Tu primera variable en la consola del navegador

Crea tu primer archivo HTML desde cero

Estructura básica de HTML: head y body

Estructura de árbol en HTML y JavaScript

Instala VS Code y configura tu primer HTML

Variables con let, prompt y alert

Condicionales if y else en JavaScript

Lógica if-else en piedra papel tijera

Números aleatorios con Math.random y Math.floor

Creación y uso de funciones en programación

Cómo funcionan los ciclos en programación

While en JavaScript: cómo evitar loops infinitos

Rutas relativas para separar JS del HTML

Qué es el DOM y los eventos en JS

Desarrollando un juego con HTML y JavaScript

Cómo usar section, id y span en HTML

Radio buttons para elegir mascota en HTML

Cómo hacer que un botón responda al clic

Detectar el input seleccionado con checked

Detectar la mascota seleccionada con checked

innerHTML para mostrar la mascota elegida

Mascota enemiga aleatoria con JavaScript

Selección de ataques con variables globales en JS

Ataque aleatorio enemigo en JavaScript

createElement y appendChild en el DOM

Lógica de ganaste, perdiste o empataste en JS

Tablas de verdad con AND, OR y NOT

Vidas dinámicas con innerHTML en JavaScript

Validar vidas en cero con JavaScript

Reiniciar juego con location.reload

Mostrar y ocultar secciones con JavaScript

Estilos con CSS

Selectores, propiedades y valores en CSS

block, inline e inline-block en CSS

Centrar elementos en CSS con Flexbox

Modelo de caja en CSS explicado

Diseño y Estilo de Páginas Web con HTML y CSS

Cómo estilizar botones con CSS y Google Fonts

Estilos CSS para Mejorar la Interfaz de un Juego

Estiliza botones de ataque con Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid para organizar ataques en columnas

Diseño responsivo con media queries CSS

CSS :checked para resaltar selección activa

Optimización de código

Refactoriza tu JavaScript antes de escalar

let vs const al refactorizar funciones

Clases y objetos en JavaScript explicados

Clases y objetos en JavaScript con Mokepones

Uso de Arreglos para Almacenar Objetos en JavaScript

Ataques de Mokepon con arrays y push

Renderizar arrays en HTML con forEach

Cómo evitar null al inyectar HTML dinámico

Eliminar hardcode con fuente de verdad

Selección aleatoria de mascotas con arrays

Botones de ataque dinámicos con for loop

Botones de ataque dinámicos con forEach

Eventos de clic en botones dinámicos con JS

Secuencia de ataques aleatorios del enemigo

Lógica de combate por turnos en JavaScript

Lógica de victorias en un juego JavaScript

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibuja imágenes en canvas con JavaScript

Mover personajes en canvas con JavaScript

Movimiento continuo en canvas con setInterval

Eventos de Teclado para Controlar Personajes en Juegos

Fondo del canvas y mascota dinámica en JS

Métodos de clase para pintar enemigos en Canvas

Cómo detectar colisiones entre objetos en JS

Conectar colisiones con ataques en JS

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos responsive para el mapa con CSS

Backend: videojuego multijugador

Cómo funciona la arquitectura cliente servidor

Instalación de Node.js en Windows para desarrollo backend

Hola Mundo con Node.js y npm

Servidor web con Express.js desde cero