Puedes mover a Mario a la izquierda o derecha usando las flechas del teclado, o con los botones de dirección si usas un móvil.
¿Qué tecnologías he usado?
Gráficos
Música y sonidos del juego original de Youtube
HTML
CSS
jQuery (para escribir javascript con menos dolor)
Google fonts
Fases del desarrollo
Empezar con lo básico
Pequeños detalles
Imagenes con píxeles perfectos
Pulir código
¿Qué ha sido lo más díficil para mi?
¿Qué otros problemas me he encontrado?
Empezar con lo básico
En la pantalla hay 5 objectos.
Mario
Cielo (nubes y montañas)
Suelo
Cajas de información
Flechas de dirección
Los pasos para hacer esto desde cero son:
Escribir el HTML
Escribir el CSS
Escribir el Javascript y llorar
Test, test, test
Pulir el código
Pequeños detalles
La figura de Mario es una etiqueta IMG y en el atributo src tiene una imagen transparente, parece extraño, pero la imagen realmente se aplica con el atributo CSS "background".
Para crear la animación de Mario corriendo uso un sprite con 3 frames como este:
Para cambiar de un frame a otro uso el atributo CSS "background-position-x" y javascript:
Frame 1, background-position-x: 0px;
Frame 2, background-position-x: -65px;
Frame 3, background-position-x: -130px;
Para cambiar la perspectiva de cuando Mario se mueve a la izquierda o derecha realmente uso la misma imagen, pero le aplico un atributo CSS "-webkit-transform":
Izquierda, -webkit-transform:scaleX(-1);
Derecha, -webkit-transform:scaleX(1);
Imágenes con píxeles perfectos
Para el fondo uso una imagen un poco pequeña que en escritorio se veía borrosa.
Victor @olivicmic me sugirió añadir al fondo el atributo CSS "image-rendering: crisp-edges" para obtener una imagen con más contraste. ¡Wow! Este pequeño cambio a marcado una gran diferencia.
Gracias Victor
Pulir el código
En la primera versión había mucho código duplicado en los controles del usuario cuando el usuario pulsa una tecla o hace clic en una flecha, para no repetir código lo puse en funciones.
¿Qué ha sido lo más díficil para mi?
Toda la interacción por javascript, gestionar intervalos de tiempo y que los controles funcionen tanto en escritorio como en dispositivos móviles.
¿Qué otros problemas me he encontrado?
Algunos navegadores como Google Chrome no permiten reproducir la música automáticamente, la música se reproduce cuando el usuario realiza alguna interacción como por ejemplo hacer un clic en la pantalla o pulsa las flechas de dirección.
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 Mario 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 Nintendo, 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, soy programador web freeelance de España, me puedes encontrar en twitter y en linkedin.
Aquí puedes visitar mi CV: https://vivirenremoto.github.io/mariocv/
El código fuente está subido en Github: https://github.com/vivirenremoto/mariocv/
Controles básicos
Puedes mover a Mario a la izquierda o derecha usando las flechas del teclado, o con los botones de dirección si usas un móvil.
¿Qué tecnologías he usado?
Fases del desarrollo
Empezar con lo básico
En la pantalla hay 5 objectos.
Los pasos para hacer esto desde cero son:
Pequeños detalles
La figura de Mario es una etiqueta IMG y en el atributo src tiene una imagen transparente, parece extraño, pero la imagen realmente se aplica con el atributo CSS "background".
Para crear la animación de Mario corriendo uso un sprite con 3 frames como este:
Para cambiar de un frame a otro uso el atributo CSS "background-position-x" y javascript:
Para cambiar la perspectiva de cuando Mario se mueve a la izquierda o derecha realmente uso la misma imagen, pero le aplico un atributo CSS "-webkit-transform":
Imágenes con píxeles perfectos
Para el fondo uso una imagen un poco pequeña que en escritorio se veía borrosa.
Victor @olivicmic me sugirió añadir al fondo el atributo CSS "image-rendering: crisp-edges" para obtener una imagen con más contraste. ¡Wow! Este pequeño cambio a marcado una gran diferencia.
Gracias Victor
Pulir el código
En la primera versión había mucho código duplicado en los controles del usuario cuando el usuario pulsa una tecla o hace clic en una flecha, para no repetir código lo puse en funciones.
¿Qué ha sido lo más díficil para mi?
Toda la interacción por javascript, gestionar intervalos de tiempo y que los controles funcionen tanto en escritorio como en dispositivos móviles.
¿Qué otros problemas me he encontrado?
Algunos navegadores como Google Chrome no permiten reproducir la música automáticamente, la música se reproduce cuando el usuario realiza alguna interacción como por ejemplo hacer un clic en la pantalla o pulsa las flechas de dirección.
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 Mario 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 Nintendo, 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.