mdn · irvin · May 7, 2022 · May 6, 2022 · May 6, 2022 · May 6, 2022
@@ -15,7 +15,7 @@
 <div>{{GamesSidebar}}</div>
 
 <div class="summary">
-<p><span class="seoSummary">游戏是在计算机上最风靡的活动之一。新技术不断发展已使开发出能在任何符合标准的浏览器上运行更好更炫的游戏成为可能。</span></p>
+<p>游戏是在计算机上最风靡的活动之一。新技术不断发展已使开发出能在任何符合标准的浏览器上运行更好更炫的游戏成为可能。</p>
 </div>
 
 <div>{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}</div>

@@ -8,7 +8,7 @@
   - 获利
 translation_of: Games/Publishing_games
 ---
-<div>{{GamesSidebar}}</div><p class="summary"><span class="seoSummary">HTML5游戏在发布和分发上具有极大的优势--你可以通过网络自由地发布，推广，获利，并且不受分发商的限制。你可以实现通过多种平台获利。这一系列的案例关注在当你想要发布，推广你的游戏，并当游戏变得有名时获取一些回报。</span></p>
+<div>{{GamesSidebar}}</div><p class="summary">HTML5游戏在发布和分发上具有极大的优势--你可以通过网络自由地发布，推广，获利，并且不受分发商的限制。你可以实现通过多种平台获利。这一系列的案例关注在当你想要发布，推广你的游戏，并当游戏变得有名时获取一些回报。</p>
 
 <h2 id="游戏发布">游戏发布</h2>
 

@@ -20,7 +20,7 @@ <h2 id="Axis-aligned_bounding_boxes（AABB包围盒）">Axis-aligned bounding bo
 <p><img alt="" src="https://mdn.mozillademos.org/files/11799/rotating_knot.gif" style="display: block; height: 192px; margin: 0px auto; width: 207px;"></p>
 
 <div class="note">
-<p><strong>Note:</strong> 参考<a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js">这里</a>，<font><font>使用</font></font><font><font>Three</font></font><font><font>.js进行</font><font>边界体积碰撞检测。</font></font></p>
+<p><strong>Note:</strong> 参考<a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js">这里</a>，使用Three.js进行边界体积碰撞检测。</p>
 </div>
 
 <h3 id="点与_AABB">点与 AABB</h3>

@@ -8,7 +8,7 @@
   - 顶点着色器
 translation_of: Games/Techniques/3D_on_the_web/GLSL_Shaders
 ---
-<div>{{GamesSidebar}}</div><p class="summary"><span class="seosummary">使用GLSL的着色器(shader), GLSL是一门特殊的有着类似于C语言的语法, 在图形管道(graphic pipeline)中直接可执行的OpenGL着色语言. 着色器有两种类型 -- 顶点着色器(Vertex Shader)和片段着色器(Fragment Shader). 前者是将形状转换到真实的3D绘制坐标中, 后者是计算最终渲染的颜色和其他属性用的.</span></p>
+<div>{{GamesSidebar}}</div><p class="summary">使用GLSL的着色器(shader), GLSL是一门特殊的有着类似于C语言的语法, 在图形管道(graphic pipeline)中直接可执行的OpenGL着色语言. 着色器有两种类型 -- 顶点着色器(Vertex Shader)和片段着色器(Fragment Shader). 前者是将形状转换到真实的3D绘制坐标中, 后者是计算最终渲染的颜色和其他属性用的.</p>
 
 <p>GLSL不同于JavaScript, 它是强类型语言, 并且内置很多数学公式用于计算向量和矩阵. 快速编写着色器非常复杂, 但创建一个简单的着色器并不难. 在这篇文章我们将介绍使用着色器的基础知识, 并且构建一个使用Three.js的例子来加速代码编写.</p>
 

@@ -61,7 +61,7 @@ <h3 id="使用_A-Frame_搭建一个基础Demo">使用 A-Frame 搭建一个基础
 
 <h3 id="使用_Babylon.js_搭建一个基础Demo">使用 Babylon.js 搭建一个基础Demo</h3>
 
-<p><span class="seosummary">Babylon.js 是最受开发者欢迎的3D游戏引擎之一。与其他任何3D库一样，它提供了内置函数，帮助您更快地实现常见的3D功能。请参阅 <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a>   子页，其中包括建立一个开发环境，构建必要的HTML，以及编写JavaScript代码。</span></p>
+<p>Babylon.js 是最受开发者欢迎的3D游戏引擎之一。与其他任何3D库一样，它提供了内置函数，帮助您更快地实现常见的3D功能。请参阅 <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a>   子页，其中包括建立一个开发环境，构建必要的HTML，以及编写JavaScript代码。</p>
 
 <h3 id="使用_PlayCanvas_搭建一个基础Demo">使用 PlayCanvas  搭建一个基础Demo</h3>
 

