mdn · josielrocha · Sep 14, 2022 · Aug 23, 2022 · Aug 23, 2022 · Sep 13, 2022
@@ -26,12 +26,8 @@ <h2 id="How.3F" name="How.3F">Como?</h2>
 
 <p>A ideia básica é usar o {{domxref("window.setInterval","setInterval()")}} com um delay arbitrário que corresponda a uma taxa de atualização desejada. Depois de cada intervalo uma função de atualização irá redesenhar o canvas mostrando a view atual. Eu sei que poderia ter iniciado com um exemplo mais simples, mas estou certo que o tutorial do canvas vai fazê-lo, e eu queria verificar se poderia fazer isso.</p>
 
-<p>Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. <span id="result_box" lang="pt"><span title="As the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall.">Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede. </span><span title="The height of the sliver is also modulated by the distance from the camera to the wall, and is drawn centered over the horizon line.
-
-">A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.</span><br>
- <br>
- <span title="The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMotheTricks of the Game Programming Gurus book (ISBN: 0672305070), and a java raycaster I found online, filtered through my compulsion to rename everything so it makes sense">O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMothe<em>Tricks</em> do <em>livro de Gurus de Programação de Jogos</em> <sub>(ISBN: 0672305070)</sub>, e um<a href="http://www.shinelife.co.uk/java-maze/"> jaspe raycaster</a> que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido </span><span title="to me, and all the tinkering that had to be done to make things work well.
-">Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.</span></span></p>
+<p>Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede.A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.<br>
+ <br>O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMothe<em>Tricks</em> do <em>livro de Gurus de Programação de Jogos</em> <sub>(ISBN: 0672305070)</sub>, e um<a href="http://www.shinelife.co.uk/java-maze/"> jaspe raycaster</a> que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.</p>
 
 <p> </p>
 
@@ -40,12 +36,11 @@ <h1 id="Resultados"><strong>Resultados</strong></h1>
 <p> </p>
 
 <p><br>
- <span title="The canvas in Safari 2.0.1 performed surprisingly well.">A tela no Safari 2.0.1 apresentou surpreendentemente bem. </span><span title="With the blockiness factor cranked up to render slivers 8 pixels wide, I can run a 320 x 240 window at 24 fps on my Apple mini.">Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. </span><span title="Firefox 1.5 Beta 1 is even faster;">Firefox 1.5 Beta 1 é ainda mais rápido; </span><span title="I can run 320 x 240 at 24 fps with 4 pixel slivers.">Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. </span><span title="Not exactly a new member of the ID software family, but pretty decent considering it's a fully interpreted environment, and I didn't have to worry about memory allocation or video modes or coding inner routines in assembler or anything.">Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa. </span><span title="The code does attempt to be very efficient, using array look-ups of pre-computed values, but I'm no optimization guru, so things could probably be written faster.
+Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. Firefox 1.5 Beta 1 é ainda mais rápido; Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa.
 
-">O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.</span><br>
+">O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.<br>
  <br>
- <span title="Also, it leaves a lot to be desired in terms of trying to be any sort of game engine—there are no wall textures, no sprites, no doors, not even any teleporters to get to another level.">Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. </span><span title="But I'm pretty confident all those things could be added given enough time.">Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. </span><span title="The canvas API supports pixel copying of images, so textures seem feasible.">A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. </span><span title="I'll leave that for another article, probably from another person.">Vou deixar isso para outro artigo, provavelmente de outra pessoa. </span><span title="=)
-">=)</span></p>
+ Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente.A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. Vou deixar isso para outro artigo, provavelmente de outra pessoa. )</p>
 
 <p> </p>
 
@@ -54,11 +49,9 @@ <h2 id="O_ray-caster"><strong>O ray-caster</strong></h2>
 <p> </p>
 
 <p><br>
- <span title="The nice people here have manually copied my files up so you can take a look, and for your hacking enjoyment I've posted the individual file contents as code listings (see below).
-
-">As pessoas agradáveis aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).</span><br>
+As pessoas agradáveis aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).<br>
  <br>
