Ajuste Responsivo de Mapas en Pantallas con JavaScript

Clase 69 de 84 • Curso Gratis de Programación Básica

Angel Manrique M

student•

Encontre esta propiedad para obtener las dimensiones de cualquier elemento HTML por si en lugar de usar window tu canvas ya esta dentro de un contenedor Flex estilizado🔥

anchoDelMapa = seccion_del_mapa.getBoundingClientRect().width - 20
altoDelMapa = anchoDelMapa * 3 / 4

Marcos Monteverde

student•

genial!!

Arnaldo Medina

student•

Gracias por el aporte.

Brayan Estiben Rodallega Saavedra

student•

Hola, tu que lees, ¿como estas? ya llegamos hasta aqui, terminemos esto...🚀

wilking trinidad

student•

Bonito mensaje, gracias <3

Arnaldo Medina

student•

Llegamos, sufriendo, pero llegamos ja, ja, ja

Usuario anónimo

user•

hay un problema con la aleatoriedad y es que es probable que un enemigo aparezca superpuesto con otro, o contigo mismo lo cuál inicia el combate sin siquiera moverte

Juan Castro

teacher•

Yep, muy bien identificado ese error. Mira la penútlima clase del curso :eyes:

Jesús Correa

student•

En la clase anterior no lo explican como tal pero ahí esta, debes cambiar con esto function seleccionarMascotaEnemigo(enemigo) { spanMascotaEnemigo.innerHTML = enemigo.nombre ataquesMondimonEnemigo = enemigo.ataques secuenciaAtaque() }

Juan José Moreno

student•

Al principio el mapa no se acomodaba al tamaño de la pantalla. Revisando en la función iniciarMapa() tenia definidos mapa.width como 320 y mapa.height como 240. Los comenté poniendo // y ya si se acomoda el tamaño del mapa según el tamaño de la pantalla.

Carlos López

student•

efectivamente! me pasaba igual, gracias por tu aporte

Raul Santos

student•

No recuerdo que lo hayamos cambiado en alguna clase...

Por eso es que muchos tuvimos ese error me la pase casi 2 horas hasta que revisando el codigo lo pude encontrar y solucionar.

Chema F

student•

Cuando dijeron al principio del curso que el 80% de las veces ibas a estar revisando código, no mentían. Me paso mas tiempo revisando errores y viendo el código de los profes que escribiendo el mio.🥲😂

Diego Alejandro Moreno Pedroza

student•

Jajajaja este es el mundo de la programación jajaja

Daniel Aguilar

student•

jajajaja, justo xD

no me salían mis mokepones por que no había subido los atributos de ancho ni alto xD

Ameth Ordoñez Erazo

student•

Hice esta función para evitar que el jugador pueda salirse de los bordes del mapa:

function detenerEnBordesDelMapa() {
  // Verificar si las mascotas ya llegaron al borde del mapa

  const arribaMapa = 0;
  const abajoMapa = mapa.height - mascotaJugador.alto;
  const derechaMapa = mapa.width;
  const izquierdaMapa = 0;

  const arribaJugador = mascotaJugador.y;
  const derechaJugador = mascotaJugador.x + mascotaJugador.ancho;
  const izquierdaJugador = mascotaJugador.x;

  if (arribaJugador < arribaMapa) {
    mascotaJugador.y = arribaMapa;
  }

  if (arribaJugador > abajoMapa) {
    mascotaJugador.y = abajoMapa;
  }

  if (derechaJugador > derechaMapa) {
    mascotaJugador.x = derechaMapa - mascotaJugador.ancho;
  }

  if (izquierdaJugador < izquierdaMapa) {
    mascotaJugador.x = izquierdaMapa;
  }

  // console.log(abajoJugador, mascotaJugador.y);
}

Y la utilizo en la función dibujarCanvas(), cuando valido tambien las colisiones:

// [...] viene en la función dibujarCanvas()
  if (mascotaJugador.velocidadX !== 0 || mascotaJugador.velocidadY !== 0) {
    revisarColision();
    detenerEnBordesDelMapa();
  }

Ivan Alejandro Maidana

student•

gracias! me sirvió

Alvaro Andres Alfonso Rodriguez

student•

Tengo una duda, me apoyo con el codigo que tu muestras y me aparece un error.

no se que valor asignar a const abajoJugador y mi mokepon sigue pasando la linea

Carlos Armando Hernández Godoy

student•

Pensando en jugabilidad, me parece un poco incómodo que al ver el mapa, el usuario no sepa cual es su mokepon. Se podría solucionar cambiando la imagen de los mokepones del usuario. Quizá mas adelante los profes lo modifiquen. Pero por ahora puse los mkp del jugador un poco mas oscuros para diferenciarlos, pero se puede mejorar.

Juan Castro

teacher•

Me gusta mucho esta idea

Raimond José Vargas Hernández

student•

Como hiciste para que el mokepon del jugador sea más oscuro?

Emmanuel Aliaga

student•