@@ -6,7 +6,7 @@
 <div>{{GamesSidebar}}</div>
 
 <div class="summary">
-<p><span class="seoSummary">每个中型或大型游戏都应编译<a href="https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js">asm.js</a>代码作为异步脚本的一部分，以便浏览器能够最大限度地灵活地优化编译过程。 在Gecko中，异步编译允许JavaScript引擎在游戏加载时缓存主线程的asm.js，并缓存生成的机器代码，这样游戏就不需要在随后的加载中编译（从Firefox 28开始）。 要查看差异，请切换<code>javascript.options.parallel_parsing</code> in <code>about:config</code>.</span></p>
+<p>每个中型或大型游戏都应编译<a href="https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js">asm.js</a>代码作为异步脚本的一部分，以便浏览器能够最大限度地灵活地优化编译过程。 在Gecko中，异步编译允许JavaScript引擎在游戏加载时缓存主线程的asm.js，并缓存生成的机器代码，这样游戏就不需要在随后的加载中编译（从Firefox 28开始）。 要查看差异，请切换<code>javascript.options.parallel_parsing</code> in <code>about:config</code>.</p>
 </div>
 
 <h2 id="异步执行">异步执行</h2>

@@ -11,7 +11,7 @@
 <div>{{GamesSidebar}}</div>
 
 <div class="summary">
-<p><span class="seoSummary">这个页面为想要使用开放的网页技术来开发游戏的人列举出了必要的核心技术。</span></p>
+<p>这个页面为想要使用开放的网页技术来开发游戏的人列举出了必要的核心技术。</p>
 </div>
 
 <dl>

@@ -13,7 +13,7 @@
 <div>{{GamesSidebar}}</div>
 
 <div class="summary">
-<p><span class="seoSummary">On this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.</span></p>
+<p>On this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.</p>
 </div>
 
 <dl>

@@ -18,43 +18,43 @@
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Extra_lives", "Games/Workflows/2D_Breakout_game_Phaser/Buttons")}}</p>
 
 <div class="summary">
-<p><font><font>这是</font><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser"><font>Gamedev Phaser教程</font></a><font> 16 </font><font>的</font></font><strong><font><font>第14步</font></font></strong><font><font>。</font><font>您可以在</font><a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson14.html"><font>Gamedev-Phaser-Content-Kit / demos / lesson14.html</font></a><font>完成本课程后找到源代码</font><font>。</font></font></p>
+<p>这是<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser教程</a> 16 的<strong>第14步</strong>。您可以在<a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson14.html">Gamedev-Phaser-Content-Kit / demos / lesson14.html</a>完成本课程后找到源代码。</p>
 </div>
 
-<p><font>为了使游戏看起来更加多汁和活泼，我们可以使用动画和补间。</font><font>这将导致更好，更有趣的体验。</font><font>让我们来探讨如何在游戏中实现Phaser动画和补间。</font></p>
+<p>为了使游戏看起来更加多汁和活泼，我们可以使用动画和补间。这将导致更好，更有趣的体验。让我们来探讨如何在游戏中实现Phaser动画和补间。</p>
 
 <h2 id="动画">动画</h2>
 
-<p><font><font>在Phaser，动画中，涉及从外部来源获取spritesheet并依次显示sprites。</font><font>作为一个例子，当碰到一些东西时，我们会让球摇摆。</font></font></p>
+<p>在Phaser，动画中，涉及从外部来源获取spritesheet并依次显示sprites。作为一个例子，当碰到一些东西时，我们会让球摇摆。</p>
 
-<p><font><font>首先，</font></font><a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/img/wobble.png"><font><font>从Github抓取spritesheet</font></font></a><font><font>并将其保存在您的</font></font><code>/img</code><font><font>目录中。</font></font></p>
+<p>首先，<a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/img/wobble.png">从Github抓取spritesheet</a>并将其保存在您的<code>/img</code>目录中。</p>
 
-<p><font><font>接下来，我们将加载spritesheet - 将以下行放在</font></font><code>preload()</code><font><font>函数</font><font>的底部</font><font>：</font></font></p>
+<p>接下来，我们将加载spritesheet - 将以下行放在<code>preload()</code>函数的底部：</p>
 
 <pre class="brush: js">game.load.spritesheet('ball', 'img/wobble.png', 20, 20);
 </pre>
 
