11 Videojuegos Retro Creados con HTML5, JavaScript y CSS

Los juegos retro aún nos traen una sonrisa a los fans jóvenes y no tan jóvenes. Esto es evidente por la popularidad de la edición clásica NES de 2016 y la edición clásica Super NES de este año entre otros. Heck, incluso Atari han anunciado planes para una consola.

A las personas les encanta la simplicidad de un juego pick-up-and-play. También adoran los recuerdos de su infancia asociados con títulos de la vieja escuela. Además, la idea de hacer nuevos recuerdos jugando con amigos y familiares sigue siendo un gran atractivo.

Los diseñadores en particular parecen siempre entusiasmados con personajes como Mario, Pokémon y Sonic. De hecho, una excursión a través de CodePen nos muestra que hay varias opciones para los videojuegos clásicos hechos con HTML5, CSS y JavaScript. Aquí hay 11 de nuestros favoritos:

👾 Q * bert

See the Pen CSS Q-Bert by Patrick Cox (@pcridesagain) on CodePen.

La extraña y pequeña criatura naranja llamada Q * bert estaba de moda en la década de 1980, incluso protagonizando sus propios dibujos animados del sábado por la mañana. Si bien esto es solo una animación CSS, cualquier mención de Q * bert es importante.

🎮 Enduro

See the Pen Enduro – Atari – Html5 Game by rafaelcastrocouto (@rafaelcastrocouto) on CodePen.

Enduro es un juego de carreras originalmente lanzado en 1983 para Atari 2600. No te preocupes si no tienes un cartucho de repuesto en casa, puedes jugar una recreación del juego con esta versión de HTML5

🕹️ Super Mario Bros

See the Pen Media Query Mario by Ashley Nolan (@ashleynolan) on CodePen.

CodePen está absolutamente lleno de recuerdos relacionados con Mario. Lamentablemente, no hay forma de destacar a todos ellos. Pero Media Query Mario es uno de los tributos más geniales que hemos visto. Es una nueva versión animada de Super Mario Bros. 3. La única pega es que tienes que cambiar el tamaño de tu navegador a entre 320 y 420 píxeles para verlo en condiciones optimas.

🖲️ Sonic el erizo

See the Pen CSS Sonic the Hedgehog 2: Chemical Plant Zone by Ryan Petersen (@rpetersen29) on CodePen.

Nada como el viejo juego Sonic de SEGA . Presentado originalmente en 1991 para la consola Sega Genesis, el pequeño azul se abrió camino entre muchos corazones. También ha mantenido su resistencia al olvido, como se ve en esta animación CSS.

🎲 La leyenda de Zelda

See the Pen Retro Error 404 – Zelda 2 by Stix (@stix) on CodePen.

Zelda fue uno de esos juegos en los que puedes jugar durante horas. Gracias a la copia de seguridad de la batería original incluida en el cartucho, fue uno de los pocos juegos de la época que te permitía guardar su progreso. Aquí vemos un enlace que se reutilizó muy bien para una pantalla error 404.

🔫 Asteroids

See the Pen Playable Canvas Asteroids by J e f f (@jeffibacache) on CodePen.

Un verdadero clásico, Asteroids se remonta a 1979 (cuando yo nací :)). Y sigue siendo tan adictivo como lo fue en su día. Te muestra los gráficos de lujo de la época para que tengas buenos recuerdos. Puedes jugar directamente desde tu navegador con esta versión HTML5 Canvas.

😁 Pac-Man

See the Pen HTML5 Pacman by hellokatili (@hellokatili) on CodePen.

El pequeño devorador de puntos amarillo es uno de los personajes de juegos más reconocibles de todos los tiempos. Él (y más tarde, su amiga ) se convirtió en una sensación arcade. Aquí, puedes masticar puntos y escapar de fantasmas en tu navegador con esta divertida aplicación HTML5.

🌠 Galaxian

See the Pen Galaxian by adonis domingues vieira (@wizardfly) on CodePen.

Otro shooter de naves espaciales de los años 70 (1979, para ser exactos), Galaxian fue uno de los juegos raros de su época que fue tan divertido jugar en casa como en la sala de juegos de tu barrio. Los efectos de sonido de otro mundo fueron excelentes para conducir a los jugadores a la locura. Aquí hay una edición en HTML5 / JS.

😏 Pong

See the Pen Pong – JS Implementation by Gabriel Dubé (@gdube) on CodePen.

Si tuvieras Pong en tu casa, probablemente te aburrirías después de unos 15 minutos. Pero, como es uno de los primeros videojuegos realmente importantes, allanó el camino para que todo lo demás llegara después. Disfruta de una versión JS del juego a continuación.

🦄 Pokémon

See the Pen HTML5 canvas games – POKEMON ! by panagiotis vourtsis (@panvourtsis) on CodePen.

Pokémon es la segunda franquicia de juegos más vendida de todos los tiempos, solo detrás de Mario. Desde sus humildes comienzos para Nintendo Game Boy, hasta la histeria de Pokémon Go, la franquicia sigue siendo un fenómeno cultural. A continuación se muestra un juego con HTML5 decididamente retro.

Volviendo al futuro

Es sorprendente pensar que, décadas después de su debut, estos juegos aún resuenan. Pero no solo los ejemplos anteriores son un testimonio del poder de los juegos clásicos, sino que también muestra hasta qué punto el desarrollo web ha llegado en un período relativamente corto de tiempo.

Ahora se pueden crear juegos y animaciones complejos en la web con solo un poco de código. Después de esto, ¿quién está preparado para unas partidas al Pac-Man?