mdn · jasonren0403 · Jul 27, 2024 · Jul 25, 2024 · Jul 25, 2024 · Jul 25, 2024
@@ -37,7 +37,8 @@ window.main = () => {
 main(); // 开始循环
 ```
 
-> **备注：** 在这里讨论的每个 `main()` 方法中，在执行循环内容之前，我们会递归调用一个新的 `requestAnimationFrame`，这不是随意的，它被认为是最佳实践。如果你的当前帧错过了它的垂直同步窗口的周期，你也在下一个帧通过 `requestAnimationFrame` 尽早的调用 `main()`，从而确保浏览器能够及时地执行。
+> [!NOTE]
+> 在这里讨论的每个 `main()` 方法中，在执行循环内容之前，我们会递归调用一个新的 `requestAnimationFrame`，这不是随意的，它被认为是最佳实践。如果你的当前帧错过了它的垂直同步窗口的周期，你也在下一个帧通过 `requestAnimationFrame` 尽早的调用 `main()`，从而确保浏览器能够及时地执行。
 
 上面的代码块有两个语句。第一个语句创建一个名为 `main()` 中的全局变量的函数。这个函数做一些工作，也告诉浏览器在下一帧通过 `window.requestAnimationFrame()` 调用本身。第二个语句调用第一个语句中定义的 `main()` 函数。因为 `main()`中在第二个语句中被调用一次，而每次调用都将自身又放置到下一个帧的执行队列中，因此 `main()` 的调用与你的帧率同步。
 
@@ -73,7 +74,8 @@ main(); // 开始循环
 
 当浏览器遇到这个 IIFE 时，它将定义你的主循环，并立即将其加入下一个帧的更新队列中。`main`（或 `main()` 方法）不会被附加到任何对象，在应用程序的其他地方仍是一个有效的未使用的名称，仍可以自由地定义为其他的东西。
 
-> **备注：** 在实践中，更常见的终止下一个 `requestAnimationFrame()` 方式是使用 if 语句，而不是调用`cancelAnimationFrame()`。
+> [!NOTE]
+> 在实践中，更常见的终止下一个 `requestAnimationFrame()` 方式是使用 if 语句，而不是调用`cancelAnimationFrame()`。
 
 对于第二个问题，要终止循环，你需要调用 `window.cancelAnimationFrame()` 来取消 `main()` 的调用。该方法需要传入你最后一次调用 `requestAnimationFrame()` 时返回的 ID。让我们假设你的游戏的函数和变量是建立在你称为 MyGame 的名称空间上。扩展我们的最后一个例子，主循环现在看起来是这样的：
 
@@ -122,7 +124,8 @@ window.cancelAnimationFrame(MyGame.stopMain);
 
 当我们讨论预算时，许多网络浏览器都有一个称为高分辨率时间的工具。{{jsxref("Date")}} 对象不再是计时事件的识别方法，因为它非常不精确，可以由系统时钟进行修改。另一方面，高分辨率的时间计算自 `navigationStart`（当上一个文档被卸载时）的毫秒数。这个值以小数的精度返回，精确到千分之一毫秒。它被称为{{ domxref("DOMHighResTimeStamp") }}，但是，无论出于什么目的和目的，都认为它是一个浮点数。
 
-> **备注：** 系统（硬件或软件）不能达到微秒精度，可以提供毫秒精度的最小值然而，如果他们能够做到这一点，他们就应该提供 0.001 毫秒的准确性。
+> [!NOTE]
+> 系统（硬件或软件）不能达到微秒精度，可以提供毫秒精度的最小值然而，如果他们能够做到这一点，他们就应该提供 0.001 毫秒的准确性。
 
 这个值本身并不太有用，因为它与一个相当无趣的事件相关，但它可以从另一个时间戳中减去，以便准确准确地确定这两个点之间的时间间隔。要获得这些时间戳中的一个，你可以调用 `window.performance.now()` 并将结果存储为一个变量。
 
@@ -161,7 +164,8 @@ var tNow = window.performance.now();
 
 你将需要对你的主循环作出艰难的决定：如何模拟准确的时间进度。如果你想要控制每一帧，那么你需要确定你的游戏更新和绘制的频率，你甚至可能希望以不同的速率进行更新和绘制。你还需要考虑如果用户的系统无法跟上工作负载，那么你还需考虑如何优雅降级，以保证性能。让我们首先假定你会在每次绘制时，同时处理用户的输入，并更新游戏状态。我们稍后再细讲。
 
-> **备注：** 改变主循环如何处理时间是非常困难的，在进行主循环之前，请仔细考虑你的需求。
+> [!NOTE]
+> 改变主循环如何处理时间是非常困难的，在进行主循环之前，请仔细考虑你的需求。
 
 ### 大多数浏览器游戏应该是什么样的
 
@@ -227,7 +231,8 @@ var tNow = window.performance.now();
 
 单独的更新和绘图方法可能如下面的示例。为了演示，该示例基于第三个项目符号，只是不使用 Web Workers 进行可读性（而且我们诚实地说可写性）。
 
-> **警告：** 这个例子，具体来说，需要进行技术审查。
+> [!WARNING]
+> 这个例子，具体来说，需要进行技术审查。
 
 <!-- prettier-ignore-start -->
 ```js

@@ -13,7 +13,8 @@ slug: Games
 
 我们同样提供了参考部分，因此你可以轻易地找到有关游戏开发所有常用的 API。
 
-> **备注：** 在创建一个网页游戏之前你至少需要掌握几种核心的 web 技术，例如 HTML、CSS 和 Javascript。你可以在[学习区](/zh-CN/docs/Learn)开始这些基础知识的学习。
+> [!NOTE]
+> 在创建一个网页游戏之前你至少需要掌握几种核心的 web 技术，例如 HTML、CSS 和 Javascript。你可以在[学习区](/zh-CN/docs/Learn)开始这些基础知识的学习。
 
 ## 将本地游戏移植到 web
 

@@ -65,7 +65,8 @@ HTML5 本身是多平台的，所以你只需要写一种代码就可以适配
 
 让我们看看针对不同平台和操作系统的市场/商店有哪些可用选项。
 
-> **备注：** 这些是最流行的发行平台，但这并不是说这些是唯一的选择。你也可以尝试找到一个对口的平台，并直接向那些对你的游戏感兴趣的观众推广你的游戏。在这里，你的创造力至关重要。
+> [!NOTE]
+> 这些是最流行的发行平台，但这并不是说这些是唯一的选择。你也可以尝试找到一个对口的平台，并直接向那些对你的游戏感兴趣的观众推广你的游戏。在这里，你的创造力至关重要。
 
 ### 网络商店
 

@@ -50,7 +50,9 @@ rect2.bind("EnterFrame", function () {
 
 {{ EmbedLiveSample('轴对齐包围盒', '700', '300') }}
 
-> **备注：** [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/217jrozd/3/)。
+> [!NOTE]
+>
+> [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/217jrozd/3/)。
 
 ## 圆形碰撞
 
@@ -122,7 +124,9 @@ circle2.bind("EnterFrame", function () {
 
 {{ EmbedLiveSample('圆形碰撞', '700', '300') }}
 
-> **备注：** [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/teb4znk0/20/)
+> [!NOTE]
+>
+> [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/teb4znk0/20/)
 
 ## 分离轴定理
 

@@ -19,7 +19,8 @@ l10n:
 
 ![旋转线结动画显示虚拟矩形框随着线结的旋转而收缩和扩大。盒子不旋转。](rotating_knot.gif)
 
-> **备注：** 参考[使用 Three.js 的包围体](/zh-CN/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)，以了解该技术的实际实现。
+> [!NOTE]
+> 参考[使用 Three.js 的包围体](/zh-CN/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)，以了解该技术的实际实现。
 
 ### 点与 AABB
 
@@ -98,7 +99,8 @@ function isPointInsideSphere(point, sphere) {
 }
 ```
 
-> **备注：** 上面的代码有一个平方根，计算开销可能很大。一种简单的优化是将平方距离与平方半径进行比较，以避免这种情况，所以优化后的不等式涉及 `distanceSqr < sphere.radius * sphere.radius`。
+> [!NOTE]
+> 上面的代码有一个平方根，计算开销可能很大。一种简单的优化是将平方距离与平方半径进行比较，以避免这种情况，所以优化后的不等式涉及 `distanceSqr < sphere.radius * sphere.radius`。
 
 ### 球体与球体
 

@@ -7,7 +7,8 @@ slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js
 
 游戏中一个典型的 3D 场景 (最简单的那种) 包含标准的物品比如在坐标轴中的形状，一个实际可看到他们的摄像机，灯光和材质让其看起来不错，动画使其生动等等。 **Three.js**, 和其他 3D 库一样，提供内置的 helper 函数来帮助你尽可能快地实现通用的 3D 功能 . 在这篇文章我们会带你了解使用 Three 的基本知识，包含设置开发者环境，必要的 HTML 结构，Three.js 对象基础，以及如何创建一个基本的 demo.
 
-> **备注：** 我们选择 Three.js 因为它是最流行的[WebGL](/zh-CN/docs/Web/API/WebGL_API) 库之一，并且很容易上手。我们不会介绍任何其他更好的 WebGL 库，你可以自由选择其他库做尝试，比如 [CopperLicht](http://www.ambiera.com/copperlicht/index.html), [GLGE](http://www.glge.org/), [OSG.js](http://osgjs.org/), [O3D](https://code.google.com/p/o3d/), 或者其他你喜欢的库。
+> [!NOTE]
+> 我们选择 Three.js 因为它是最流行的[WebGL](/zh-CN/docs/Web/API/WebGL_API) 库之一，并且很容易上手。我们不会介绍任何其他更好的 WebGL 库，你可以自由选择其他库做尝试，比如 [CopperLicht](http://www.ambiera.com/copperlicht/index.html), [GLGE](http://www.glge.org/), [OSG.js](http://osgjs.org/), [O3D](https://code.google.com/p/o3d/), 或者其他你喜欢的库。
 
 ## 环境设置
 
@@ -99,7 +100,8 @@ There are other types of camera available (Cube, Orthographic), but the simplest
 
 You should experiment with these values and see how they change what you see in the scene.
 
-> **备注：** The distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you.
+> [!NOTE]
+> The distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you.
 
 ## Rendering the scene
 

@@ -43,7 +43,8 @@ void main() {
 
 让我们构建一个简单的例子来解释这些着色器的动作。假设你已经看过[Three.js 教程](/zh-CN/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js)并掌握了场景，物体和材质的基本概念。
 
-> **备注：** 记住你没必要使用 Three.js 或者其他库来编写着色器——纯[WebGL](/zh-CN/docs/Web/API/WebGL_API) 完全够了。我们这里使用 Three.js 来制作背景代码更简单和易理解。所以你只需关注着色器代码。Three.js 和其他 3D 库给你抽象了很多东西出来——如果你想要用纯 WebGL 创建这个例子，你得写很多其他的代码才能运行。
+> [!NOTE]
+> 记住你没必要使用 Three.js 或者其他库来编写着色器——纯[WebGL](/zh-CN/docs/Web/API/WebGL_API) 完全够了。我们这里使用 Three.js 来制作背景代码更简单和易理解。所以你只需关注着色器代码。Three.js 和其他 3D 库给你抽象了很多东西出来——如果你想要用纯 WebGL 创建这个例子，你得写很多其他的代码才能运行。
 
 ### 环境设置
 
@@ -116,7 +117,8 @@ void main() {
 
 每次的`gl_Position` 的结果是计算 model-view 矩阵和投射矩阵和投射矩阵相乘并得到最后的顶点位置。
 
-> **备注：** 你可以在 [顶点处理](/zh-CN/docs/Games/Techniques/3D_on_the_web/Basic_theory#Vertex_processing)中学到更多关于模型，视图和投射变换，并且你可以在文末看到更多学习链接。
+> [!NOTE]
+> 你可以在 [顶点处理](/zh-CN/docs/Games/Techniques/3D_on_the_web/Basic_theory#Vertex_processing)中学到更多关于模型，视图和投射变换，并且你可以在文末看到更多学习链接。
 
 `projectionMatrix` 和 `modelViewMatrix` 两个函数都是 Three.js 提供的，并且传入了一个新的 3D 位置向量，转成着色器之后直接导致立方体向 `x` 轴移动 10 个单位，向`z` 轴移动了 5 个单位。我们可以忽略第四个参数并且保持为默认的`1.0` ; 这是用来控制 3D 空间中订单位置裁剪的，这个例子中不需要。
 

@@ -11,7 +11,8 @@ l10n:
 
 未来的手游一定是 Web 的天下，许多开发者在游戏开发过程中[首先选择移动端](/zh-CN/docs/Glossary/Mobile_First)——在现代社会，这通常还涉及到触摸控制的实现。在本教程中，我们将看到在 HTML 游戏中实现移动控件是多么容易，并且可以在支持移动触摸的设备上尽情玩耍。
 
-> **备注：** 游戏 [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) 是用 Phaser 构建的，控制管理也是基于 Phaser 的，但也可以用纯 JavaScript 完成。使用 Phaser 的好处是它提供了辅助变量和函数，可以让开发更简单、更快速，但选择哪种方法完全取决于你。
+> [!NOTE]
+> 游戏 [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) 是用 Phaser 构建的，控制管理也是基于 Phaser 的，但也可以用纯 JavaScript 完成。使用 Phaser 的好处是它提供了辅助变量和函数，可以让开发更简单、更快速，但选择哪种方法完全取决于你。
 
 ## 纯 JavaScript 方法
 
@@ -32,7 +33,8 @@ el.addEventListener("touchcancel", handleCancel);
 - 当用户停止触摸屏幕时触发 [touchend](/zh-CN/docs/Web/API/Element/touchend_event) 事件。
 - 当触摸被取消，例如当用户将他们的手指移动到屏幕之外时触发 [touchcancel](/zh-CN/docs/Web/API/Element/touchcancel_event) 事件。
 
-> **备注：** [触摸事件](/zh-CN/docs/Web/API/Touch_events)参考文章提供了更多的实例和介绍。
+> [!NOTE]
+> 参考文章[触摸事件](/zh-CN/docs/Web/API/Touch_events)提供了更多的示例和信息。
 
 ### 纯 JavaScript 示例
 

@@ -35,7 +35,8 @@ Game API 的动作展示与 JavaScript 的源代码公布是在完整版的 Hung
 
 以下讨论的代码来自于完整的 Hungry Fridge 游戏中，除了原代码需要 `turbo` 变量来决定是否启动“超级涡轮模式”以外几乎一模一样。此代码可以独立运行，就算不连接控制器也可以。
 
-> **备注：** 一个彩蛋：点击界面右上角的控制器图标有个隐藏选项——不连接控制器也能启动“超级涡轮模式” 。你可以使用键盘上的 A 和 D 控制左右旋转，W 射击，方向键移动。
+> [!NOTE]
+> 一个彩蛋：点击界面右上角的控制器图标有个隐藏选项——不连接控制器也能启动“超级涡轮模式” 。你可以使用键盘上的 A 和 D 控制左右旋转，W 射击，方向键移动。
 
 ## 实现方法
 

@@ -58,7 +58,8 @@ startButton.anchor.set(0.5);
 - `this`指定执行上下文的引用
 - 将用于*过度*，*超出*和*向下*事件的框架。
 
-> **备注：** 超越事件与悬停相同，当指针从按钮中移出时，当按下按钮时，向下移动。
+> [!NOTE]
+> 超越事件与悬停相同，当指针从按钮中移出时，当按下按钮时，向下移动。
 
 现在我们需要定义`startGame()`上面代码中引用的函数：
 

@@ -40,7 +40,8 @@ slug: Games/Tutorials/2D_breakout_game_Phaser
 
 在那之后，你就能随意挑选框架并用在你的项目中;我们选择了 Phaser 这个稳定优越的框架，它有着好的支持和社区环境以及大量优秀的插件。框架加速了开发并能帮你管理无趣的部分，让你专注于有意思的事务。然而，框架也有不好的地方，所以当一些意想不到的事情发生了或者想实现一些框架没有提供的功能时，你就将需要原生的 JavaScript 知识了。
 
-> **备注：** 本系列文章可用作实际游戏开发的材料。如果你想要使用 Phaser 讨论游戏开发，你还可以使用基于本教程的 [Gamedev Phaser 内容套件](https://github.com/end3r/Gamedev-Phaser-Content-Kit).
+> [!NOTE]
+> 本系列文章可用作实际游戏开发的材料。如果你想要使用 Phaser 讨论游戏开发，你还可以使用基于本教程的 [Gamedev Phaser 内容套件](https://github.com/end3r/Gamedev-Phaser-Content-Kit).
 
 ## Next steps
 

@@ -19,7 +19,8 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_
 var ball;
 ```
 
-> **备注：** 为了本教程，我们将使用全局变量。**本教程的目的是教导 Phaser 特定的游戏开发方法，而不是主观的最佳方法。**
+> [!NOTE]
+> 为了本教程，我们将使用全局变量。**本教程的目的是教导 Phaser 特定的游戏开发方法，而不是主观的最佳方法。**
 
 ## 加载球精灵
 

@@ -100,7 +100,8 @@ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}
 
-> **备注：** 尝试修改你的代码，在每次碰到墙壁时都要把球的颜色改成随机的颜色。
+> [!NOTE]
+> 尝试修改你的代码，在每次碰到墙壁时都要把球的颜色改成随机的颜色。
 
 ## 下一步
 

@@ -104,7 +104,8 @@ drawBricks();
 
 {{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/2/","","320")}}
 
-> **备注：** 练习：尝试在行或列上改变砖块数量，或者它们的位置。
+> [!NOTE]
+> 练习：尝试在行或列上改变砖块数量，或者它们的位置。
 
 ## 下一节
 

@@ -127,7 +127,8 @@ collisionDetection();
 
 {{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/5/","","320")}}
 
-> **备注：** 练习：当球碰到砖头时，改变球的颜色。
+> [!NOTE]
+> 练习：当球碰到砖头时，改变球的颜色。
 
 ## 下一节
 

@@ -105,7 +105,8 @@ ctx.closePath();
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}
 
-> **备注：** 练习：尝试改变给定几何图形的大小和颜色。
+> [!NOTE]
+> 练习：尝试改变给定几何图形的大小和颜色。
 
 ## 下一节
 

@@ -98,7 +98,8 @@ requestAnimationFrame(draw);
 
 {{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}
 
-> **备注：** 试着改变生命的数目和球从球板上反弹的角度。
+> [!NOTE]
+> 试着改变生命的数目和球从球板上反弹的角度。
 
 ## 游戏结束——暂时看来！
 

@@ -75,7 +75,8 @@ if (y + dy < ballRadius) {
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","320")}}
 
-> **备注：** 当球碰到球拍时，让球移动得更快
+> [!NOTE]
+> 当球碰到球拍时，让球移动得更快
 
 ## 下一步
 

@@ -32,9 +32,11 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript
 
 对于实现一个网页游戏而言，最好的方式是从纯 JavaScirpt 着手，那样可以让我们建立更坚实的基础。之后你可以在你的项目中选择你喜欢的框架。框架也只是用 JavaScript 语言实现的工具；如果你想要在项目中使用框架，你必须先了解语言本身。框架可以帮你提高开发效率并生成一些基础的内容；但是如果没有达到你的预期，你只能慢慢调试或者使用原生 JavaScript 去实现解决方案。
 
-> **备注：** 如果你对使用第三方游戏资源库开发 2d 网页游戏感兴趣，可以参考本系列教程的 [2D breakout game using Phaser](/zh-CN/docs/Games/Workflows/2D_breakout_game_Phaser).
+> [!NOTE]
+> 如果你对使用第三方游戏资源库开发 2d 网页游戏感兴趣，可以参考本系列教程的 [2D breakout game using Phaser](/zh-CN/docs/Games/Workflows/2D_breakout_game_Phaser).
 
-> **备注：** 本系列教程可以用作游戏开发工作室的素材资源。如果你想探讨普通的游戏开发，你可以利用[Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit)以及本教程的内容。
+> [!NOTE]
+> 本系列教程可以用作游戏开发工作室的素材资源。如果你想探讨普通的游戏开发，你可以利用[Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit)以及本教程的内容。
 
 ## 下一步