Coder Social home page Coder Social logo

pedrogardim / gameboyjs Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 1.01 MB

Recreación interactiva del GameBoy clásico en el navegador. Incluye el juego Snake y sonidos.

Home Page: https://pedrogardim.github.io/gameboyjs/

HTML 17.75% CSS 31.23% JavaScript 51.02%

gameboyjs's Introduction

GameboyJS 🎮

GameboyJS

Recrea la experiencia nostálgica del GameBoy clásico directamente en tu navegador. Construido con HTML, CSS y JavaScript, este proyecto no solo emula el aspecto del dispositivo, sino que también ofrece una versión jugable del clásico juego Snake 🐍.

Este proyecto ha sido realizado como el Proyecto 2 del Bootcamp de Full Stack Developer en Geekshubs Academy.

🚀 Vista previa

Si deseas ver el Gameboy en acción, simplemente accede desde aquí.

🌟 Características

  • Diseño 3D Interactivo: Al presionar las flechas, el GameBoy se desplaza en un diseño 3D, proporcionando una experiencia visual dinámica.
  • Juego Snake: ¡Juega al clásico juego Snake directamente en esta emulación!
  • Sonidos Clásicos: Gracias a la biblioteca Tone.js, esta emulación reproduce sonidos, obtenidos de FreeSound.org. Asegúrate de tener tus altavoces o auriculares conectados. 🔊

🎮 Cómo jugar

  1. Navegar: Usa las teclas de flecha de tu teclado para mover el GameBoy en 3D.
  2. Jugar al Snake:
    • Presiona Enter para iniciar el juego.
    • Usa las teclas de flecha para dirigir la serpiente.
    • Intenta conseguir la máxima puntuación posible sin chocarte!

🛠️ Decisiones técnicas

  • Se ha utilizado CSS grid para maquetar la forma del Gameboy, por su praticidad y responsividad.
  • Como reto, me propuse a hacer un Gameboy como un ortoedro 3D con sus 6 lados con puro CSS, pero debido a que no de aprecian todo sus lados, en la actual versión sus otras lados están comentadas en el HTML.
  • Para los sonidos, se ha utilizado Tone.js, una poderosa librería contruída sobre WebAudio API, debido a su forma sencilla de reproducir diferentes archivos de audio.
  • Se ha utilizado como unidad los vw para garantizar que el gameboy mantenga sus proporciones en diferentes tamaños de pantalla.

✒️ Autor

🎓 Agradecimientos

  • A Geekshubs Academy por la oportunidad de aprender y crecer como desarrollador.

📄 Licencia

Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.

gameboyjs's People

Contributors

pedrogardim avatar

Stargazers

 avatar

Watchers

 avatar

gameboyjs's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.