Capítulo 8 - Ping Pong

Amigos, esse joguinho tosco aí embaixo é parte de meu livro, com a colaboração da Ana Luíza Pereira Brod, "Aprenda a programar - a arte de ensinar ao computador" (título provisório). O Capítulo 8, onde falo sobre esse jogo, está aqui. Além do que está escrito no final do capítulo (colado aí embaixo) o que mais você mudaria nesse jogo?

Para iniciar o jogo, clique na bandeira verde, depois pressione a barra de espaço. Movimente o jogador da esquerda com o mouse. Para terminar, clique no botão vermelho "parar", ao lado da bandeira verde no canto superior direito da janela do jogo.

Caso não consiga visualizar o jogo, clique aqui!

1. O placar sempre adiciona mais de um ponto quando a bola atinge a barra colorida. Isso é porque a bola fica tocando, por muito tempo, a cor e, por isso, incrementa mais do que uma vez o placar.
2. No jogo Pong original, os jogadores apenas movimentam-se na vertical, enquanto o seu jogador simplesmente segue o mouse.
3. O jogador que representa o computador fica apenas subindo e descendo, é possível torná-lo mais inteligente?
4. Esse jogo vai durar uma eternidade?

Capítulo 8 - Ping Pong

Um dos primeiros videogames domésticos populares foi o Pong. A figura 8.1 mostra o console do jogo e a 8.2 mostra como o jogo aparecia, na tela de um aparelho televisor. Nesse capítulo, vamos fazer um Pong mais moderno, usando o Scratch.

Figura 8.1 – O console do jogo Pong

 

Figura 8.2 – O jogo Pong na tela da TV

Vamos aproveitar o que já desenvolvemos até aqui, no programa das nossas bolas educadas que pedem desculpas quando se chocam. Para começar, vamos transformar a nossa segunda bola em uma raquete. É o mesmo processo que fizemos para mudar a figura dessa bola quando a duplicamos, no capítulo anterior. Você lembra?

[Nesse link você encontra o estúdio com todos os projetos desenvolvidos para o livro]

Primeiro, use o o comando de menu File, Save as a copy, dê um novo nome para o projeto (que tal, Pong?) e, em seguida, use o comando File, Save now. Agora, selecione o sprite correspondente à segunda bola e clique em Costumes. Até o momento da escrita desse livro não havia uma raquete disponível na galeria de imagens do Scratch, assim selecionei, a partir da categoria People (pessoas) a imagem boy2-b, destacada na figura 8.3.

