WindowKill JavaScript clone

Členovia tímu

• Martin
• Tobias

Prehľad projektu

WindowKill je jednoduchá strieľačka, ale herné okno sa stále zmenšuje. Strieľaj to rohov, aby sa okno úplne nezatvorilo, medzitým, ako bojuješ s nepriateľmi a bossmi v ich vlastných oknách. - Steam

WindowKill je strieľačka pre jedného hráča, hrá sa v okne so začiatočnou veľkosťou 400x400 pixelov, ktoré sa postupne zmenšuje. Neskôr sa začnú objavovať nepriatelia a okno sa bude rýchlejšie zmenšovať. Cieľom tohto projektu je vytvoriť plne funkčný klon tejto hry pomocou HTML, CSS, JavaScriptu a následné exportovanie hry ako plne funkčnej desktopovej aplikácie pre Windows, Linux a MacOS nám umožní framework Tauri 2.0 (áno, je tu použitý Rust na backend, ALE jeho použitie sa dá minimalizovať alebo úplne vynechať).

Priebeh hry

• Po spustení hry sa okamžite začne okno zmenšovať
• Hráč musí strieľať to hrán okna, aby ho zväčšil v danom smere
• Hráč ostáva umiestnený približne v strede obrazovky, nie okna
• V priebehu hry sa objavujú nepriatelia, ktorých musí hráč eliminovať alebo mu uberú životy
• Čím dlhšie je hráč v hre, tým rýchlejšie sa okno zmenšuje a objavujú sa silnejší nepriatelia
• Akonáhle sa hráča dotkne akákoľvek hrana okna alebo príde o všetky životy, hra skončila

Funkčné požiadavky

Nastavenia hry

• Možnosť upravovať postavu
• Úprava náročnosti:
  • ==Preddefinované náročnosti (EASY, MEDIUM, HARD, IMPOSSIBLE)==
  • Neskôr:
    • možnosť zmeniť rýchlosť zmenšovania okna
    • väčší počet a rýchlosť objavovania sa nepriateľov
    • sila, akou sa okno zmenšuje
    • sila, akou hráč okno zväčšuje
• Nastavenie ukladania skóre
• Zobrazenie a úprava klávesových skratiek

Používateľské rozhranie

• Jednoduchá úvodná obrazovka s tlačidlami pre spustenie, otvorenie nastavení a ukončenie hry
• Jednoduchá obrazovka pre koniec hry zobrazujúca aktuálne a najlepšie skóre. Rozdielna pre nové najlepšie skóre. Možnosti pre reštartovanie alebo ukončenie
• Zobrazenie času, ktorý uplynul od začiatku hry
• Zobrazenie životov hráča
• Jednoduché menu pri zastavení hry
• ==Na všetky zobrazenia/skrytia použitá plynulá animácia==

Mechaniky hry

• Náročnosti hry budú ovplyvňovať:
  • Rýchlosť a silu zmenšovania okna
  • Rýchlosť a silu striel hráča
  • Vlastnosti nepriateľov
• Vytváranie nepriateľov na základe náročnosti:
  • Môžu sa rýchlejšie pohybovať, uberať viac životov alebo mať viac životov
