Desenhando um Círculo com Raio Variável

Um dos exercícios mais usados para aprender lógica de programação é a criação de desenhos como quadrados, triângulos etc. Usamos isso para treinar loops dentro de loops.

Por exemplo, se quisermos criar um quadrado com cinco estrelas de largura e altura, um laço será o responsável por criar uma linha e o outro por repetir cinco vezes o primeiro. Veja:

Na linha 4, criamos o laço com o código que escreve uma estrela. Como esse laço vai de 0 até 4, escrevemos 5 estrelas. O laço da linha 3 executa o laço interno cinco vezes e, logo após cada execução, ele escreve uma quebra de linha. Isso faz com que cinco linhas de cinco estrelas sejam desenhadas.

Perfeito! Mas e se quisermos escrever um círculo com o raio de tamanho 10? Como implementar esse algorítmo? Veja a figura abaixo:

Não é um círculo perfeito, mas não deixa de ser um bom desafio. Bom, a ideia aqui é a seguinte: se o círculo tem raio 10, então, a partir do centro, o círulo tem dez tracinhos para um lado e dez para o outro, assim como dez linhas para cima e outras dez para baixo. Para facilitar a percepção disso, criei um pequeno círculo bem no centro.

Vamos começar criando um algorítmo que, dado um raio, escreveremos todos os tracinhos dentro do qual o círculo será desenhado. Veja:

O resultado desse algorítmo é o seguinte:

Na linha 3, criamos uma variável que guarda o valor do raio do nosso círculo.

Na linha 5, criamos o primeiro for que repetirá o for interno, para esse caso, 21 vezes. Como o raio é 10, precisamos criar 10 linhas acima e outras 10 abaixo da linha central do círculo, por isso multiplicamos o raio por 2 e somamos 1.

Na linha 7, criamos o laço que gera os traços na horizontal. Também são 21 traços para esse caso.

Sabemos que nas primeira e última linhas, temos uma estrela bem no centro e, na linha 11, temos duas estrelas nas pontas. Podemos até mesmo colocar alguns if's dentro do segundo for para criar esssas estrelas, pois a lógica é bem simples. Veja:

Veja como ficou o resultado:

Bom, já é um começo, mas adianto que essa lógica não tem como evoluir. Vamos lá! Na linha 9, estamos verificando se a linha atual é a primeira ou a última e o número da coluna é igual ao raio. O objetivo aqui é escrever as estrelas no topo e em baixo. O segundo if tem como objetivo escrever as estrelas das laterais esquerda e direita.

O problema vem quando levantamos a seguinte questão: e nas outras linhas, em quais colunas devemos escrever as estrelas? Por exemplo, na linha 4, onde exatamente deveremos colocar a estrela? Veja:

Sabemos que temos que colocar, em cada linha, estrelas nos dois lados a partir do centro do círculo, mas não sabemos exatamente onde. Todavia, temos algumas outras informações que podem nos ajudar a encontrar o que precisamos. Veja que a distância do centro do círculo para a quarta linha é de 7 linhas e sabemos que o valor do raio é 10. Veja:

Portanto, temos a hipotenusa (10), que é o raio, e o valor de um cateto (7), que e a ditância da linha para o centro do círculo. Agora, precisaremos encontrar o valor do outro cateto e resolveremos a questão. Ora, claramente temos um triângulo e sabemos que a relação do triângulo é: c² + b² = a². Isso nada mais é do que o famoso Teorema de Pitágoras, portanto, para achar o valor da distância do centro do círculo para a posição que deve ficar a estrela, usamos a fórmula: c = raiz(b² - a²). Ou: distânciaX = raiz(raio²-distânciaY²). Ou, no caso da quarta linha: ? = raiz(10²-7²). Veja como fica o código:

Na linha 4, criamos a variável que guarda o valor do quadrado do raio.

Na linha 8, pegamos o valor da distância entre o centro do círulo e a linha atual. A função Math.abs serve para remover o sinal, portanto o resultado dessa subração será  sempre um valor positivo.

Na linha 11, usamos a função Math.pow para tirar a raiz quadrada da subtração do raio ao quadrado e a distância do centro do círculo para a linha atual. A função Math.round arredonda o resultado.

