🎮 Code Crusader: Protect the Digital Realm

ES: Proyecto desarrollado en el curso Desarrollo Frontend con HTML, CSS y JavaScript del MOOC de la UPM.
EN: Project developed for the Frontend Development with HTML, CSS, and JavaScript course in the UPM MOOC.

---

📌 Descripción | Description

🟢 ES:
Code Crusader es un juego tipo shooter desarrollado en JavaScript como una Progressive Web App (PWA). Los jugadores deben proteger el mundo digital enfrentándose a enemigos y superando desafíos. La aplicación puede instalarse en dispositivos móviles y ordenadores y funciona offline gracias a la implementación de un Service Worker.

🔹 Este proyecto es un prototipo del MVP (Minimum Viable Product) de la versión final de la aplicación. Algunas características quedaron por desarrollar y aún no han sido implementadas.

🔹 Está desplegado en:
🌍 Code Crusader en Glitch

🔹 El diseño y prototipado de la PWA están en la carpeta Figma-design/, donde se encuentran las pantallas, iconografía y estructura de navegación creadas con Figma.

🔵 EN:
Code Crusader is a shooter game developed in JavaScript as a Progressive Web App (PWA). Players must protect the digital world by facing enemies and overcoming challenges. The app can be installed on mobile devices or computers and works offline thanks to the implementation of a Service Worker.

🔹 This project is a prototype of the MVP (Minimum Viable Product) of the final application. Some features were left out to develop and have yet to be implemented.

🔹 Live deployment:
🌍 Code Crusader on Glitch

🔹 The design and prototyping of the PWA can be found in the Figma-design/ folder, which contains the screens, icons, and navigation structure created with Figma.

---

🚀 Características | Features

✅ ES:
✔️ Juego tipo shooter basado en JavaScript.
✔️ Interfaz interactiva con animaciones en CSS y SVG.
✔️ Soporte offline mediante Service Worker.
✔️ Instalable como aplicación en dispositivos móviles.
✔️ Implementación de HTTPS con Express.js.

✅ EN:
✔️ Shooter game built in JavaScript.
✔️ Interactive UI with CSS and SVG animations.
✔️ Offline support using Service Worker.
✔️ Installable as a mobile web app.
✔️ HTTPS enforcement with Express.js.

---

🛠️ Tecnologías | Technologies Used

• 🌐 HTML5, CSS3, JavaScript → Lenguajes principales del desarrollo.
• ⚡ Service Workers → Cache y funcionalidad offline.
• 🖌️ Figma → Diseño y prototipado del juego en la carpeta Figma-design/.
• 🖌️ SASS y Material Design Icons → Estilos y gráficos.
• 🎮 JavaScript Canvas & Interact.js → Mecánicas de juego.
• 🖥️ Express.js → Servidor local para la PWA.
• 📄 Manifest.json → Configuración para instalación en móviles.

---

📦 Instalación | Installation

🟢 ES:
Sigue estos pasos para instalar y ejecutar la aplicación en tu entorno local:

git clone https://github.com/tuusuario/code-crusader.git
cd code-crusader
npm install
node server.js

Luego, abre http://localhost:8000 en tu navegador.

🔵 EN:
Follow these steps to install and run the project:

git clone https://github.com/tuusuario/code-crusader.git
cd code-crusader
npm install
node server.js

Open your browser at http://localhost:3000.

---

🔑 Instalación como PWA | Install as PWA

🔹 ES: Esta aplicación se puede instalar en dispositivos móviles y funcionar sin conexión. Para hacerlo:

1. Abre Code Crusader en Google Chrome o Edge.
2. Haz clic en el icono de instalación en la barra de direcciones.
3. Confirma la instalación para agregar la aplicación a tu pantalla de inicio.

🔹 EN: This app can be installed on mobile devices and work offline. To install:

1. Open Code Crusader in Google Chrome or Edge.
2. Click on the install icon in the address bar.
3. Confirm installation to add the app to your home screen.

---

📂 Estructura del Proyecto | Project Structure

code-crusader/
├── Figma-design/        # Diseño y prototipado en Figma
├── assets/              # Recursos gráficos y CSS
├── app/                 # Lógica del juego en JavaScript
│   ├── Game/            # Mecánicas y entidades del juego
│   ├── libs/            # Librerías externas
├── index.html           # Página principal
├── game.html            # Pantalla del juego
├── settings.html        # Configuración del juego
├── themes.html          # Personalización de temas
├── highscores.html      # Tabla de puntuaciones
├── offline.html         # Página de estado sin conexión
├── manifest.json        # Configuración de la PWA
├── service-worker.js    # Controlador de caché y funcionalidad offline
├── install.js           # Script para instalación PWA
├── server.js            # Servidor Express.js para el entorno local
├── README.md            # Documentación

---

📬 Contacto | Contact

📩 serguccierrez → GitHub Profile
Si tienes preguntas o sugerencias, crea un issue en este repositorio.

If you have any questions or suggestions, feel free to open an issue in this repository.

---

💡 Made with ❤️ by Serguccierrez.