Translate Jsappybird workshop to pt-br

content/brazilian-portuguese/jsappybird/_index.md

@@ -0,0 +1,58 @@
+---
+title: "JS: JSappyBird"
+description: "Crie Seu Próprio Jogo JSappyBird"
+date: 2023-09-11T13:24:17-07:00
+prereq: "nenhum"
+difficulty: "Iniciante"
+icon: "fab fa-html5"
+draft: false
+---
+
+## Introdução
+
+Você já ouviu falar do Flappy Bird, não é mesmo? Neste curso, vamos criar juntos a nossa versão desse joguinho usando algo chamado JavaScript! E aí, preparado para essa aventura divertida?
+
+<p style="text-align: center;"><iframe src="https://giphy.com/embed/euuaA2cwLEUuI" width="350" height="350" frameBorder="0" class="giphy-embed"></iframe>
+
+Com certeza você já ouviu falar do jogo Flappy Bird, né? Neste curso, vou te ensinar a fazer o seu próprio joguinho! E o melhor: você poderá chamar seus amigos para jogar junto! Juntos, vamos aprender a usar a linguagem de programação chamada JavaScript e fazer o nosso passarinho pular e voar pelo mundo que você vai criar. Vai ser super divertido!.
+
+## Começando
+
+O objetivo de hoje é aprender algumas coisinhas em JavaScript e usar o que aprendemos para criar um jogo estilo Flappy Bird! Vamos preparar o jogo.
+
+Hoje, vamos usar o Replit. Antes de começar, você precisa criar uma conta no Replit, caso ainda não tenha uma. 
+
+Clique no botão abaixo para se registrar no Replit - você precisará de um e-mail para isso. Se você já tem uma conta no Replit, também pode usá-la clicando o botão abaixo para entrar.
+
+<a class="my-2 mx-4 btn btn-info" href="https://replit.com/signup" target="_blank">Criar minha conta no Replit</a>
+
+<img src="./img/replit-signup.png" height="300" alt="Página do Replit para criar uma conta" />
+
+Em seguida, abra o console do Replit que usaremos hoje clicando no botão abaixo. Você verá a tela que está aí embaixo.
+
+<a class="my-2 mx-4 btn btn-info" href="https://replit.com/@nuevofoundation/JSappyBird-CSWeek" target="_blank">Rode o Replit</a>
+
+<img src="./img/replit-start-screen.png" height="300" alt="Página inicial do Repl" />
+
+Agora, vamos fazer uma cópia desse jogo para que possamos fazer nossas próprias mudanças. Clique no botão "Fork Repl" no canto superior direito e depois no botão "Fork Repl" novamente.
+
+<img src="./img/replit-fork.png" height="300" alt="Copiando o projeto no programa replit" />
+
+Depois de copiar o Replit, você verá uma janela parecida com a que está logo abaixo:
+
+<img src="./img/replit-window.png" height="300" alt="Janela do Replit " />
+
+We will ignore some of the details on this screen, but we will go over some of the basics that show up. The `index.html` file, as well as all the files ending with `.js` contain code, or instructions for the computer to run. By pressing the **run** button, you tell the computer to perform the instructions in the code. Any results from running the code will be displayed on the right side, called the **console**.
+
+Vamos ignorar alguns detalhes dessa tela, mas vou te mostrar o básico. O arquivo `index.html` e todos os arquivos terminados em `.js` têm códigos, que são como instruções para o computador. Quando você pressiona o botão executar ou **run**, está pedindo para o computador seguir essas instruções. E aí, qualquer coisa que acontece aparece do lado direito, numa parte que chamamos de **console**.
+
+Se você pressionar executar ou **run** agora, verá que nada acontece! Sua missão é ajudar o **Nuvi** a completar o código deste jogo!
+
+Todas as atividades na secção **Atividade** serão feitas nesta aba do navegador. Você vai fazer essas atividades sozinho, mas se ficar bloqueado ou tiver dúvidas, pode pedir ajuda!
+
+## Conteúdo
+
+<details close>
+<summary>Conteúdo</summary>
+{{% children /%}}
+</details>

content/brazilian-portuguese/jsappybird/add-jump-sound.md

