ChatGPT e JavaScript: construa o jogo Pong

Interagindo com o ChatGPT - Apresentação

Guilherme: Olá! Meu nome é Guilherme Silveira e eu serei um de seus instrutores no curso de ChatGPT e JavaScritpt: Inteligência artificial aplicada a programação.

Eu sou uma pessoa não binária, de cabelos castanhos e encaracolados. Tenho uma "covinha" artificial de um piercing que usei na bochecha. Ao meu fundo, há alguns objetos de decoração, em especial, um quadro de arte interativa.

Monica: Olá! Eu sou a Moni Hillman!

Sou uma mulher de cabelos castanhos, com mexas roxas na frente e franja. Estou usando um fone de ouvido rosa. Ao meu fundo, há alguns livros em cima de uma mesa e objetos decorativos.

Guilherme: Juntos, neste curso, vamos trabalhar em um projeto muito bacana, em dois sentidos:

• Criaremos um jogo divertido e poderemos explorá-lo a partir de variações de som, imagem e outras surpresas.

• Trabalhar com código usando uma ferramenta externa de ajuda: a inteligência artificial no estilo de chat.

Estamos visualizando a página do jogo sem o áudio. Ele acontece no espaço sideral. Há uma bola que se movimenta aleatoriamente pela tela e entra em choque com uma barra lateral esquerda. Podemos mover essa barra para cima e para baixo, movimentando, consequentemente, a bola.

No ChatGPT, isso tudo será feito com muita conversa. A maior parte do código será gerado em diversas conversas: vamos, analisar a resposta e repetir a pergunta, escrita de outra forma, quando a resposta não é exatamente o que esperávamos.

Encontraremos formas e táticas de conversar com a inteligência artificial, assim, obteremos melhores resultados.

Monica: O único pré-requisito para este curso é saber um pouco de JavaScript, assim, você entenderá as funcionalidades do p5.js que utilizamos e não explicamos com profundidade.

Nos encontramos durante as aulas! Não deixe de se matricular!

Interagindo com o ChatGPT - Construindo o Pong

Guilherme: Tudo bem, pessoal? Vamos começar?

Acessaremos o site do ChatGpt, que é a versão do Generative Pre-Trained Transformer ou Transformador pré-treinado generativo (GPT) via chat. Existem outras ferramentas que fazem o mesmo tipo de operação com chat, você pode escolher a de sua preferência.

Estamos usando o modelo GPT-4, versão paga, mas você pode usar a versão 5 Default (GPT-3.5) que é gratuita. Vamos escrever nosso primeiro pedido, lembrando de indicar a linguagem:

Eu quero um jogo de pong em JavaScript

Moni: Mesmo que o ChatGpt esteja nos respondendo, ele ainda não é uma pessoa, por isso, não toma iniciativas com base no que acha que queremos, mas, sim, a partir do que foi ensinado.

Guilherme: Ele vai responder sobre o pong considerando o que teve contato. Por exemplo, se existir muitos pongs em Python, a resposta provavelmente será em Python.

Continuando, também precisaremos de uma biblioteca. Uma boa opção para esse tipo de simulador/jogo é a p5js.

Eu quero um jogo de pong em Javascript. Eu quero usar a biblioteca p5js.

O nosso jogo é single player, ou seja, de apenas um jogador contra o computador.

Eu quero um jogo de pong em Javascript. Eu quero usar a biblioteca p5js. É um jogo de um jogador versus o computador.

Vamos usar uma inteligência de computador simples, assim evitamos problemas.

Eu quero um jogo de pong em Javascript. Eu quero usar a biblioteca p5js. É um jogo de um jogador versus o computador. A inteligência do computador é bem simples: quando o jogador toca na bola, a raquete do computador escolhe uma posição aleatória e vai para aquela posição.

Não queremos marcar pontos, nem nada complexo. A ideia é construir algo simples, inicial.

Eu quero um jogo de pong em Javascript. Eu quero usar a biblioteca p5js. É um jogo de um jogador versus o computador. A inteligência do computador é bem simples: quando o jogador toca na bola, a raquete do computador escolhe uma posição aleatória e vai para aquela posição. Não quero pontos. Quando tem gol, a bola volta ao centro com um novo movimento aleatório.