Na linha 15, verificamos se a distância da coluna atual para o centro do círculo é igual a distânciaX calculada na linha 11. Se sim, desenhamos a estrela, caso contrário, desenhamos os tracinhos.

O resultado desse código é o círculo proposto:

Altere o valor da variável raio e teremos círculos de tamanhos diferentes. Qualquer dúvida, a área de perguntas estará habilitada nesse post.

Criando Um Jogo Arkanoid com Javascript (6)

Nesta sexta postagem, vamos quebrar o nosso código em pequenas funções com dois objetivos: (1) melhorar a legibilidade e (2) possibilitar o reuso por meio de funções menos específicas. Além disso, vamos melhorar a coerência do nosso código dando nomes melhores para cada comportamento.

A primeira alteração será renomear o método detectaColisao, que não tem o objetivo de detectar colisão, mas destruir as barrinhas que estão sofrendo colisão. Seu nome será alterado para quebraBarrinhas. Na imagem abaixo, vemos outros trechos que serão alterados nesse método. Veja:

Na linha 28, vemos a primeira alteração: renomear o método para quebraBarrinhas.
A segunda alteração, indicada com o número 2, ainda não foi feita. O objetivo é remover o cálculo dos quadrantes para métodos específicos: pegaQuadranteY, pegaQuadranteXEsq e pegaQuadranteXDir.
A terceira alteração, indicada com o número 3, é criar o método pegaBarrinha, que deve receber o quadrante específico de onde deve-se buscar a barrinha.
A quarta alteração, que não está indicada, é reimplementar a função quebraBarrinhas para usar esses métodos. Veja:

O próximo passo é refatorar o método quebraBarrinhas para usar os métodos criados anteriormente:

Pronto! Nosso código está muito mais legível e coeso. Vale notar também que, às vezes, esse tipo de alteração pode sacrificar um pouco a performance, mas essa discussão está fora do escopo desse treinamento.

Outra melhoria que faremos será no método movimenta bolinha. Assim como fizemos no quebraBarrinhas, vamos melhorar a legibilidade do código dando mais significado aos if's por meio de funções e também aumentaremos o reuso:

As linhas que contém os If's estão circuladas, pois serão elas que receberão uma melhora. Para facilitar a manutenção do código, iremos isolar o código dos if's em pequenas funções: acimaDoCenario, abaixoDoCenario, alemDoLimiteEsquerdo, alemDoLimiteDireito, assim como faremos uma função que isolará o código da movimentação padrão da bolinha. O nome dessa função será movimentoPadrao. Veja:

Note que o código de cada função é exatamente o mesmo código que está dentro dos if's do método movimentaBolinha. Agora iremos utilizar esses métodos refatorando o movimentaBolinha. Veja:

Pronto! Rode o jogo e veja que tudo continua funcionando. Esse post não teve como objetivo criar qualquer outra lógica para o nosso jogo. Minha intenção foi dar a devida importância a essas refatorações que melhoram a leitura do código. Entenda que código é igual coelho: se reproduz em uma velocidade enorme. Se não tivermos a preocupação de deixá-lo mais legível, teremos muita dificuldade de continuar evoluindo o código.

E, com relação a essas refatorações que fizemos, note também que o nosso código possui a mesma linguagem que usamos ao explicar o funcionamento do jogo. Uma pessoa leiga consegue conversar com você, programador, sobre o jogo, na mesma linguagem que você implementa o próprio jogo. Se eu disser pra você: fulano, ao mover a bolinha, se esta passar por cima do cenário, você precisará encostar ela no topo e alterar a sua direção no eixo Y. Ora, isso não é exatamente o que está escrito nas linhas 58, 59 e 60 da imagem anterior?

No próximo post, iremos implementar a lógica que faz a bolinha mudar de direção quando colidir com as barrinhas.

Criando Um Jogo Arkanoid com Javascript (5)

Já temos a movimentação da bolinha e já conseguimos destruir os quadradinhos ao colidir, mas temos um pequeno detalhe que devemos corrigir o quanto antes. A bolinha consegue passar dos limites do cenário e isso deixa o jogo um pouco estranho. É possível explicar melhor essa situação com a imagem abaixo:

