Javascript episódio 1

Como quase tudo, eu tenho tentado aprender javascript na tentativa e erro, mas acho que já esta na hora de começar a ler e entender melhor o que estou fazendo, melhor que tentativa e erro para progredir mais um pouco, e acabei que achei um livro que achei tanto simples como legal. Essa foi a lição do capítulo 1.

Bem aqui a gente vai apenas fazer um canvas com javascript do zero, para começar, vamos fazer somente um arquivo html, e ele vai ter um elemento no corpo que vai ser um canvas.

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Isto é um canvas html</title>
  </head>
  <body>
    <h1>Isto é um canvas html</h1>
    <canvas id="asteroids" width="400" height="400"></canvas>
  </body>
</html>

Isso gera o seguinte no navegador.

Então temos um canvas de 400 por 400, mas na verdade a gente não vê nada, porque tudo, tanto a página quanto o canvas tem tudo a mesma cor, mas ele está ali, abaixo do texto. Agora vamos desenhar algo nele, com um script de javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>                                                                                                                                                                                             
<html>                                                                                                                                                                                                      
  <head>                                                                                                                                                                                                    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">                                                                                                                                
    <title>Isto é um canvas html</title>                                                                                                                                                                    
  </head>                                                                                                                                                                                                   
  <body>                                                                                                                                                                                                    
 
    <h1>Isto é um canvas html</h1>                                                                                                                                                                          
    <canvas id="asteroids" width="400" height="400"></canvas>                                                                                                                                               
 
    <script>                                                                                                                                                                                                
      var canvas = document.getElementById("asteroids");                                                                                                                                                    
      var context = canvas.getContext("2d");                                                                                                                                                                
      context.strokeStyle = 'dimgrey';                                                                                                                                                                      
      context.lineWidth = 5;                                                                                                                                                                                
      context.rect(75, 75, 250, 250);                                                                                                                                                                       
      context.stroke();                                                                                                                                                                                     
      // Comentário                                                                                                                                                                                         
    </script>                                                                                                                                                                                               
 
  </body>                                                                                                                                                                                                   
</html>

E vemos o seguinte.

Bem, primeiro a gente tem que se ligar que javascript é uma linguagem scriptada, então assim como o R, ele vai rodando linha por linha, e so para se a gente fizer algo errado, até la ele roda, e ele roda na ordem, por isso o script esta depois do elemento canvas no html, porque se tiver antes, ele vai tentar rodar num elemento de html que ainda não existe.
Outra coisa, é que ele é orientado a objetos, então a primeira linha

1
      var canvas = document.getElementById("asteroids");

Apenas instancia um objeto, que esta ligado ao elemento asteroids, que é o id que demos no nosso canvas ali no html

1
<canvas id="asteroids" width="400" height="400"></canvas>

Depois disso criamos um contexto. Apesar do elemento canvas ser usado para desenhar, plotar, etc, através de scripts, ele não tem métodos de desenho, então quando a gente usa o método getContext(), ele retorna o objeto que tem os métodos para desenho, no caso o “2d” é para desenhos em 2d, como retas, formas, texto entre outras coisas.

Agora podemos mexer no contexto, que é o que realmente desenha, o strokeStyle seta a cor, lineWidth qual a espessura da linha a ser desenhada em pixels, rect faz um retangulo, que no nosso caso é um quadrado, os dois primeiros valores são o ponto onde ele vai começar, onde vai ser ancorado essa forma, e depois temos o tamanho dele, 250 de largura e altura.

Até essa linha, nada foi desenhado, so depois que rodamos o método stroke, que tudo realmente é desenhado. Mas não da para ver onde é o canvas, porque precisamos mexer no estilo da página, para colocar outra cor no canvas, no nosso elemento, para diferencias ele, então precisamos de um pouco de CSS, que podemos colocar direto aqui.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Isto é um canvas html</title>
 
    <style media="screen">
      body {
      text-align: center;
      font-family: sans-serif;
      }
      canvas {
      background-color: black;
      }
    </style>
 
  </head>
  <body>
 
    <h1>Isto é um canvas html</h1>
    <canvas id="asteroids" width="400" height="400"></canvas>
 
    <script>
      var canvas = document.getElementById("asteroids");
      var context = canvas.getContext("2d");
      context.strokeStyle = 'dimgrey';
      context.lineWidth = 5;
      context.rect(75, 75, 250, 250);
      context.stroke();
      // Comentário
    </script>
 
  </body>
</html>

Essa modificação no estilo, também direto dentro do html, colocamos o elemento style la no cabeçalho, no head, e mudamos o plano de fundo dos elementos, e centralizamos na página também.

Agora da pra ver melhor o canvas, vamos mexer no nosso desenho melhor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Isto é um canvas html</title>
 
    <style media="screen">
      body {
      text-align: center;
      font-family: sans-serif;
      }
      canvas {
      background-color: black;
      }
    </style>
 
  </head>
  <body>
 
    <h1>Isto é um canvas html</h1>
    <canvas id="asteroids" width="400" height="400"></canvas>
 
    <script>
      var canvas = document.getElementById("asteroids");
      var context = canvas.getContext("2d");
      context.strokeStyle = 'lightgrey';
      context.fillStyle = 'dimgrey';
      context.lineWidth = 5;
      context.rect(75, 50,canvas.width - 150, canvas.height - 100);
      context.stroke();
      context.fill();
      // Comentário
    </script>
 
  </body>
</html>

Isso vira o seguinte.

