Title: 18. AI BREAKOUT+ — Jogo acessível com controlo por cabeça e pestanejar
Course: AI Projects for Students (PT) > Section: APLICAÇÕES WEB COM IA

18.1 Introdução

O AI Breakout+ é uma versão acessível do clássico jogo Arkanoid/Breakout. Neste jogo, o jogador controla uma raquete para impedir que a bola caia e para a fazer bater nos blocos, destruindo-os no ecrã. 

A diferença principal é que esta versão pode ser controlada através da câmara do computador. Em vez de usar apenas o teclado, o jogador pode mover a raquete com o movimento da cabeça e lançar a bola ou disparar através do pestanejar.

Esta aplicação demonstra como a Inteligência Artificial e a visão computacional podem tornar os jogos mais acessíveis a pessoas com dificuldades motoras.

18.2 Objetivo

O objetivo deste projeto é mostrar que a IA pode ser utilizada para criar soluções inclusivas. A aplicação permite compreender, de forma prática, como a câmara pode detetar pontos do rosto e transformar esses dados em comandos para controlar um jogo.

Com este projeto, podemos aprender:

- o que é visão computacional;

- como funciona o reconhecimento facial por pontos de referência;

- como transformar movimentos reais em ações digitais;

- como criar interfaces acessíveis;

- como adaptar jogos para diferentes utilizadores.

18.3 Tecnologias utilizadas

A aplicação foi desenvolvida com tecnologias web simples:

- HTML5 – estrutura da página;

- CSS3 – design, cores, botões e layout;

- JavaScript – lógica do jogo e controlo;

- MediaPipe FaceMesh – deteção dos pontos do rosto;

- Webcam – captura da imagem do utilizador;

- Browser – execução da aplicação sem instalação.

18.4 Como a IA é aplicada

A aplicação utiliza a câmara para detetar o rosto do utilizador. O sistema identifica pontos específicos da face, como a posição do nariz e dos olhos.

A posição horizontal do nariz é usada para mover a raquete para a esquerda ou para a direita. Quando o utilizador pestaneja, o sistema interpreta esse movimento como uma ação, por exemplo lançar a bola, disparar ou reiniciar o jogo.

Desta forma, a IA permite transformar movimentos naturais do corpo em comandos digitais.

18.5 Como foi construída

A aplicação foi construída com três ficheiros principais:

- index.html – contém a estrutura da página e os elementos principais do jogo;

- style.css – define o aspeto visual da aplicação;

- game.js – contém a lógica do jogo, a deteção facial e o controlo por movimentos.

Durante o desenvolvimento, foram usados prompts em ferramentas de IA generativa para apoiar a organização do código, melhorar a interface gráfica, criar explicações técnicas e testar diferentes formas de controlo.

18.6 Como usar a aplicação

1. Abrir a aplicação no browser.

1. Permitir o acesso à câmara quando for solicitado.

1. Sentar-se em frente ao computador, com o rosto bem visível.

1. Esperar que o sistema detete o rosto.

1. Mover a cabeça para a esquerda ou para a direita para controlar a raquete.

1. Pestanejar para lançar a bola ou executar ações.

1. Tentar destruir todos os blocos e avançar de nível.

18.7 Aceder à aplicação

Código-fonte:

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