Na imagem acima, podemos ver que a bolinha estava subindo, bateu no topo do browser e ricocheteou para baixo. Quando ela colide com a lateral direita do browser, vemos que ela passa alguns pixels do cenário e, só então, mudamos sua direção. Temos que melhorar o nosso sistema de colisão para que a bolinha não passe do cenário.
A ideia aqui é implementar uma lógica que verifica qual a próxima posição da bolinha. Se esta passar do cenário, temos que corrigir para que a próxima posição ainda esteja dentro do cenário. Primeiro, criaremos duas funções que nos dão a próxima posição X e Y da bolinha. Veja:

As linhas 55 e 59 estavam dentro da função movimentaBolinha, mas agora essa função deverá verificar se, na próxima vez que a bolinha for movimentada, ficará fora dos limites do browser. Se sim, deveremos encostar a bolinha em alguma das extremidades. Veja como ficou a função:

Nas linhas 63 e 64, chamamos a função que criamos anteriormente para pegar as próximas posições da bolinha.
Na linha 66, verificamos se a bolinha ficará fora do limite superior do browser. Isso já fazíamos antes, mas agora estamos chamando uma função encostaNoTopo, que encosta a bolinha no topo do browser, impedindo que ela passe do limite superior. O mesmo fizemos nas linhas 70, 74 e 78, verificando as outras extremidades.
Somente se a bolinha não estiver passando de nenhumas das extremidades é que as linhas 83 e 84 serão executadas. Essas linhas executam o comportamento de posicionamento normal da bolinha.

Note que a função movimentaBolinha faz mais que a movimentação. Ela também detecta a colisão nos limites do browser. Acontece que já temos outra função, chamada detectaColisao, que verifica a colisão nas barrinhas e também destrói as barrinhas. Isso é um sinal de que poderemos ter problemas no futuro. Talvez tenhamos que colocar cada comportamento no seu devido "quadrado".
As funções encostaNoTopo, encostaEmBaixo, encostaNaEsquerda e encostaNaDireita ainda não foram implementadas, mas não são difíceis. A lógica delas consiste em verificar quantos pixels faltam para a bolinha encostar em uma das extremidades. Por exemplo: a bolinha anda 3px por vez, mas faltam apenas 2px para encostar na extremidade esquerda. O que temos que fazer é mover a bolinha 2px para a esquerda e outros dois para cima ou para baixo, dependendo da direção dela. Veja:

Na linha 90, implementamos a função encostaNoTopo. Na linha 91, pegamos quantos pixels faltam para a bolinha alcançar o topo do browser. Isso é fácil! É só pegar sua posição Y.
Na linha 92, colamos a bolinha no topo do browser e, na linha 93, alteramos a posição da bolinha no eixo X, que é sua própria posição somada com a variação da bolinha vezes a direção no eixo X. É essa variável direcaoX que nos diz para que lado a bolinha deve andar: esquerdo ou direito.

Para perceber essa melhoria, aumente o valor da variável velocidade para 20. Você verá que a bolinha saltará de um lado para o outro, mas nunca passará das extremidades do browser.

Essa postagem foi bem menor, mas teve um bom objetivo: trabalhar melhor a lógica de colisão. Terminamos com dois comportamentos de detecção de colisão que estão em lugares diferentes. No próximo post, organizaremos nosso código quebrando em pequenas funções. Isso nos ajudará a mantê-lo mais legível e reusável.

Criando Um Jogo Arkanoid com Javascript (4)

Neste quarto post sobre o desenvolvimento de um jogo no estilo Arkanoide, implementaremos a lógica que detecta a posição da bolinha em relação aos quadradinhos para conseguir destruí-los.

Primeiramente, vamos adicionar uma variável que controlará a velocidade da "bolinha". O nome dela será velocidade. A partir de agora, iremos ajustar o posicionamento da bolinha com essa variavel. A variável direcao será usada para dar a direção para a velocidade. Dependendo do sinal, a velocidade modificará a posição para um lado ou outro. Veja:

