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 

 

Last modified: Friday, 26 June 2026, 6:14 AM