Olá pessoal. Bem vindos ao Blog do Parahyba. Esta é minha primeira postagem e, como vocês já devem ter percebido, essa série de posts é voltada para quem está aprendendo a programar. Javascript é considerada uma boa linguagem para isso e criar jogos é excelente para treinar o raciocínio lógico. Então vamos lá.
Conduzirei essa série de posts tendo em vista alguns pontos que são importantíssimos para quem está aprendendo a programar:
- Utilização dos recursos principais de qualquer linguagem de programação (variáveis, condicionais, loops, e arrays);
- Organização de código;
- Estruturação de dados;
- Lógica... muita lógica;
- Prática.... muita prática;
- E leitura. É impressionante como a maior dificuldade dos novos desenvolvedores é a dificuldade com a leitura. Então vamos com calma.
Para quem não sabe, Arkanoide é o nome dado aos jogos de quebrar barrinhas:
Ele foi criado no ano em que eu nasci, em 1986, pela Taito, e eu tive tempo de jogar bastante esse joguinho. Então, não tem desculpa. Se nunca jogou, lhe aconselho a procurar na internet para que você possa entender o que vamos fazer daqui pra frente. Garanto que é diversão garantida tanto no decorrer do desenvolvimento quanto jogando.
Como pode ver, nós temos três partes principais nesse jogo: (1) uma bolinha; (2) a raquete (barrinha inferior), que serve para rebater a bolinha; (3) as barrinhas que são destruídas pelo personagem.
Vamos começar criando uma pasta chamada Arkanoide na "Área de Trabalho" do seu computador. Dentro dessa pasta, criaremos um arquivo chamado index.html. Esse é um nome padrão para a página principal de sites. Não estamos construindo um site, mas vamos usar esse padrão de nome mesmo assim.
Todo arquivo HTML trabalha com tags HTML e esse tem uma estrutura padrão. Veja:
Abra o Notepad, ou qualquer outro editor simplório de texto, e insira o conteúdo acima no arquivo index.html criado anteriormente.
No <head></head> colocaremos os recursos que precisaremos no nosso jogo e no <body></body> tudo o que é renderizado.
Vamos criar uma divisão (div) dentro da tag body onde adicionaremos todas as barrinhas que serão quebradas pelo personagem. O nosso HTML deve ficar como abaixo:
A tag div é definida pelo HTML. É um item visual que serve para organizar o layout. Coloquei o atributo id na TAG div para que possamos acessar com Javascript futuramente. Não se preocupe com isso agora.
O próximo passo será criar o arquivo Javascript onde ficará todo o comportamento do nosso jogo. Vamos dar o nome pra ele de codigo.js. Após a criação desse arquivo, ainda sem conteúdo, vamos importá-lo no HTML para que o Browser (Chrome, IE, Firefox etc) possa executá-lo. Essa importação ficará antes do fechamento da tag body. Veja:
A tag script pode ser usada para inserir código Javascript diretamente na página HTML ou para importar de um arquivo externo. Código de jogos tendem a crescer muito rápido e por isso decidi externalizar o Javascript em um arquivo.
Como o nosso jogo terá vários componentes com estilo visual (tamanho, cor, posição etc), vamos criar mais um arquivo chamado estilo.css. Arquivos css servem para possibilitar a alteração do tamanho de textos, cor de fundo da página e diversas outras propriedades. Aos poucos, você entenderá essa organização do nosso código. Após criado o arquivo css, ainda vazio, também o importaremos no HTML, porém utilizando outra tag do HTML: a tag link. Vamos colocar a importação dentro da tag head. Veja como fica:
Você pode estar se perguntando sobre o motivo de importarmos o css no head da página e o Javascript no body. Farei uma explicação sobre isso posteriormente.
Por hora vamos configurar o layout da barrinha. Vamos criar uma nova div que representará apenas uma barrinha. Ela deverá ser um quadradinho de 50px vermelho. O código HTML deve ficar como a seguir:
Se você abrir o arquivo index.html no browser, verá que nada aparece ainda. Isso acontece por um motivo muito simples: não há qualquer configuração visual. Veja:
Para que possamos visualizar a primeira barrinha que adicionamos no HTML, precisamos criar o estilo dela. Faremos isso no arquivo estilo.css.
Para estilizar um determinado item visual é preciso dizer isso claramente. Ou seja, precisamos informar para o Browser que queremos estilizar a div com id igual a barrinha. Abra o arquivo estilo.css e acrescente o seguinte código:
Na linha 1, nós estamos dizendo que queremos estilizar o id barrinha. A tralha (jogo da velha ou, mais "modernamente", hashtag) informa que a palavra barrinha é um id.
Na linha 2, dizemos que a cor de fundo é vermelha.
Nas linhas 3 e 4, dizemos que a largura e altura é de 48 pixels.
E, na última linha, informamos que ele possui uma borda branca de 1 pixel em volta. Ou seja, há uma borda de um pixel na lateral esquerda e outra borda de um pixel na lateral direita. Com isso, a largura total da barrinha é de 50 pixels. O mesmo para a altura. Lógica!
Agora, nós podemos ver alguma coisa: a nossa primeira barrinha. Veja:
Todavia, antes de cantarmos vitória, nós temos um problema a ser resolvido. Nós dissemos que o quadrado tem uma borda branca de um pixel, mas não dissemos que existe uma margem branca de outros tantos pixels. O esperado é que a barrinha fique colada no canto superior do Browser. O problema é que a tag body já veio, por padrão, com essa configuração e nós temos que consertar isso.
Nós vamos configurar uma tag pelo nome dela e não por um id qualquer. Por isso, não precisamos usar o tralha, mas apenas colocar o nome da tag que queremos estilizar. No caso, a tag body. Veja como fica o código do arquivo estilo.css:
Visualmente temos, então, a barrinha colada no Browser:
Conclusão:
Vimos, nesse capítulo, uma introdução sobre o jogo que desenvolveremos nos próximos posts. Criamos a estrutura inicial com arquivos específicos para html, css e javascript. Já criamos o estilo inicial da barrinha com uma cor vermelha de fundo e uma borda branca e vimos que temos que nos preocupar com a estilização padrão que já pode vir no próprio Browser.
No próximo Post, vamos criar as barrinhas e a bolinha e faremos esta se mover pela tela. Tudo dinamicamente com Javascript.
Nenhum comentário:
Postar um comentário