~/projekty / match-colours
Match Colours
Gra pamięciowa na kolory: klikasz kolory w kolejności, w jakiej się pojawiły, by przejść poziom wyżej. Trudność rośnie, a wyniki są zapisywane.
- rola
- projekt i implementacja w Nuxt 3
- czas
- maj 2024 – maj 2026
- typ
- własny
- stack
- Nuxt 3 · Vue 3
[wideo demo: nagranie ekranu 1–3 min]
01 / problem
Mała gra do ćwiczenia struktury prawdziwej aplikacji
Match Colours powstało dla zabawy i nauki: prosty pomysł z wystarczającą ilością stanu (sekwencje, poziomy, wyniki), by ćwiczyć strukturę aplikacji w Nuxt.
02 / rozwiązanie
Zapamiętaj sekwencję i powtórz ją po kolei
Gracz widzi sekwencję kolorów i klika je w tej samej kolejności, by przejść dalej. Kolejne poziomy przynoszą trudniejsze sekwencje, wyniki są zapisywane między podejściami, a układ jest responsywny.
- [screenshot 1]
[podpis]
- [screenshot 2]
[podpis]
03 / architektura
Jak to działa
Aplikacja Nuxt 3 i Vue 3 złożona ze stron, komponentów, composables, storów i tras serwerowych, wdrożona na Vercel.
04 / wyniki
Efekt
05 / wnioski
Czego się nauczyłem
- Stan w storach, a logika wielokrotnego użytku w composables, utrzymuje cienkie strony.
- Nawet tak mała gra zyskuje na testach; późniejsze projekty, jak PerplexImage, mają już pokrycie Vitest i Playwright.
galeria
- [zdjęcie]
[podpis]
- [zdjęcie]
[podpis]
- [zdjęcie]
[podpis]