• Logika pre [[README#Nastavenia hry|Nastavenia hry]]
• Logika pre [[README#Používateľské rozhranie|Používateľské rozhranie]]
• Ukladanie najlepšieho skóre do súboru
• Ukladanie nastavení do súboru
• Ukladanie úspechov hráča do súboru
• Prispôsobenie počiatočnej veľkosti veľkosti obrazovky
• Životy hráča - nepriatelia pri kolízii s hráčom uberú daný počet životov (alebo všetky)
• Klávesové skratky pre kontrolu hry
  • ESC pre pozastavenie hry
• Úspechy hráča - pravdepodobne zo Steamu
• Neskôr:
  • Viacero synchronizovaných okien

Reštartovanie hry

• Hráč bude mať možnosť reštartovať hru pri prehre alebo predčasne pri pozastavení hry
• Veľkosť okna, hracia plocha, skóre by sa malo resetovať

Počítanie skóre

• Skóre sa bude počítať z počtu eliminovaných nepriateľov a času nažive

Chyby nájdené pri PoC

• Okno sa vizuálne zasekáva pri súčasnom zväčšovaní aj zmenšovaní
• Zmenšovanie sa celkovo zastaví keď sa okno zväčšuje

Ostatné

• Soundtrack

Výzvy a úvahy

• Zabezpečenie plynulej hry a predídenie podvádzaniu cez konzolu
• Vytvorenie jednoduchého, vizuálne atraktívneho používateľského rozhrania

Záver

Projekt WindowKill predstavuje ambiciózny pokus o vytvorenie interaktívnej arkádovej hry s unikátnym mechanizmom meniaceho sa herného priestoru. Implementovaný ako JavaScript klon originálnej hry, projekt demonštruje komplexný prístup k hernému dizajnu a technickej realizácii.

Počas vývoja dosiahneme významný pokrok vo viacerých oblastiach:

1. Implementované funkcionality:
   • Základná herná mechanika s meniacim sa oknom
   • Systém nepriateľov a kolízií
   • Rôzne úrovne náročnosti
   • Používateľské rozhranie s animáciami
   • Systém ukladania skóre a nastavení
2. Technické dosiahnutia:
   • Úspešná integrácia Tauri frameworku pre desktopovú aplikáciu
   • Implementácia cross-platformového riešenia
   • Optimalizácia výkonu pre plynulý herný zážitok
3. Plánované vylepšenia:
   • Rozšírenie herných mechaník
   • Vylepšenie vizuálnej stránky
   • Pridanie zvukových efektov
   • Implementácia viacerých herných módov

Projekt predstavuje komplexný prípad použitia webových technológií na vytvorenie natívnej herného zážitku. Úspešne kombinuje HTML/CSS/JavaScript pre frontend a Rust pre backend cez Tauri framework, čím demonštruje možnosť vytvárať výkonné herné aplikácie pomocou webových technológií.

Projekt nie je len presnou kópiou originálu, ale tiež pridaním vlastných inovácií a vylepšení, čo potvrdzuje vysokú kvalitu implementácie.

Dokumentácia projektu poskytuje detailný náhľad do vývojového procesu a slúži ako cenný zdroj pre budúcich vývojárov, ktorí by chceli implementovať podobné herné mechaniky alebo využiť Tauri framework pre svoje projekty.

To Do List

Zhrnutie projektu to jednotlivých bodov

• UI
  • Game start
  • Game end
    • Different for new best score
  • Settings menu
  • Score counter & timer
  • Pause menu
  • Animations
    • Hover FX
  • Set app icon
  • Disable Windows header
  • Custom cursor source
  • How to play window at first run
• Mechanics
  • Difficulties
    • Shrinking power
    • More enemies
    • Slower fire rate
    • Player power
    • ? Lost focus - faster shrinking
    • Impossible mode - transparent window
    • Score multiplier
    • Faster shrinking
  • Spawn enemies
    • Controlled by difficulties
      • Faster movement
      • More health - technically not implemented, but enemies health is calculated randomly
      • Bigger damage
      • Faster spawn rate
    • Update enemy position calculation to follow player
    • Update scoring system to include enemies killed
  • Settings
    • Player options - color change
    • Difficulties
      • Predefined options
      • ? Separate settings for each game aspect
    • Save options
    • Shortcuts customization & display
  • UI buttons
  • Save
    • Best score
      • ? Encrypt file
    • Settings
    • Achievements
  • Dynamic start size
  • Dynamic window size
  • ? Players health - enemies deal damage
  • Keyboard shortcuts
    • Disable default shortcuts ! at end also dev tools
    • ESC to open pause menu
  • Achievements (pravdepodobne zo Steamu)
    • Open World - get 37 monitors
    • No space left - get killed by window
    • Colorful World - play as every basic color
    • God of Colors - play as every hex color (16 777 216 unique combinations)
    • Kill 100 enemies
    • Kill 1000 enemies
    • Survive 1 minute
    • Survive 5 minutes
    • Survive 10 minutes
    • Survive 20 minutes
    • Score 1000 points
    • Score 5000 points
    • Score 10000 points
    • Separate window to show achievements
    • Show notification when achievement is unlocked
    • Achievement progress bar
  • Game restart
  • Score counter
  • ? Multiple windows - little help here
    • Successfully spawn multiple random windows
    • No overlapping
    • Successfully spawn enemies in random windows
    • Correctly transfer enemies between windows
    • Spawn bosses in random windows
    • Successfully transfer projectiles between windows
    • Remove old projectiles
  • ? Game modes
    • Player stays in center of screen (default - currently working on)
    • Player movement allowed
• Other
  • ? Good Soundtrack
    • Stop music on game over
    • Disable playback start/stop with multimedia keys - tested => event is not reaching app and cannot be blocked by JavaScript/TypeScript
• ! Fix
  • !! Correctly set window size on restart
  • Fix glitches on resize
  • Shrinking stops when resizing
  • Window flickering when resizing
  • Temporal fix: Incorrect window position when scaling is applied on Windows: When Windows uses display scaling above 100%, it creates a mismatch between physical and logical pixel coordinates. This affects how Tauri handles window positioning
  • !! In version 0.2.2 window is not resizing to center, but to top left corner of the screen.
  • ! Exclude some colors for enemy
• Typescript migration
  • Fix all errors
  • Update links in html files
    • Update links to scripts in html when migrating to TypeScript
  • Update Options Volume to use number instead of string ! NOT tested
  • Remove duplicate null checks / update declarations (mainly in gameUtils.ts)
  • Update game to version 0.7.0 when finished migrating to TypeScript
  • Update alert to Dialog plugin Only for display scaling pop-up
  • Try implement Updater plugin
  • Try implement Single Instance plugin
  • Set all variable types to explicit
  • Try creating custom type for sync-message events
  • Clean up Tauri permissions in tauri.conf.json

Development

Verzie

• Pri zmene verzie projektu je potrebné zmeniť číslo verzie v súbore package.json, src-tauri/tauri.conf.json a src-tauri/Cargo.toml.

Predpríprava

• Inštalácia NodeJS
• Inštalácia Rust

Spustenie projektu

npm run tauri dev