Neste guia vamos ensinar como fazer um jogo no Scratch passo a passo. Vamos criar um jogo de corrida no estilo Fórmula 1, pegue sua direção, aqueça os motores e desvie dos carros para não bater.
Com o Scratch qualquer criança ou adulto consegue dar vida as suas ideias e a sua imaginação. Com um pouco de prática é possível criar jogos que antes a gente só podia jogar no video game.
Com o Scratch podemos criar jogos em diversos estilos, como este de corrida, jogos de plataforma, tais com Mario Bros. Também é possível fazer jogos de aventura, ação e até mesmo jogos em 3 dimensões.
O mais incrível de tudo isso é que qualquer pessoa, crianças a partir de 8 anos ou adultos, podem criar o jogo, algo impossível de se imaginar anos atrás.
Com uma linguagem de programação visual onde os comandos são como peças de um quebra-cabeça, você criar seus programas de maneira simples e intuitiva.
Além disso, você estará aprendendo lógica de programação e diversos conceitos computacionais quase sem perceber enquanto brinca e se diverte.
Como Fazer um Jogo no Scratch Passo a Passo
COMO SERÁ O JOGO DE CORRIDA
Hoje vamos aprender como fazer um jogo no Scratch passo a passo, nosso jogo será de corrida no estilo da Fórmula 1.
Quando o jogo começar você deve ultrapassar os seus adversários que vão surgir na pista.
É preciso desviar dos carros e passar por eles com cuidado, se o seu carro bater no adversário o jogo acaba.
Devemos usar as setas do teclado para desviar dos carros adversários, quando os carros batem durante a corrida eles explodem e pegam fogo, quando isso acontecer a corrida acaba e o jogo é encerrado.
Além de aprender a fazer um jogo de corrida passo a passo no Scratch você também pode brincar com ele acessando o link abaixo:
https://scratch.mit.edu/projects/464274068
Além disso, você pode ver todo o código usado em sua programação, você pode estudar, aprender ou melhorar este jogo de corrida no Scratch.
ABRINDO O EDITOR DO SCRATCH
Para criar nosso jogo precisamos abrir o editor de programa do Scratch, podemos fazer isso de duas formas, pelo site do Scratch (link abaixo) ou usando o editor offline instalado no computador.
Para aprender a abrir e usar o editor leia o post abaixo antes de prosseguir e aprender como criar um jogo do Scratch passo a passo.
Como usar o Scratch? Usar a plataforma do Scratch é bem fácil, mas aprender a lógica de programação para criar jogos ou animações precisa de um pouco mais de prática e orientação.
Esta é uma das grandes dúvidas de quem quer começar a aprender ou ensinar programação usando o Scratch.
Mas vamos ajudar você nessa jornada, primeiro mostrando como o Scratch funciona e depois você vai criar seu primeiro programa.
CRIANDO OS CARROS DE CORRIDA
Com o editor do Scratch aberto, vamos precisar criar nossos personagens, ou atores, que serão os carros de corrida.
Quando abrimos o editor do Scratch veremos que já existe um personagem, ou ator, que é o gato do Scratch, nesse jogo não vamos utilizar ele, desta forma vamos remover ele do jogo.
Para eliminar um ator da sua animação ou jogo, basta clicar no ícone da lixeira que fica sobre o personagem na sessão do Ator:
Ao invés de usar um ator da biblioteca do Scratch nós vamos criar nossos próprios carros de corrida.
Para isso vamos usar o editor de fantasias do Scratch, posicione o mouse sobre o ícone “Selecione um Ator” e quando as opões aparecerem na tela clique em “Pintar”:
Depois de escolher a opção “Pintar” o editor irá abrir…
Escolhendo a Cor do Carro
Para criar nosso jogo no Scratch vamos precisar desenhar o nosso carro de corrida, vamos desenhar o aerofólio dianteiro, o cockpit, o aerofólio traseiro e também as rodas.
Clique na opção “Preencher” e “Contornar” para escolher a cor do seu carro, escolha também a espessura do contorno. Aqui escolhi a cor vermelha e a escpessura 2:
Desenhando o Cockpit
O próximo passo é desenhar o carro, vamos fazer o aerofólio dianteiro, o cockpit e o aerofólio traseiro.
Para isso selecione a opção de desenho “Retângulo” e com o mouse faça um retângulo estreito no centro da área de desenho, este será o aerofólio dianteiro.
Agora o cockpit, desenhe um quadrado abaixo do aerofólio dianteiro, deixe um espaço entre o aerofólio e o cockpit.
E o aerofólio traseiro ficará abaixo do cockpit, faça outro retângulo estreito e deixe um espaço menor entre o cockpit e o aerofólio traseiro.
Agora vamos usar o comando “Linha” para desenhar a parte do carro que une o cockpit ao aerofólio dianteiro, faça uma figura parecida com um triângulo, unindo todas as 4 pontas para que consiga preencher e desenhar seu interior:
Escolha a opção “Preencher” e clique sobre a parte dianteira do cockpit que acabou de desenhar:
Para acabar de desenhar nosso carro precisamos agora fazer a junção do cockpit com o aerofólio traseiro. Escolha novamente a opção “Retângulo” e desenhe um retângulo um pouco mais estreito entre o cockpit e o aerofólio traseiro:
Desenhando as Rodas
O último passo agora para terminar o nosso carro é desenhar as rodas. Para desenhar as rodas vamos primeiro escolher a cor preta, selecione o opção “Preencher” e “Contornar” e escolha a cor preta:
Depois de selecionar a cor escolha o comando “Retângulo” e desenhe as rodas dianteiras e as traseiras, estas um pouco mais largas que as dianteiras:
Desenhando a Explosão
Em nosso jogo de corrida no Scratch quando o carro se chocar com um adversário ele irá explodir e pegar fogo, vamos agora desenhar esta explosão.
Clique com o botão direito do mouse sobre a “fantasia” que criamos, quando o menu aparecer escolha a opção “Duplicar”:
Temos agora duas fantasias, a número 1 e a número 2, clique sobre a fantasia número 2 para selecioná-la, nela é onde iremos desenhar a explosão.
Na opção “Preencher” e “Contornar” escolha a cor laranja:
A explosão será em duas camadas de cores, a primeira é a laranja, que escolhemos agora, e a segunda será a amarela.
A camada laranja será a debaixo, vamos desenhar ela primeiro fazendo dois triângulos com o comando “Linha”.
Não se esqueça de deixar todos os pontos conectados para que possamos preenchê-los:
Completando o desenho da primeira camada da explosão, selecione a opção “Preencher” e clique sobre os triângulos que desenhou para pintá-los de laranja:
Repetiremos os mesmos passos, agora para fazer a segunda camada da explosão, a camada amarela.
Dessa vez na opção “Preencher” e “Contornar” escolha a cor amarela:
Desenharemos agora a camada amarela, ela ficará sobre a laranja e também vamos criá-la fazendo dois triângulos com o comando “Linha”:
Finalizaremos o desenho da explosão pintando os triângulos de amarelo, selecione a opção “Preencher” e clique sobre os triângulos vazios:
Chamas da Explosão
Para criar a sensação de chamas e do fogo após a explosão vamos criar uma nova fantasia e fazer o desenho da explosão um pouco diferente da primeira.
Com o botão direito do mouse clique sobre a fantasia com o desenho da explosão e escolha a opção “Duplicar”:
Uma terceira fantasia será criada, nela vamos fazer alguns ajustes no desenho das chamas.
No editor existe uma opção chamada “Remodelar”, é o botão onde mostra uma seta com uma bolinha na ponta, selecione ela e clique sobre o desenho da explosão:
O comando “Remodelar” permite que você possa alterar o desenho que fez simplesmente clicando sobre as “bolinhas” que aparecem na figura e arrastando com o mouse.
Escolha cada um dos triângulos que desenhou, tanto os laranjas como os amarelos, e altere um pouco o formato de cada um deles até que os desenhos fiquem diferentes um dos outros.
Abaixo você verá a explosão da fantasia original e a explosão da fantasia com o desenho alterado:
Adversários de Corrida
Como em toda boa corrida, neste passo a passo para fazer um jogo no Scratch a corrida também não vai ser fácil, os adversários tentarão nos impedir de completar a prova. Até agora criamos o nosso carro, agora vamos criar o carro dos nossos concorrentes.
Será muito fácil criar o carro dos adversários, depois de criar o nosso carro vá até a área dos personagens, ou atores, e clique com o botão direito sobre o nosso carro.
Quando o menu aparecer selecione a opção “Duplicar”:
Isso fará com que tenhamos 2 carros, se você quiser pode ir até a aba “Fantasias” e pintar o carro dos adversários de outra cor, aqui nosso carro será o vermelho e o carro dos adversários será azul:
DESENHANDO A PISTA DE CORRIDA
Os carros precisam de uma pista para correr e é isso que vamos fazer agora, a nossa pista de corrida será um palco que criaremos em nosso jogo, para isso vá no ícone “Selecionar Cenário” e escolha a opção “Pintar”:
Vamos desenhar o asfalto de cinza e também os canteiros de grama verde, selecione a cor cinza clicando na opção “Preencher”:
Em seguida clique no ícone “Retângulo” para desenhar a pista de corrida, vá na área de desenho e crie um quadrado bem grande:
Em ambos os lados da pista teremos um canteiro de grama verde, para desenhá-los vamos primeiro selecionar a cor verde na opção “Preencher”:
Depois de escolher a cor selecione a opção “Retângulo” e desenhe dois retângulos, um em cada lado da pista:
Muito bem, agora nosso cenário está completo ! Vamos para a próxima fase que é desenhar a “zebra” da nossa pista.
DESENHANDO A "ZEBRA"
Agora vamos seguir este passo a passo para desenhar a “zebra” em nosso jogoo de corrida no Scratch.
A “zebra” de nossa pista de corrida é o último elemento que precisamos criar em nosso jogo. Ela serve para definir os limites laterais da pista e também dar a sensação de que os carros estão correndo em alta velocidade.
A nossa “zebra” não será fixa, ela se movimentará para dar a impressão de que os carros estão correndo, por isso elas devem ser criadas como um “Ator” e não como um desenho no cenário.
Precisamos criar duas “zebras”, uma para cada lado da pista, para isso vá no ícone “Selecione um Ator” e em seguida escolha “Pintar”:
Para desenhar a “zebra” precisamos fazer vários retângulos que ficarão um abaixo do outro, alternando entre as cores branco e vermelho:
Um jeito fácil de desenhar a “zebra” é criar um retângulo e depois usar a opção “Copiar” e em seguida a opção “Colar”:
Depois que copiar o segundo retângulo, selecione a opção “Preencher” e altere sua cor para vermelho. Faça isso até ter uma coluna inteira de retângulos com as cores branca e vermelha.
Para dar a sensação de movimento precisamos duplicar o cenário onde criamos nossa “zebra”, para isso clique com o botão direito do mouse na “Fantasia” e selecione “Duplicar”:
Selecione agora o segundo cenário e troque as cores de cada retângulo da “zebra”, o retângulo que tinha a cor branca mude para vermelha e o retângulo que tinha a cor vermelha mude para a cor branca.
Assim teremos duas “fantasias” para o mesmo ator, porém com cores alternadas:
E por último vamos criar a “zebra” para o outro lado da pista, ao invés de desenhar toda a “zebra” novamente vamos simplesmente duplicar o ator.
Clique com o botão direito do mouse sobre o ator da “zebra” e escolha a opção “Duplicar”:
Selecione o novo ator, vá na aba “Fantasias” e apenas mova a “zebra” para que fique do outro lado da pista.
Excelente, agora vamos para a programação do nosso jogo !
INICIANDO O JOGO
O jogo vai começar quando a bandeira verde for clicada, a partir daí nosso carro irá correr em alta velocidade. Para criar a sensação de que o carro está correndo vamos fazer com que as fantasias das “zebras” se alternem.
Selecione o ator “zebra” e vá na aba “Código”:
Vá no conjunto de comandos “Eventos”, selecione o comando “Quando bandeira for clicado” e arraste para a área de programação:
Vá no conjunto de comandos “Aparência”, escolha o comando “mude para a fantasia”, encaixe no comando anterior e escolha a “fantasia1”:
Agora vamos fazer as fantasias mudarem, vá no conjunto de comandos “Controle”, selecione o comando “Sempre” e encaixe no bloco de comandos:
Antes de mudar a fantasia precisamos esperar alguns instantes, para isso vá no conjunto “Controle”, selecione o comando “Espere seg”, coloque dentro do comando “Sempre” e altere o valor para 0.05 segundos:
Por último, vá no conjunto “Aparência”, selecione o comando “Próxima fantasia” e encaixe abaixo do comando anterior:
Repita o mesmo processo e criando a mesma sequência de comandos no ator da outra “zebra”.
Agora clique na bandeira verde e veja se o carro começou a correr na pista!
MOVENDO E CONTROLANDO O CARRO
Vamos programar a direção do nosso carro, para isso vamos usar as setas do teclado, quando a seta para a direita for clicada o carro deve se mover para a direita e quando a seta da esquerda for clicada o carro deve ir para a esquerda.
Para começar a programar clique sobre o ator do carro e selecione a aba “Código”:
Selecione o grupo de comandos “Eventos” e escolha o comando “Quando a tecla for pressionada”.
Arraste o comando para a área de programação e altere a opção “espaço” para “seta para a direita”:
Agora vá no conjunto de comandos “Movimento” e escolha o comando “adicione a x”, este comando irá fazer com que o ator se mova horizontalmente na tela, alterando sua coordenada X.
Arraste o comando para a área de programação, encaixando abaixo do comando anterior, e altere o valor da coordenada para 10:
Esses dois comandos farão com que o carro se mova um pouco para a direita toda vez que a seta para a direita for clicada.
Agora vamos fazer o mesmo, porém para a esquerda, clique com o botão direito do mouse sobre a sequência de comandos anteriores e escolha “Duplicar”:
Altere a opção “seta para a direita” para “seta para a esquerda” e também de “10” para “-10” no valor da coordenada:
CORRENDO COM OS ADVERSÁRIOS
Durante a corrida precisamos desviar e ultrapassar nossos adversários para não batermos o nosso carro.
Os adversários aparecerão em qualquer lugar da pista e a qualquer momento.
Selecione agora o ator que será o carro adversário, vá no conjunto de comandos “Eventos” e selecione o comando “Quando bandeira for clicado”:
Vá agora no conjunto de comandos “Aparência”, escolha os comandos “Esconda” e “Mude para a fantasia”, encaixe todos em uma sequência na área de programação:
Os adversários irão aparecer enquanto o jogo não terminar, para isso vá no conjunto de comandos “Controle”, selecione o comando “Sempre” e encaixe na sequência de comandos:
Não sabemos exatamente quando os adversários irão aparecer, para aguardar de forma aleatória vá no conjunto de comandos “Controle”, selecione o comando “Espere seg” e encaixe dentro do comando “Sempre”.
Vá no conjunto de comandos “Operadores”, escolha o comando “número aleatório entre 0 e 2” e encaixe dentro do comando “Espere seg”:
Isso fará com que os carros adversários apareçam aleatoriamente, variando de 0 a 2 segundos para surgirem.
Em seguida vá no conjunto de comandos “Aparência”, selecione o comando “Mostre” e encaixe abaixo do comando anterior:
Movendo os Adversários
Precisamos fazer com que os carros adversários apareçam dentro e se movam dentro da pista, não saindo para os canteiros ultrapassando as “zebras”.
Dessa forma, precisamos descobrir quais são os limites laterais da pista, para isso posicione o carro adversário ao lado de uma das “zebras” e veja qual o valor da coordenada “x” é mostrada (neste exemplo a coordenada “x” é -114):
Uma vez que sabemos a coordenada “x” limite de um dos lados precisamos descobrir a coordenada “x” limite do lado oposto.
Repita o processo, posicione o carro na “zebra” contrária e veja qual o valor da coordenada “x” (neste exemplo a coordenada “x” é 124):
Já que sabemos os limites laterais podemos fazer o carro adversário aparecer e se mover na pista.
Vá no conjunto de comandos “Movimento”, selecione o comando “Vá para x: y:”, encaixo abaixo do comando anterior e coloque o valor “190” na coordenada “y”, onde 190 é topo da pista de corrida.
No conjunto de comandos “Operadores” escolha o comando “Número aleatório entre”, encaixe dentro da coordenada “x” do comando anterior e informe os limites das coordenadas “x”, em nosso exemplo os valores seriam “-114” e “124”:
Os adversários irão se mover para a parte inferior da pista em um sentido aleatório e em velocidades diferentes.
Para criar esse efeito vá no conjunto de comandos “Movimento”, escolha o comando “deslize por segs até x: y:”.
Agora no conjunto de comandos “Operadores” selecione duas vezes o comando “Número aleatório entre”.
O primeiro encaixe dentro do parâmetro “segundos” do comando “Deslize” e o segundo coloque dentro do parâmetro “x”.
Informe o valor “-200” no parâmetro “y” do comando “Deslize”, o parâmetro “y” é a coordenada que define o limite inferior da pista:
Quando o carro adversário chegar ao final da pista ele irá desaparecer, para isso, vá no conjunto “Aparência”, escolha o comando “Esconda” e encaixe abaixo da sequência de comandos:
Pronto, agora estamos quase chegando ao final. Clique na “bandeira verde” para testar o jogo até aqui. Veja se o carro está correndo, virando, verifique também se os adversários estão aparecendo e se consegue ultrapassá-los.
FIM DO JOGO E EXPLOSÃO
Esta é a última parte da programação do nosso jogo, se o seu carro bater em um adversário os carros irão explodir e o jogo irá terminar.
Selecione o ator que representa o seu carro, vá na aba “Código”, no conjunto de comandos “Eventos”, selecione o comando “Quando bandeira for clicado” e arraste para a área de programação.
Agora vá no conjunto de comandos “Aparência”, selecione o comando “Mude para a fantasia”, encaixe no comando anterior e selecione a fantasia 1:
Ao longo do jogo precisamos sempre verificar se o nosso carro bateu em um adversário, para isso vá no conjunto de comandos “Controle”, escolha o comando “Sempre” e encaixe na sequência de comandos:
Ainda no conjunto de comandos “Controle”, escolha o comando “Se, então” e encaixe dentro do comando “Sempre”.
Agora precisamos verificar se nosso carro bateu no adversário, para isso vá no conjunto de comandos “Sensores”, escolha o comando “Tocando em ?”, encaixe dentro do parâmetro do comando “Se, então” e altere seu valor para o ator do carro adversário:
Informando o Fim do Jogo
Se o nosso carro bater no adversário precisamos informar para todos os outros atores que o jogo chegou ao fim e que nenhum outro comando deve ser executado.
Para isso vá no conjunto de comandos “Eventos”, escolha o comando “Transmita” e encaixe dentro do comando “Se, então”.
Dentro do comando “Transmita” selecione “Nova mensagem” e crie a mensagem “Fim”:
Além disso vamos fazer o nosso carro explodir, para criar esse efeito vamos fazer com que as fantasias da explosão do carro alternem de tempos em tempos.
Vá no conjunto de comandos “Controle”, selecione o comando “Sempre” e encaixe abaixo do comando anterior.
Agora vá no conjunto “Aparência”, selecione duas vezes o comando “Mude para a fantasia”, encaixe as duas dentro do comando “Sempre”, na primeira escolha a “fantasia 2” e na segunda a “fantasia 3”.
Vamos agora informar um intervalo de tempo para que as fantasias mudem, vá no conjunto de comandos “Controle”, escolha o comando “Espere seg”, encaixe entre os dois comandos “Mude para a fantasia” e ajuste o tempo para 0.2 segundos:
Explosão no Adversário
Agora vamos fazer o efeito da explosão também no carro adversário, isso irá acontecer quando o ator receber a mensagem “Fim”.
Selecione o ator do carro adversário, vá no conjunto de comandos “Eventos”, selecione o comando “Quando eu receber”, arraste para a área de programação e altere o parâmetro para “Fim”.
Nesse momento o carro adversário não poderá executar mais nenhuma ação, para fazer isso vá no conjunto de comandos “Controle”, selecione o comando “Pare”, encaixe após o comando anterior e altere o seu parâmetro para “outros scripts no ator”:
Da mesma forma que fizemos no nosso carro vamos criar o efeito de explosão com as fantasias que criamos.
Vá no conjunto de comandos “Controle”, selecione o comando “Sempre” e encaixe na sequência de comandos anterior:
Vá no conjunto de comandos “Aparência”, selecione duas vezes o comando “Mude para a fantasia” e encaixe dentro do comando “Sempre”.
Vamos colocar um intervalo de tempo entre as mudanças de fantasias, vá em “Controle”, selecione o comando “Espere seg”, encaixe entre os dois comandos “Mude para a fantasia” e altere o intervalo de tempo para 0.2 segundos:
Parando de Correr
E por último vamos fazer com que os carros parem de andar na pista, para isso vamos fazer com que os comandos das “zebras” não sejam mais executados.
Selecione o ator que representa a “zebra” e clique na aba “Código”:
Para isso vá no conjunto de comandos “Eventos”, selecione o comando “Quando eu receber”, arraste para a área de programação e altere o valor do parâmetro para “Fim”.
Por fim, vá no conjunto de comandos “Controle”, selecione o comando “Pare”, encaixe no comando anterior e altere seu parâmetro para “outros scripts no ator”:
Coloque esta mesma sequência de comandos no ator da outra “zebra” para que ambos parem de se mover quando o jogo acabar.
JOGUE E SE DIVIRTA
Parabéns você finalizou o jogo de corrida !!!
Depois de aprender e trabalhar tanto você merece um merecido descanço e distração.
Se prepare, aqueça os motores e vá para a pista !!!
Não se esqueça de que você pode melhorar ainda mais esse jogo, veja o que gostaria de fazer e tente programar estas mudanças.
Boa sorte, você consegue !
