Criando Um Jogo Arkanoid com Javascript (2)

Olá mais uma vez. Nesta segunda postagem, iremos nos focar na criação dos quadradinhos e na movimentação da bolinha. Nós já temos três arquivos criados, o index.html, que é o arquivo principal do nosso jogo, o estilo.css, onde editaremos as características visuais do nosso jogo e o arquivo mais divertido de todos, o codigo.js.

Para começar, abra o index.html no browser para podermos visualizar todas as nossas alterações. A primeira delas será remover a div barrinha, pois todas as barrinhas serão criadas dinamicamente.

Agora, abra o arquivo codigo.js. A princípio, iremos criar apenas uma fileira de barrinhas e isso já nos dará bastante trabalho.

O nosso jogo terá uma característica interessante: ele irá se adaptar ao tamanho do browser do usuário. Portanto, antes de qualquer coisa, deveremos pegar a largura do Browser antes de qualquer coisa para que possamos saber quantas barrinhas iremos criar. Posteriormente, precisaremos também da altura. Sendo assim, escreva o seguinte código para pegar essas duas informações:

Ao atualizar o browser, deverá ser possível ver, no console, o que imprimimos na linha 4. Veja:

Como vimos antes, cada barrinha possui 50px de largura e altura. Se a largura do Browser é de 626px, quantas barrinhas cabem em uma linha horizontal? É preciso apenas dividir a largura do Browser pela da barrinha: 626/50. Que é igual a 12,52 barrinhas ou 12 barrinhas e meio. Não queremos meia barrinha, então arredondaremos esse valor para baixo, que é 12. Veja:

Pronto! Já sabemos quantas barrinhas queremos criar, mas não sabemos como. 

Com javascript, é possível criar código HTML. A forma mais fácil de fazer isso é usando o document.write();. Todavia, com essa função, criamos um html logo abaixo de onde estiver a tag <script> e como esta tag está lá no fim da página, esse código, por mais que crie um quadradinho, não resolve nosso problema. Veja:

Precisaremos criar as barrinhas dentro da tag barrinhas. A ideia agora é: 

(1) acessaremos a div barrinhas pelo seu id. O javascript nos permite fazer isso com outra função, a document.getElementById("nome do id"). (2) Depois precisaremos criar um novo elemento HTML e adicioná-lo dentro da div barrinhas. Para criar um elemento, usaremos a função document.createElement('tipo do elemento') informando por parâmetro o tipo do elemento que queremos criar. No nosso caso, o elemento <div>.  (3) Depois de criado, invocaremos uma outra função, mas não do document e sim do elemento que buscamos anteriormente. Esse método nos permite adicionar o novo elemento na div que buscamos: barrinhas.appendChild(novaBarrinha);. Veja como fica:

Veja que na linha 9, pegamos a referência para a div barrinhas, depois, na linha 12, criamos uma nova div, que ainda não foi adicionada em lugar nenhum no HTML e, por fim, na linha 15, adicionamos essa nova div na div barrinhas.

Você pode ver tudo o que estamos logando na aba Console 

Ainda não podemos visualizar nada pelo simples fato de que toda a configuração visual da barrinha está associada a um id que não colocamos na div criada. Faremos isso agora com o método setAttribute. Veja:

Ótimo! Já sabemos como criar uma barrinha, mas é aquela variável que criamos antes, a quantidadeDeBarrinhas, quem nos diz quantas barrinhas devemos criar, e dificilmente será apenas uma. Tínhamos calculado 12 barrinhas. Todavia esse não é um número cabalístico e sim um número que calculamos de acordo com a largura do Browser. Ou seja, dependendo do tamanho do Browser, o jogo deve saber criar mais ou menos barrinhas. Mas como fazer isso? Como executar esse código de criação de barrinhas quantas vezes forem necessárias para preencher o Browser do usuário? É para isso que servem os loops. Vamos utilizar o loop for para fazer isso. Veja como fica:

Ótimo! Conseguimos criar as barrinhas. Todavia, por padrão, o HTML coloca os itens um abaixo do outro como se fosse o Word ou este editor de Blogs que estou utilizando para escrever o Post. Entretanto, no jogo Arkanoide, as barrinhas ficam na parte de cima uma ao lado da outra, então precisamos posicionar essas barrinhas de uma maneira diferente. Vamos fazer o seguinte: (1) No arquivo css, diremos para o browser que o posicionamento delas terá a característica absolute e (2) com javascript, diremos quantos pixels para a esquerda cada barrinha deve andar. Veja como fica:

Excelente! Conseguimos criar e posicionar nossas barrinhas. Isso deu bastante trabalho até pra mim. Então, vou encerrar o post por aqui. No próximo, criaremos e colocaremos animação na bolinha que, inicialmente, será um quadradinho. No seguinte implementaremos o sistema de colisão para destruir as barrinhas.