Sempre que movimentarmos a "bolinha", faremos isso acrescentando 3px, como indicado na linha 5. Nas linhas 13 e 14, usamos as variáveis direcaoY e direcaoX para manipular a direção. Se a "bolinha" tiver que se mover para cima, a velocidade será multiplicada por -1. Com isso, a "bolinha" se aproximará 3px do topo do Browser.

Uma maneira de enchergar a construção desses jogos de forma que os problemas que virão sejam relativamente fáceis de resolver, é como se todo o cenário fosse formado por quadradinhos. Veja:

A "bolinha" com o número 1 está 68 pixels de distância da lateral esquerda e a 165px de distância do topo do Browser. Ou, está no segundo quadradinho da quarta fileira.

A "bolinha" (a partir de agora vou parar de usar aspas. O leitor já deve ter entendido que a bolinha, na verdade, é um quadrado, mas que será redesenhado futuramente) de número 2, está encostando no quarto e quinto quadradinhos da primeira fileira. Quando detectarmos que a bolinha está em quadrantes que possuem barrinhas, precisamos fazer duas coisas: quebrar as barrinhas e alterar a direção da bolinha. Mas como faremos para detectar em qual ou quais quadrantes está a bolinha e, posteriormente, que barrinhas estão sendo colididas e que devem ser quebradas?

Fácil! Ao dividirmos a posição y da bolinha 1, que é 125, por 50, descobriremos que ela está depois da fileira 3, já que o resultado é 3,3. Esse cálculo sempre arredondaremos para cima, portanto, consideraremos que a bolinha 1 está na fileira 4. Se dividirmos 68 por 50 e arredondarmos para cima, veremos que ela está no quadradinho 2.

Já sabemos a posição da bolinha 1 e agora temos que responder a pergunta: existe alguma barrinha no segundo quadradinho da quarta fileira? Não! Então não temos o que fazer.

Todavia, a bolinha 2 está em contato com duas barrinhas, as do quarto e quinto quadradinhos da primeira fileira. Precisaremos quebrar essas barrinhas. Mas antes, como faremos para saber que a bolinha está em colisão com barrinhas?

Vamos ao código:

Criamos mais uma função que é chamada logo após a movimentação da bolinha. Nas linhas 32 e 33 da detectaColisao, pegamos a posição da bolinha em pixels e, logo em seguida, nas linhas 35 e 36, transformamos a posição de pixels para quadrantes. Na linha 38 imprimimos esse valores convertidos no log. Isso é mostrado na imagem anterior. No momento em que salvei a imagem da tela, a bolinha estava subindo em direção a esquerda e estava na primeira linha e no quadranteX igual a 4. Ou seja, ela estava exatamente em cima da quarta barrinha. 

A função Math.ceil é igual a Math.round, todavia, aquela arredonda sempre pra cima

Já sabemos a posição da bolinha e agora precisaremos desabilitar as barrinhas. Quebrar a barrinha nada mais é que trocar a cor dela para branco. Mas como faremos para pegar a barrinha? Ora, cada barrinha possui um id, mas que ainda não é individual como deveria. O que faremos é alterar o algorítmo que cria as barrinhas para adicionar um id específico para cada uma. Veja:

Ao atualizar o código, veremos que as barrinhas sumiram. Isso aconteceu, pois o estilo visual das barrinhas está atrelada, no css, ao atributo id com nome barrinha. Como cada barrinha possui o id dinâmico atrelado a um número, como: barrinha_0, barrinha_1 etc, o css não é mais aplicado às barrinhas. Para resolver isso, vamos fazer, aliás, da forma correta. Atrelaremos o estilo visual das barrinhas a uma classe, assim como fizemos com a bolinha. Veja:

estilo.css

codigo.js

No arquivo estilo.css, transformamos a configuração visual barrinhas de div para class, alterando o prefixo "hashtag" para o ponto.

E no codigo.js, adicionamos mais um atributo na linha 70. Assim como fizemos com a bolinha.

A partir de agora, as barrinhas voltarão a aparecer.

