Title: 18. AI BREAKOUT+ — Pristupačna igra sa upravljanjem pomoću pokreta glave i treptanja
Course: AI Projects for Students (SR) > Section: VEB-APLIKACIJE ZASNOVANE NA VEŠTAČKOJ INTELIGENCIJI

18.1 Uvod

AI Breakout+ je pristupačna verzija klasične igre Arkanoid/Breakout. U ovoj igri, igrač kontroliše reket kako bi sprečio lopticu da padne i usmerio je da pogodi blokove, uništavajući ih na ekranu.

Glavna razlika je u tome što se ovom verzijom može upravljati putem računarske kamere. Umesto korišćenja isključivo tastature, igrač može pomerati reket pokretima glave i lansirati lopticu ili pucati pomoću treptaja.

Ova aplikacija pokazuje kako veštačka inteligencija i računarski vid mogu učiniti igre pristupačnijim osobama sa motoričkim poteškoćama.

18.2 Cilj

Cilj ovog projekta je da pokaže kako se veštačka inteligencija može koristiti za kreiranje inkluzivnih rešenja. Aplikacija omogućava da na praktičan način razumete kako kamera može da detektuje tačke na licu i transformiše te podatke u komande za upravljanje igrom.

Kroz ovaj projekat možemo naučiti:

- šta je računarski vid;

- kako funkcioniše prepoznavanje lica pomoću ključnih tačaka (landmarks);

- kako pretvoriti stvarne pokrete u digitalne akcije;

- kako kreirati pristupačne interfejse;

- kako prilagoditi igre različitim korisnicima.

18.3 Korišćene tehnologije

Aplikacija je razvijena pomoću jednostavnih veb tehnologija:

- HTML5 – struktura stranice;

- CSS3 – dizajn, boje, dugmad i raspored;

- JavaScript – logika i upravljanje igrom;

- MediaPipe FaceMesh – detekcija tačaka na licu;

- Webcam – snimanje slike korisnika;

- Browser – pokretanje aplikacije bez instalacije.

18.4 Kako se primenjuje veštačka inteligencija

Aplikacija koristi kameru za detekciju korisnikovog lica. Sistem identifikuje specifične tačke na licu, kao što su položaj nosa i očiju.

Horizontalna pozicija nosa koristi se za pomeranje reketa ulevo ili udesno. Kada korisnik trepne, sistem interpretira taj pokret kao akciju – na primer, lansiranje loptice, pucanje ili ponovno pokretanje igre.

Na ovaj način, veštačka inteligencija omogućava transformisanje prirodnih pokreta tela u digitalne komande.

18.5 Kako je aplikacija napravljena

Aplikacija je napravljena pomoću tri glavne datoteke:

- index.html – sadrži strukturu stranice i glavne elemente igre;

- style.css – definiše vizuelni izgled aplikacije;

- game.js – sadrži logiku igre, detekciju lica i upravljanje pokretima.

Tokom razvoja, korišćeni su upiti (prompts) u alatima generativne veštačke inteligencije kao podrška za organizaciju koda, poboljšanje grafičkog interfejsa, kreiranje tehničkih objašnjenja i testiranje različitih načina upravljanja.

18.6 Kako koristiti aplikaciju

1. Otvorite aplikaciju u svom veb-pretraživaču.

1. Dozvolite pristup kameri kada se to od vas zatraži.

1. Sedite ispred računara tako da vam lice bude jasno vidljivo.

1. Sačekajte da sistem detektuje lice.

1. Pomerajte glavu levo ili desno kako biste upravljali reketom.

1. Trepnite da biste lansirali lopticu ili izvršili druge akcije.

1. Pokušajte da uništite sve blokove i pređete na sledeći nivo.

18.7 Preuzmite izvorni kod

Source Code:

https://github.com/carlagranadeiro/ai-arkanoid