Al ver esta clase no me gusto mucho la idea de agrandar y achicar el mapa teniendo que recargar la pagina. Asi como que el tamaño de los personajes no cambiaran, y que hubiese que hacer random la posicion de los personajes en el mapa. Entiendo que es con fines de simplificar el curso, pero eso me llevo a buscar una solucion a estos problemas. Basicamente lo que hice fue guardar en una variable el porcentaje que cambia de tamaño el mapa y utilice ese porcentaje para cambiar el tamaño y ubicacion de los personajes para que sin importar donde se encuentren esta posicion se mantenga siempre. Para esto ultimo tambien utilice un intervalo para que esta variable este corriendo siempre que se vea el mapa. Me llevo tiempo, pero haberlo resuelto fue muy satisfactorio. Esto lo logre gracias a las herramientas y el pensamiento logico que nos dan ustedes! Muchas gracias y espero poder seguir aprendiendo de ustedes! 😃

Patricio Sorrento

student•

podrías poner para leer todo el código?

wilking trinidad

student•

hey alta referencia a avatar

Olga Berenice Hernández Cruz

student•

Me parece super útil esta regla para futuros proyectos:

Eddie Mora

student•

Es la muy muy vieja "regla de tres"

Cristian Cano

student•

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

student•

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

Cristian Cano

student•

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

Andres Vergara

student•

hice exactamente lo mismo que ella y cuando ejecuto el codigo no da la misma respuesta. Aveces siento que ella hace cosas adicionales que no son mostradas

Jacob Moronta Martínez

student•

Concuerdo

Miguel Jonathan Madrigal González

student•

Es lo que he estado disfrutando del curso, creo que es a propósito, desde el comienzo nos han dado el conocimiento y las herramientas necesarias para detectar y solucionar situaciones que no muestran en las clases, de manera que tenemos que leer nuestro código, identificar el código que causa conflicto y probar soluciones. He aprendido mucho.

Nestor Rios Garcia

student•

Minuto 7:45

Dos sílabas más y se le venía todo el poder legar de la gran N a Platzi.

Antonio Delgado

student•

La solución que se propone para el ancho del mapa y en base a este aplicar una regla de tres para conseguir el alto, está muy bien. Sin embargo, se debe establecer un alto máximo en caso de que se cumpla la condición del ancho máximo ¿Por qué? Porque al ser dinámico el Height del mapa, podría terminar creciendo a niveles desproporcionado.

Diego Twaska

student•

Gracias por el dato Antonio!! ya me preguntaba yo porqué me quedaba el mapa como un edificio de 20 pisos!!!

Pablo Alejandro Figueroa

student•

CSS:

#mapa {
 width: 75vw;
}

Isaac Labrador

student•

Funciono gracias

Ronald Becerra

student•

Mucho más fácil así. Dejé las dimensiones que ya estaban en el JavaScript:

    mapa.width = 320;
    mapa.height = 240;

pero con esto añadido al CSS:

#mapa{
	width: 75vw;
	max-width: 350px;
}

Así el canvas mantiene las proporciones de antes, pero se va ajustando al cambio del tamaño de la pantalla sin necesidad de recargar la página, y además respetamos el no excederse de los 350px.

Jonathan Fernando Ramirez Valencia

student•

Diego Alejandro Moreno Pedroza

student•

El problema de la aleateroidad se resuelve en el antiguo curso de platzi de programación básica! Solo hay que crear intervalos para que no se choquen en los bordesitos y condicionales para no ocupar las mismas posiciones

Jesús Ramon

student•

como era ese codigo?

Cala Femia

student•

Hola,tengo un problema y es que cuando achico la pantalla las palabras “Recorre el mapa con tu mokepon” quedan fuera, me pueden ayudar? [](/home/estudiante/Descargas/Captura de pantalla 2023-01-28 - 08.04.11.png)

este es el codigo que hicimos con la profesora en esta clase

let alturaQueBuscamos let anchoDelMapa = window.innerWidth -20 const anchoMaximoDelMapa = 600 if(anchoDelMapa > anchoMaximoDelMapa){ anchoDelMapa = anchoMaximoDelMapa -50 }

alturaQueBuscamos = anchoDelMapa * 700 / 1000

mapa.width = anchoDelMapa mapa.height = alturaQueBuscamos

Jesus Sierra

student•

Solucionaste? Creo que tengo el mismo problema que tu.

Diego Peraza

student•

7:05 El ancho del qué ? 👀

Javier Criado Criado Gómez

student•

para que el tamaño de las mascotas sea proporcional al tamaño del mapa simplemente deben multiplicar el tamaño deseado por este factor

(anchoDelMapa / anchoMaximoDelMapa)

Jesus Mireles

student•

¡Felicitaciones a todos los que hemos llegado a este punto del curso! Creo que la programación es una carrera en la que los obstáculos y los "problemas" son totalmente cotidianos, el hecho de haber llegado hasta acá demuestra que se tiene un buen nivel de resiliencia y tolerancia a la frustración!

Tómense su tiempo, no es una carrera de velocidad, ¡sino de constancia y perseverancia! ¡Todo se desarrolla con la práctica!