Não vamos pedir o código de uma vez só. Ele poderia vir cortado na resposta, por conta do tamanho, e no processo de copiar e colar, provavelmente teríamos um erro. A ideia é pedir só o HMTL.

Eu quero um jogo de pong em Javascript. Eu quero usar a biblioteca p5js. É um jogo de um jogador versus o computador. A inteligência do computador é bem simples: quando o jogador toca na bola, a raquete do computador escolhe uma posição aleatória e vai para aquela posição. Não quero pontos. Quando tem gol, a bola volta ao centro com um novo movimento aleatório. Me mostre primeiro somente o arquivo hmtl. Sem css, sem javascript.

Monica: O ChatGpt é bem instável. Pode ser que no futuro ele fique super rápido. Por enquanto, ele tem travado no meio do processo de formulação da resposta. Não é exatamente um corte, aparecem duas linhas de resposta e ele trava.

Guilherme: Agora o ChatGpt abriu uma janela de código e está gerando o HTML, segundo o nosso pedido. Podemos copiar e colar o resultado em um arquivo HTML. Como ele não disse o nome do arquivo, vamos nomeá-lo como index.hmtl. Vamos conferir!

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pong Game</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> src="sketch.js"></script>
</head>
<body>
</html>

Como estou acostumado a usar o p5js, sei que esse arquivo é o de sempre. Todos os arquivos do p5js são um script HTML, em que há um script que inclui o p5js e outro que inclui o nosso script: sketch ou rascunho.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> src="sketch.js"></script>

Ele entendeu o que queremos. É um passo importante. Agora vamos acessar o site do Editor p5js. Nele, encontraremos o básico de um arquivo p5js.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Apertando o botão de "Play", ele rodará o sketch.js e desenhará um quadrado cinza, 400x400 (400 por 400), na função setup(). Um Canvas está sendo criado e roda uma única vez. Depois, com a função draw() (desenha) ele "printa" o fundo, background(), com a cor 220, que é um tom de cinza-claro.

Vamos adicionar outro comando após o background() para que um retângulo branco, na posição 50 e tamanho 100x200 seja criado: rect(50, 50, 200).

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
    rect(50, 50, 200);
}

Agora, quando rodamos o comando, aparece um retângulo branco dentro do quadrado cinza, posicionado à esquerda. É no scketch.js que escreveremos o JavaScript. Na parte superior do campo de edição do comando, há uma seta posicionada para a direita. Apertando essa seta, ela mostrará, à esquerda, os "Arquivos do esboço": index.html; sketch.js; style.css.

Abrindo o index.html, será possível conferir que é o script quem adiciona o p5.js em uma versão mais atualizada, o css, que está usando apenas como reset mínimo, e o sketch.js. É no sketch.js que vamos trabalhar.

Moni: O p5 até importa as bibliotecas de sons, p5.sound.min.js, mas, não precisamos usá-las necessariamente. Além disso, ele também realiza o trabalho de configuração do ambiente. Mas, se você quiser usar o VSCode, Sublime ou outro editor, basta copiar o código que foi gerado pelo ChatGpt e colar e colocar no index.html.

Guilherme: Estamos usando o editor do p5 para não precisarmos instalar o VSCode ou outro editor. Mas poderia rodar também no CodePen, por exemplo.

Prosseguindo, fecharemos o sketch.js e retornaremos à página do chat. Vamos pedir o arquivo sketch.js.

Agora por favor me de o arquivo sketch.js

Moni: O resultado será tão grande quanto uma bíblia.

Guilherme: O ChatGpt está criando as variáveis para as raquetes e para a bola. Isso faz sentido, porque temos duas raquetes e elas estão em determinada posição da tela. A bola também fica em alguma posição.

// Variaveis para as raquetes e bola 
let playerPadle, computerPadle, ball;