-<p><font><font>而不是加载单个图像的球，我们可以加载整个spritesheet - 不同图像的集合。</font><font>我们将按顺序显示精灵，创造动画的幻觉。</font><font>该</font></font><code>spritesheet()</code><font><font>方法的两个额外的表格确定给定spritesheet文件中每个单个框架的宽度和高度，指示程序如何切割以获取单个框架。</font></font></p>
+<p>而不是加载单个图像的球，我们可以加载整个spritesheet - 不同图像的集合。我们将按顺序显示精灵，创造动画的幻觉。该<code>spritesheet()</code>方法的两个额外的表格确定给定spritesheet文件中每个单个框架的宽度和高度，指示程序如何切割以获取单个框架。</p>
 
-<h2 id="加载动画"><font><font>加载动画</font></font></h2>
+<h2 id="加载动画">加载动画</h2>
 
-<p><font><font>接下来，进入你的create()函数，找到加载球精灵的行，下面的调用</font></font><code>animations.add()</code><font><font>如下所示：</font></font></p>
+<p>接下来，进入你的create()函数，找到加载球精灵的行，下面的调用<code>animations.add()</code>如下所示：</p>
 
 <pre class="brush: js">ball = game.add.sprite(50, 250, 'ball');
 ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 24);
 </pre>
 
-<p><font><font>要向对象添加动画，我们使用该</font></font><code>animations.add()</code><font><font>方法，其中包含以下参数</font></font></p>
+<p>要向对象添加动画，我们使用该<code>animations.add()</code>方法，其中包含以下参数</p>
 
 <ul>
- <li><font><font>我们为动画选择的名称</font></font></li>
- <li><font><font>一个数组，定义在动画过程中显示帧的顺序。</font><font>如果您再次查看</font></font><code>wobble.png</code><font><font>图像，您会看到有三个框架。</font><font>Phaser提取它们并将它们存储在数组中 - 位置0，1和2.上面的数组表示我们显示帧0，然后是1，然后是0等。</font></font></li>
- <li><font><font>帧速率，以fps为单位。</font><font>由于我们以24fps运行动画，有9帧，动画每秒将显示三次以下。</font></font></li>
+ <li>我们为动画选择的名称</li>
+ <li>一个数组，定义在动画过程中显示帧的顺序。如果您再次查看<code>wobble.png</code>图像，您会看到有三个框架。Phaser提取它们并将它们存储在数组中 - 位置0，1和2.上面的数组表示我们显示帧0，然后是1，然后是0等。</li>
+ <li>帧速率，以fps为单位。由于我们以24fps运行动画，有9帧，动画每秒将显示三次以下。</li>
 </ul>
 
-<h2 id="当球击中桨时应用动画"><font><font>当球击中桨时应用动画</font></font></h2>
+<h2 id="当球击中桨时应用动画">当球击中桨时应用动画</h2>
 
-<p><font><font>在</font></font><code>arcade.collide()</code><font><font>处理球和桨（第一行内部</font></font><code>update()</code><font><font>，见下文）</font><font>之间的碰撞</font><font>的</font><font>方法调用中，</font><font>我们可以添加一个额外的参数，该参数指定每次发生碰撞时执行的功能，与该</font></font><code>ballHitBrick()</code><font><font>功能</font><font>相同</font><font>。</font><font>更新内部的第一行</font></font><code>update()</code><font><font>，如下所示：</font></font></p>
+<p>在<code>arcade.collide()</code>处理球和桨（第一行内部<code>update()</code>，见下文）之间的碰撞的方法调用中，我们可以添加一个额外的参数，该参数指定每次发生碰撞时执行的功能，与该<code>ballHitBrick()</code>功能相同。更新内部的第一行<code>update()</code>，如下所示：</p>
 
 <pre class="brush: js">function update() {
     game.physics.arcade.collide(ball, paddle, ballHitPaddle);
@@ -63,20 +63,20 @@ <h2 id="当球击中桨时应用动画"><font><font>当球击中桨时应用动
 }
 </pre>
 
-<p><font><font>然后我们可以创建</font></font><code>ballHitPaddle()</code><font><font>函数（具有</font></font><code>ball</code><font><font>和</font></font><code>paddle</code><font><font>作为默认参数），在调用时播放摆动动画。</font><font>在结束</font></font><code>&lt;/script&gt;</code><font><font>标签</font><font>之前添加以下方法</font><font>：</font></font></p>
+<p>然后我们可以创建<code>ballHitPaddle()</code>函数（具有<code>ball</code>和<code>paddle</code>作为默认参数），在调用时播放摆动动画。在结束<code>&lt;/script&gt;</code>标签之前添加以下方法：</p>
 
 <pre class="brush: js">function ballHitPaddle(ball, paddle) {
     ball.animations.play('wobble');
 }
 </pre>
 