Figura 8.3 – Selecionando nosso primeiro jogador

 Você já deve ter notado que, ao selecionar um sprite, aparece um ponto de exclamação no canto superior esquerdo dele. Clique nele e altere o nome de seu sprite para “Jogador 1”. Repare nas outras opções possíveis, dentre elas, a direção do sprite (se ele não estiver de pé, aproveite para colocá-lo usando o botão ao lado de direction e clique também em can drag in player (pode arrastar o jogador) para que você possa movimentá-lo com o mouse. Repare que você também pode optar por exibir ou não o seu sprite clicando na caixa à direita de show. Em nosso caso, queremos exibi-lo sim. Clique no botão azul redondo, com um triângulo branco no meio, para voltar à janela com os sprites.

Agora, vamos alterar o programa de nosso Jogador 1, clicando nele dentro da janela Sprites e selecionando a aba Scripts. Primeiro, vamos fazer com que a posição inicial dele seja próxima à borda direita, ao centro (x = -200 e y=0). Elimine todos os blocos que não são mais necessários, já que agora esse jogador não irá se movimentar sozinho: você o movimentará com o mouse. Seu resultado deve se parecer com o da figura 8.4.

Figura 8.4 – O script do jogador

Agora clique na bola, na janela Sprites e mude seu nome, apropriadamente, para Bola. Use a aba Costumes para acessar o editor de imagens e diminuir um pouco o tamanho de sua bola. Na aba Scripts, apenas os valores de x e y para zero, de maneira que a bola parta do centro. Ela também não precisa mais ficar pedindo desculpas a cada vez que toca no jogador. Note que o Scratch não troca, automaticamente, o nome dos sprites nos blocos touching. Você deve fazer isso manualmente. Se você quiser, aproveite para aumentar a velocidade da bola alterando para um número maior em move steps. Veja como ficou o programa da bola na figura 8.4.

Figura 8.5 – O script da bola

Pressione a barra de espaços para começar a brincar. Não deixe que a bola toque na borda esquerda. Note que, enquanto você mantém o botão do mouse pressionado para arrastar o jogador, ele torna-se “invisível” para a bola. Assim, você deve arrastá-lo e soltá-lo antes que a bola toque nele. Usando o truque de seguir o ponteiro do mouse que você já viu no capítulo 7, você resolve esse problema. Faça isso!

É muito chato jogar sozinho! Vamos criar um segundo jogador. Repita o processo de duplicar a bola e escolher um novo personagem a partir da galeria em costumes. Lembrando rapidamente como fazer isso:

1. clique com o botão direito do mouse na bola, na janela de Sprites, e selecione duplicate;

2. clique no ponto de interrogação ao lado do sprite recém criado e troque seu nome para Jogador 2;

3. na aba Costumes, na galeria categoria People, selecione girl3-b (ou qualquer outro que você preferir).

Para começar, vamos fazer nosso Jogador 2 apenas ficar subindo e descendo na tela. Para isso, vamos criar uma repetição infinita onde ele move-se para baixo até atingir a borda inferior e para cima até atingir a borda superior. Primeiro o posicionamos no canto direito, ao centro (x=200, y=0). O bloco novo que vamos usar é o glide (deslizar). Os outros blocos já não são mais novidade para você. Modifique o programa de seu Jogador 2 apropriadamente, e depois confira a solução na figura 8.6. Você também precisará fazer a bola reconhecer o segundo jogador, adicionando mais um bloco if then similar ao que você fez para o Jogador 1.

Figura 8.6 – Os programas para a bola e o segundo jogador

A sintaxe do bloco glide é bem simples. Você deve dizer a coordenada final para a qual seu sprite deve deslizar e em quanto tempo. Como ele foi posicionado pelo bloco goto na posição x=200, y=0, mantemos o x sempre em 200 para que ele deslize apenas na vertical e o fazemos ir até o a coordenada y=-130, para depois subir até y=130 (confira, posicionando o mouse no cenário, aonde encontram-se essas coordenadas). Como os blocos glide estão dentro de uma repetição eterna, forever, nosso Jogador 2 ficará sempre saltitando. Você pode aumentar ou diminuir o tempo do deslizamento para fazer com que ele ocorra mais devagar ou velozmente, respectivamente.

Nenhum jogo tem graça, porém, se não contarmos pontos. O Jogador 1 ganhará um ponto a cada vez em que a bola bater na borda direita e o Jogador 2, a cada vez em que a bola bater na borda esquerda. Chegou a hora de você conhecer a seção Data, dentro da aba Scripts. Nela, você irá criar uma variável (variable), como mostra a figura 8.7.

Figura 8.7 – Criando uma variável

Perceba que, ao criar uma variável, você pode fazer com que ela pertença apenas a um determinado sprite (For this sprite only) ou a todos os sprites (For all sprites). Você também pode optar por guardar a sua variável na “nuvem” (Cloud variable – stored on server) – isso é interessante, por exemplo, se você quiser manter uma tabela com os pontos dos melhores jogadores, visíveis para qualquer pessoa que acessar seu projeto. Por enquanto, vamos criar duas variáveis com o nome Eu e Computador, respectivamente. A primeira armazenará seus pontos, jogando com o Jogador 1 e a segunda os pontos do computador, jogando com o Jogador 2. Permita que as variáveis sejam acessadas por todos os sprites e, nesse momento, não a armazene na nuvem.

Quando você cria a variável Eu, imediatamente ela é exibida no cenário e novos blocos são disponibilizados. Posicione a variável Eu no canto superior esquerdo do cenário e, em seguida, ao criar a variável Computador, posicione-a no canto superior direito, como mostra a figura 8.8. Repare também, na mesma figura, que ao lado de cada variável, acima de seus blocos, há um quadrado marcado. Ao desmarcar esse quadrado, como você pode prever, a variável continua existindo, mas desaparece do cenário.

Figura 8.8 – Variáveis criadas e posicionadas

Como você fará, agora, para incrementar o placar a cada vez que a bola toca o canto oposto de cada jogador? Antes de seguir adiante, pesquise entre os blocos disponíveis em todas as seções da aba Scripts e tente, você mesmo, encontrar a solução.

Uma coisa muito bonita na comunidade Scratch e em muitas outras comunidades de programadores é que você pode aprender a partir do que já existe, usar ideias e pedaços de programas de outros desenvolvedores e modificá-los, melhorá-los e incorporá-los em seus próprios projetos. Se você pensar bem, concluirá que grande parte da evolução tecnológica acontece assim.

Desde que os primeiros satélites entraram em órbita, mesmo quando o homem foi para a lua, a quantidade de tecnologia embarcada nas espaçonaves era muito menor do que a que você dispõe hoje em seu telefone celular e infinitamente menor do que a existente nesse computador que está usando para fazer os exercícios propostos neste livro. Até hoje, o lançamento de um satélite ou ônibus espacial envolve o conhecimento desenvolvido e aprimorado por Newton (a lei da gravidade), Báskara (a fórmula da equação de segundo grau), Pitágoras (a trigonometria), Euclides, Copérnico e tantos outros que, livremente, tornaram públicas as suas descobertas. Se alguém disser a você que não pode disponibilizar os códigos de algum programa, pergunte a essa pessoa se ela não usou, na construção desse programa, coisas que lhe foram livremente disponibilizadas e, a partir de que momento, há o direito de se esconder o conhecimento de outras pessoas.

Assim, acabo de dar a dica para você encontrar a solução para o desenvolvimento de seu placar: alguém deve ter feito isso antes! Toda a historinha sobre o jogo Pong, logo no início desse capítulo, tinha o propósito de prepará-lo para esse momento. Procure, agora, no Scratch (acesse a busca a partir da página inicial http://scratch.mit.edu) e procure por Pong. Em cada projeto, clique em Ver Interior e, dentro do projeto, veja os programas para cada um de seus sprites. Nossa solução será baseada nesse projeto: http://scratch.mit.edu/projects/11759310

No lado esquerdo da janela Sprites você vê um quadrado branco onde lê Stage (cenário ou palco). É aqui que você coloca um pano de fundo (backdrop) para o seu cenário. De forma bastante similar aos sons e aos personagens (sprites), você pode optar por selecionar um backdrop a partir da galeria do Scratch, desenhar um novo, enviar um arquivo de seu computador ou tirar uma foto com sua webcam. Nós vamos clicar no segundo ícone da esquerda para a direita, o do pincel (destacado na figura 8.9) e desenhar uma linha contínua encostando na borda esquerda e outra na borda direita do cenário, cada uma de uma cor. Tenha o cuidado de não usar cores que façam parte de seus sprites já utilizados. Eu escolhi o roxo e o verde, como mostra o exemplo da figura 8.9.

Figura 8.9 – Colorindo as bordas esquerda e direita do cenário

O editor de desenhos do Scratch é meio chatinho. Ao desenhar na borda, se você deixa a linha escapar para fora do “papel” ela é, simplesmente, apagada. Assim, se você tiver um outro editor de imagens com o qual já está mais acostumado, use-o para criar o seu pano de fundo e, depois, use o ícone da pasta para enviá-lo ao Scratch. Um excelente editor de imagens, disponível para qualquer sistema operacional (Windows, Linux e Mac OS X) é o Gimp: http://gimp.org

Retornando à aba Scripts para o sprite Bola, vamos fazer com que ela, ao tocar a cor verde, incremente o placar (a variável) Eu e, ao tocar a cor roxa, incremente o placar Computador. Pense em inglês: if touching color, change variable (se tocar na cor, mude a variável) – você encontra os blocos correspondentes a essas ações, respectivamente, nas seções Sensing e Data. Repare que para selecionar a cor no bloco touching color, basta você clicar em seu próprio cenário, na cor desejada. Confira a sua solução com a mostrada na figura 8.10.

Figura 8.10 – O programa do sprite bola, modificado para contar pontos.

Salve seu programa, teste (lembre-se de sempre clicar no botão Pare para que, ao teclar a barra de espaços, ele reinicie corretamente) e anote o que deu errado, quais são as possíveis soluções e o que você ainda pode melhorar em seu programa.

Nos capítulos iniciais desse livro você trabalhou com uma receita de bolo, com um conjugador de verbos e ensinou a um amigo formas de chegar até a sua casa. Na medida em que você entrega sua receita a outras pessoas, elas podem comentar com você que faltou um determinado passo, ou que você poderia ter esclarecido melhor alguma coisa. Há verbos que não são regulares, que não são tratados por seu conjugador original. Seu amigo, ao decidir por alugar um carro, não contava que havia um acidente na estrada que o forçaria a tomar um desvio desconhecido. Programas são assim. Quanto mais pessoas os utilizam, em mais condições, novos erros são detectados e sugestões de melhorias aparecem. Você sabe que sua adaptação do Pong não está perfeita, você já detectou alguns problemas e, certamente, tem ideias para melhorá-lo.

Um número incrivelmente grande de programadores acaba desenvolvendo um perfeccionismo não muito saudável, querendo criar o programa perfeito antes de expô-lo àqueles que o irão utilizar. Aí, quando o programa é exposto, os usuários descobrem problemas e dão sugestões que acabam obrigando o programador a fazer mudanças profundas em seu projeto. Não caia nessa armadilha. Assim que seu programa estiver minimamente funcional, apresente-o a seu público-alvo e já comece a implementar, de imediato, as sugestões recebidas. Hoje é muito fácil publicar seu programa na internet e receber sugestões. No apêndice desse livro, o capítulo “Publicando seu programa na internet” mostra algumas maneiras de como fazer isso.

Uma coisa que você notou é que o placar sempre adiciona mais de um ponto quando a bola atinge a barra colorida. Isso é porque a bola fica tocando, por muito tempo, a cor e, por isso, incrementa mais do que uma vez o placar. Outra coisa é que, no jogo Pong original, os jogadores apenas movimentam-se na vertical, enquanto o seu jogador simplesmente segue o mouse. E o jogador que representa o computador fica apenas subindo e descendo, é possível torná-lo mais inteligente? Por fim, esse jogo vai durar uma eternidade? O que mais você pode melhorar? Veja em “Respostas aos Exercícios” algumas possibilidades de melhoras para nosso remix do jogo Pong.

Publicado originalmente em cesarbrod.tumblr.com