Gato Virtual

La mascota, no una captura

Sala de juegos

El gato que ves paseando por esta página es el componente real, cargado tal cual se instalaría en cualquier sitio. Este panel llama a su misma API pública — pruébalo.

gato.animo

Estado idle Se llama Michi

Energía—

Hambre—

Aburrim.—

Felicidad—

Acarícialo cinco veces seguidas en menos de dos segundos y se enfada. Es un límite real del código, no decoración.

Assets incluidos

Ocho estados, ocho sprites

Cada comportamiento tiene su propia ilustración. Puedes sustituirlas todas por las tuyas con la opción sprites sin tocar el código.

Idle

Caminar

Investigar

Jugar

Comer

Dormir

Maullar

Enfadado

Por qué no es un GIF

Tiene ciclo interno, no solo animación

Comportamiento autónomo

Pasea, investiga el cursor cuando lo tiene cerca, se aburre si lo ignoras y actúa según cuatro necesidades internas que evolucionan solas.

Interacción con límite

Clic para acariciar. Pero insistir demasiado rápido lo enfada de verdad — felicidad baja y lo notarás en el sprite.

Sonido sin archivos

Maullidos y ronroneos sintetizados con Web Audio API. Ni un solo .mp3 que cargar.

Multi-instancia

Llama crearGato() tantas veces como quieras. Cada gato es independiente, con su propio nombre, tamaño y ritmo.

Sprites sustituibles

Pásale tu propio set de imágenes por la opción sprites. Los estados que no reemplaces siguen cargando los de por defecto.

API pública mínima

Seis métodos, una propiedad de estado. Se integra en una línea y se controla por completo desde tu propio código.

Una función

Empezar

Copia el script y la carpeta assets/ junto a tu HTML. Sin build, sin npm, sin nada que instalar.

gato-virtual/
├── gato-virtual.js
└── assets/
    ├── gato_idle.png
    ├── gato_caminar.png
    ├── gato_comer.png
    ├── gato_dormir.png
    ├── gato_enfadado.png
    ├── gato_investigar.png
    ├── gato_jugar.png
    └── gato_maullar.png

<!-- antes de cerrar </body> -->
<script src="gato-virtual.js"></script>
<script>
  crearGato({ nombre: "Michi", sonido: true });
</script>

La función devuelve la instancia, así que puedes seguir hablando con tu gato desde cualquier parte del código:

const michi = crearGato({ nombre: "Michi", escala: 0.9 });

michi.alimentar();
console.log(michi.animo);
// { energia: 82, hambre: 18, aburrimiento: 31, felicidad: 88, estado: "idle" }

Opción	Qué hace	Por defecto
nombre	Nombre mostrado al pasar el cursor	"Michi"
escala	Multiplicador de tamaño	1
velocidad	Píxeles por segundo al caminar	72
seguirRaton	Investiga y sigue el cursor	true
sonido	Maullidos y ronroneo sintetizados	false
sprites	Set de imágenes personalizado	null
onEstado	Callback al cambiar de estado	null

Antes de reutilizarlo

Código libre, arte con condiciones

Dos licencias, no una

Gato Virtual separa código e ilustraciones a propósito, porque no tienen los mismos dueños de facto: el código lo escribí para que cualquiera lo use libremente; los sprites son ilustraciones originales y prefiero saber en qué proyectos aparecen.

Código fuente Apache License 2.0. Uso comercial, modificación y redistribución permitidos.

Sprites e ilustraciones Creative Commons BY-NC 4.0. Libres para compartir y modificar con atribución, solo en contextos no comerciales.

¿Quieres usar los sprites en un proyecto comercial? Sustitúyelos por los tuyos con la opción sprites, o escribe para una licencia por separado. El nombre y la marca del proyecto tampoco están libres para reutilizar.