- <span title="So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the &lt;canvas> element and enjoy!">Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento &lt;canvas&gt; e divirta-se!</span><br>
+ Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento &lt;canvas&gt; e divirta-se!<br>
  <br>
  <small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p>
 

@@ -13,10 +13,8 @@
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
-<div class="syntaxbox">
 <pre class="brush: js">// cancela animação
 animation.cancel();</pre>
-</div>
 
 <h3 id="Parametros">Parametros</h3>
 

@@ -62,9 +62,9 @@ <h2 id="Methods">Methods</h2>
 
 <h2 id="Example">Example</h2>
 
-<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p>
+<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)</p>
 
-<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
 
 var audioCtx = new AudioContext();
 

@@ -231,8 +231,6 @@ <h4 id="Declaração_de_variáveis">Declaração de variáveis</h4>
 </ul>
 
 <div class="hidden">
-<p>The shim to function even if idle callbacks aren't supported. Already discussed above, so it's hidden here to save space in the article.</p>
-
 <pre class="brush: js">window.requestIdleCallback = window.requestIdleCallback || function(handler) {
   let startTime = Date.now();
 
@@ -424,8 +422,6 @@ <h4 id="The_main_program">The main program</h4>
 <p>Everything is triggered when the user clicks the Start button, which causes the <code>decodeTechnoStuff()</code> function to be called.</p>
 
 <div class="hidden">
-<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random?document_saved=true#Getting_a_random_integer_between_two_values_inclusive">getRandomIntInclusive()</a></code> method comes from the examples for {{jsxref("Math.random()")}}; we'll just link to it below but it needs to be included here for the example to work.</p>
-
 <pre class="brush: js">function getRandomIntInclusive(min, max) {
   min = Math.ceil(min);
   max = Math.floor(max);

@@ -25,7 +25,7 @@ <h2 id="Syntax">Syntax</h2>
 
 <h2 id="Exemplo">Exemplo:</h2>
 
-<pre class="brush: js;highlight[8]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 // Older webkit/blink browsers require a prefix
 

@@ -5,9 +5,9 @@
 ---
 <div>{{APIRef("File API")}}</div>
 
-<p>O método <strong><code>Blob.slice()</code></strong> é usado para criar um novo {{domxref("Blob")}} object  <span lang="pt">contendo os dados no intervalo especificado de bytes da fonte </span>{{domxref("Blob")}}.</p>
+<p>O método <strong><code>Blob.slice()</code></strong> é usado para criar um novo {{domxref("Blob")}} object contendo os dados no intervalo especificado de bytes da fonte {{domxref("Blob")}}.</p>
 
-<div class="note"><span lang="pt">Nota: Esteja ciente de que o método <code>slice ()</code> tem prefixos de fornecedores em alguns navegadores e versões: <code>blob.mozSlice ()</code> para Firefox 12 e anteriores e <code>blob.webkitSlice ()</code> no Safari. Uma versão antiga do método <code>slice ()</code>, sem prefixos de fornecedor, tinha uma semântica diferente e é obsoleta</span></div>
+<div class="note">Nota: Esteja ciente de que o método <code>slice ()</code> tem prefixos de fornecedores em alguns navegadores e versões: <code>blob.mozSlice ()</code> para Firefox 12 e anteriores e <code>blob.webkitSlice ()</code> no Safari. Uma versão antiga do método <code>slice ()</code>, sem prefixos de fornecedor, tinha uma semântica diferente e é obsoleta</div>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 

@@ -52,7 +52,7 @@ <h2 id="Adicionando_velocidade">Adicionando velocidade</h2>
 
 <p>Agora que você tem a bola, Nós estamos prontos para adicionar uma animação como nós temos aprendido no <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">último capítulo</a> deste tutorial. Denovo, {{domxref("window.requestAnimationFrame()")}} ajuda-nos a controlar a animação. a bola pega o movimento adicionando um vetor de velocidade para a posição. Para cada frame, N[ós também {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}o canvas para remover velhor círculos da prioridade dos frames.</p>
 
-<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas');
+<pre class="brush: js">var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var raf;