Desarrolle una cartera de juegos única basada en CSS/JS

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • Clase magistral de tipografía, con Elliot Jay Stocks

  • Índice
    1. Lecturas adicionales sobre SmashingMag: Enlace
    2. El HTML
    3. El CSS
    4. El JavaScript
    5. Conclusión

    Un portafolio es imprescindible para cualquier diseñador o desarrollador que quiera apostar por la Web. Debe ser lo más exclusivo posible y, con un poco de HTML, CSS y JavaScript, podría tener un portafolio único que lo represente de manera competente ante clientes potenciales.

     

    Un portafolio es imprescindible para cualquier diseñador o desarrollador que quiera apostar por la Web. Debe ser lo más exclusivo posible y, con un poco de HTML, CSS y JavaScript, podría tener un portafolio único que lo represente de manera competente ante clientes potenciales. En este artículo, te mostraré cómo creé mi cartera de juegos 2-D basados ​​en la Web.

    La cartera de juegos 2-D basados ​​en la Web de Daniel Sternlicht .

    Antes de ponernos manos a la obra, hablemos de carteras.

    Un portafolio es una gran herramienta para que los diseñadores y desarrolladores web muestren sus habilidades. Como con cualquier proyecto, dedica algo de tiempo a aprender a desarrollar un portafolio e investigar un poco sobre lo que está pasando en la industria del diseño web, para que el portafolio te presente como una persona actualizada, innovadora e inspiradora. Mientras tanto, tenga en cuenta que seguir la corriente no es necesariamente la mejor manera de destacar entre la multitud.

    Lecturas adicionales sobre SmashingMag: Enlace

    • Construyendo "Topple Trump", un juego de preguntas interactivo basado en la web
    • Lo que los diseñadores web pueden aprender de los videojuegos
    • Marketing por correo electrónico para creadores de aplicaciones móviles
    • Cómo crear un juego SpriteKit en Swift 3

    Una última cosa antes de sumergirnos en el misterio de mi cartera de juegos basados ​​en la Web. Utilizo jQuery, que me ha hecho la vida mucho más fácil al acelerar el desarrollo y mantener mi código limpio y simple.

    Ahora, ensuciémonos las manos con algo de código.

    El HTML

    Empecemos con una descripción general rápida de un código HTML muy básico. Es un poco largo, lo sé, pero vayamos paso a paso.

     

    div hgroup h1DANIEL STERNLICHT/h1 h2Web Designer, Front-End Developer/h2 /hgroup div/div div/div div/div div/div div/div div/div div/div div div/div div class=”lightbox”…/div /div div spanAbout Me/span /div … … div/div div/div div/div div/div div div/div /div/div

    El HTML no es muy complicado y podría haber usado un elemento de lienzo HTML5 para este juego, pero me sentí más cómodo usando elementos DOM HTML simples.

    Básicamente, tenemos el #wrapperdiv principal, que contiene los elementos del juego, la mayoría de los cuales están representados como elementos div (elegí divs porque son fáciles de manipular).

    Echa un vistazo rápido a mi juego . ¿Puedes detectar qué constituye la vista del juego?

    La vista del juego

    Tenemos caminos, árboles, cercas, agua, cuevas, casas, etc.

    Volvamos a nuestro HTML. Encontrará un elemento para cada uno de estos elementos, con la clase y el ID correspondientes. Lo que nos lleva al CSS.

    El CSS

    En primer lugar, tenga en cuenta que preparé el HTML para seguir los principios del CSS orientado a objetos determinando clases globales para el estilo y no usando ID como ganchos de estilo. Por ejemplo, utilicé la clase .roaden cada elemento que debería verse como una carretera. El CSS para la .roadclase sería:

    .road { position: absolute; background: url(images/road.png) repeat;}

    Tomemos los árboles como otro ejemplo:

    .trees { position: absolute; background: url(images/tree.png) repeat 0 0;}

    Tenga en cuenta que casi todos los elementos están absolutamente posicionados en el lienzo del juego. Posicionar los elementos relativamente sería imposible para nuestros propósitos, especialmente porque queremos que el juego sea lo más responsivo posible (dentro de límites, por supuesto; el ancho mínimo con el que trato es de 640 píxeles). Podemos escribir una regla general que dé a todos los elementos DOM del juego una posición absoluta:

    #wrapper * { position: absolute;}

    Este fragmento manejará todos los elementos secundarios dentro del #wrapperdiv y nos libera de tener que repetir el código.

    Una palabra más sobre el CSS. Las animaciones del juego se realizan con transiciones y animaciones CSS3 , excluyendo ciertas características como las cajas de luz y el "teletransporte" del jugador. Hay dos razones para esto.

    La primera es que uno de los propósitos de este portafolio es demostrar innovación y desarrollo actualizado, y ¿qué es más innovador que utilizar el poder de CSS3?

    La segunda razón es el rendimiento. Al leer el interesante artículo de Richard Bradshaw " Uso de transiciones, transformaciones y animaciones de CSS3 ", llegué a la abrumadora conclusión: utilice CSS3 cuando pueda .

    Un gran ejemplo del poder de las animaciones CSS3 en mi portafolio es el patrón de movimiento del agua. El CSS se ve así:

    .sea { left: 0; width: 100%; height: 800px; background: url(images/sea.png) repeat 0 0; -webkit-animation: seamove 6s linear infinite; /* Webkit support */ -moz-animation: seamove 6s linear infinite; /* Firefox support */ animation: seamove 6s linear infinite; /* Future browsers support */}

    Y aquí está el código de la animación en sí:

     

    /* Webkit support */@-webkit-keyframes seamove { 0% { background-position: 0 0; } 100% { background-position: 65px 0; }}@-moz-keyframes seamove {…} /* Firefox support */@-keyframes seamove {…} /* Future browsers support */

    El mar PNG está marcado.

    La sea.pngimagen repetida tiene 65 píxeles de ancho, por lo que para darle al mar un efecto de ola, debemos moverla la misma cantidad de píxeles. Como el fondo se repite, nos da el efecto que queremos.

    Otro buen ejemplo de animaciones CSS3 ocurre cuando el jugador sube al barco y sale de la pantalla.

    El barco sale de la pantalla y revela la sección "Contacto".

    Si el jugador regresa a la carretera, notarás que el barco se mueve en "reversa", de regreso a su posición original. Suena complicado, pero no tienes idea de lo fácil que es con las transiciones CSS3. Todo lo que hice fue capturar el evento con JavaScript para determinar si el usuario está "a bordo". Si el usuario lo es, agregamos la clase .sailal elemento del barco, lo que lo hace zarpar; de lo contrario, retendremos esta clase. Al mismo tiempo, agregamos una .showclase al #contactenvoltorio, que revela suavemente la forma de contacto en el agua. El CSS del barco se ve así:

    #boat { position: absolute; bottom: 500px; left: 50%; margin-left: -210px; width: 420px; height: 194px; background: url(images/boat.png) no-repeat center; -webkit-transition: all 5s linear 1.5s; -moz-transition: all 5s linear 1.5s; transition: all 5s linear 1.5s;}

    Cuando le agregamos la clase .sail, todo lo que hago es cambiar su leftpropiedad. Utensilios de cocina

    #boat.sail { left: -20%;}

    Lo mismo ocurre con el #contactcontenedor con la clase .show. Excepto aquí, estoy jugando con la opacitypropiedad:

    #contact.show { opacity: 1;}

    Las transiciones CSS3 hacen el resto del trabajo.

    El JavaScript

    Debido a que estamos tratando con un juego 2-D , es posible que deseemos basarlo en un motor de juego JavaScript, tal vez en un marco existente. Pero lo que pasa con los frameworks (excluyendo jQuery, que estoy usando como base) es que generalmente son buenos para empezar, pero probablemente no se ajusten a tus necesidades a largo plazo.

    Un buen ejemplo son las cajas de luz de mi portafolio, que brindan información sobre mí y se activan cuando el usuario ingresa a una casa.

    Un ejemplo de caja de luz en el juego. ( Imagen grande )

    Este tipo de funcionalidad no existe en un motor de juego JavaScript normal. Siempre puedes mejorar un marco existente con tu propio código, pero profundizar en el código de otra persona a veces lleva más tiempo que escribir el tuyo propio. Además, si reescribe el código de otra persona, podría convertirse en un problema cuando se publique una nueva versión.

    Después de pasar por alto bibliotecas como Crafty , LimeJS e Impact , que realmente son excelentes marcos de motores de juegos, sentí que no tenía más remedio que construir mi propio motor para satisfacer mis necesidades.

     

    Repasemos rápidamente los métodos principales que estoy ejecutando en el juego.

    Para manejar los eventos de flecha del teclado, uso el siguiente código:

    $(window).unbind('keydown').bind('keydown', function(event) { switch (event.keyCode) { event.preventDefault(); case 37: // Move Left me.moveX(me.leftPos - 5, 'left'); break; case 39: // Move Right me.moveX(me.leftPos + 5, 'right'); break; case 38: // Move Up me.moveY(me.topPos - 5, 'up'); break; case 40: // Move Down me.moveY(me.topPos + 5, 'down'); break; }});

    Como puedes ver, el código es muy simple. Cuando el usuario presiona la flecha hacia arriba o hacia abajo, llamo a la moveY()función, y cuando presiona hacia la derecha o hacia la izquierda, llamo moveX().

    Un vistazo rápido a uno de ellos revela toda la magia:

    moveX: function(x, dir) { var player = this.player; var canMove = this.canImove(x, null); if(canMove){ this.leftPos = x; player.animate({'left': x + 'px'}, 10); } if(dir == 'left') { this.startMoving('left', 2); } else { this.startMoving('right', 3); }}

    En cada paso que da el jugador, verifico con un método especial llamado canImove()(es decir, "¿Puedo moverme?") para determinar si el personaje puede moverse sobre el lienzo del juego. Este método incluye límites de pantalla, posiciones de casas, límites de carreteras, etc., y obtiene dos variables, incluidas las coordenadas xey de hacia dónde quiero que se mueva el jugador. En nuestro ejemplo, si quisiera que el jugador se moviera hacia la izquierda, pasaría al método su posición izquierda actual más 5 píxeles. Si quisiera que se movieran hacia la derecha, pasaría su posición actual menos 5 píxeles.

    Si el personaje “puede moverse”, regreso truey el personaje sigue moviéndose; o de lo contrario vuelvo falsey el personaje permanece en su posición actual.

    Tenga en cuenta que en el moveX()método, también compruebo la dirección en la que el usuario quiere ir y luego llamo a un método llamado startMoving():

    if(dir == 'left') { this.startMoving('left', 2);}else { this.startMoving('right', 3);}

    Probablemente te estés preguntando cómo se consigue el efecto de caminar en el personaje. Quizás hayas notado que estoy usando sprites CSS. ¿Pero cómo los activo? En realidad, es bastante simple, con la ayuda de un complemento jQuery llamado Spritely . Este sorprendente complemento le permite animar sprites CSS simplemente llamando al método en el elemento relevante y pasándole sus propiedades (como la cantidad de cuadros).

    Volvamos a nuestro startMoving()método:

    startMoving: function(dir, state) { player.addClass(dir); player.sprite({fps: 9, no_of_frames: 3}).spState(state);}

    Simplemente agrego una clase de dirección al elemento del reproductor (que establece la imagen del sprite relevante) y luego llamo al sprite()método desde la API de Spritely.

    Como estamos tratando con la Web, pensé que poder moverme con las flechas del teclado no sería suficiente. Siempre debes pensar en el usuario, tu cliente, que quizás no tenga tiempo para pasar el rato en tu mundo. Es por eso que agregué una barra de navegación y una opción para "teletransportar" al personaje a un punto determinado del juego; nuevamente, utilicé el canImove()método para verificar si el jugador puede moverse a ese punto.

     

    A continuación tenemos las cajas de luz. Recuerde cómo se ve el HTML para cada casa:

    div div/div div div Lightbox content goes here… /div /div/div

    ¿Te diste cuenta de la .lightboxclase en el housediv? Lo usaremos más tarde. Lo que básicamente hice fue definir un "punto caliente" para cada casa. Cuando el jugador llega a uno de esos puntos calientes, JavaScript activa el lightboxInit(elm)método, que también obtiene la identificación de la casa correspondiente. Este método es muy sencillo:

    lightboxInit: function(elm) { // Get the relevant content var content = $(elm).find('.lightbox').html(); // Create the lightbox $('div/div').appendTo('body').fadeIn(); $('div' + content + 'spanx/span/div').insertAfter("#dark").delay(1000).fadeIn();}

    Primero, obtengo el contenido relevante al encontrar el div.lightboxelemento secundario del elemento de la casa. Luego, creo y atenúo un div en blanco, llamado dark, que me da el fondo oscuro. Finalmente, creo otro div, lo lleno con el contenido (que ya había almacenado en una variable) y lo inserto justo después del fondo oscuro. Al hacer clic en la "x", se llamará otro método que desvanece la caja de luz y la elimina del DOM.

    Una buena práctica que desafortunadamente aprendí por las malas es mantener el código lo más dinámico posible . Escriba su código de tal manera que si agrega más contenido al portafolio en el futuro, el código lo admita.

    Conclusión

    Como puede ver, desarrollar un juego 2-D basado en la Web es una tarea divertida y no demasiado complicada. Pero antes de apresurarse a desarrollar su propia cartera de juegos, considere que no se adapta a todos. Si sus usuarios no tienen idea de qué es HTML5 o por qué IE 5.5 no es el "mejor navegador de todos los tiempos", entonces su esfuerzo será una pérdida de tiempo y tal vez este tipo de cartera los alejaría. Cual es malo.

    Sin embargo, aprendí mucho de este proceso de desarrollo y recomiendo encarecidamente, sea cual sea el tipo de cartera que elija, que invierta unos días en desarrollar su propia cartera única.

    (Alabama)Explora más en

    • Codificación
    • CSS
    • javascript
    • HTML





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Desarrolle una cartera de juegos única basada en CSS/JS

    Desarrolle una cartera de juegos única basada en CSS/JS

    Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Clase magistral de tipografía, con Elliot Jay Stocks Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-desarrolle-una-cartera-de-juegos-unica-basada-en-cssjs-797-0.jpg

    2024-05-20

     

    Desarrolle una cartera de juegos única basada en CSS/JS
    Desarrolle una cartera de juegos única basada en CSS/JS

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20