function setup() {
  createCanvas(800, 400);
    playerPadle = new Padle(30, height / 2, 10, 60);
    computerPadle = new Padle(width - 40, heigth / 2, 10, 60);
    ball = new Ball(width / 2, height / 2, 10);

}

function draw() {
  background(0);

Há um objeto chamado Padle(), que é "raquete" em português. Ele está definindo a posição dessa raquete, por exemplo, "30" no X, isto é, à direita, bem no meio da tela e na vertical. Com o computerPadle ele está criando também o lado da direita, a grossura é 10 e a altura é 60.

A classe bola, ball(), na posição do meio, com valor 10, que deve se referir ao raio da esfera. A função draw() atualiza as raquetes e a bola. Depois, verifica colisões e mostra.

function draw() {
  background(0);

    // Atualiza as posições das raquetes e da bola
    playerPaddle.update();
    computerPadlle.update();
    ball.update();

    // Vericia colisões entre a bola e raquetes
    ball.checkPaddleCollision(playerPaddle);
    ball.checkPaddleCollision(computerPadle);

    // Desenha as raquetes e a bola
    playerPaddle.display();
    computerPaddle.display();
    ball.display();
}

A classe da raquete "seta" muitas variáveis e outras tarefas. A classe da bola também. O código ainda está sendo gerado.

class Raquete {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }

Um detalhe interessante é que a classe da raquete está usando o mouse. Significa que se mexermos o mouse para cima e para baixo, a raquete segue a posição do mouse.

atualizar() {
    if (this === raqueteJogador) {
      this.y = mouseY;
    } else {
      if (bola.y > this.y + this.h / 2) {
        this.y += 3;
      } else if (bola.y < this.y - this.h / 2) {
        this.y -= 3;
      }
    }
    this.y = constrain(this.y, this.h / 2, height - this.h / 2);
  }

    display() {
    fill(255);
    rectMode(CENTER);
    rect(this.x, this.y, this.w, this.h);
  }
}

Sobre a bola, uma inteligência está sendo criada para movimentar a bola para cima e para baixo. O constrain() serve para limitar a tela e mostrar "desenhe um retângulo":

rectMode(CENTER);
    rect(this.x, this.y, this.w, this.h);

Na classe da bola, Ball, ele chama um constructor(), reset(), o update() acontece de acordo com a velocidade. Se foi gol, ela "reseta" o jogo. Lembrando que, no comando, está especificado gol para a direita e para a esquerda:

if (this.x + this.r / 2 >= width) {
      this.reiniciar();
    } else if (this.x - this.r / 2 <= 0) {
      raqueteComputador.y = random(height - raqueteComputador.h);
      this.reiniciar();
    }
  }

Seguindo, ele verifica colisão e mostra.

checkPadleCollision(paddle) {
    if (
      this.x - this.r / 2 <= paddle.x + paddle.w / 2 &&
      this.x + this.r / 2 >= paddle.x - paddle.w / 2 &&
      this.y + this.r / 2 >= paddle.y - paddle.h / 2 &&
      this.y - this.r / 2 <= paddle.y + paddle.h / 2
    ) {
      this.velocidadeX *= -1;
    }
  }

  display() {
    fill(255);
    ellipseMode(CENTER);
    ellipse(this.x, this.y, this.r);
  }
}

O ChatGpt parou no meio da resposta e, fora da janela de código, exibiu a mensagem: "Este código cria um jogo de Pong simples, onde o usuário joga".

Monica: Aconteceu o que eu tinha avisado: ele travou no meio da resposta.

Guilherme: Tudo bem, o código gerado até agora é suficiente. Vamos apertar "Coy code" na parte superior da janela para copiar, colar na área de edição do p5. arquivo scketch.js, salvar com o comando "Ctrl + S" e rodar.

Na lateral direita, visualizaremos uma prévia: temos um Pong funcionando. O fundo é preto, há duas raquetes brancas, uma do lado direito e outra do lado esquerdo.

Elas são representadas por barras verticais que se movimentam para cima e para baixo, segundo a movimentação do mouse. Há também uma pequena bola branca que se movimenta aleatoriamente e entra em choque com as raquetes.