Mas porque fizemos isso? Ora, quando a bolinha estiver no quadrante de número da primeira linha, ela estará em cima da barrinha com id 0. Na linha 67, ao criar as barrinhas, começaremos a contar o laço a partir do número 0. Por isso que no primeiro quadrante temos a barrinha_0.

O que faremos agora é: quando a bolinha estiver na primeira linha, pegaremos a barrinha do quadranteX específico e iremos destruí-la. Veja:

Na linha 38, verificamos se o quadranteY é diferente de 1. Como temos barrinhas apenas no primeiro quadrante, não faz sentido buscar barrinhas quando esse valor é diferente de 1. Na linha 39, chamamos o return para parar a execução do método. Nada após a chamada do return é executado, pois o javascript entende que o método já finalizou sua execução.

Na linha 42, pegamos a div da barrinha que está em colisão. Reparem que estamos concatenando a palavra barrinha_ com o valor da variável quadranteX menos 1. Quando o quadrante é 1, a barrinha é 0. Veja:

Na linha 43, verificamos se encontramos alguma barrinha e, se sim, alteramos sua cor para branco. É assim que, por enquanto, destruiremos a barrinha.

Todavia, ao analisar por alguns segundos a execução no Browser, vemos que as barrinhas são destruídas apenas quando o canto superior esquerdo da bolinha encosta nelas. Precisamos verificar a colisão do canto superior direito também. O que faremos é calcular em qual quadranteX está este outro canto da bolinha. (Só eu acho esquisito falar em canto ao se referir a uma bolinha?). Veja:

Agora, nas linhas 36 e 37, calculamos os quadrantes do canto direito e esquerdo, respectivamente. Para calcular o quadranteXDir, acrescentamos 20pixels à posXBolinha. Esse 20pixels corresponde a largura da bolinha.

Agora, nas linhas 44 e 49, verificamos as barrinhas desses dois quadrantes. Pronto! O sistema de colisão do nosso jogo está funcionando corretamente.

No próximo post implementaremos a movimentação da bolinha ao colidir com as barrinhas. Atualmente ela colide e nada acontece com ela. Ela é uma super bolinha! No futuro ela deve ser rebatida pelas barrinhas e precisaremos implementar toda a lógica de direcionamento dela.

Criando Um Jogo Arkanoid com Javascript (3)

Olá pessoal! Nessa terceita postagem focaremos na organização do nosso código, na criação da bolinha, que será usada para quebrar os quadradinhos, e em sua movimentação.

Primeiramente, organizaremos o código que cria as barrinhas. Para ficar mais legível, criaremos uma função chamada criaQuadradinhos() que, ao ser chamada, deverá executar o código que implementamos no post anterior. Veja:

Para melhorar a legibilidade do código, fizemos duas alterações que manteremos a partir daqui: (1) colocamos a criação das variáveis em cima e (2) as funções em baixo. Na linha 5, colocamos a chamada da função que cria as barrinhas. As linhas de log (console.log) foram removidas. Usaremos o log posteriormente para nos ajudar a conferir o funcionamento dos códigos que criaremos. Entretanto, sabemos que o que já escrevemos funciona, por isso decidi removê-los também por legibilidade.

Nosso próximo passo será criar a bolinha que irá quebrar os quadradinhos. Inicialmente ela será um quadradinho amarelo, mas futuramente iremos melhorar o design do nosso game. Vamos criar o estilo dela. Veja:

Agora, assim como criamos as barrinhas, criaremos a bolinha com Javascript. Entretanto, no caso das barrinhas, apenas por questão de organização visual, criamos uma div específica pra elas. Para falar a verdade, ainda não há um motivo claro sobre a decisão de termos criado a div barrinhas, mas garanto que será um conhecimento útil no futuro. No caso da bolinha, a criaremos diretamente na tag body. Veja como fica o código:

Vamos à explicação:

Na linha 9, criamos a função que cria e adiciona a bolinha no HMTL, como é possível conferir na linha 10.

Na linha 11, usamos a função serAttribute, mas não para setar  atributo id e sim o atributo class. Os dois atributos servem para estilizar um item visual.

Na linha 12, adicionamos a "bolinha" na tag body

Nas 14 e 15, posicionamos a bolinha no centro inferior da página.

