Ambiente da floresta

Este jogo é um clássico 2D de "rolagem lateral": isso significa que nós estamos olhando para ele de perfil e o personagem está apenas se movendo para a frente ou para trás. Mas sempre queremos nosso personagem no centro da tela, então simulamos o movimento aparente do personagem, movendo o fundo atrás do personagem. É um truque, mas funciona!

Para começar, vamos desenhar apenas as partes que não mostram qualquer movimento, o céu azul e a terra marrom:

draw = function() {
    background(227, 254, 255);
    fill(130, 79, 43);
    rect(0, height*0.90, width, height*0.10);
    // ...
}

Agora, para criar a aparência de rolagem lateral, vamos adicionar grama, usando a imagem de grama da biblioteca de imagem. Uma maneira de criar este ambiente em movimento seria fazer de conta que nossa tela tem 3000 pixels de largura, que essa é a largura do nosso nível, e desenhar quantos blocos de grama fossem necessários para preencher os 3000 pixels, movendo-os a cada intervalo de tempo. No entanto, isso não é muito eficiente e, na programação de jogos, temos a tendência de nos importarmos muito com eficiência. Em vez disso, vamos usar o conceito de "tile" e "snake" com as imagens de grama. Vamos desenhar apenas a quantidade que precisamos para atravessar a tela de 400 pixels, e então quando um bloco cair do lado esquerdo da tela a direita, nós imediatamente o colocamos de volta no lado direito da tela e continuamos a fazer isso para sempre.

Para isso, vamos começar inicializando um array com nossas posições para os blocos de grama:

var grassXs = [];
for (var i = 0; i < 25; i++) {
    grassXs.push(i*20);
}

Então, dentro do nosso laço, vamos desenhar cada um deles:

for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
}

Isso parece bom para uma cena parada, mas queremos movimento! Então podemos apenas subtrair um de cada posição de grama a cada iteração, movendo-as 1 pixel para a esquerda.

for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
    grassXs[i] -= 1;
}

Agora a grama estará em movimento, mas uma hora vai desaparecer, quando os valores de x se tornarem cada vez mais negativos. Lembre-se, nós queremos um efeito "snake" nos blocos - queremos levá-los para o lado direito da tela, quando caírem para fora do lado esquerdo. Para isso, vamos verificar se estamos suficientemente fora da tela (lembre-se que nossas imagens são desenhadas a partir do canto superior esquerdo) e definimos o valor de x como a largura da tela neste caso:

for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
    grassXs[i] -= 1;
    if (grassXs[i] <= -20) {
        grassXs[i] = width;
    }
}

Juntando tudo isso, agora temos um castor que parece estar se movendo enquanto salta. Mágica!

Ok, nós temos um castor pulando e se movendo em um ambiente 2D de "rolagem lateral". Mas não há nada para o castor fazer lá! Nós precisamos adicionar algumas varetas para serem coletadas pelo castor.

Vamos pensar um pouco sobre as varetas, já que precisamos decidir como programá-las:

Cada vareta tem uma posição x e y. Nós provavelmente queremos as posições x distribuídas por uma certa quantidade (possivelmente constante ou aleatória dentro de um certo intervalo), e queremos as posições y aleatórias dentro de um certo intervalo, de forma que o usuário tenha controle do salto e queda do castor.
As varetas devem ter o mesmo movimento aparente como a grama, mas elas não devem ter o efeito de "snake". Uma vez que uma vareta está fora da tela, ela se vai para sempre.
Deve haver um certo número de varetas por nível - em um dado momento deve parar de haver varetas.

Poderíamos programar nossas varetas de várias maneiras, mas elas parecem bastante complexas, então vamos modelá-las com um objeto, como modelamos nosso personagem castor:

var Stick = function(x, y) {
    this.x = x;
    this.y = y;
};

Stick.prototype.draw = function() {
    fill(89, 71, 0);
    rect(this.x, this.y, 5, 40);
};

Então, antes do nosso jogo começar - depois de inicializar nosso castor - vamos criar um array de 40 varetas, com deslocamento constante e y aleatório:

var sticks = [];
for (var i = 0; i < 40; i++) {  
    sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}

Agora podemos desenhar as varetas - da mesma forma que desenhamos a grama, mas sem a reposição quando ela sair da tela:

for (var i = 0; i < sticks.length; i++) {
    sticks[i].draw();
    sticks[i].x -= 1;
}

Aqui está, com as varetas desenhadas com esse código. Tente pular para elas! O que acontece? Nada! Vamos consertar isso logo...

Quer participar da conversa?

Entrar

Classificar por:

Claudio Valdez Ribeiro
Publicado há há 7 anos. Link direto para a postagem “nao entendi oque e para f...” de Claudio Valdez Ribeiro
nao entendi oque e para fazer no desifio:pong
Botão para a página de cadastroComentar sobre a postagem “nao entendi oque e para f...” de Claudio Valdez Ribeiro
(2 votos)
Resposta

Você entende inglês? Clique aqui para ver mais debates na versão em inglês do site da Khan Academy.