Funcionou mesmo! Estou muito feliz que está funcionando muito bem, porque quando preparei o curso, não estava tão bom.

Monica: O ChatGpt está mais treinado!

Guilherme: Alguma sugestão de feature (recurso) que podemos adicionar?

Monica: Poderíamos substituir o que está escrito em inglês para português no comando.

Guilherme: Vamos trocar para português. Basta pedir ao ChatGpt:

Por favor, o nome das classes e o nome das variáveis deveriam estar em português

Ele estava gerando a mudança para português e travou. O ChatGpt gera uma quantidade limite de caracteres. Se ele parar, é porque, provavelmente, atingiu esse limite e temos que pedir que continue.

Mas, se pedimos que ele continue, pode acontecer um erro e ele não saber o que continuar ou gerar uma resposta que não tem nada a ver com o que estamos fazendo.

Temos um contexto e é importante considerá-lo. Precisamos pensar nas melhoras formas de comunicação com o chat para que ele entenda o que queremos. Se simplesmente dissermos "continue", provavelmente não receberemos a continuação correta.

Ele já gerou a raquete, o setup() e o draw(). Vamos copiar esse trecho, colar no editor do p5, retornar ao chat e pedir o que está faltando: a função da bola. Então, vamos escrever:

Me mostre a classe Bola completa, somente ela

Agora ele está gerando o código, mantendo o texto em português e mantendo a coerência com o texto de código anterior. Vamos copiá-lo e testar se vai funcionar.

A ideia não é aprender a copiar o código, mas, entender como podemos nos comunicar com o ChatGpt, isto é, como devemos escrever as mensagens para alcançarmos os resultados desejados.

O código está pronto. Vamos copiá-lo e colá-lo no p5, logo após o comando da raquete. Depois de salvá-lo, podemos rodar e testar se o gol funciona. Ao lado direito da tela, há uma pré-visualização do jogo de Pong. Quando acontece o gol, o jogo continua. Está funcionando!

Nos encontramos no próximo vídeo para resolver outros problemas do nosso jogo de Pong.

Monica: Vamos enfrentar os novos desafios!!

Interagindo com o ChatGPT - Solicitando mudanças

Monica: O que podemos implementar no nosso jogo de Pong para que ele fique cada vez mais bonito?

Guilherme: Uma das funcionalidades clássicas, é: quando a bolinha bate nas extremidades da tela, tanto embaixo quanto em cima, não faz sentido ela quicar no "nada". Se ela bate nas raquetes (laterais), é necessário que existam barras em cima e embaixo para justificar que a bola bata e volte.

Monica: É super importante dar um feedback visual para os usuários. Se a bola é lançada pela raquete para cima e não existe nenhuma barreira que pare seu movimento, em tese, ela deveria continuar a se movimentar infinitamente.

Sabemos que existe um limite, mas se existir uma representação visual dessa barreira, o que está acontecendo ficará mais compreensível.

Guilherme: Então, vamos pedir que o ChatGpt adicione barras ao jogo de Pong:

Queremos duas barras horizontais, uma no topo e uma embaixo da tela para mostrar que quando a bola chega nessas bordas, ela quica. Isso significa que ao invés de quicar no limite do Y do canvas, vai quicar agora nessas bordas finas.

Podemos especificar a espessura. Talvez, a mesma da barra da raquete. O que você acha, Moni?

Monica: Acho que poderia ser um pouco mais fina.

Guilherme: Vamos retornar ao p5 e verificar a espessura da raquete.

  createCanvas(800, 400);
  raquete(30, height, 2, 10, 60);
Raquete(30, height / 2, 10, 60);

A espessura da raque é 10. Vamos pedir 5 pixels. Continuando a escrever no ChatGpt:

Queremos duas barras horizontais, uma no topo e uma embaixo da tela para mostrar que quando a bola chega nessas bordas, ela quica. Isso significa que ao invés de quicar no limite do Y do canvas, vai quicar agora nessas bordas finas. A espessura delas é de 5.