Nas linhas 17 e 20, estamos logando a bolinha, mas em escopos diferentes. Na linha 17, ainda estamos dentro da função e, na linha 20, logamos a bolinha num escopo chamado global. Ao rodar o código, veja o que é logado:

Veja que, tanto na linha 17 quanto na 20, conseguimos acessar a bolinha. Isso é ótimo, pois, futuramente, precisaremos, por exemplo, movimentar a bolinha. Note que, na linha 4, criamos a variável que é usada na função criaBolinha() para guardar a bolinha criada. É por causa do local em que essa variável foi criada que conseguimos acessar a bolinha de qualquer lugar do nosso código.

Pronto! Agora precisamos movimentar a bolinha. 

Uma animação é nada mais do que desenhar e apagar algo várias vezes, só que em uma posição próxima da anterior.

Se fizermos isso rápido, nosso cérebro acabará acreditando que algo está realmente se movendo. 

O Javascript e o HTML nos ajudam a fazer isso de uma maneira muito simples. Existe uma função chamada setInterval que executa um comportamento a cada x milisegundos. 1 milissegundo é o mesmo que 1 segundo dividido por 1000. Ou seja, se você desejar, poderá pedir para o Javascript executar um comportamento 1000 vezes por segundo, mas isso é um exagero. No nosso jogo, vamos pedir para o Javascript atualizar a tela uma vez a cada 50 milissegundos. Veja:

Na linha 17, usamos a função setInterval. Ao observar o console, veremos que estamos logando a palavra "atualizando" diversas vezes.

Com isso, movimentaremos a bolinha. A cada vez que a função atualizaJogo for chamada, iremos mover a bolinha na diagonal. Vamos começar direcionando-a para o canto superior esquerdo.

Criamos, então, outra função chamada movimentaBolinha. Na linha 25, estamos logando a posição atual da bolinha, que normalmente vem acompanhada pela abreviatura do pixel, que é "px". O problema é que a maneira como atualizamos a posição da bolinha é, basicamente, sutraindo a posição atual pela quantidade de pixels que queremos mover, no caso 1. Só que quanto é 150px - 1? 150px é um texto e não um número, então não podemos realizar uma operação matemática. Por sorte, a função parseInt remove o px e transforma o conteúdo numérico em número mesmo.  

Ao atualizar o Browser, podemos ver a bolinha se movendo para o canto superior, porém ela faz isso como se não houvesse amanhã. Ela simplesmente não para de subir. Precisaremos verificar a posição da bolinha para que, caso ela passe dos limites do cenário do jogo, ou melhor, do Browser, ela mude de direção para se manter sempre dentro do jogo. Veja como fica;

Nas linhas 25 e 26, criamos as variáveis que indicam qual a direção em cada eixo que a bolinha deve andar. 

Nas linhas 32 a 34, verificamos se a bolinha está além do limite de cima do Browser, ou seja, com o valor top menor que zero. Se sim, invertemos a direção no eixo y. 

Nas linhas 36 a 38, verificamos se a bolinha passou do limite inferior. Como o posicionamento de qualquer item visual é sempre a partir do canto superior direito, pegamos o posicionamento no eixo y e somamos com a altura da bolinha. Se for maior que a altura do Browser, invertemos a direção no eixo y. Nas linhas 40 a 46, fazemos o mesmo, só que para o eixo x.

É importante notar que o Browser considera que o ponto 0,0 fica no canto superior esquerdo, enquanto que, quando estudamos sobre plano cartesiano, aprendemos que ele fica no centro. Outra diferença é que o eixo x corre na horizontal e cresce para a direita, como esperado. Todavia, o eixo y cresce para baixo. É bem diferente do que aprendemos na escola.

Outro ponto importante é que cada item visual possui seu próprio eixo x e y interno. A bolinha, por exemplo, possui o seu próprio ponto (0,0) que fica no canto superior direito como é possível ver na imagem anterior.

Já conseguimos movimentar a bolinha de um lado para o outro mantendo-a sempre dentro da tela. Ainda não implementamos o sistema de colisão com as barrinhas, mas faremos isso no próximo post.

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.