Conteúdo principal
Programação
Curso: Programação > Unidade 4
Lição 4: Criando um jogo em 2D: Hoppy, o Castor SaltitanteO 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?
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)
Para usar o processing.js fora da khan academy você precisa fazer pequenas modificações no programa, aliás o processing.js está desatualizado, hoje se usa o p5.js.
Talvez estes vídeos possam ajudar você neste assunto:https://www.youtube.com/watch?v=OG5Gg1gyKWc
https://www.youtube.com/watch?v=UiH-Uf8I5xw
https://www.youtube.com/watch?v=T_Y3s9p5IlM
(copie e cole no seu navegador)(4 votos)
eu estou confuso com o "constrain", ele está limitando a variável?(4 votos)- Por que, na linha 28, se alterarmos o número 32 para qualquer outro o Castor não se mexe?(3 votos)
- 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)
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)