From 66cfdb47b7e98ea9d3cb9d16b5999c781b6da1ef Mon Sep 17 00:00:00 2001 From: allo Date: Thu, 25 Jul 2024 09:26:49 +0800 Subject: [PATCH 1/4] zh-tw: convert noteblock in `/games` to GFM syntax --- files/zh-tw/games/index.md | 3 ++- .../bounce_off_the_walls/index.md | 3 ++- .../create_the_canvas_and_draw_on_it/index.md | 3 ++- .../tutorials/2d_breakout_game_pure_javascript/index.md | 6 ++++-- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/files/zh-tw/games/index.md b/files/zh-tw/games/index.md index 2118f13d3b2b7c..d37fe7e3770df2 100644 --- a/files/zh-tw/games/index.md +++ b/files/zh-tw/games/index.md @@ -15,7 +15,8 @@ slug: Games 我們也涵蓋了參考的章節，你可以從那裡找到遊戲開發最需要用到的一些 API。 -> **備註：** 建立遊戲會需要用上一些 web 的核心技術，如 HTML、CSS、JavaScript。[學習專區](/zh-TW/docs/Learn)會是個很好的學習區域。 +> [!NOTE] +> 建立遊戲會需要用上一些 web 的核心技術，如 HTML、CSS、JavaScript。[學習專區](/zh-TW/docs/Learn)會是個很好的學習區域。 ## 從原生到 Web diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md index 65cabfe1022722..c570c4138f2bd8 100644 --- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md +++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -99,7 +99,8 @@ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { {{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}} -> **備註：** 每次球撞到牆上時嘗試改變球的顏色為隨機的顏色。 +> [!NOTE] +> 每次球撞到牆上時嘗試改變球的顏色為隨機的顏色。 ## 下一步 diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index 260750fcd00d2d..d8fed4486391cd 100644 --- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -105,7 +105,8 @@ ctx.closePath(); {{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}} -> **備註：** 練習改變物體的大小和顏色 +> [!NOTE] +> 練習改變物體的大小和顏色 ## 下一步 diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md index c90f325a85aa52..d20393dc0c16c5 100644 --- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md +++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md @@ -33,9 +33,11 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript 若一開始就單純使用 JavaScript，將能學到紮實的網頁遊戲開發知識。往後則可自由選擇你自己愛用的框架 (Framework) 來完成專案。 框架同樣是由 JavaScript 寫成的工具。因此在用框架開發之前，能先了解程式語言本身將有助於了解框架內部所發生的事。框架可加快開發速度並代勞遊戲中某些無聊的部份，但若遊戲運作得不如預期，你都可試著除錯或撰寫純 JavaScript 的解決方案。 -> **備註：** 如果你對 2D 網頁遊戲開發的遊戲函式庫有興趣，可參考此〈[使用剖析器 (Phaser) 的打磚塊遊戲](/zh-TW/docs/Games/Workflows/2D_breakout_game_Phaser)〉系列相關文章 。 +> [!NOTE] +> 如果你對 2D 網頁遊戲開發的遊戲函式庫有興趣，可參考此〈[使用剖析器 (Phaser) 的打磚塊遊戲](/zh-TW/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)〉。 ## 下一步 From a044f6a2700b9e4ec73bb3cf92c801cd4cfa0a38 Mon Sep 17 00:00:00 2001 From: allo Date: Thu, 25 Jul 2024 09:59:18 +0800 Subject: [PATCH 2/4] zh-cn: convert noteblock in `/games` to GFM syntax --- files/zh-cn/games/anatomy/index.md | 15 ++++++++++----- files/zh-cn/games/index.md | 3 ++- .../publishing_games/game_distribution/index.md | 3 ++- .../techniques/2d_collision_detection/index.md | 4 ++-- .../techniques/3d_collision_detection/index.md | 6 ++++-- .../index.md | 6 ++++-- .../3d_on_the_web/glsl_shaders/index.md | 6 ++++-- .../control_mechanisms/mobile_touch/index.md | 5 +++-- .../techniques/controls_gamepad_api/index.md | 3 ++- .../2d_breakout_game_phaser/buttons/index.md | 3 ++- .../tutorials/2d_breakout_game_phaser/index.md | 3 ++- .../index.md | 3 ++- .../bounce_off_the_walls/index.md | 3 ++- .../build_the_brick_field/index.md | 3 ++- .../collision_detection/index.md | 3 ++- .../create_the_canvas_and_draw_on_it/index.md | 3 ++- .../finishing_up/index.md | 3 ++- .../game_over/index.md | 3 ++- .../2d_breakout_game_pure_javascript/index.md | 6 ++++-- .../paddle_and_keyboard_controls/index.md | 3 ++- .../track_the_score_and_win/index.md | 3 ++- 21 files changed, 59 insertions(+), 31 deletions(-) diff --git a/files/zh-cn/games/anatomy/index.md b/files/zh-cn/games/anatomy/index.md index 93c0a66638f4e4..0118810568c48e 100644 --- a/files/zh-cn/games/anatomy/index.md +++ b/files/zh-cn/games/anatomy/index.md @@ -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] +> 这个例子，具体来说，需要进行技术审查。 ```js diff --git a/files/zh-cn/games/index.md b/files/zh-cn/games/index.md index 6a461dbd76ba0f..48effe80a512d2 100644 --- a/files/zh-cn/games/index.md +++ b/files/zh-cn/games/index.md @@ -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 diff --git a/files/zh-cn/games/publishing_games/game_distribution/index.md b/files/zh-cn/games/publishing_games/game_distribution/index.md index a161c6fab4d748..f95086c47a7353 100644 --- a/files/zh-cn/games/publishing_games/game_distribution/index.md +++ b/files/zh-cn/games/publishing_games/game_distribution/index.md @@ -65,7 +65,8 @@ HTML5 本身是多平台的，所以你只需要写一种代码就可以适配 让我们看看针对不同平台和操作系统的市场/商店有哪些可用选项。 -> **备注：** 这些是最流行的发行平台，但这并不是说这些是唯一的选择。你也可以尝试找到一个对口的平台，并直接向那些对你的游戏感兴趣的观众推广你的游戏。在这里，你的创造力至关重要。 +> [!NOTE] +> 这些是最流行的发行平台，但这并不是说这些是唯一的选择。你也可以尝试找到一个对口的平台，并直接向那些对你的游戏感兴趣的观众推广你的游戏。在这里，你的创造力至关重要。 ### 网络商店 diff --git a/files/zh-cn/games/techniques/2d_collision_detection/index.md b/files/zh-cn/games/techniques/2d_collision_detection/index.md index 36d0c4f3e9c5da..8be3846ba28bd7 100644 --- a/files/zh-cn/games/techniques/2d_collision_detection/index.md +++ b/files/zh-cn/games/techniques/2d_collision_detection/index.md @@ -50,7 +50,7 @@ rect2.bind("EnterFrame", function () { {{ EmbedLiveSample('轴对齐包围盒', '700', '300') }} -> **备注：** [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/217jrozd/3/)。 +> [!NOTE] > [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/217jrozd/3/)。 ## 圆形碰撞 @@ -122,7 +122,7 @@ circle2.bind("EnterFrame", function () { {{ EmbedLiveSample('圆形碰撞', '700', '300') }} -> **备注：** [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/teb4znk0/20/) +> [!NOTE] > [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/teb4znk0/20/) ## 分离轴定理 diff --git a/files/zh-cn/games/techniques/3d_collision_detection/index.md b/files/zh-cn/games/techniques/3d_collision_detection/index.md index 4062c288d54f9b..e9b44d12f1540c 100644 --- a/files/zh-cn/games/techniques/3d_collision_detection/index.md +++ b/files/zh-cn/games/techniques/3d_collision_detection/index.md @@ -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`。 ### 球体与球体 diff --git a/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md index ab103a2be7c719..44173d9c2ad17a 100644 --- a/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md +++ b/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md @@ -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 diff --git a/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md b/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md index f3001b7bc83687..51030de486fbe8 100644 --- a/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md +++ b/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md @@ -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 空间中订单位置裁剪的，这个例子中不需要。 diff --git a/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md b/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md index 6e2cf71feef011..6e80cd0aa645df 100644 --- a/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md +++ b/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md @@ -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,7 @@ 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 示例 diff --git a/files/zh-cn/games/techniques/controls_gamepad_api/index.md b/files/zh-cn/games/techniques/controls_gamepad_api/index.md index 0c8f3bb8b31972..97c75d61a8a534 100644 --- a/files/zh-cn/games/techniques/controls_gamepad_api/index.md +++ b/files/zh-cn/games/techniques/controls_gamepad_api/index.md @@ -35,7 +35,8 @@ Game API 的动作展示与 JavaScript 的源代码公布是在完整版的 Hung 以下讨论的代码来自于完整的 Hungry Fridge 游戏中，除了原代码需要 `turbo` 变量来决定是否启动“超级涡轮模式”以外几乎一模一样。此代码可以独立运行，就算不连接控制器也可以。 -> **备注：** 一个彩蛋：点击界面右上角的控制器图标有个隐藏选项——不连接控制器也能启动“超级涡轮模式” 。你可以使用键盘上的 A 和 D 控制左右旋转，W 射击，方向键移动。 +> [!NOTE] +> 一个彩蛋：点击界面右上角的控制器图标有个隐藏选项——不连接控制器也能启动“超级涡轮模式” 。你可以使用键盘上的 A 和 D 控制左右旋转，W 射击，方向键移动。 ## 实现方法 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md index fc03b14307c324..a6e7e7c01cf805 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md @@ -58,7 +58,8 @@ startButton.anchor.set(0.5); - `this`指定执行上下文的引用 - 将用于*过度*，*超出*和*向下*事件的框架。 -> **备注：** 超越事件与悬停相同，当指针从按钮中移出时，当按下按钮时，向下移动。 +> [!NOTE] +> 超越事件与悬停相同，当指针从按钮中移出时，当按下按钮时，向下移动。 现在我们需要定义`startGame()`上面代码中引用的函数： diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md index a0992ac15c1d43..ebe7f931439971 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md @@ -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 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md index 646d7b0408081b..c9deb141d99ecc 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md @@ -19,7 +19,8 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_ var ball; ``` -> **备注：** 为了本教程，我们将使用全局变量。**本教程的目的是教导 Phaser 特定的游戏开发方法，而不是主观的最佳方法。** +> [!NOTE] +> 为了本教程，我们将使用全局变量。**本教程的目的是教导 Phaser 特定的游戏开发方法，而不是主观的最佳方法。** ## 加载球精灵 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md index 084b72f37b1103..a0b7c35860d28e 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -100,7 +100,8 @@ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { {{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}} -> **备注：** 尝试修改你的代码，在每次碰到墙壁时都要把球的颜色改成随机的颜色。 +> [!NOTE] +> 尝试修改你的代码，在每次碰到墙壁时都要把球的颜色改成随机的颜色。 ## 下一步 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md index 02dfd5718efaeb..96f4e269fa5250 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md @@ -104,7 +104,8 @@ drawBricks(); {{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/2/","","320")}} -> **备注：** 练习：尝试在行或列上改变砖块数量，或者它们的位置。 +> [!NOTE] +> 练习：尝试在行或列上改变砖块数量，或者它们的位置。 ## 下一节 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md index 17a28d88cf7132..89449ac1c92d83 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md @@ -127,7 +127,8 @@ collisionDetection(); {{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/5/","","320")}} -> **备注：** 练习：当球碰到砖头时，改变球的颜色。 +> [!NOTE] +> 练习：当球碰到砖头时，改变球的颜色。 ## 下一节 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index 7fd94068740c94..c1a617c2a7aa70 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -105,7 +105,8 @@ ctx.closePath(); {{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}} -> **备注：** 练习：尝试改变给定几何图形的大小和颜色。 +> [!NOTE] +> 练习：尝试改变给定几何图形的大小和颜色。 ## 下一节 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md index 0466c71636c4e6..c449e4a25f5133 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md @@ -98,7 +98,8 @@ requestAnimationFrame(draw); {{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}} -> **备注：** 试着改变生命的数目和球从球板上反弹的角度。 +> [!NOTE] +> 试着改变生命的数目和球从球板上反弹的角度。 ## 游戏结束——暂时看来！ diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md index 7a69d95408cbf6..d76affc5701963 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md @@ -75,7 +75,8 @@ if (y + dy < ballRadius) { {{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","320")}} -> **备注：** 当球碰到球拍时，让球移动得更快 +> [!NOTE] +> 当球碰到球拍时，让球移动得更快 ## 下一步 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md index 2b9f30ca686b21..0b0d17968c18f2 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md @@ -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)以及本教程的内容。 ## 下一步 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md index cba0c33ae86c5b..ee181908804186 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md @@ -118,7 +118,8 @@ drawPaddle(); {{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}} -> **备注：** 让球拍变快变慢，或者改变它的大小。 +> [!NOTE] +> 让球拍变快变慢，或者改变它的大小。 ## 下一步 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md index c32820ed1c61d6..b9d766662f6a7a 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md @@ -99,7 +99,8 @@ function collisionDetection() { {{JSFiddleEmbed("https://jsfiddle.net/yumetodo/2m74vr9r/1/","","395")}} -> **备注：** 在每一个砖头击破后添加更多的分数，打印出收集到的点数在游戏结束警告框中。 +> [!NOTE] +> 在每一个砖头击破后添加更多的分数，打印出收集到的点数在游戏结束警告框中。 ## 下一节 From 5ce5c7ac97aa3af28fd160c370dc9788aeb56f8c Mon Sep 17 00:00:00 2001 From: allo Date: Thu, 25 Jul 2024 10:03:19 +0800 Subject: [PATCH 3/4] fix prettier format --- .../games/techniques/2d_collision_detection/index.md | 8 ++++++-- .../techniques/control_mechanisms/mobile_touch/index.md | 4 +++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/games/techniques/2d_collision_detection/index.md b/files/zh-cn/games/techniques/2d_collision_detection/index.md index 8be3846ba28bd7..f932c1f5ab6988 100644 --- a/files/zh-cn/games/techniques/2d_collision_detection/index.md +++ b/files/zh-cn/games/techniques/2d_collision_detection/index.md @@ -50,7 +50,9 @@ rect2.bind("EnterFrame", function () { {{ EmbedLiveSample('轴对齐包围盒', '700', '300') }} -> [!NOTE] > [另一个不使用 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') }} -> [!NOTE] > [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/teb4znk0/20/) +> [!NOTE] +> +> [另一个不使用 Canvas 或外部库的示例](https://jsfiddle.net/jlr7245/teb4znk0/20/) ## 分离轴定理 diff --git a/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md b/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md index 6e80cd0aa645df..32e9ad86f4d170 100644 --- a/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md +++ b/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md @@ -33,7 +33,9 @@ el.addEventListener("touchcancel", handleCancel); - 当用户停止触摸屏幕时触发 [touchend](/zh-CN/docs/Web/API/Element/touchend_event) 事件。 - 当触摸被取消，例如当用户将他们的手指移动到屏幕之外时触发 [touchcancel](/zh-CN/docs/Web/API/Element/touchcancel_event) 事件。 -> [!NOTE] > [触摸事件](/zh-CN/docs/Web/API/Touch_events)参考文章提供了更多的实例和介绍。 +> [!NOTE] +> +> [触摸事件](/zh-CN/docs/Web/API/Touch_events)参考文章提供了更多的实例和介绍。 ### 纯 JavaScript 示例 From 1118e8a13056d9344a8f4bac6ae089d723651e6c Mon Sep 17 00:00:00 2001 From: A1lo Date: Fri, 26 Jul 2024 19:15:47 +0800 Subject: [PATCH 4/4] Update index.md --- .../games/techniques/control_mechanisms/mobile_touch/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md b/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md index 32e9ad86f4d170..73820fe4bbefbe 100644 --- a/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md +++ b/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.md @@ -34,8 +34,7 @@ el.addEventListener("touchcancel", handleCancel); - 当触摸被取消，例如当用户将他们的手指移动到屏幕之外时触发 [touchcancel](/zh-CN/docs/Web/API/Element/touchcancel_event) 事件。 > [!NOTE] -> -> [触摸事件](/zh-CN/docs/Web/API/Touch_events)参考文章提供了更多的实例和介绍。 +> 参考文章[触摸事件](/zh-CN/docs/Web/API/Touch_events)提供了更多的示例和信息。 ### 纯 JavaScript 示例