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

Introdução ao Castor Saltitante

Vamos criar um jogo chamado Hoppy, o Castor Saltitante. Ele é bem parecido com um jogo do qual você já deve ter ouvido falar, o Flappy Bird, mas ele tem suas diferenças. Nesse jogo, o usuário controla um castor, fazendo com que ele suba e desça para apanhar as varetas para fazer sua toca. É assim que ele vai ficar:
Vamos ver como faremos esse jogo, passo a passo.
Primeiramente, vamos pensar sobre os componentes do jogo - que são encontrados em muitos jogos:
  • O personagem: Temos apenas um personagem, que é o castor. Este personagem realiza ações diferentes, como pular e cair, e teremos que implementá-las.
  • Personagens não controláveis: Muitos jogos têm personagens não controláveis, chamados "NPCs", que agem conforme uma programação predeterminada, e representam um obstáculo para o personagem. Mas nesse jogo o único obstáculo é o próprio ambiente, e não há NPCs. Isso simplifica as coisas!
  • Ambiente: Esse é um jogo que se passa em um mundo 2D, no qual o personagem se desloca em um ambiente com apenas duas dimensões, com um céu azul, o chão, e a grama. O céu é cheio de varetas que podem ser coletadas.
  • Missão: O castor deve pular para apanhar as varetas, e ele não pode pular muito alto, nem muito baixo, senão ele não vai conseguir apanhá-las. O objetivo é chegar ao final da fase com um número suficiente de varetas para construir uma toca.
Sempre que você for criar um jogo, você deve pensar nos componentes, como fizemos agora. Na realidade, a documentação do design de um jogo geralmente tem muitas páginas - fizemos uma versão bem simplificada aqui, apenas como um exemplo. Agora vamos implementar cada componente do jogo, seguindo o que planejamos.

Quer participar da conversa?

  • Avatar mr pink red style do usuário Guilherme Mariani
    e se eu quizesse criar um jogo o que eu preciso
    (4 votos)
    Avatar Default Khan Academy avatar do usuário
    • Avatar male robot hal style do usuário Felipe
      3D ou 2D? 2D tem varias formas, 3D você vai precisar de desempenho, uma linguagem de programação boa pra isso é o C++. Se for pra desktop, use o openGL, Web, você vai precisar estudar o webGL. 2D você pode usar praticamente qualquer linguagem de programação, inclusive JS. Como fazer tem varas formas. Cite um exemplo do tipo de jogo que você quer (Plataforma, se é web, mobile ou desktop; Linguagem de programação que quer usar, etc)
      (11 votos)
  • Avatar blobby green style do usuário vinicius.sr.90v
    os códigos só funcionam aqui no site ? porquê tento fazer no sublime e não funciona!Obrigado :]
    (3 votos)
    Avatar Default Khan Academy avatar do usuário
    • Avatar piceratops ultimate style do usuário Tiago LPB
      O código funciona em qualquer página Web que possua JavaScript habilitado. Aqui, estamos aprendendo a usar a biblioteca Processing do JavaScript. Até agora, eu já aprendi HTML, CSS e os desenhos e jogos em JavaScript. Vou ter que estudar mais para aprender como colocar essas animações dentro de um código HTML, mas não se preocupe, pois não precisaremos desaprender nada, apenas continuar aprendendo como juntar todas as coisas em uma página incrível!
      (1 voto)
  • Avatar spunky sam blue style do usuário bi18.gabrielpspaulusi
    como nós criamos jogos em 2d
    (3 votos)
    Avatar Default Khan Academy avatar do usuário
  • Avatar duskpin ultimate style do usuário pet.francieledaires
    como eu faço pra jogar ?
    (3 votos)
    Avatar Default Khan Academy avatar do usuário
  • Avatar piceratops seed style do usuário Luana Souza
    isso que esta relatando e so sobre o jogo ou para nos fazermos um?
    (2 votos)
    Avatar Default Khan Academy avatar do usuário
  • Avatar leaf green style do usuário Vicente Liumba
    faca um programa que leia numerous inteiros de 2 a 12
    (1 voto)
    Avatar Default Khan Academy avatar do usuário
  • Avatar hopper cool style do usuário Othavio Diogo R.L
    eu não entendi esses "draws " novas
    (1 voto)
    Avatar Default Khan Academy avatar do usuário
  • Avatar duskpin ultimate style do usuário LUANSILVA
    como voçes criam as atividades?
    (1 voto)
    Avatar Default Khan Academy avatar do usuário
  • Avatar blobby green style do usuário marcovaldo
    alguém sabe resolver o problema que eu tenho com esse codigo
    m.prototype.draw = function (){
    fill(255, 0, 0);
    this.y = constrain(this.y,0,width-50);
    this.x = constrain(this.x,0,width-50);
    image(this.i,this.x,this.y,10,10);
    };
    (1 voto)
    Avatar Default Khan Academy avatar do usuário
  • Avatar blobby green style do usuário jpbanshop
    Alguém tem a solução do exercício da Corrida do coelho que salta?
    onClick: function() {
    rabbits[i].FALTA UM COMANDO AQUI();
    (1 voto)
    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.