Monica: É interessante analisar os prompts (comandos) que outras pessoas criam para pesquisar no ChatGpt, porque eu não saberia ser tão específica.

Quem me conhece a partir de grupos de estudos e cursos sabe que tenho dificuldade com números, computação gráfica, dentre outros. Neste sentido, especificar y, x e demais valores para criar a raquete e outros elementos do jogo acaba sendo uma dificuldade.

Guilherme: Na próxima eu vou parar de fazer o prompt e você assume. Assim, não influenciarei, com a minha experiência, a construção do p5js.

Monica: Vamos saber como é criar um prompt para quem tem dificuldade em geometria.

Guilherme: Perfeito! Eu posso ajudar, sem problemas!

Vamos continuar. O ChatGpt está o comando para adicionar duas barras horizontais, uma no topo e outra na parte inferior da tela do jogo de Pong. Ele criou mais duas variáveis: barraSuperior e barraInferior.

// Variáveis para as raquetes, bola e barras horizontais
let raqueteJogador, raqueteComputador, bola, barraSuperior, barraInferior;

function setup() {
  createCanvas(800, 400);
  raqueteJogador = new Raquete(30, height / 2, 10, 60);
  raqueteComputador = new Raquete(width - 40, height / 2, 10, 60);
  bola = new Bola(width / 2, height / 2, 10);
  barraSuperior = new Barra(0, 5, width, 5);
  barraInferior = new Barra(0, height - 5, width, 5);
}

Após as variáveis, temos o setup(), a função draw() para desenhar as duas barras. Em seguida, ele sinaliza código omitido com reticências para a classe da bola.

class Raquete {
   // ...
}

class Bola {
   // ...

Monica: Sinal de que ele não está escrevendo nada que não seja necessário.

Guilherme: Vamos copiar esse trecho das variáveis até a classe Raquete() e colar no editor do p5. Se a classe Raquete() está como antes, por que a classe da bola está diferente? Você sabe o motivo?

Monica: Acho que é para calcular por onde a bola vai voltar ou quando vai bater.

Guilherme: É a colisão!

if (
      this.y - this.r / 2 <= barraSuperior.y + barraSuperior.h ||
      this.y + this.r / 2 >= barraInferior.y - barraInferior.h
    ) {
      this.velocidadeY *= -1;
    }

Antes a bola colidia com o limite do canvas. Agora, ela precisa colidir com a barra, ou seja, 5 pixels antes. Para calcular essa distância de colisão 5 pixels antes, o chatGpt pegou o y da barra, barraSuperior.y, que é o ponto vertical e calculou menos ou mais (a depender de qual das barras) a espessura dessa barra.

Ele construiu o comando de forma dinâmica. Assim, se mudarmos a espessura da barra para 13, por exemplo, ele funcionará. Antes, a bola colidia com o this.y, sendo o tamanho zero e height. Ou seja, o y menor era zero e o y maior era a altura do canvas.