O que a gente fez aqui, primeiro veja que temos agora uma cor para a borda do elemento e uma cor de preenchimento, que é o fillStyle, outra coisa, veja que mudamos agora as medidas e o ponto de referencia do retângulo que fazemos com rect, estamos fazendo ele baseado nas medidas do canvas, veja que podemos acessar esses valores a partir do objeto canvas que criamos, ele tem esses atributos, e agora usamos o stroke para desenhar o e fill para preencher, antes de fazer isso, nada acontece, podemos comentar essas linhas para ir testando o comportamento dos métodos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Isto é um canvas html</title>
 
    <style media="screen">
      body {
      text-align: center;
      font-family: sans-serif;
      }
      canvas {
      background-color: black;
      }
    </style>
 
  </head>
  <body>
 
    <h1>Isto é um canvas html</h1>
    <canvas id="asteroids" width="400" height="400"></canvas>
 
    <script>
      var canvas = document.getElementById("asteroids");
 
      //Retângulo
      var context = canvas.getContext("2d");
      context.strokeStyle = 'lightgrey';
      context.fillStyle = 'dimgrey';
      context.lineWidth = 5;
      context.rect(75, 50,canvas.width - 150, canvas.height - 100);
      context.stroke();
      context.fill();
 
      // Texto
      context.font = "34px Arial";
      context.strokeStyle = '#FF2222';
      context.fillStyle = '#FFAAAA';
      context.lineWidth = 0.75;
      context.textAlign="center";
      let msg = "Desenhando 2d"
      context.fillText(msg, canvas.width / 2, 100);
      context.strokeText(msg, canvas.width / 2, 100);
    </script>
 
  </body>
</html>

Agora adicionando o elemento de texto.

Bem, os comentários são como no c++, com duas barras, podemos usar eles para dar uma organizada no texto, bem agora vamos mexer no contexto, veja que a cor e o preenchimento são uma propriedade, no caso nos mudamos ela de novo depois que fizemos o retângulo, pegamos cores novas, mudamos a grossura da linha de desenho com lineWidth e vamos desenhar texto, alinhando ele centralizado a partir do ponto onde desejamos escrever, declaramos um string com let, a diferença de let e var é sutil, os dois declaram variáveis, mas tem diferentes escopo e eu não sei explicar isso direito ainda, mas tudo bem. Ai assim como o retângulo, usamos o fillText para preencher as letras, e o strokeText para o contorno, veja que mandamos para ele o texto e o ponto onde ele deve ser ancorado, sendo o meio do canvas, na altura 100 pixel, lembrando que é um desenho numa tela, então não contamos os eixos como num gráfico, mas ao contrario, o canto superior esquerdo é onde começa a tela.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Isto é um canvas html</title>
 
    <style media="screen">
      body {
      text-align: center;
      font-family: sans-serif;
      }
      canvas {
      background-color: black;
      }
    </style>
 
  </head>
  <body>
 
    <h1>Isto é um canvas html</h1>
    <canvas id="asteroids" width="400" height="400"></canvas>
 
    <script>
      var canvas = document.getElementById("asteroids");
 
      //Retângulo
      var context = canvas.getContext("2d");
      context.strokeStyle = 'lightgrey';
      context.fillStyle = 'dimgrey';
      context.lineWidth = 5;
      context.rect(75, 50,canvas.width - 150, canvas.height - 100);
      context.stroke();
      context.fill();
 
      // Texto
      context.font = "34px Arial";
      context.strokeStyle = '#FF2222';
      context.fillStyle = '#FFAAAA';
      context.lineWidth = 0.75;
      context.textAlign="center";
      let msg = "Desenhando 2d"
      context.fillText(msg, canvas.width / 2, 100);
      context.strokeText(msg, canvas.width / 2, 100);
 
      // Bonequinho
      context.strokeStyle = '#FFFFFF';
      context.lineWidth = 2;
      context.beginPath();
      context.arc(200, 140, 20, 0, Math.PI * 2);
      context.moveTo(200, 160);
      context.lineTo(200, 220);
      context.moveTo(180, 300);
      context.lineTo(185, 260);
      context.lineTo(200, 220);
      context.lineTo(215, 260);
      context.lineTo(220, 300);
      context.moveTo(240, 130);
      context.lineTo(225, 170);
      context.lineTo(200, 170);
      context.lineTo(175, 180);
      context.lineTo(170, 220);
      context.stroke();
 
      // Mais texto
      let msg2 = "bem simples!!!";
      context.font = "24px Arial";
      context.strokeStyle = '#FF2222';
      context.lineWidth = 0.75;
      context.fillText(msg2, canvas.width / 2, 330);
      context.strokeText(msg2, canvas.width / 2, 330);
    </script>
 
  </body>
</html>

Agora basicamente é isso, com mais algumas funções, fazemos um bonequinho usando path, funciona assim, a gente começa um path com beginPath, veja que ele usa os parâmetros de cor, tamanho ja determinados, ai usamos outra função que é fazer um arco, para fazer a cabeça, um arco é um circulo, então temos que ter um ponto onde ele começa, onde ele ancora, depois o tamanho do raio e onde ele começa e onde termina, no caso 2 \pi é uma volta completa, dai temos um circulo, o moveTo move para onde queremos começar a desenhar, e lineTo para da onde está o último moveTo até o ponto que indicamos, e antes de terminar, temos que desenhar o que queremos, bem vamos fazer mais uma mensagem, e sempre lembrando que precisamos tomar cuidado pois mudamos as cores, as propriedades do texto.

Bem é isso ai, estava olhando javascript hoje e resolvi posta o que fiz, o script vai estar la no repositório de javascript, e se eu escrevi alguma bobeira, algo errado, deixe um comentário corrigindo ou mande um e-mail.

Referência:
Graeme Stuart 2017 – Introducing JavaScript Game Development Build a 2D Game from the Ground Up. Apress 221pp

Leave a Reply

Your email address will not be published. Required fields are marked *