@@ -0,0 +1,38 @@
+---
+title: "Colocando som no pulo do passarinho & bônus"
+date: 2023-09-11T13:24:17-07:00
+draft: false
+weight: 5
+---
+
+Vamos adicionar um som toda vez que nosso passarinho pular!
+
+Digite o seguinte código no arquivo [File: create-game.js]
+
+```js
+    jumpSound.play();
+```
+
+{{% notice tip %}}
+
+## Trabalhando Juntos
+
+Na janela do Replit abaixo, já começamos com o código `jumpSound.play();`.
+
+![alt text](../img/jump_sound.png "imagem mostrando o som do pulo do passarinho")
+
+No seu console, você vai ver o nosso passarinho JSappy pulando e fazendo um barulhinho toda vez que você clicar em executar ou **run**.
+
+{{% /notice %}}
+
+# Atividades bônus
+
+{{% notice note %}}
+
+- O que acontece se a gravidade ficar mais forte?
+- E se a gravidade tiver um valor negativo?
+- De quantas maneiras diferentes o passarinho pode pular?
+- Como fazemos ele girar mais rápido?
+- O que acontece se tirarmos o `if` que faz ele girar?
+
+{{% /notice %}}

content/brazilian-portuguese/jsappybird/index_1.md

@@ -0,0 +1,264 @@
+---
+title: "Javascript: JSappy Bird"
+description: "Aprenda sobre variáveis, funções e condicionais enquanto construímos um jogo parecido com o Flappy Bird."
+date: 2023-09-11T13:24:17-07:00
+difficulty: "Iniciante/Intermediário"
+draft: true
+hidden: true
+---
+
+![alt text](resources/_gen/images/flappy.png "JSappyBird")
+
+1. **Baixe os arquivos necessários.** <link_aqui>
+
+O modelo contém os seguintes arquivos:
+
+- `phaser.min.js`, a estrutura framework v2.4.3.
+- `index.html`, onde o jogo será exibido.
+- `main.js`, o arquivo onde vamos escrever nosso código.
+- `assets/`, uma pasta com 2 imagens.
+- Atividate `1.js`
+- Atividate `2.js`
+- Atividate `3.js`
+
+O arquivo `index.html` é a página principal do nosso jogo do passarinho e também usa nossos dois arquivos Javascript (.js). O arquivo `phaser.min.js` é a estrutura de jogo que usaremos para fazer jogos no navegador. O outro arquivo é `main.js`, que conterá toda a nossa lógica em Javascript. Os arquivos de atividades vão te ajudar a fazer seu jogo funcionar. As partes que você precisará adicionar estão marcadas com 🐤🐤🐤.
+
+Divirta-se!
+
+### Variáveis
+
+Variáveis são como etiquetas que damos a valores como textos, números e valores verdadeiros/falsos. Usamos variáveis para guardar informações para que o computador lembre-se delas. Criamos variáveis usando a palavra `var` seguida do nome da variável. Depois, você pode dar um valor a essa variável usando o símbolo `=` e o valor desejado.
+
+Por exemplo:
+
+```js
+var mundo = "Olá Mundo";
+var x = 88;
+var feliz = true;
+```
+
+Você também pode mudar o valor de uma variável assim:
+
+```js
+var x = 4;
+x = 10;
+```
+
+Nesse exemplo, a variável `x` primeiro recebeu o valor 4, depois mudou para 10.
+
+O código abaixo cria um novo objeto de jogo `Phaser` e o guarda em uma variável para usá-lo no nosso jogo.
+
+```js
+var jogo = new Phaser.Game(800, 600);
+```
+
+## Atividade 1: Vamos usar os valores verdadeiro/falso e suas expressões
+
+### Condicionais
+
+Podemos usar o `if` (se) para executar um código apenas se certas condições forem atendidas.
+
+Por exemplo:
+
+```js
+if (estaChovendo == true) {
+  pegarGuardaChuva = true;
+}
+```
+
+Dentro dos parêntesis - `()` ao lado do `if`, você deve colocar uma _expressão de verdadeiro/falso_. Os valores verdadeiros/falsos são declarações representadas pelo Ingles `true` (verdadeiro) ou `false` (falso). Podemos usar isso no nosso commando `if` ou se. Se a expressão for verdadeira - **true**, o código dentro das chaves `{ }` é executado.
+
+Também podemos usar expressões de verdadeiro/falso para verificar se um número está em um intervalo específico:
+
+<table style="width: 100%; border-collapse: collapse; background-color: #FFFFFF;">
+    <caption style="font-weight: bold; margin-bottom: 10px;">Operadores de Comparação</caption>
+    <thead>
+        <tr>
+            <th scope="col" style="text-align: center; color: #000000">Operador</th>
+            <th scope="col" style="text-align: center; color: #000000">Significado</th>
+            <th scope="col" style="text-align: center; color: #000000">Verdadeiro</th>
+            <th scope="col" style="text-align: center; color: #000000">Falso</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td style="text-align: center; color: #000000;">==</td>
+            <td style="text-align: center; color: #000000;">igual</td>
+            <td style="text-align: center; color: #000000;">2 == 2</td>
+            <td style="text-align: center; color: #000000;">2 == 3</td>
+        </tr>
+        <tr>
+            <td style="text-align: center; color: #000000;">!=</td>
+            <td style="text-align: center; color: #000000;">diferente</td>
+            <td style="text-align: center; color: #000000;">3 != 2</td>
+            <td style="text-align: center; color: #000000;">2 != 2</td>
+        </tr>
+        <tr>
+            <td style="text-align: center; color: #000000;"><</td>
+            <td style="text-align: center; color: #000000;">menor que</td>
+            <td style="text-align: center; color: #000000;">2 < 13</td>
+            <td style="text-align: center; color: #000000;">2 < 2</td>
+        </tr>
+        <tr>
+            <td style="text-align: center; color: #000000;"><=</td>
+            <td style="text-align: center; color: #000000;">menor que ou igual</td>
+            <td style="text-align: center; color: #000000;">2 <= 2</td>
+            <td style="text-align: center; color: #000000;">3 <= 2</td>
+        </tr>
+        <tr>
+            <td style="text-align: center; color: #000000;">></td>
+            <td style="text-align: center; color: #000000;">maior que</td>
+            <td style="text-align: center; color: #000000;">13 > 2</td>
+            <td style="text-align: center; color: #000000;">2 > 13</td>
+        </tr>
+        <tr>
+            <td style="text-align: center; color: #000000;">>=</td>
+            <td style="text-align: center; color: #000000;">maior que ou igual</td>
+            <td style="text-align: center; color: #000000;">3 >= 2</td>
+            <td style="text-align: center; color: #000000;">2 >= 3</td>
+        </tr>
+    </tbody>
+</table>
+
+Você também pode juntar **expressões de verdadeiro/falso** usando `&&` para `E` e `||` para `OU`. Veja dos operadores lógicos abaixo:
+
+<table style="width: 100%; border-collapse: collapse; background-color: #FFFFFF;">
+    <caption style="font-weight: bold; margin-bottom: 10px;">Resultados dos operadores lógicos</caption>
+    <thead>
+        <tr>
+            <th scope="col" style="text-align: center; color: #000000">Expressão</th>
+            <th scope="col" style="text-align: center; color: #000000">Resultado</th>
+            <th scope="col" style="text-align: center; color: #000000">Expressão</th>
+            <th scope="col" style="text-align: center; color: #000000">Resultado</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td style="text-align: center; color: #000000;">verdadeiro && verdadeiro</td>
+            <td style="text-align: center; color: #000000;">verdadeiro</td>
+            <td style="text-align: center; color: #000000;">verdadeiro || verdadeiro</td>
+            <td style="text-align: center; color: #000000;">verdadeiro</td>
+        </tr>
+        <tr>
+            <td style="text-align: center; color: #000000;">verdadeiro && falso</td>
+            <td style="text-align: center; color: #000000;">falso</td>
+            <td style="text-align: center; color: #000000;">verdadeiro || falso</td>
+            <td style="text-align: center; color: #000000;">verdadeiro</td>
+        </tr>
+        <tr>
+            <td style="text-align: center; color: #000000;">falso && verdadeiro</td>
+            <td style="text-align: center; color: #000000;">falso</td>
+            <td style="text-align: center; color: #000000;">falso || verdadeiro</td>
+            <td style="text-align: center; color: #000000;">verdadeiro</td>
+        </tr>
+        <tr>
+            <td style="text-align: center; color: #000000;">falso && falso</td>
+            <td style="text-align: center; color: #000000;">falso</td>
+            <td style="text-align: center; color: #000000;">falso || falso</td>
+            <td style="text-align: center; color: #000000;">falso</td>
+        </tr>
+    </tbody>
+</table>
+
+
+`&&` exige que ambas as _expressões de verdadeiro/falso_ sejam verdadeiras, enquanto `||` exige que apenas uma das duas sejam verdadeiras.
+
+Por exemplo:
+
+```js
+// retorna verdadeiro pois 5 é menor que 8 e 9 não é igual a 10.
+
+(1 < 100 &&
+  (5 != 10)(
+    // retorna verdadeiro pois pelo menos uma das expressões resulta em verdadeiro
+    5 == 5
+  )) ||
+  10 > 20;
+```
+
+#### Abra `Atividade 1.js`. Lá você vai adicionar uma condição para checar se o passarinho está entre o topo (y = 0) e o fundo da tela (y = 490)!
+
+## Atividade 2: Agora, vamos adicionar uma função para fazer o passarinho pular
+
+### Funções
+
+**Uma função é como uma tarefa.** Algumas tarefas são curtas e simples como somar `1 + 1` ou dizer `‘Olá Mundo!’`. Funções podem ser usadas para executar as mesmas tarefas várias vezes. Neste caso, vamos escrever uma função para fazer o passarinho pular!
+
+“Pular” neste jogo é apenas mudar a posição _y do passarinho_.
+
+#### Abra a `Activity 2.js` onde vamos adicionar uma função chamada `pular`.\*\*
+
+Podemos fazer isso com este comando dentro da função pular ou `jump`:
+
+```js
+bird.body.velocity.y = -300;
+```
+
+Você pode ajustar esse número dependendo de quão alto você quer que o passarinho pule! Experimente mudar o número e veja como o passarinho pula quando você pressiona a barra de espaço.
+
+Agora o seu passarinho pode voar pelo ar!
+
+## Atividade 3: Vamos adicionar obstáculos
+
+Atualmente, seu passarinho não tem nada para desviar na tela, o que parece fácil demais! Podemos usar código para tornar o jogo mais difícil adicionando objetos para desviar! Para fazer isso, você precisará usar condicionais e loops (laços). Já falamos sobre condicionais, então agora vamos falar sobre loops.
+
+### Loops
+
+Loops são usados para executar um bloco de código várias vezes. Há muitos tipos de loops, mas o que você usará neste projeto é o loop `for`.
+
+Os loops `for` têm este formato:
+
+```js
+for (afirmação 1; afirmação 2; afirmação 3) {
+  // bloco de código a ser executado
+}
+```
+
+- A afirmação 1 é executada uma vez antes de executar o código dentro das chaves `{ }`.
+- A afirmação 2 define a condição em que o loop vai parar de rodar.
+- A afirmação 3 é executada a cada iteração do loop.
+
+Por exemplo:
+
+```js
+var soma = 0;
+for (var i = 0; i < 7; i += 1) {
+  soma = soma + 1;
+}
+```
+
+Você notará que criamos uma variável chamada `i` na primeira instrução do loop for. Essa variável é usada para acompanhar
+por quanto tempo o loop deve ser executado. A cada passagem pelo loop, verificamos se `i` ainda é menor que 7 e, se for, executamos o código
+dentro das chaves e depois adicionamos 1 ao `i`.
+
+Esse processo se repete até que `i < 7` seja falso.
+
+Também podemos usar `i` no código dentro das chaves:
+
+```js
+var soma = 0;
+for (var i = 0; i < 7; i += 1) {
+  soma = i + 1;
+}
+```
+
+Este código realiza a mesma operação, mas usa `i` dentro das chaves.
+
+Você pode ver um loop `for` em ação aqui: <https://codepen.io/nayomitchell/pen/JgNoQe>! Tente alterar os números nas diferentes declarações.
+Você consegue descobrir como fazer o loop **contar regressivamente**?
+
+---
+
+Agora, de volta ao nosso jogo. A tela pode comportar 8 blocos, então precisamos de um loop `for` que execute 8 vezes. Em `Activity 3.js`, você precisará adicionar um loop "for" ao redor do código que adiciona um obstáculo na tela.
+
+Temos outro problema agora! O jogo está muito difícil, pois não há maneira do seu pássaro passar!
+Vamos adicionar uma brecha na parede de obstáculos para o seu pássaro voar por ela!
+
+---
+
+Acima do código que você acabou de editar, existe uma variável chamada `hole`. Esta variável é um número entre 1 e 6, que representa onde a abertura deve estar na parede.
+O que queremos fazer é pular a criação do obstáculo **`se`** o valor de `i` no loop for **o mesmo** que `hole`. Podemos usar uma condicional para não criar um bloco na parede, deixando assim uma abertura por onde o passarinho possa passar!
+
+Atualmente, a parede é formada adicionando um cano na tela a cada execução do loop. Experimente usar uma condicional em torno de `addOnePipe` no loop, de forma que `addOnePipe` seja executado apenas quando `i` não for igual ao valor de `hole`.
+
+Depois de completar estas atividades, seu jogo deve estar funcionando! Veja qual é a sua melhor pontuação!