Me llamo Miquel Camps y creo que no soy el mejor programador para dar consejos, mi código no es del todo limpio, pero quizás puedas aprender algo de mi quebradero de cabeza de dos días para hacer crear un Currículum jugable basado en el mundo del juego Age of Empires.
El mapa se genera dinámicamente., eso significa que en c ada visita puede cambiar el entorno, el clima, la posición de los árboles, los edificios, la música, etc.
Los controles
Puedes mover el aldeano por el mapa usando el cursor como el juego original y si quieres también con el teclado.
Si mueves el aldeano por encima de un edificio podrás conocer más detalles sobre mi.
La idea original
Tengo que admitir que mi idea inicial no era hacer un CV, yo quería replicar la interfaz del juego Age of Empires por diversión.
Lo primero que hice fue poner en el mapa un aldeano, un simple DIV dentro de la etiqueta BODY, una imagen plana sin ningún tipo de animación.
Luego añadí un DIV por encima de todas los elementos DIV para que cuando hiciera clic sobre este pudiera saber la posición X y X y así mover el aldeano por la pantalla.
Después añadí un árbol, una casa, la universidad y así cada edificío.
Finalmente puse un modal informativa que aparece cuando el aldeano se sitúa encima de un edificío.
El mejor consejo que puedo dar es que vayas paso a paso, prueba y error, haces un cambio y recargas, no te desanimes si no sale lo que quieres a la primera.
Pequeños detalles
Una vez la interacción básica estaba hecha, el primer detalle que añadí fue la águila que aparece volando y que puede aparecer de una esquina de la pantalla.
Luego añadí que el entorno fuera aleatorio, el tiempo, sonidos... para dar vida y personalidad a la web plana.
¿Te has dado cuenta que cuando mueves un aldeano hay dos tipos de sonidos?
Responsive design
Esta web CV ha sido creada para funcionar en escritorio y en dispositivos móviles en vertical.
La diferencia principal entre una versión y la otra es la posición de los edificios que contaré como lo hice más tarde en este artículo, también cambia el tamaño de los edificios, el número de elementos como arboles y los copos de nieve que son menores y en menor cantidad en la versión móvil.
Pulir el código
Sé que el código no es perfecto y se puede mejorar, pero básicamente eliminé el código duplicado.
1- Antes para la interacción de cada edificio tenía una condición "IF", luego lo cambié a un bucle "WHILE" y un sólo "IF", creo que así es más simple y fácil de mantener.
2- Al principio los árboles que se mostraban se cargaban de forma individual duplicando código, esto lo cambié por un bucle "FOR", así era más sencillo mostrar 10 o 20 árboles modificando solo una variable.
¿Qué ha sido lo más díficil para mi?
Al principio los edificios podían aparecer en cualquier parte de la pantalla, a veces un edificio podía quedar solapado por encima de otro y eso era un desastre.
Así que pensé en hacer una cuadrícula virtual con una matriz (array), así que en escritorio la cuadrícula está dividida en dos columnas y dos filas, en cambio en dispositivos móviles en la cuadrícula solo hay una columna y cuatro filas en ambos casos cada casilla de la cuadrícula proporcional al tamaño de la pantalla.
Cada edificío aparece de forma aleatoria en cada casilla de esta cuadrícula virtual.
¿Qué otros problemas me he encontrado?
Esto es inevitable, tu no puedes probar tu web en cada dispositivo que existe en el mundo, como usuario de Android yo no tengo un iPhone, una persona con un dispositivo iOS me comentó que en el navegador Safari las imágenes no le cargaban, la solución fue reemplazar las imágenes con formato WEB y reemplazarlas por imágenes en formato GIF y PNG.
Mensaje final
Espero que te haya gustado, que consigas algo de inspiración y sería genial si lo puedes compartir con tus familiares y amigos que hayan jugado alguna vez a Age of Empìres para recordarles estos buenos momentos que nos ha hecho pasar el videojuego.
Copyright
Todo el contenido de esta página Web, incluyendo artículos, ilustraciones, capturas de pantalla, gráficos, logotipos, descargas digitales y otros archivos, es propiedad de Microsoft, a menos que sea propiedad de un tercero, y está protegido por las leyes alemanas e internacionales de derechos de autor, marcas registradas y otras leyes de propiedad intelectual. Las marcas y los derechos de autor de los juegos y personajes de terceros son propiedad de las empresas que comercializan o conceden licencias de esos productos.
Hola,
Me llamo Miquel Camps y creo que no soy el mejor programador para dar consejos, mi código no es del todo limpio, pero quizás puedas aprender algo de mi quebradero de cabeza de dos días para hacer crear un Currículum jugable basado en el mundo del juego Age of Empires.
Aquí puedes visitar mi CV: https://vivirenremoto.github.io/ageofcv/
El código fuente está subido en Github: https://github.com/vivirenremoto/ageofcv/
Información
El mapa se genera dinámicamente., eso significa que en c ada visita puede cambiar el entorno, el clima, la posición de los árboles, los edificios, la música, etc.
Los controles
Puedes mover el aldeano por el mapa usando el cursor como el juego original y si quieres también con el teclado.
Si mueves el aldeano por encima de un edificio podrás conocer más detalles sobre mi.
La idea original
Tengo que admitir que mi idea inicial no era hacer un CV, yo quería replicar la interfaz del juego Age of Empires por diversión.
¿Qué he usado?
Las fases de desarrollo
Empezar con lo básico
Lo primero que hice fue poner en el mapa un aldeano, un simple DIV dentro de la etiqueta BODY, una imagen plana sin ningún tipo de animación.
Luego añadí un DIV por encima de todas los elementos DIV para que cuando hiciera clic sobre este pudiera saber la posición X y X y así mover el aldeano por la pantalla.
Después añadí un árbol, una casa, la universidad y así cada edificío.
Finalmente puse un modal informativa que aparece cuando el aldeano se sitúa encima de un edificío.
El mejor consejo que puedo dar es que vayas paso a paso, prueba y error, haces un cambio y recargas, no te desanimes si no sale lo que quieres a la primera.
Pequeños detalles
Una vez la interacción básica estaba hecha, el primer detalle que añadí fue la águila que aparece volando y que puede aparecer de una esquina de la pantalla.
Luego añadí que el entorno fuera aleatorio, el tiempo, sonidos... para dar vida y personalidad a la web plana.
¿Te has dado cuenta que cuando mueves un aldeano hay dos tipos de sonidos?
Responsive design
Esta web CV ha sido creada para funcionar en escritorio y en dispositivos móviles en vertical.
La diferencia principal entre una versión y la otra es la posición de los edificios que contaré como lo hice más tarde en este artículo, también cambia el tamaño de los edificios, el número de elementos como arboles y los copos de nieve que son menores y en menor cantidad en la versión móvil.
Pulir el código
Sé que el código no es perfecto y se puede mejorar, pero básicamente eliminé el código duplicado.
1- Antes para la interacción de cada edificio tenía una condición "IF", luego lo cambié a un bucle "WHILE" y un sólo "IF", creo que así es más simple y fácil de mantener.
2- Al principio los árboles que se mostraban se cargaban de forma individual duplicando código, esto lo cambié por un bucle "FOR", así era más sencillo mostrar 10 o 20 árboles modificando solo una variable.
¿Qué ha sido lo más díficil para mi?
Al principio los edificios podían aparecer en cualquier parte de la pantalla, a veces un edificio podía quedar solapado por encima de otro y eso era un desastre.
Así que pensé en hacer una cuadrícula virtual con una matriz (array), así que en escritorio la cuadrícula está dividida en dos columnas y dos filas, en cambio en dispositivos móviles en la cuadrícula solo hay una columna y cuatro filas en ambos casos cada casilla de la cuadrícula proporcional al tamaño de la pantalla.
Cada edificío aparece de forma aleatoria en cada casilla de esta cuadrícula virtual.
¿Qué otros problemas me he encontrado?
Esto es inevitable, tu no puedes probar tu web en cada dispositivo que existe en el mundo, como usuario de Android yo no tengo un iPhone, una persona con un dispositivo iOS me comentó que en el navegador Safari las imágenes no le cargaban, la solución fue reemplazar las imágenes con formato WEB y reemplazarlas por imágenes en formato GIF y PNG.
Mensaje final
Espero que te haya gustado, que consigas algo de inspiración y sería genial si lo puedes compartir con tus familiares y amigos que hayan jugado alguna vez a Age of Empìres para recordarles estos buenos momentos que nos ha hecho pasar el videojuego.
Copyright
Todo el contenido de esta página Web, incluyendo artículos, ilustraciones, capturas de pantalla, gráficos, logotipos, descargas digitales y otros archivos, es propiedad de Microsoft, a menos que sea propiedad de un tercero, y está protegido por las leyes alemanas e internacionales de derechos de autor, marcas registradas y otras leyes de propiedad intelectual. Las marcas y los derechos de autor de los juegos y personajes de terceros son propiedad de las empresas que comercializan o conceden licencias de esos productos.
02/01/2021 19:23
Hola, también amo este juego de computadora. Gracias por esta historia. Realmente significa mucho para mi.