-<p><font><font>每次球击中桨时都会播放动画。</font><font>你也可以</font></font><code>animations.play()</code><font><font>在</font></font><code>ballHitBrick()</code><font><font>函数</font><font>内</font><font>添加</font><font>调用</font><font>，如果你觉得它会使游戏看起来更好。</font></font></p>
+<p>每次球击中桨时都会播放动画。你也可以<code>animations.play()</code>在<code>ballHitBrick()</code>函数内添加调用，如果你觉得它会使游戏看起来更好。</p>
 
 <h2 id="补间">补间</h2>
 
 <p>而动画依次播放外部精灵，补间游戏中物体的属性平滑，如宽度或不透明度。</p>
 
-<p><font><font>让我们在游戏中增加一个补间，使砖块在被球击中时顺利消失。</font><font>转到您的</font></font><code>ballhitBrick()</code><font><font>功能，找到您的</font></font><code>brick.kill();</code><font><font>行，并将其替换为以下内容：</font></font></p>
+<p>让我们在游戏中增加一个补间，使砖块在被球击中时顺利消失。转到您的<code>ballhitBrick()</code>功能，找到您的<code>brick.kill();</code>行，并将其替换为以下内容：</p>
 
 <pre class="brush: js">var killTween = game.add.tween(brick.scale);
 killTween.to({x:0,y:0}, 200, Phaser.Easing.Linear.None);
@@ -89,10 +89,10 @@ <h2 id="补间">补间</h2>
 <p>让我们来看看这里，看看这里发生了什么：</p>
 
 <ol>
- <li><font><font>当定义一个新的补间时，你必须指定哪些属性将被补间 - 在我们的例子中，而不是在被球击中时立即隐藏砖块，我们将把它们的宽度和高度缩放到零，所以它们将很好地消失。</font><font>最后，我们使用该</font></font><code>add.tween()</code><font><font>方法，指定</font></font><code>brick.scale</code><font><font>为参数，因为这是我们想要补间。</font></font></li>
- <li><font><font>该</font></font><code>to()</code><font><font>方法定义补间结束时对象的状态。</font><font>它需要一个包含所选参数的期望结束值的对象（比例取尺度值，1为大小的100％，0为大小的0％等），补间的时间（以毫秒为单位）以及使用的宽松类型补间。</font></font></li>
- <li><font><font>我们还将添加可选的</font></font><code>onComplete</code><font><font>事件处理程序，该处理程序定义了在补间程序完成时要执行的函数。</font></font></li>
- <li><font><font>最后一件事是立即开始补间</font></font><code>start()</code><font><font>。</font></font></li>
+ <li>当定义一个新的补间时，你必须指定哪些属性将被补间 - 在我们的例子中，而不是在被球击中时立即隐藏砖块，我们将把它们的宽度和高度缩放到零，所以它们将很好地消失。最后，我们使用该<code>add.tween()</code>方法，指定<code>brick.scale</code>为参数，因为这是我们想要补间。</li>
+ <li>该<code>to()</code>方法定义补间结束时对象的状态。它需要一个包含所选参数的期望结束值的对象（比例取尺度值，1为大小的100％，0为大小的0％等），补间的时间（以毫秒为单位）以及使用的宽松类型补间。</li>
+ <li>我们还将添加可选的<code>onComplete</code>事件处理程序，该处理程序定义了在补间程序完成时要执行的函数。</li>
+ <li>最后一件事是立即开始补间<code>start()</code>。</li>
 </ol>
 
 <p>这是补间定义的扩展版本，但是我们也可以使用速记语法：</p>
@@ -110,6 +110,6 @@ <h2 id="比较你的代码">比较你的代码</h2>
 
 <h2 id="下一步">下一步</h2>
 
-<p><font><font>动画和tweens看起来很不错，但我们可以添加更多的我们的游戏 - 在下一节我们将看看处理</font></font><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons"><font><font>按钮</font></font></a><font><font>输入。</font></font></p>
+<p>动画和tweens看起来很不错，但我们可以添加更多的我们的游戏 - 在下一节我们将看看处理<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons">按钮</a>输入。</p>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Extra_lives", "Games/Workflows/2D_Breakout_game_Phaser/Buttons")}}</p>