     if (this.y - this.r / 2 <= 0 || this.r /2 
>= height) {
      this.velocidadeY *= -1;
      }

Agora, isso não acontece mais. Agora a bola bate na barra.

Monica: Pensei que ele colocaria apenas visualmente a barra, porque não pedimos uma barra tão grossa. Mas, ele fez até uma verificação de colisão com ela.

Guilherme: Mas esse é o meu truque: no meu prompt, eu pedi que ele fizesse isso. Vamos retornar ao pedido:

Queremos duas barras horizontais, uma no topo e uma embaixo da tela para mostrar que quando a bola chega nessas bordas, ela quica. Isso significa que ao invés de quicar no limite do Y do canvas, vai quicar agora nessas bordas finas. A espessura delas é de 5.

Foi proposital a escolha pela frase: "Isso significa que ao invés de quicar no limite do Y do canvas, vai quicar agora nessas bordas finas". Se não especificarmos o que queremos, o resultado dificilmente será o esperado.

Neste caso, a bola passaria pela barra e bateria na borda. Nós perceberíamos esse movimento de entrada e saída, o que não é tão legal.

Monica: Isso está bastante interligado ao que estava pensando. Disse que no meu prompt eu não especificaria esse detalhe da barra, pois não saberia da necessidade de especificar.

O resultado seria o que estava esperando: apenas uma mudança visual, mas não no impacto da barra.

Guilherme: Estamos no p5. Vamos rodar o código e conferir o resultado com as duas barras. Na lateral direita da tela, temos a janela de prévia do jogo de Pong. Está funcionando: temos duas barras horizontais, uma no topo e outra na parte inferior da tela, e a bola bate nelas e volta.

Ele acabou gerando uma margem também, isto é, uma faixa preta entre a barra branca e o final da tela.

Monica: Só acho que a bola está muito devagar. Assim, o jogo fica um pouco entediante. Podemos pensar nisso agora.

Guilherme: Ótimo! Alguma sugestão de prompt?

Monica: Será dinâmica ou fixa a velocidade?

Guilherme: Acho que poderia ser dinâmica, isto é, ir aumentando aos poucos.

Monica: Minha sugestão de prompt é:

Altere o código para a velocidade da bola mudar a cada vez que ocorrer um impacto com a raquete.

Guilherme: Durante o processo de geração do código, tenho uma sugestão a fazer. Considerando que o tempo para gerar os códigos é longo, seria útil saber antecipadamente qual impacto esse código deve ter.

Por exemplo, o código deve afetar a classe "bola", mais precisamente a função de impacto dessa bola, ou talvez a classe Raquete(), onde ocorre a colisão (mesmo que seja na bola).

Com isso, evitamos gerar comandos desnecessários que não produzem alterações significativas. Podemos especificar explicitamente: "quero o código da classe bola" e indicar qual trecho do código precisa ser atualizado.

No nosso caso, fica mais fácil identificar onde serão as alterações, porque a velocidade é usada em apenas um trecho. Mas, em códigos maiores, talvez o design fique muito ruim, incompreensível, embora funcione. Então, se você já tem uma sugestão de onde colocar o trecho de código, indique para o chat.

Após a classe bola, ele criou uma função aumentarVelocidade(). O fator de aumento é 10% (dez por cento) no x e no y. Vamos copiar essa função, colar na classe bola, editor do p5.

class Bola {
   // ...

aumentarVelocidade() {
    const fatorAumento = 1.1;
    this.velocidadeX *= fatorAumento;
    this.velocidadeY *= fatorAumento;
  }

Também vamos copiar a função verificarColisaoRaquete(raquete). Agora ela está verificando e aumentando a velocidade.

 verificarColisaoRaquete(raquete) {
    if (
      this.x - this.r / 2 <= raquete.x + raquete.w / 2 &&
      this.x + this.r / 2 >= raquete.x - raquete.w / 2 &&
      this.y + this.r / 2 >= raquete.y - raquete.h / 2 &&
      this.y - this.r / 2 <= raquete.y + raquete.h / 2
    ) {
      this.velocidadeX *= -1;
      this.aumentarVelocidade();
    }
  }

No p5, vamos salvar, rodar e testar. É possível notar, na janela de visualização prévia, que a velocidade está aumentando de 10 em 10%, cada vez que a bola bate nas raquetes. Se deixarmos o fator mais rápido, conseguiremos acompanhar melhor esse aumento.

Monica: Acho que está suficiente. Mais que isso, ficará impossível ganhar.

Guilherme: Assim já está bem difícil ganhar. Está ótimo!

Monica: Podemos deixar o Pong ainda melhor: mais dinâmico, complexo, bonito e jogável. No próximo vídeo, continuaremos nos desafiando no jogo de Pong, usando o ChatGpt. Até lá!!

Sobre o curso ChatGPT e JavaScript: construa o jogo Pong

O curso ChatGPT e JavaScript: construa o jogo Pong possui 102 minutos de vídeos, em um total de 34 atividades. Gostou? Conheça nossos outros cursos de IA para Programação em Inteligência Artificial, ou leia nossos artigos de Inteligência Artificial.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Interagindo com o ChatGPT
• Solicitando mudanças
• Embelezando o jogo
• Aplicando sons