🐾 Mokito-Web

Mokito-Web es un juego de mascotas virtuales (Tamagotchi) desarrollado con Angular y TailwindCSS. ¡Cuida de tu adorable mascota virtual Mokito en diferentes habitaciones de la casa!.

Puedes probarlo aquí

✨ Características

• 🐶 Mascota Virtual Interactiva - Mokito responde a tus interacciones con animaciones y comportamientos únicos
• 🏠 Multiple Habitaciones - Explora el baño, dormitorio, salón y jardín
• 📊 Sistema de Estadísticas - Administra el hambre, felicidad, higiene y energía de tu mascota
• 🎨 Personalización - Cambia los colores de la interfaz y configura la experiencia a tu gusto
• 🎮 Modo Cheats - Experimenta con opciones de depuración y
• 📦 Sistema de Inventario - Usa objetos para cuidar de Mokito
• ⚡ Sistema de Física - Implementación propia de física para interacciones realistas
• 🎨 Sprites Animados - Sprites personalizados con animaciones suaves

🎮 Cómo Jugar

1. Navega entre habitaciones usando los botones inferiores
2. Observa las estadísticas de Mokito en la cabecera
3. Usa el inventario para darle comida, juguetes y más
4. Configura la apariencia a tu gusto en el menú de configuración
5. ¡Asegúrate de que Mokito esté siempre feliz, limpio y bien alimentado!

📖 Tutorial

Alimentar a Mokito

Dale de comer a tu mascota para mantener su hambre al día.

Bañar a Mokito

Mantén a Mokito limpio usando el objeto de baño.

Aumentar la felicidad

Juega con Mokito para aumentar su felicidad.

Mandar a dormir

Manda a Mokito a dormir para recuperar su energía.

Personalizar la consola

Accede a la configuración y personaliza la interfaz a tu gusto.

Subir animaciones

Sube tus propias animaciones 32x32 para personalizar a tu mokito Mokito. Asset usado de Mattz Art

Activar función multijugador

Para jugar en modo multijugador es necesario instalar el ejecutable disponible en Mokito-Web-Backend y tener instalado Java 17, ya que el servidor se ejecuta mediante este programa.

Si deseas jugar con personas que no estén conectadas a la misma red local, se recomienda utilizar Cloudflare Tunnel junto con la interfaz gráfica de Port Killer para facilitar la exposición y administración del servidor. También puede ser necesario permitir el puerto correspondiente en el firewall.

Para partidas dentro de la misma red local, únicamente será necesario permitir el puerto del servidor en el firewall.

Una vez iniciado el servidor, para conectarte solo debes introducir la dirección proporcionada en el juego.

Ejemplo:

Dirección proporcionada:
https://mi-servidor.trycloudflare.com

Dirección a introducir:
mi-servidor.trycloudflare.com

Esta función se encuentra en fase de pruebas y algunas características pueden estar incompletas o presentar errores.

🧩 Tecnologías

• Framework: Angular 21+
• Estilos: TailwindCSS 4.x + css
• Lenguaje: TypeScript
• Despliegue: GitHub Pages

🚀 Instalación

# Clonar el repositorio
git clone https://github.com/sam324sam/Mokito-web.git

# Entrar al directorio
cd Mokito-web

# Instalar dependencias
npm install

# Iniciar el servidor de desarrollo
ng serve --host 0.0.0.0

🏗️ Arquitectura del Proyecto

src/
├── app/
│   ├── component/               # Componentes reutilizables
│   │   ├── configuration-modal/
│   │   │   └── components/
│   │   │       ├── change-sprite/
│   │   │       ├── cheats/
│   │   │       ├── color-selector/
│   │   │       ├── data-config/
│   │   │       ├── debug-pet/
│   │   │       ├── debug-show/
│   │   │       ├── sound-config/
│   │   │       └── user-ui-config/
│   │   ├── console-frame/
│   │   ├── header/
│   │   ├── inventory-modal/
│   │   ├── pet-component/
│   │   ├── room-button/
│   │   └── stats-bar/
│   ├── guards/                  # Guards de Angular
│   │   ├── has-collider.guard.ts
│   │   ├── has-grab.guard.ts
│   │   ├── is-interactuable-object.guard.ts
│   │   ├── is-mesage.guard.ts
│   │   ├── is-particle.guard.ts
│   │   └── is-pet.guard.ts
│   ├── models/                  # Modelos de datos
│   │   ├── entity/             # Entidades del juego
│   │   ├── message/
│   │   ├── object/             # Objetos interactuables
│   │   ├── particle/           # Sistema de partículas
│   │   ├── pet/                # Modelo de la mascota
│   │   ├── player/
│   │   ├── room/               # Modelo de habitaciones
│   │   └── sprites/            # Modelos de sprites y animaciones
│   ├── services/               # Servicios del juego
│   │   ├── animation.service.ts
│   │   ├── collision.service.ts
│   │   ├── cursor.service.ts
│   │   ├── data.service.ts
│   │   ├── entity-store.service.ts
│   │   ├── game-loop.service.ts
│   │   ├── grab.service.ts
│   │   ├── mesage/              # Sistema de mensajes
│   │   ├── particle/            # Efectos de partículas
│   │   ├── pet/                 # Lógica de la mascota
│   │   │   ├── pet-condition/
│   │   │   ├── pet-ia/
│   │   │   ├── pet-input/
│   │   │   ├── pet-stat/
│   │   │   └── pet-state/
│   │   ├── physics.service.ts
│   │   ├── room.service.ts
│   │   ├── sound.service.ts
│   │   ├── sprites.service.ts
│   │   ├── storage/             # Almacenamiento de imágenes
│   │   └── interactable-objects/
│   └── views/                   # Vistas principales
│       ├── console-view/
│       ├── error-view/
│       └── home-view/
├── assets/
│   ├── config/                  # Configuraciones JSON
│   └── sound/                   # Audio del juego
├── index.html
├── main.ts
└── styles.css                  # Estilos globales

Programas usados

Pixel Art

LibreSprite
Creacion y animacion de sprites en pixel art.

---

Musica y Sonido

Bosca Ceoil Blue
Creacion de musica y efectos retro.

---

Autor

Autores de las tipografía

Tipografía de la web: Ænigma

Tipografía de mokito: Dahaba

[!WARNING] Este proyecto está bajo una licencia personalizada que prohíbe el uso para entrenamiento de inteligencia artificial. Consulta el archivo LICENSE para más detalles.