function detenerEnBordesDelMapa() {
  // Verificar si las mascotas ya llegaron al borde del mapa

  const arribaMapa = 0;
  const abajoMapa = mapa.height - mascotaJugador.alto;
  const derechaMapa = mapa.width;
  const izquierdaMapa = 0;

  const arribaJugador = mascotaJugador.y;
  const derechaJugador = mascotaJugador.x + mascotaJugador.ancho;
  const izquierdaJugador = mascotaJugador.x;

  if (arribaJugador < arribaMapa) {
    mascotaJugador.y = arribaMapa;
  }

  if (arribaJugador > abajoMapa) {
    mascotaJugador.y = abajoMapa;
  }

  if (derechaJugador > derechaMapa) {
    mascotaJugador.x = derechaMapa - mascotaJugador.ancho;
  }

  if (izquierdaJugador < izquierdaMapa) {
    mascotaJugador.x = izquierdaMapa;
  }

  // console.log(abajoJugador, mascotaJugador.y);
}

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Fundamentos de Programación

Programación Básica: Fundamentos y Creación de Proyectos en Línea

Programación Básica en Google Chrome: Variables y Funciones

Creación de una Página Web Básica con HTML

Estructura Básica de un Documento HTML

Estructura y funcionamiento básico de HTML y JavaScript

Instalación y uso básico de Visual Studio Code para programar

Declaración y Uso Básico de Variables en JavaScript

Programación de Piedra, Papel o Tijera en JavaScript

Programación de Piedra, Papel o Tijera en JavaScript

Generación de Números Aleatorios con JavaScript

Creación y uso de funciones en programación

Ciclos y Condiciones en Programación: Piedra, Papel o Tijera

Programación de un Juego de Piedra, Papel o Tijera en JavaScript

Manejo de Rutas y Archivos en Sistemas Operativos y Desarrollo Web

Manipulación del DOM y Eventos en JavaScript para Juegos Web

Desarrollando un juego con HTML y JavaScript

Maquetación de Páginas Web para Videojuegos en HTML

Selección de Mascotas en HTML para Juegos Interactivos

Programar eventos de clic en botones HTML con JavaScript

Eventos de Carga en JavaScript: Iniciar Juego y Seleccionar Mascota

Selección de Mascota en JavaScript: Implementación y Validación

Manipulación del DOM con JavaScript para mostrar mascota seleccionada

Selección Aleatoria de Mascota Enemiga en JavaScript

Eventos de clic y lógica de ataque en JavaScript

Ataques Aleatorios para Mascotas Enemigas en JavaScript

Creación de Mensajes Dinámicos en Combate HTML y JavaScript

Lógica de Combate en JavaScript para Juego Mokepon

Operadores Lógicos en Programación: AND, OR y NOT

Actualización de Vidas en Juego de Combate con JavaScript

Validación de Vidas y Mensajes Finales en Juegos

Funcionalidad de Reinicio y Desactivación de Botones en Juego

Mostrar y ocultar secciones en HTML con JavaScript

Estilos con CSS

Estilos CSS: Selectores, Propiedades y Valores

Tipos de Visualización en CSS: Display Block, Inline e Inline Block

Alineación de Elementos con Flexbox en CSS

Modelo de Caja en CSS: Espaciado y Bordes

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

Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas

Estilos CSS para Mejorar la Interfaz de un Juego

Estilizado de Pantallas de Juego con CSS y Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid: Organiza Elementos en Rejillas Bidimensionales

Diseño Responsivo con CSS: Media Queries y Flexbox

Pseudoclases en CSS: Mejora la Interacción del Usuario

Optimización de código

Optimización de Código JavaScript con Clases y Objetos

Optimización de Código JavaScript: Variables y Funciones

Optimización de Código JavaScript con Clases y Objetos

Construcción de Clases y Objetos en JavaScript

Uso de Arreglos para Almacenar Objetos en JavaScript

Agregar ataques a objetos en JavaScript

Renderizado Dinámico de Objetos en HTML con JavaScript

Solución de errores en variables y elementos HTML en JavaScript

Uso de Objetos para Centralizar Información en JavaScript

Selección de Mascota Aleatoria en JavaScript

Iteración de Arreglos y Manipulación DOM en JavaScript

Crear Función "mostrarAtaques" en JavaScript para Juegos

Eventos de Clic en Botones con JavaScript

Secuencia de Ataques y Validación de Resultados en JavaScript

Implementación de lógica de combate en juegos JavaScript

Programación de Juegos: Lógica de Ataques y Victorias

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

Mapa con canvas

Dibujo y manejo de gráficos en Canvas con JavaScript

Movimiento de Capipepo en Canvas con HTML y JavaScript

Movimiento Continuo de Personajes en Canvas con JavaScript

Eventos de Teclado para Controlar Personajes en Juegos

Pintar Fondos y Personajes en Canvas HTML

Métodos de Clases en JavaScript para Juegos Interactivos

Detección de Colisiones en Videojuegos con JavaScript

Programación de eventos y colisiones en un juego interactivo

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos Responsivos en HTML y CSS para Mapas Interactivos

Backend: videojuego multijugador

Desarrollo de Juegos Multijugador con Cliente-Servidor y API

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

Uso básico de la terminal de comandos y Node.js