initial commit

4 files changed, 411 insertions, 0 deletions

diff --git a/files/pt-br/games/techniques/2d_collision_detection/index.html b/files/pt-br/games/techniques/2d_collision_detection/index.html
new file mode 100644
index 0000000000..d9768984dc
--- /dev/null
+++ b/files/pt-br/games/techniques/2d_collision_detection/index.html
@@ -0,0 +1,192 @@
+---
+title: Detecção de Colisão 2D
+slug: Games/Techniques/2D_collision_detection
+translation_of: Games/Techniques/2D_collision_detection
+---
+<div>{{GamesSidebar}}</div>
+
+<p>{{IncludeSubnav("/en-US/docs/Games")}}</p>
+
+<div class="summary">
+<p>Algoritmos para detectar colisões em jogos 2D dependem do tipo de formas que podem colidir (por exemplo, retângulo para retângulo, retângulo para círculo, círculo para círculo). Geralmente, você terá uma forma genérica simples que abrange a entidade conhecida como "hitbox", portanto, mesmo que a colisão não seja perfeita, ela terá boa aparência e terá bom desempenho em várias entidades. Este artigo fornece uma revisão das técnicas mais comuns usadas para fornecer detecção de colisão em jogos 2D.</p>
+</div>
+
+<h2 id="Caixa_delimitadora_alinhada_por_eixo">Caixa delimitadora alinhada por eixo</h2>
+
+<p>Uma das formas mais simples de detecção de colisão é entre dois retângulos alinhados no eixo — ou seja, sem rotação. O algoritmo funciona garantindo que não haja nenhum espaço entre os 4 lados dos retângulos. Qualquer lacuna significa que uma colisão não existe.</p>
+
+<pre class="brush: js notranslate">var rect1 = {x: 5, y: 5, width: 50, height: 50}
+var rect2 = {x: 20, y: 10, width: 10, height: 10}
+
+if (rect1.x &lt; rect2.x + rect2.width &amp;&amp;
+   rect1.x + rect1.width &gt; rect2.x &amp;&amp;
+   rect1.y &lt; rect2.y + rect2.height &amp;&amp;
+   rect1.y + rect1.height &gt; rect2.y) {
+    // collision detected!
+}
+
+// filling in the values =&gt;
+
+if (5 &lt; 30 &amp;&amp;
+    55 &gt; 20 &amp;&amp;
+    5 &lt; 20 &amp;&amp;
+    55 &gt; 10) {
+    // collision detected!
+}
+</pre>
+
+<div class="hidden">
+<h5 id="Rect_code">Rect code</h5>
+
+<pre class="brush: html notranslate">&lt;div id="cr-stage"&gt;&lt;/div&gt;
+&lt;p&gt;Mova o retângulo com as setas do teclado. Verde significa colisão, azul significa não-colisão.&lt;/p&gt;
+&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"&gt;&lt;/script&gt;
+</pre>
+
+<pre class="brush: js notranslate">Crafty.init(200, 200);
+
+var dim1 = {x: 5, y: 5, w: 50, h: 50}
+var dim2 = {x: 20, y: 10, w: 60, h: 40}
+
+var rect1 = Crafty.e("2D, Canvas, Color").attr(dim1).color("red");
+
+var rect2 = Crafty.e("2D, Canvas, Color, Keyboard, Fourway").fourway(2).attr(dim2).color("blue");
+
+rect2.bind("EnterFrame", function () {
+    if (rect1.x &lt; rect2.x + rect2.w &amp;&amp;
+        rect1.x + rect1.w &gt; rect2.x &amp;&amp;
+        rect1.y &lt; rect2.y + rect2.h &amp;&amp;
+        rect1.h + rect1.y &gt; rect2.y) {
+        // collision detected!
+        this.color("green");
+    } else {
+        // no collision
+        this.color("blue");
+    }
+});
+
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Rect_code', '700', '300', '', 'Games/Techniques/2D_collision_detection') }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: <a href="https://jsfiddle.net/jlr7245/217jrozd/3/">Outro exemplo sem o Canvas ou bibliotecas externas.</a></p>
+</div>
+
+<h2 id="Colisão_Circular">Colisão Circular</h2>
+
+<p>Outra forma simples para detecção de colisão é entre dois círculos. Esse algoritmo funciona tomando os pontos centrais dos dois círculos e garantindo que a distância entre os pontos centrais seja menor que os dois raios somados.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;div id="cr-stage"&gt;&lt;/div&gt;
+&lt;p&gt;Move the circle with arrow keys. Green means collision, blue means no collision.&lt;/p&gt;
+&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"&gt;&lt;/script&gt;
+</pre>
+
+<pre class="brush: css notranslate">#cr-stage {
+    position: static !important;
+    height: 200px !important;
+}
+</pre>
+
+<pre class="brush: js notranslate">Crafty.init(200, 200);
+
+var dim1 = {x: 5, y: 5}
+var dim2 = {x: 20, y: 20}
+
+Crafty.c("Circle", {
+   circle: function(radius, color) {
+        this.radius = radius;
+        this.w = this.h = radius * 2;
+        this.color = color || "#000000";
+
+        this.bind("Move", Crafty.DrawManager.drawAll)
+        return this;
+   },
+
+   draw: function() {
+       var ctx = Crafty.canvas.context;
+       ctx.save();
+       ctx.fillStyle = this.color;
+       ctx.beginPath();
+       ctx.arc(
+           this.x + this.radius,
+           this.y + this.radius,
+           this.radius,
+           0,
+           Math.PI * 2
+       );
+       ctx.closePath();
+       ctx.fill();
+       ctx.restore();
+    }
+});
+
+var circle1 = Crafty.e("2D, Canvas, Circle").attr(dim1).circle(15, "red");
+
+var circle2 = Crafty.e("2D, Canvas, Circle, Fourway").fourway(2).attr(dim2).circle(20, "blue");
+
+circle2.bind("EnterFrame", function () {
+    var dx = (circle1.x + circle1.radius) - (circle2.x + circle2.radius);
+    var dy = (circle1.y + circle1.radius) - (circle2.y + circle2.radius);
+    var distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (distance &lt; circle1.radius + circle2.radius) {
+        // collision detected!
+        this.color = "green";
+    } else {
+        // no collision
+        this.color = "blue";
+    }
+});
+
+
+</pre>
+</div>
+
+<pre class="brush: js notranslate"><code>var circle1 = {radius: 20, x: 5, y: 5};
+var circle2 = {radius: 12, x: 10, y: 5};
+
+var dx = circle1.x - circle2.x;
+var dy = circle1.y - circle2.y;
+var distance = Math.sqrt(dx * dx + dy * dy);
+
+if (distance &lt; circle1.radius + circle2.radius) {
+    // collision detected!
+}</code>
+</pre>
+
+<p>{{ EmbedLiveSample('Playable_code', '700', '300', '', 'Games/Techniques/2D_collision_detection') }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>:  <a href="https://jsfiddle.net/jlr7245/teb4znk0/20/" rel="noopener"><font><font>Aqui é outro exemplo sem o Canvas ou bibliotecas externas.</font></font></a></p>
+</div>
+
+<h2 id="Teorema_do_eixo_de_separação">Teorema do eixo de separação</h2>
+
+<p>Este é um algoritmo de colisão que pode detectar uma colisão entre quaisquer dois polígonos *convexos*. É mais complicado implementar do que os métodos acima, mas é mais poderoso. A complexidade de um algoritmo como esse significa que precisaremos considerar a otimização de desempenho, abordada na próxima seção.</p>
+
+<p>A implementação do SAT está fora do escopo desta página, portanto, veja os tutoriais recomendados abaixo:</p>
+
+<ol>
+ <li><a href="http://www.sevenson.com.au/actionscript/sat/">Separating Axis Theorem (SAT) explanation</a></li>
+ <li><a href="http://www.metanetsoftware.com/technique/tutorialA.html">Collision detection and response</a></li>
+ <li><a href="http://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169">Collision detection Using the Separating Axis Theorem</a></li>
+ <li><a href="http://www.codezealot.org/archives/55">SAT (Separating Axis Theorem)</a></li>
+ <li><a href="http://rocketmandevelopment.com/blog/separation-of-axis-theorem-for-collision-detection/">Separation of Axis Theorem (SAT) for Collision DDetection</a></li>
+</ol>
+
+<h2 id="Performance_de_Colisão">Performance de Colisão</h2>
+
+<p>Embora alguns desses algoritmos para detecção de colisão sejam simples o suficiente para serem calculados, pode ser um desperdício de ciclos testar todas as entidades com todas as outras entidades. Normalmente os jogos dividem a colisão em duas fases, ampla e estreita.</p>
+
+<h3 id="Fase_Larga">Fase Larga</h3>
+
+<p>A fase ampla deve fornecer uma lista de entidades que *podem* estar colidindo. Isso pode ser implementado com uma estrutura de dados espacial que lhe dará uma ideia aproximada de onde a entidade existe e o que existe em torno dela. Alguns exemplos de estruturas de dados espaciais são Quad Trees, R-Trees ou um Spash Hashmap.</p>
+
+<h3 id="Fase_estreita">Fase estreita</h3>
+
+<p>Quando você tem uma pequena lista de entidades para verificar, você vai querer usar um algoritmo de fase estreita (como os listados acima) para fornecer uma resposta certa sobre se há uma colisão ou não.</p>
diff --git a/files/pt-br/games/techniques/3d_on_the_web/index.html b/files/pt-br/games/techniques/3d_on_the_web/index.html
new file mode 100644
index 0000000000..dda4322bdd
--- /dev/null
+++ b/files/pt-br/games/techniques/3d_on_the_web/index.html
@@ -0,0 +1,109 @@
+---
+title: Jogos 3D na WEB
+slug: Games/Techniques/3D_on_the_web
+tags:
+  - 3D
+  - Jogos
+  - graficos
+translation_of: Games/Techniques/3D_on_the_web
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary"> A melhor arma para desenvolver ótimas experiências em jogos na WEB é WebGL, que é renderizada em HTML {{htmlelement("canvas")}}. WebGL é, basicamente, uma OpenGL ES 2.0 para a Web — é uma API JavaScript que fornece ferramentas para construir animações ricas e, logicamente, jogos. Você pode gerar e renderizar gráficos dinâmicos em 3D com JavaScript acelerado por hardware.</p>
+
+<h2 id="Documentação_e_suporte_para_navegadores">Documentação e suporte para navegadores</h2>
+
+<p>A documentação e as especificações do projeto <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> é mantida pelo <a href="https://www.khronos.org/">Grupo Khronos</a>, não o W3C como a maioria das APIs Web. O suporte nos navegadores modernos é muito bom, até mesmo em mobile, portanto você não terá que se preocupar muito com isso. Todos os navegadores comuns suportam WebGL e tudo mais que você precisar para que possa focar em otimizar o desempenho nos dispositivos que usar.</p>
+
+<p>Há um esforço contínuo em liberar WebGL 2.0 (baseado na OpenGL ES 3.0) em um futuro próximo para, além de trazer muitas melhorias, também ajudar  os desenvolvedores a construir jogos para a Web "moderna", usando hardware atual e poderoso.</p>
+
+<h2 id="Explicando_a_teoria_3D_básica">Explicando a teoria 3D básica</h2>
+
+<p>O básico da teoria 3D gira em torno de formas representadas em um espaço 3D, que corresponde a um sistema de coordenadas usadas para calcular suas posições. Veja noss artigo <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory">Explicando a teoria 3D básica</a> para todas as informações que você precisar</p>
+
+<h2 id="Conceitos_avançados">Conceitos avançados</h2>
+
+<p>Você pode fazer muito mais com WebGL. Há alguns conceitos avançados que você deve se aprofundar e aprender mais — como shaders, detecção de colisão, ou o mais recente tópico em alta — realidade virtual na web.</p>
+
+<h3 id="Shaders">Shaders</h3>
+
+<p>É importante mencionar os shaders, que tem uma história separada por sí próprios. Shaders usam GLSL, uma "Linguagem de Sombreamento" OpenGL especial com sintaxe similar a C, que é executada diretamente pelos pipelines de gráficos. Podem ser divididos em Vertex Shaders e Fragment Shaders (ou Pixel Shaders) — o primeiro transforma as posições das formas em coordenadas reais de desenho 3D, enquanto o segundo calcula cores de renderização e outros atributos. Recomendamos fortemente que você veja o artigo <a href="/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders </a>para aprender mais sobre eles.</p>
+
+<h3 id="Detecção_de_Colisão">Detecção de Colisão</h3>
+
+<p>É difícil de imaginar um jogo sem detecção de colisão — nós sempre precisamos trabalhar com algo batendo em alguma outra coisa. Temos informações disponíveis para você aprender em:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">Detecção de colisão 2D</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">Detecção de colisão 3D</a></li>
+</ul>
+
+<h3 id="WebVR">WebVR</h3>
+
+<p>O conceito de realidade virtual não é novo, mas está crescendo na web devido os avanços de hardware, tal como o <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a>, e a (atualmente experimental) <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> para capturar informações de hardware via Realidade Virtual (RV) e tonaná-la acessível para uso em aplicações JavaScript. Para mais informações, leia <a href="/en-US/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR — Realidade Virtual para a Web</a>.</p>
+
+<p>Também há o artigo <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Desenvolvendo uma demo básica com A-Frame</a> que te mostra como é fácil construir ambientes 3D para realidade virtual usando o framework <a href="http://aframe.io/">A-Frame</a>.</p>
+
+<h2 id="O_surgimentos_de_bibliotecas_e_frameworks">O surgimentos de bibliotecas e frameworks</h2>
+
+<p>Codificar WebGL diretamente é bem complexo, mas você vai querer se familiarizar com isso a longo prazo quando seus projetos avançarem (veja nossa <a href="/en-US/docs/Web/API/WebGL_API">documentação WebGL</a> para começar). Para projetos do mundo real você provavelmente também usará um framework para acelerar o desenvolvimento e ajudar na administração do projeto em que estiver trabalhando. Usar um framework para jogos 3D também ajuda muito a otimizar o desempenho, assim você pode focar no desenvolvimento do jogo.</p>
+
+<p>A biblioteca JavaScript 3D mais popular é <a href="http://threejs.org/">Three.js</a>, uma ferramenta multiuso que deixa técnicas 3D comuns mais simples de serem implementadas. Há outras bibliotecas de desenvolvimento de jogos populares e alguns frameworks que valem a pena serem checados também; <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> e <a href="http://www.babylonjs.com/">Babylon.js</a> estão entre os mais reconhecidos, com belas documentações, editores online e comunidades ativas.</p>
+
+<h3 id="Desenvolvendo_uma_demo_básica_com_A-Frame">Desenvolvendo uma demo básica com A-Frame</h3>
+
+<p>A-Frame é um framework web para desenvolvimento 3D e experiências de RV. Visto mais afundo, é um framework three.js com um padrão componente-entidade declarativo, significando que podemos construir cenas apenas com HTML. Veja a página <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Desenvolvendo uma demo básica com A-Frame</a> para o passo-a-passo da criação de uma demo.</p>
+
+<h3 id="Desenvolvendo_uma_demo_básica_com_Babylon.js">Desenvolvendo uma demo básica com Babylon.js</h3>
+
+<p><span class="seosummary">Babylon.js é um dos mais populares motores de jogos 3D usados por desenvolvedores. Assim como qualquer outra biblioteca 3D, ela fornece funções integradas para te ajudar a implementar funcionalidades tridimensionais comuns mais rapidamente. Veja a página </span><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Desenvovlendo uma demo básica com Babylon.js</a><span class="seosummary"> para saber o básico de Babylon.js, incluindo configurações do ambiente de desenvolvimento, estruturar o HTML necessário e escrever o código JavaScript.</span></p>
+
+<h3 id="Desenvolvendo_uma_demo_básica_com_PlayCanvas">Desenvolvendo uma demo básica com PlayCanvas</h3>
+
+<p>PlayCanvas é um popular motor de jogos 3D WebGL de código aberto no GitHub, com um editor acessível online e com boa documentação. Veja a página <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Desenvolvendo uma demo básica com PlayCanvas</a> para detalhes mais avançados e encontrar outros artigos mostrando como usar a bilbioteca PlayCanvas e o editor online.</p>
+
+<h3 id="Desenvolvendo_uma_demo_básica_com_Three.js">Desenvolvendo uma demo básica com Three.js</h3>
+
+<p>Three.js, assim como qualquer outra biblioteca, lhe fornece uma enorme vantagem: ao invés de escrever centenas de linhas do código WebGL para construir qualquer coisa interessante, te permite usar as funções auxiliares integradas para desenvolver o que quiser muito mais rápido e fácil. Veja a página <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Desenvolvendo uma demo básica com Three.js</a> para o passo-a-passo da criação de uma demo.</p>
+
+<h3 id="Outras_ferramentas">Outras ferramentas</h3>
+
+<p>Tanto <a href="http://unity3d.com/">Unity</a> quanto <a href="https://www.unrealengine.com/">Unreal</a> podem exportar o seu jogo para <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> com <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>, então você estará livre para usar suas ferramentas e técnicas para desenvolvimento de jogos que serão exportados para a web.</p>
+
+<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h2 id="Para_onde_ir_agora">Para onde ir agora</h2>
+
+<p>Com esse artigo nós apenas arranhamos a superfície do que é possível fazer com as tecnologias disponíveis atualmente. Você pode desenvolver jogos imersivos, belos e rápidos na WEB usando WebGL, e as bibliotecas e frameworks construídos sobre ele.</p>
+
+<h3 id="Código-fonte">Código-fonte</h3>
+
+<p>Você pode encontrar todo o código fonte para esta série de <a href="http://end3r.github.io/MDN-Games-3D/">demos no GitHub</a>.</p>
+
+<h3 id="APIs">APIs</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li>
+</ul>
+
+<h3 id="Frameworks">Frameworks</h3>
+
+<ul>
+ <li><a href="http://threejs.org/">Three.js</a></li>
+ <li><a href="https://github.com/WhitestormJS/whs.js">Whitestorm.js</a> (baseado em Three.js)</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a></li>
+ <li><a href="http://www.babylonjs.com/">Babylon.js</a></li>
+ <li><a href="http://aframe.io/">A-Frame</a></li>
+</ul>
+
+<h3 id="Tutoriais">Tutoriais</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Desenvolvendo uma demo básica com Three.js</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js">Desenvolvendo uma demo básica com Whitestorm.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Desenvolvendo uma demo básica com PlayCanvas</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Desenvovlendo uma demo básica com Babylon.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Desenvolvendo uma demo básica com A-Frame</a></li>
+</ul>
diff --git a/files/pt-br/games/techniques/control_mechanisms/index.html b/files/pt-br/games/techniques/control_mechanisms/index.html
new file mode 100644
index 0000000000..07b6e0b6e1
--- /dev/null
+++ b/files/pt-br/games/techniques/control_mechanisms/index.html
@@ -0,0 +1,78 @@
+---
+title: Implementing game control mechanisms
+slug: Games/Techniques/Control_mechanisms
+tags:
+  - Controls
+  - Desktop
+  - Gamepad
+  - Games
+  - JavaScript
+  - Laptop
+  - Mobile
+  - NeedsTranslation
+  - TopicStub
+  - keyboard
+  - mouse
+  - touch
+translation_of: Games/Techniques/Control_mechanisms
+---
+<div>{{GamesSidebar}}</div><p class="summary">One of HTML5's main advantages as a game development platform is the ability to run on various platforms and devices. Streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts. In this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads.</p>
+
+<h2 id="Case_study">Case study</h2>
+
+<p>We'll be using the <a href="http://rogers2.enclavegames.com/demo/">Captain Rogers: Battle at Andromeda demo</a> as an example.</p>
+
+<p><img alt="Captain Rogers: Battle at Andromeda - cover of the game containing Enclave Games and Blackmoon Design logos, Roger's space ship and title of the game." src="https://mdn.mozillademos.org/files/13849/captainrogers2-cover.png" style="display: block; height: 325px; margin: 0px auto; width: 575px;"></p>
+
+<p>Captain Rogers was created using the <a href="http://phaser.io/">Phaser</a> framework, the most popular tool for simple 2D game development in JavaScript right now, but it should be fairly easy to reuse the knowledge contained within these articles when building games in pure JavaScript or any other framework. If you're looking for a good introduction to Phaser, then check the <a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser">2D breakout game using Phaser</a> tutorial.</p>
+
+<p>In the following articles we will show how to implement various different control mechanisms for Captain Rogers to support different platforms — from touch on mobile, through keyboard/mouse/gamepad on desktop, to more unconventional ones like TV remote, shouting to or waving your hand in front of the laptop, or squeezing bananas.</p>
+
+<h2 id="Setting_up_the_environment">Setting up the environment</h2>
+
+<p>Let's start with a quick overview of the game's folder structure, JavaScript files and in-game states, so we know what's happening where. The game's folders look like this:</p>
+
+<p><img alt="Captain Rogers: Battle at Andromeda - folder structure of the games' project containing JavaScript sources, images and fonts." src="https://mdn.mozillademos.org/files/13851/captainrogers2-folderstructure.png" style="border-style: solid; border-width: 1px; display: block; height: 479px; margin: 0px auto; width: 575px;"></p>
+
+<p>As you can see there are folders for images, JavaScript files, fonts and sound effects. The <code>src</code> folder contains the JavaScript files split as a separate states — <code>Boot.js</code>, <code>Preloader.js</code>, <code>MainMenu.js</code> and <code>Game.js</code> — these are loaded into the index file in this exact order. The first one initializes Phaser, the second preloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay.</p>
+
+<p>Every state has its own default methods: <code>preload()</code>, <code>create()</code>, and <code>update()</code>. The first one is needed for preloading required assets, <code>create()</code> is executed once the state had started, and <code>update()</code> is executed on every frame.</p>
+
+<p>For example, you can define a button in the <code>create()</code> function:</p>
+
+<pre class="brush: js">create: function() {
+	// ...
+	var buttonEnclave = this.add.button(10, 10, 'logo-enclave', this.clickEnclave, this);
+	// ...
+}
+</pre>
+
+<p>It will be created once at the start of the game, and will execute <code>this.clickEnclave()</code> action assigned to it when clicked, but you can also use the mouse's pointer value in the <code>update()</code> function to make an action:</p>
+
+<pre class="brush: js">update: function() {
+	// ...
+	if(this.game.input.mousePointer.isDown) {
+	    // do something
+	}
+	// ...
+}
+</pre>
+
+<p>This will be executed whenever the mouse button is pressed, and it will be checked against the input's <code>isDown</code> boolean variable on every frame of the game.</p>
+
+<p>That should give you some understanding of the project structure. We'll be playing mostly with the <code>MainMenu.js</code> and <code>Game.js</code> files, and we'll explain the code inside the <code>create()</code> and <code>update()</code> methods in much more detail in later articles.</p>
+
+<h2 id="Pure_JavaScript_demo">Pure JavaScript demo</h2>
+
+<p>There's also a <a href="https://end3r.github.io/JavaScript-Game-Controls/">small online demo</a> with full source code <a href="https://github.com/end3r/JavaScript-Game-Controls/">available on GitHub</a> where the basic support for the control mechanisms described in the articles is implemented in pure JavaScript. It will be explained in the given articles themselves below, but you can play with it already, and use the code however you want for learning purposes.</p>
+
+<h2 id="The_articles">The articles</h2>
+
+<p>JavaScript is the perfect choice for mobile gaming because of HTML5 being truly multiplatform; all of the following articles focus on the APIs provided for interfacing with different control mechanisms:</p>
+
+<ol>
+ <li><a href="/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch">Mobile touch controls</a> — The first article will kick off with touch, as the mobile first approach is very popular.</li>
+ <li><a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">Desktop mouse and keyboard controls</a> — When playing on a desktop/laptop computer, providing keyboard and mouse controls is essential to provide an acceptable level of accessibility for the game.</li>
+ <li><a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad">Desktop gamepad controls</a> — The Gamepad API rather usefully allows gamepads to be used for controlling web apps on desktop/laptop, for that console feel.</li>
+ <li><a href="/en-US/docs/Games/Techniques/Control_mechanisms/Other">Unconventional controls</a> — The final article showcases some unconventional control mechanisms, from the experimental to the slightly crazy, which you might not believe could be used to play the game.</li>
+</ol>
diff --git a/files/pt-br/games/techniques/index.html b/files/pt-br/games/techniques/index.html
new file mode 100644
index 0000000000..ad9c41a640
--- /dev/null
+++ b/files/pt-br/games/techniques/index.html
@@ -0,0 +1,32 @@
+---
+title: Técnicas para desenvolvimento de jogos
+slug: Games/Techniques
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Games/Techniques
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">This page lists essential core techniques for anyone wanting to develop games using open web technologies.</span></p>
+
+<p>These are the Ideas and Technique for game devlopment</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Techniques/Async_scripts">Using async scripts for asm.js</a></dt>
+ <dd>Especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's JavaScript can be compiled off the main thread and be cached for future game running, resulting in a significant performance improvement for your users. This article explains how.</dd>
+ <dt><a href="/en-US/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">Optimizing startup performance</a></dt>
+ <dd>How to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.</dd>
+ <dt><a href="/en-US/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">Using WebRTC peer-to-peer data channels</a></dt>
+ <dd>In addition to providing support for audio and video communication, WebRTC lets you set up peer-to-peer data channels to exchange text or binary data actively between your players. This article explains what this can do for you, and shows how to use libraries that make this easy.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></dt>
+ <dd>This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Audio_for_Web_Games">Audio for Web Games</a></dt>
+ <dd>Audio is an important part of any game — it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to negotiate. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></dt>
+ <dd>A concise introduction to collision detection in 2D games.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Tilemaps">Tilemaps</a></dt>
+ <dd>Tiles are a very popular technique in 2D games for building the game world. These articles provide an introduction to tilemaps and how to implement them with the Canvas API.</dd>
+</dl>