If you're seeing this message, it means we're having trouble loading external resources on our website.

Se você está atrás de um filtro da Web, certifique-se que os domínios *.kastatic.org e *.kasandbox.org estão desbloqueados.

Conteúdo principal

O personagem castor

Vamos começar fazendo nosso personagem, o castor saltitante. Iremos usar o design orientado a objeto, discutido neste tutorial, para descrever nosso personagem Beaver (Castor).
Na criação de um personagem de jogo devemos pensar sobre quais propriedades e comportamentos ele deve ter. Por exemplo, nosso castor deve manter registro da sua posição x e o y e quantos gravetos ele coletou. Ele também precisa de dois comportamentos: saltar, que faz com que ele pule um pouco para cima, e cair, que faz cair um pouco.
É assim que ele deve parecer, como um objeto:
Porém aquele programa não faz um bom trabalho na verificação dos diferentes comportamentos - não é animado, então só podemos vê-lo em um estado. Vamos adicionar a função draw, para que possamos falar para o castor fazer diferentes coisas dependendo da interação do usuário. Para este jogo queremos que o castor pule sempre que a tecla de espaço for pressionada. Isso pode ser implementado de uma maneira simples:
draw = function() {
    background(255, 255, 255);
    if (keyIsPressed && keyCode === 0) {
        beaver.hop();
    } else {
        beaver.fall();
    }
    beaver.draw();
};
Isso é um código bastante eficaz, mas se o rodarmos teríamos que continuamente apertar nossa barra de espaço para impedir que o castor pulasse fora de nossa tela para sempre, para nunca retornar. Nós devemos restringir os valores de y para um valor razoável, para manter o castor na tela. Isso é bastante comum nos jogos, manter o personagem no "mundo do jogo". Podemos fazer isso usando constrain na função draw, passando para ela um mínimo e máximo apropriados.
 this.y = constrain(this.y, 0, height-50);
Agora, aqui está nosso programa, com um castor que pula e cai, controlado pelo teclado. Brinque um pouco mais com ele!!

Quer participar da conversa?

  • Avatar male robot donald style do usuário Ildebrando Silva
    Criei um diretório com uma pasta js e o arquivo processing.js esta nesta pasta. criei outra pasta com imagens e tentei de todas as formas buscar uma imagem desta pasta imagens, definitivamente o comando getImage não funciona, o loadImage não funciona no prototype.

    enfim, se eu não estiver no ambiente da Khan eu não programo! (risos).

    Alguém pode me ajudar??

    I created a directory with a js folder and the processing.js file is in this folder. I created another folder with images and tried in every way to get an image of this folder images, definitely getImage command does not work, loadImage does not work in prototype.

    Anyway, if I'm not in Khan's environment I do not program ! (laughs).

    Can someone help me??

    a tradução é do google

    google translater
    (4 votos)
    Avatar Default Khan Academy avatar do usuário
  • Avatar starky tree style do usuário miguelfigueredodias
    eu estou confuso com o "constrain", ele está limitando a variável?
    (4 votos)
    Avatar Default Khan Academy avatar do usuário
  • Avatar starky tree style do usuário Andrey Mds
    Por que, na linha 28, se alterarmos o número 32 para qualquer outro o Castor não se mexe?
    (3 votos)
    Avatar Default Khan Academy avatar do usuário
    • Avatar hopper cool style do usuário MarceloOP ©
      Porque 32 corresponde a tecla espaço. Você encontra esta relação na tabela ASCII. Pesquise no google sobre esta tabela. Eu já fiz um vídeo sobre isso. Está em meu canal no youtube, aula sobre textos. O endereço está no meu perfil da khan.
      (3 votos)
  • Avatar piceratops ultimate style do usuário Daniel De Santana Sforzim
    Realmente muito difícil, este desafio está fora da curva de aprendizagem a que se destina o curso. Infelizmente eu, e muitos outros não conseguirão concluir o curso por conta deste desafio fora do contexto, que pena!
    (3 votos)
    Avatar Default Khan Academy avatar do usuário
Você entende inglês? Clique aqui para ver mais debates na versão em inglês do site da Khan Academy.