From b0d4232c133f19213742db2286d2c293ce71f674 Mon Sep 17 00:00:00 2001
From: "Queen Vinyl Da.i'gyu-Kazotetsu" <vinyldarkscratch@gmail.com>
Date: Tue, 23 Jul 2024 04:48:42 -0700
Subject: [PATCH] Convert noteblock in `/games` to GFM syntax (#33575)

* Convert noteblock in `/games` to GFM syntax

* Apply suggestions from code review

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/games/techniques/2d_collision_detection/index.md

* Update files/en-us/games/techniques/2d_collision_detection/index.md

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
---
 files/en-us/games/anatomy/index.md            | 15 ++++---
 files/en-us/games/index.md                    |  3 +-
 .../game_distribution/index.md                |  3 +-
 .../2d_collision_detection/index.md           |  8 +++-
 .../index.md                                  |  6 ++-
 .../3d_collision_detection/index.md           |  6 ++-
 .../index.md                                  |  9 ++--
 .../index.md                                  |  6 ++-
 .../editor/index.md                           |  3 +-
 .../engine/index.md                           |  9 ++--
 .../index.md                                  |  3 +-
 .../index.md                                  |  6 ++-
 .../3d_on_the_web/glsl_shaders/index.md       |  6 ++-
 .../techniques/3d_on_the_web/webxr/index.md   |  3 +-
 .../techniques/audio_for_web_games/index.md   | 42 ++++++++++++-------
 .../desktop_with_gamepad/index.md             |  3 +-
 .../desktop_with_mouse_and_keyboard/index.md  |  3 +-
 .../control_mechanisms/mobile_touch/index.md  |  6 ++-
 .../techniques/controls_gamepad_api/index.md  |  3 +-
 .../techniques/crisp_pixel_art_look/index.md  |  3 +-
 .../en-us/games/techniques/tilemaps/index.md  |  6 ++-
 .../index.md                                  |  3 +-
 .../index.md                                  |  3 +-
 files/en-us/games/tools/asm.js/index.md       |  3 +-
 .../2d_breakout_game_phaser/buttons/index.md  |  3 +-
 .../2d_breakout_game_phaser/index.md          |  3 +-
 .../index.md                                  |  3 +-
 .../bounce_off_the_walls/index.md             |  3 +-
 .../build_the_brick_field/index.md            |  3 +-
 .../create_the_canvas_and_draw_on_it/index.md |  3 +-
 .../game_over/index.md                        |  3 +-
 .../2d_breakout_game_pure_javascript/index.md |  5 ++-
 .../mouse_controls/index.md                   |  3 +-
 .../move_the_ball/index.md                    |  6 ++-
 .../paddle_and_keyboard_controls/index.md     |  3 +-
 .../track_the_score_and_win/index.md          |  3 +-
 .../index.md                                  |  6 ++-
 37 files changed, 139 insertions(+), 69 deletions(-)

diff --git a/files/en-us/games/anatomy/index.md b/files/en-us/games/anatomy/index.md
index 5ef08f33cb6e705..fa81f0c08ad0240 100644
--- a/files/en-us/games/anatomy/index.md
+++ b/files/en-us/games/anatomy/index.md
@@ -38,7 +38,8 @@ window.main = () => {
 main(); // Start the cycle
 ```
 
-> **Note:** In each of the `main()` methods discussed here, we schedule a new `requestAnimationFrame` before performing our loop contents. That is not by accident and it is considered best practice. Calling the next `requestAnimationFrame` early ensures the browser receives it on time to plan accordingly even if your current frame misses its VSync window.
+> [!NOTE]
+> In each of the `main()` methods discussed here, we schedule a new `requestAnimationFrame` before performing our loop contents. That is not by accident and it is considered best practice. Calling the next `requestAnimationFrame` early ensures the browser receives it on time to plan accordingly even if your current frame misses its VSync window.
 
 The above chunk of code has two statements. The first statement creates a function as a global variable called `main()`. This function does some work and also tells the browser to call itself next frame with `window.requestAnimationFrame()`. The second statement calls the `main()` function, defined in the first statement. Because `main()` is called once in the second statement and every call of it places itself in the queue of things to do next frame, `main()` is synchronized to your frame rate.
 
@@ -75,7 +76,8 @@ There are two obvious issues with our previous main loop: `main()` pollutes the
 
 When the browser comes across this IIFE, it will define your main loop and immediately queue it for the next frame. It will not be attached to any object and `main` (or `main()` for methods) will be a valid unused name in the rest of the application, free to be defined as something else.
 
-> **Note:** In practice, it is more common to prevent the next `requestAnimationFrame()` with an if-statement, rather than calling `cancelAnimationFrame()`.
+> [!NOTE]
+> In practice, it is more common to prevent the next `requestAnimationFrame()` with an if-statement, rather than calling `cancelAnimationFrame()`.
 
 For the second issue, stopping the main loop, you will need to cancel the call to `main()` with {{ domxref("window.cancelAnimationFrame()") }}. You will need to pass `cancelAnimationFrame()` the ID token given by `requestAnimationFrame()` when it was last called. Let us assume that your game's functions and variables are built on a namespace that you called `MyGame`. Expanding our last example, the main loop would now look like:
 
@@ -125,7 +127,8 @@ You can think about developing realtime applications as having a budget of time
 
 While we are on the topic of budgeting time, many web browsers have a tool called _High Resolution Time_. The {{jsxref("Date")}} object is no longer the recognized method for timing events because it is very imprecise and can be modified by the system clock. High Resolution Time, on the other hand, counts the number of milliseconds since `navigationStart` (when the previous document is unloaded). This value is returned as a decimal number accurate to a thousandth of a millisecond. It is known as a {{ domxref("DOMHighResTimeStamp") }} but, for all intents and purposes, consider it a floating point number.
 
-> **Note:** Systems (hardware or software) that are not capable of microsecond accuracy are allowed to provide millisecond accuracy as a minimum. They should provide 0.001ms accuracy if they are capable of it, however.
+> [!NOTE]
+> Systems (hardware or software) that are not capable of microsecond accuracy are allowed to provide millisecond accuracy as a minimum. They should provide 0.001ms accuracy if they are capable of it, however.
 
 This value is not too useful alone, since it is relative to a fairly uninteresting event, but it can be subtracted from another timestamp to accurately and precisely determine how much time elapsed between those two points. To acquire one of these timestamps, you can call `window.performance.now()` and store the result as a variable.
 
@@ -165,7 +168,8 @@ Several other optimizations are possible and it really depends on what your game
 
 You will need to make hard decisions about your main loop: how to simulate the accurate progress of time. If you demand per-frame control then you will need to determine how frequently your game will update and draw. You might even want update and draw to occur at different rates. You will also need to consider how gracefully your game will fail if the user's system cannot keep up with the workload. Let us start by assuming that you will handle user input and update the game state every time you draw. We will branch out later.
 
-> **Note:** Changing how your main loop deals with time is a debugging nightmare, everywhere. Think about your needs carefully before working on your main loop.
+> [!NOTE]
+> Changing how your main loop deals with time is a debugging nightmare, everywhere. Think about your needs carefully before working on your main loop.
 
 ### What most browser games should look like
 
@@ -232,7 +236,8 @@ Each of these methods have similar tradeoffs:
 
 A separate update and draw method could look like the following example. For the sake of demonstration, the example is based on the third bullet point, just without using Web Workers for readability (and, let's be honest, writability).
 
-> **Warning:** This example, specifically, is in need of technical review.
+> [!WARNING]
+> This example, specifically, is in need of technical review.
 
 <!-- prettier-ignore-start -->
 ```js
diff --git a/files/en-us/games/index.md b/files/en-us/games/index.md
index 0138768f7e1db12..a9c9859298ef15e 100644
--- a/files/en-us/games/index.md
+++ b/files/en-us/games/index.md
@@ -14,7 +14,8 @@ Welcome to the MDN game development center! In this area of the site, we provide
 
 We've also included a reference section so you can easily find information about all the most common APIs used in game development.
 
-> **Note:** Creating games on the web draws on a number of core web technologies such as HTML, CSS, and JavaScript. The [Learning Area](/en-US/docs/Learn) is a good place to go to get started with the basics.
+> [!NOTE]
+> Creating games on the web draws on a number of core web technologies such as HTML, CSS, and JavaScript. The [Learning Area](/en-US/docs/Learn) is a good place to go to get started with the basics.
 
 ## Port native games to the Web
 
diff --git a/files/en-us/games/publishing_games/game_distribution/index.md b/files/en-us/games/publishing_games/game_distribution/index.md
index 37eeb04b1308e84..19a39a3ec48f48e 100644
--- a/files/en-us/games/publishing_games/game_distribution/index.md
+++ b/files/en-us/games/publishing_games/game_distribution/index.md
@@ -66,7 +66,8 @@ You can also upload and publish your game directly to different types of stores,
 
 Let's see what the available options are regarding the marketplaces/stores available for different platforms and operating systems.
 
-> **Note:** These are the most popular distribution platforms, but this is not to say these are the only options. Instead of trying to add your game to the thousands of others in the iOS store say, you can also try to find a niche and promote directly to the audience who would be interested in your games. Your creativity is critical here.
+> [!NOTE]
+> These are the most popular distribution platforms, but this is not to say these are the only options. Instead of trying to add your game to the thousands of others in the iOS store say, you can also try to find a niche and promote directly to the audience who would be interested in your games. Your creativity is critical here.
 
 ### Web stores
 
diff --git a/files/en-us/games/techniques/2d_collision_detection/index.md b/files/en-us/games/techniques/2d_collision_detection/index.md
index e733db70b2d3aa3..1026b9a3abde8c0 100644
--- a/files/en-us/games/techniques/2d_collision_detection/index.md
+++ b/files/en-us/games/techniques/2d_collision_detection/index.md
@@ -52,7 +52,9 @@ rect2.bind("EnterFrame", function () {
 
 {{ EmbedLiveSample('Axis-Aligned_Bounding_Box', '700', '300') }}
 
-> **Note:** [Another example without Canvas or external libraries](https://jsfiddle.net/jlr7245/217jrozd/3/).
+> [!NOTE]
+>
+> [Another example without Canvas or external libraries](https://jsfiddle.net/jlr7245/217jrozd/3/).
 
 ## Circle Collision
 
@@ -127,7 +129,9 @@ circle2.bind("EnterFrame", function () {
 
 {{ EmbedLiveSample('Circle_Collision', '700', '300') }}
 
-> **Note:** [Here is another example without Canvas or external libraries.](https://jsfiddle.net/jlr7245/teb4znk0/20/)
+> [!NOTE]
+>
+> [Here is another example without Canvas or external libraries.](https://jsfiddle.net/jlr7245/teb4znk0/20/)
 
 ## Separating Axis Theorem
 
diff --git a/files/en-us/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md b/files/en-us/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md
index 57595b6dadf0301..08471c4b905aafb 100644
--- a/files/en-us/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md
+++ b/files/en-us/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md
@@ -29,7 +29,8 @@ const knotBBox = new Box3(
 );
 ```
 
-> **Note:** The `boundingBox` property takes the `Geometry` itself as reference, and not the `Mesh`. So any transformations such as scale, position, etc. applied to the `Mesh` will be ignored while computing the calculating box.
+> [!NOTE]
+> The `boundingBox` property takes the `Geometry` itself as reference, and not the `Mesh`. So any transformations such as scale, position, etc. applied to the `Mesh` will be ignored while computing the calculating box.
 
 A more simple alternative that fixes the previous issue is to set those boundaries later on with `Box3.setFromObject`, which will compute the dimensions taking into account a 3D entity's **transformations _and_ any child meshes** as well.
 
@@ -85,7 +86,8 @@ The **`Box3.intersectsBox`** method is available for performing this test.
 knotBbox.intersectsBox(otherBox);
 ```
 
-> **Note:** This is different from the `Box3.containsBox` method, which checks whether the Box3 _fully_ wraps another one.
+> [!NOTE]
+> This is different from the `Box3.containsBox` method, which checks whether the Box3 _fully_ wraps another one.
 
 #### `Sphere` vs. `Sphere`
 
diff --git a/files/en-us/games/techniques/3d_collision_detection/index.md b/files/en-us/games/techniques/3d_collision_detection/index.md
index 8a999c2b6c67f53..3f73320a5e5feb6 100644
--- a/files/en-us/games/techniques/3d_collision_detection/index.md
+++ b/files/en-us/games/techniques/3d_collision_detection/index.md
@@ -18,7 +18,8 @@ The **axis-aligned constraint** is there because of performance reasons. The ove
 
 ![Animated rotating knot showing the virtual rectangular box shrink and grow as the knots rotates within it. The box does not rotate.](rotating_knot.gif)
 
-> **Note:** Check out the [Bounding Volumes with Three.js](/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js) article to see a practical implementation of this technique.
+> [!NOTE]
+> Check out the [Bounding Volumes with Three.js](/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js) article to see a practical implementation of this technique.
 
 ### Point vs. AABB
 
@@ -106,7 +107,8 @@ function isPointInsideSphere(point, sphere) {
 }
 ```
 
-> **Note:** The code above features a square root, which can be expensive to calculate. An easy optimization to avoid it consists of comparing the squared distance with the squared radius, so the optimized equation would instead involve `distanceSqr < sphere.radius * sphere.radius`.
+> [!NOTE]
+> The code above features a square root, which can be expensive to calculate. An easy optimization to avoid it consists of comparing the squared distance with the squared radius, so the optimized equation would instead involve `distanceSqr < sphere.radius * sphere.radius`.
 
 ### Sphere vs. sphere
 
diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md
index 6770f6610ffc430..e07729f3833a7b6 100644
--- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md
+++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md
@@ -48,7 +48,8 @@ This contains some basic information like the document `charset` and {{htmleleme
 
 A scene is the place where everything happens. When creating new objects in the demo, we will be adding them all to the scene to make them visible on the screen. In A-Frame, the scene is represented by a [Scene entity](https://aframe.io/docs/core/scene.html).
 
-> **Note:** An Entity is any element — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
+> [!NOTE]
+> An Entity is any element — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
 
 Let's create the scene by adding an `<a-scene>` element inside the `<body>` element:
 
@@ -66,7 +67,8 @@ Adding the cube to the scene is done by adding a simple [`<a-box>`](https://afra
 
 It contains a few parameters already defined: `color`, `position` and `rotation` — these are fairly obvious, and define the base color of the cube, the position inside the 3D scene, and the rotation of the cube.
 
-> **Note:** The distance values (e.g. for the cube y position) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you.
+> [!NOTE]
+> The distance values (e.g. for the cube y position) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you.
 
 ### Adding a background: Sky box
 
@@ -248,7 +250,8 @@ Everything is rendered properly and animating — congratulations on building yo
 
 If you have a VR device available, now is a good time to try out your scene with it too.
 
-> **Note:** You can also [check it out on GitHub](https://github.com/end3r/MDN-Games-3D/blob/gh-pages/A-Frame/shapes.html).
+> [!NOTE]
+> You can also [check it out on GitHub](https://github.com/end3r/MDN-Games-3D/blob/gh-pages/A-Frame/shapes.html).
 
 That was easier than you thought, right? A-Frame targets web developers by offering easy to use web markup and all the advantages that brings, such as JavaScript manipulation. It is easy to start with, but also provides a powerful API for advanced concepts, as well as dealing with cross browser differences and suchlike. The community is growing, just like the number of supported VR devices — it's a great time to start experimenting with such frameworks.
 
diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md
index 3206d0764e14303..9102593169a2a27 100644
--- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md
+++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md
@@ -104,7 +104,8 @@ const camera = new BABYLON.FreeCamera(
 
 There are many [cameras](https://doc.babylonjs.com/divingDeeper/cameras) available in Babylon.js; `FreeCamera` is the most basic and universal one. To initialize it you need to pass it three parameters: any name you want to use for it, the coordinates where you want it to be positioned in the 3D space, and the scene you want to add it to.
 
-> **Note:** You probably noticed the `BABYLON.Vector3()` method in use here — this defines a 3D position on the scene. Babylon.js is bundled with a complete math library for handling vectors, colors, matrices etc.
+> [!NOTE]
+> You probably noticed the `BABYLON.Vector3()` method in use here — this defines a 3D position on the scene. Babylon.js is bundled with a complete math library for handling vectors, colors, matrices etc.
 
 ## Let there be light
 
@@ -130,7 +131,8 @@ const box = BABYLON.Mesh.CreateBox("box", 2, scene);
 
 A mesh is a way the engine creates geometric shapes, so material can be easily applied to them later on. In this case we're creating a box using the `Mesh.CreateBox` method with its own name, a size of 2, and a declaration of which scene we want it added to.
 
-> **Note:** The size or position values (e.g. for the box size) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you.
+> [!NOTE]
+> The size or position values (e.g. for the box size) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you.
 
 If you save and refresh now, your object will look like a square, because it's facing the camera. The good thing about objects is that we can move them on the scene however we want, for example rotating and scaling. Let's apply a little rotation to the box, so we can see more than one face — again, add these lines below the previous one:
 
diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md
index b4a5c8f999b380d..098c2e7d6eb1124 100644
--- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md
+++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md
@@ -56,7 +56,8 @@ Click on your new material in the assets tab and its entity inspector will appea
 
 To change its color we'll use the _Diffuse_ option in the entity inspector. Click _Diffuse_, then select the colored box next to the Color label — it will open a {{glossary("color wheel")}}. From here you can click your desired color or enter it in the bottom text field as a hex value. We've chosen a blue color with a hex value of `0095DD` — enter this code in the text field and press return for it to be accepted.
 
-> **Note:** Yes, you read that right — you need to enter the hex value without the hash/pound symbol.
+> [!NOTE]
+> Yes, you read that right — you need to enter the hex value without the hash/pound symbol.
 
 ![PlayCanvas Editor - Diffuse color](playcanvas-editor-diffusecolor.png)
 
diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine/index.md
index b9470ed12978624..aaf03d0ef0a9aec 100644
--- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine/index.md
+++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine/index.md
@@ -93,11 +93,13 @@ camera.setPosition(0, 0, 7);
 
 The code above will create a new `Entity`.
 
-> **Note:** An Entity is any object used in the scene — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
+> [!NOTE]
+> An Entity is any object used in the scene — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
 
 Then it adds a `camera` component to it with the light gray `clearColor` — the color will be visible as the background. Next, the `camera` object is added to the root of our application and positioned to be 7 units away from the center of the scene on the `z` axis. This allows us to make some space to visualize the objects that we will create later on.
 
-> **Note:** The distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — millimeters, 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 — millimeters, meters, feet, or miles — it's up to you.
 
 Try saving the file and loading it in your browser. You should now see a gray window. Congratulations!
 
@@ -149,7 +151,8 @@ box.model.model.meshInstances[0].material = boxMaterial;
 
 By diffusing the light on the object, we can give it its own color — we'll choose a nice familiar blue.
 
-> **Note:** In PlayCanvas, the color channel values are provided as floats in the range `0-1`, instead of integers of `0-255` as you might be used to using on the Web.
+> [!NOTE]
+> In PlayCanvas, the color channel values are provided as floats in the range `0-1`, instead of integers of `0-255` as you might be used to using on the Web.
 
 After the material is created and its color is set, it has to be updated so our changes are going to be applied. Then all we need to do is set the `box`'s material to the newly created `boxMaterial`.
 
diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
index c3d72a0ec261d58..c1109889768fd25 100644
--- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
+++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
@@ -20,7 +20,8 @@ PlayCanvas has a few well-known demos published that showcase its possibilities.
 
 ![A list of PlayCanvas demos: Tanx, Swooop, Star Lord, BMW i8.](playcanvas-demos.png)
 
-> **Note:** Check out the list of [featured demos](https://playcanvas.com/explore) to find more examples.
+> [!NOTE]
+> Check out the list of [featured demos](https://playcanvas.com/explore) to find more examples.
 
 ## Engine vs. editor
 
diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
index 961c6076497769b..f47088ba36062b0 100644
--- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
+++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
@@ -8,7 +8,8 @@ page-type: guide
 
 A typical 3D scene in a game — even the simplest one — contains standard items like shapes located in a coordinate system, a camera to actually see them, lights and materials to make it look better, animations to make it look alive, etc. **Three.js**, as with any other 3D library, provides built-in helper functions to help you implement common 3D functionality more quickly. In this article we'll take you through the real basics of using Three, including setting up a development environment, structuring the necessary HTML, the fundamental objects of Three, and how to build up a basic demo.
 
-> **Note:** We chose Three because it is one of the most popular [WebGL](/en-US/docs/Web/API/WebGL_API) libraries, and it is easy to get started with. We are not trying to say it is better than any other WebGL library available, and you should feel free to try another library, such as [CopperLicht](https://www.ambiera.com/copperlicht/index.html) or [PlayCanvas](https://playcanvas.com/).
+> [!NOTE]
+> We chose Three because it is one of the most popular [WebGL](/en-US/docs/Web/API/WebGL_API) libraries, and it is easy to get started with. We are not trying to say it is better than any other WebGL library available, and you should feel free to try another library, such as [CopperLicht](https://www.ambiera.com/copperlicht/index.html) or [PlayCanvas](https://playcanvas.com/).
 
 ## Environment setup
 
@@ -109,7 +110,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.
 
-> **Note:** The distance values (e.g. for the camera z position) are unitless, and can be anything you deem suitable for your scene: millimeters, meters, feet, or miles. It's up to you.
+> [!NOTE]
+> The distance values (e.g. for the camera z position) are unitless, and can be anything you deem suitable for your scene: millimeters, meters, feet, or miles. It's up to you.
 
 ## Rendering the scene
 
diff --git a/files/en-us/games/techniques/3d_on_the_web/glsl_shaders/index.md b/files/en-us/games/techniques/3d_on_the_web/glsl_shaders/index.md
index 771bf40eef3998b..d99bbe3c545d205 100644
--- a/files/en-us/games/techniques/3d_on_the_web/glsl_shaders/index.md
+++ b/files/en-us/games/techniques/3d_on_the_web/glsl_shaders/index.md
@@ -32,7 +32,8 @@ The calculations result in a variable containing the information about the RGBA
 
 Let's build a simple demo to explain those shaders in action. Be sure to read [Three.js tutorial](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) first to grasp the concept of the scene, its objects, and materials.
 
-> **Note:** Remember that you don't have to use Three.js or any other library to write your shaders — pure [WebGL](/en-US/docs/Web/API/WebGL_API) (Web Graphics Library) is more than enough. We've used Three.js here to make the background code a lot simpler and clearer to understand, so you can just focus on the shader code. Three.js and other 3D libraries abstract a lot of things for you — if you wanted to create such an example in raw WebGL, you'd have to write a lot of extra code to actually make it work.
+> [!NOTE]
+> Remember that you don't have to use Three.js or any other library to write your shaders — pure [WebGL](/en-US/docs/Web/API/WebGL_API) (Web Graphics Library) is more than enough. We've used Three.js here to make the background code a lot simpler and clearer to understand, so you can just focus on the shader code. Three.js and other 3D libraries abstract a lot of things for you — if you wanted to create such an example in raw WebGL, you'd have to write a lot of extra code to actually make it work.
 
 ### Environment setup
 
@@ -101,7 +102,8 @@ void main() {
 
 The resulting `gl_Position` is calculated by multiplying the model-view and the projection matrices by each vector to get the final vertex position, in each case.
 
-> **Note:** You can learn more about _model_, _view_, and _projection transformations_ from the [vertex processing paragraph](/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#vertex_processing), and you can also check out the links at the end of this article to learn more about it.
+> [!NOTE]
+> You can learn more about _model_, _view_, and _projection transformations_ from the [vertex processing paragraph](/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#vertex_processing), and you can also check out the links at the end of this article to learn more about it.
 
 Both `projectionMatrix` and `modelViewMatrix` are provided by Three.js and the vector is passed with the new 3D position, which results in the original cube moving 10 units along the `x` axis and 5 units along the `z` axis, translated via a shader. We can ignore the fourth parameter and leave it with the default `1.0` value; this is used to manipulate the clipping of the vertex position in the 3D space, but we don't need in our case.
 
diff --git a/files/en-us/games/techniques/3d_on_the_web/webxr/index.md b/files/en-us/games/techniques/3d_on_the_web/webxr/index.md
index 0090cbc5b64d6c0..faad651185c7077 100644
--- a/files/en-us/games/techniques/3d_on_the_web/webxr/index.md
+++ b/files/en-us/games/techniques/3d_on_the_web/webxr/index.md
@@ -8,7 +8,8 @@ page-type: guide
 
 The concepts of virtual reality (VR) and augmented reality (AR) aren't new, but the technology is more accessible than ever. We can also use a JavaScript API to make use of it in web applications. This article introduces WebXR from the perspective of its use in games.
 
-> **Note:** You may see references to the non-standard WebVR API. WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers, and supported only a few devices. The **WebVR** API is replaced by the [**WebXR** Device API](/en-US/docs/Web/API/WebXR_Device_API).
+> [!NOTE]
+> You may see references to the non-standard WebVR API. WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers, and supported only a few devices. The **WebVR** API is replaced by the [**WebXR** Device API](/en-US/docs/Web/API/WebXR_Device_API).
 
 ## VR devices
 
diff --git a/files/en-us/games/techniques/audio_for_web_games/index.md b/files/en-us/games/techniques/audio_for_web_games/index.md
index a937448f36f0b27..a21425554bb5e9d 100644
--- a/files/en-us/games/techniques/audio_for_web_games/index.md
+++ b/files/en-us/games/techniques/audio_for_web_games/index.md
@@ -27,9 +27,11 @@ For more passive audio autoplay, for example background music that starts as soo
 
 To prime audio like this we want to play a part of it; for this reason it is useful to include a moment of silence at the end of your audio sample. Jumping to, playing, and then pausing that silence will mean we can now use JavaScript to play that file at arbitrary points. You can find out more about [best practices with the autoplay policy here](/en-US/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy).
 
-> **Note:** Playing part of your file at zero volume could also work if the browser allows you to change volume (see below). Also note that playing and immediately pausing your audio does not guarantee that a small piece of audio won't be played.
+> [!NOTE]
+> Playing part of your file at zero volume could also work if the browser allows you to change volume (see below). Also note that playing and immediately pausing your audio does not guarantee that a small piece of audio won't be played.
 
-> **Note:** Adding a web app to your mobile's homescreen may change its capabilities. In the case of autoplay on iOS, this appears to be the case currently. If possible, you should try your code on several devices and platforms to see how it works.
+> [!NOTE]
+> Adding a web app to your mobile's homescreen may change its capabilities. In the case of autoplay on iOS, this appears to be the case currently. If possible, you should try your code on several devices and platforms to see how it works.
 
 ### Volume
 
@@ -41,7 +43,8 @@ Likely as an attempt to mitigate runaway mobile network data use, we also often
 
 The {{domxref("HTMLMediaElement")}} interface comes with [lots of properties](/en-US/docs/Web/API/HTMLMediaElement#instance_properties) to help determine whether a track is in a state to be playable.
 
-> **Note:** In many ways the concept of buffering is an outdated one. As long as byte-range requests are accepted (which is the default behavior), we should be able to jump to a specific point in the audio without having to download the preceding content. However, preloading is still useful — without it, there would always need to be some client-server communication required before playing can commence.
+> [!NOTE]
+> In many ways the concept of buffering is an outdated one. As long as byte-range requests are accepted (which is the default behavior), we should be able to jump to a specific point in the audio without having to download the preceding content. However, preloading is still useful — without it, there would always need to be some client-server communication required before playing can commence.
 
 ### Concurrent audio playback
 
@@ -119,11 +122,14 @@ Here's a table that shows what mobile platforms support the features talked abou
 
 There's a [full compatibility chart for mobile and desktop HTMLMediaElement support here](/en-US/docs/Web/API/HTMLMediaElement#browser_compatibility).
 
-> **Note:** Concurrent audio playback is tested using our [concurrent audio test example](https://jsfiddle.net/dmkyaq0r/), where we attempt to play three pieces of audio at the same time using the standard audio API.
+> [!NOTE]
+> Concurrent audio playback is tested using our [concurrent audio test example](https://jsfiddle.net/dmkyaq0r/), where we attempt to play three pieces of audio at the same time using the standard audio API.
 
-> **Note:** Simple autoplay functionality is tested with our [autoplay test example](https://jsfiddle.net/vpdspp2b/).
+> [!NOTE]
+> Simple autoplay functionality is tested with our [autoplay test example](https://jsfiddle.net/vpdspp2b/).
 
-> **Note:** Volume changeability is tested with our [volume test example](https://jsfiddle.net/7ta12vw4/).
+> [!NOTE]
+> Volume changeability is tested with our [volume test example](https://jsfiddle.net/7ta12vw4/).
 
 ## Mobile workarounds
 
@@ -192,11 +198,14 @@ myAudio.addEventListener(
 );
 ```
 
-> **Note:** You can [try out our audio sprite player live](https://jsfiddle.net/59vwaame/) on JSFiddle.
+> [!NOTE]
+> You can [try out our audio sprite player live](https://jsfiddle.net/59vwaame/) on JSFiddle.
 
-> **Note:** On mobile we may need to trigger this code from a user-initiated event such as a start button being pressed, as described above.
+> [!NOTE]
+> On mobile we may need to trigger this code from a user-initiated event such as a start button being pressed, as described above.
 
-> **Note:** Watch out for bit rates. Encoding your audio at lower bit rates means smaller file sizes but lower seeking accuracy.
+> [!NOTE]
+> Watch out for bit rates. Encoding your audio at lower bit rates means smaller file sizes but lower seeking accuracy.
 
 ### Background music
 
@@ -210,7 +219,8 @@ The Web Audio API is supported across all modern desktop and mobile browsers, ex
 
 A feasible cross-browser strategy would be to provide basic audio using the standard `<audio>` element and, where supported, enhance the experience using the Web Audio API.
 
-> **Note:** Significantly, iOS Safari now supports the Web Audio API, which means it's now possible to write web-based games with native-quality audio for iOS.
+> [!NOTE]
+> Significantly, iOS Safari now supports the Web Audio API, which means it's now possible to write web-based games with native-quality audio for iOS.
 
 As the Web Audio API allows precise timing and control of audio playback, we can use it to play samples at specific moments, which is a crucial immersive aspect of gaming. You want those explosions to be accompanied by a thundering boom, not followed by one, after all.
 
@@ -372,11 +382,13 @@ trackEls.forEach((el, i) => {
 });
 ```
 
-> **Note:** You can [see this demo in action here](https://mdn.github.io/webaudio-examples/multi-track/) and [view the source code here](https://github.com/mdn/webaudio-examples/tree/main/multi-track).
+> [!NOTE]
+> You can [see this demo in action here](https://mdn.github.io/webaudio-examples/multi-track/) and [view the source code here](https://github.com/mdn/webaudio-examples/tree/main/multi-track).
 
 In the context of your game world you may have loops and samples that are played in different circumstances, and it can be useful to be able to synchronize with other tracks for a more seamless experience.
 
-> **Note:** This example does not wait for the beat to end before introducing the next piece; we could do this if we knew the BPM (Beats Per Minute) of the tracks.
+> [!NOTE]
+> This example does not wait for the beat to end before introducing the next piece; we could do this if we knew the BPM (Beats Per Minute) of the tracks.
 
 You may find that the introduction of a new track sounds more natural if it comes in on the beat/bar/phrase or whatever units you want to chunk your background music into.
 
@@ -397,9 +409,11 @@ if (offset === 0) {
 }
 ```
 
-> **Note:** You can [try our wait calculator code](https://jsfiddle.net/c87z11jj/2/) here, on JSFiddle (I've synched to the bar in this case).
+> [!NOTE]
+> You can [try our wait calculator code](https://jsfiddle.net/c87z11jj/2/) here, on JSFiddle (I've synched to the bar in this case).
 
-> **Note:** If the first parameter is 0 or less than the context `currentTime`, playback will commence immediately.
+> [!NOTE]
+> If the first parameter is 0 or less than the context `currentTime`, playback will commence immediately.
 
 ### Positional audio
 
diff --git a/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md b/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md
index 5f70a120ae8a53d..da104d7f69b9791 100644
--- a/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md
+++ b/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md
@@ -104,7 +104,8 @@ function draw() {
 
 In this case, we are checking the four D-Pad buttons (0-3) and the A button (11).
 
-> **Note:** Please remember that different devices may have different key mappings, i.e. the D-Pad Right button have an index of 3 on the wireless XBox 360, but may have a different one on another device.
+> [!NOTE]
+> Please remember that different devices may have different key mappings, i.e. the D-Pad Right button have an index of 3 on the wireless XBox 360, but may have a different one on another device.
 
 You could also create a helper function that would assign proper names to the listed buttons, so for example instead of checking out if `gamepadButtonPressedHandler(3)` is pressed, you could do a more descriptive check: `gamepadButtonPressedHandler('DPad-Right')`.
 
diff --git a/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md b/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md
index 471e395f6056ac0..16d1d9326c3c056 100644
--- a/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md
+++ b/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md
@@ -12,7 +12,8 @@ Now, when we have our mobile controls in place and the game is playable on touch
 
 It's also easier to test control-independent features like gameplay on desktop if you develop it there, so you don't have to push the files to a mobile device every time you make a change in the source code.
 
-> **Note:** the [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for easier and faster development, but it's totally up to you which approach you chose.
+> [!NOTE]
+> the [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for easier and faster development, but it's totally up to you which approach you chose.
 
 ## Pure JavaScript approach
 
diff --git a/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md b/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md
index 5ef35c109a11165..5a25d5e7ceb34f1 100644
--- a/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md
+++ b/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md
@@ -10,7 +10,8 @@ page-type: guide
 
 The future of mobile gaming is definitely web, and many developers choose the [mobile first](/en-US/docs/Glossary/Mobile_First) approach in their game development process — in the modern world, this generally also involves implementing touch controls. In this tutorial, we will see how easy it is to implement mobile controls in an HTML game, and enjoy playing on a mobile touch-enabled device.
 
-> **Note:** The game [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for easier and faster development, but it's entirely up to you which approach you to choose.
+> [!NOTE]
+> The game [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for easier and faster development, but it's entirely up to you which approach you to choose.
 
 ## Pure JavaScript approach
 
@@ -31,7 +32,8 @@ This way, touching the game's {{htmlelement("canvas")}} on the mobile screen wou
 - [touchend](/en-US/docs/Web/API/Element/touchend_event) is fired when the user stops touching the screen
 - [touchcancel](/en-US/docs/Web/API/Element/touchcancel_event) is fired when a touch is cancelled, for example when the user moves their finger out of the screen.
 
-> **Note:** The [touch events](/en-US/docs/Web/API/Touch_events) reference article provides more examples and information.
+> [!NOTE]
+> The [touch events](/en-US/docs/Web/API/Touch_events) reference article provides more examples and information.
 
 ### Pure JavaScript demo
 
diff --git a/files/en-us/games/techniques/controls_gamepad_api/index.md b/files/en-us/games/techniques/controls_gamepad_api/index.md
index 6afcdc38c82f81a..c7a5e377521974e 100644
--- a/files/en-us/games/techniques/controls_gamepad_api/index.md
+++ b/files/en-us/games/techniques/controls_gamepad_api/index.md
@@ -32,7 +32,8 @@ The full version of the Hungry Fridge game was built first, and then to showcase
 
 The code explained below is from the full version of the Hungry Fridge game, but it's almost identical to the one from the demo — the only difference is that the full version uses the `turbo` variable to decide whether the game will be launched using Super Turbo mode. It works independently, so it could be turned on even if the gamepad is not connected.
 
-> **Note:** Easter Egg time: There's a hidden option to launch Super Turbo Hungry Fridge on the desktop without having a gamepad connected — click the gamepad icon in the top right corner of the screen. It will launch the game in the Super Turbo mode and you'll be able to control the Fridge with the keyboard: A and D for turning the turret left and right, W for shooting and arrow keys for movement.
+> [!NOTE]
+> Easter Egg time: There's a hidden option to launch Super Turbo Hungry Fridge on the desktop without having a gamepad connected — click the gamepad icon in the top right corner of the screen. It will launch the game in the Super Turbo mode and you'll be able to control the Fridge with the keyboard: A and D for turning the turret left and right, W for shooting and arrow keys for movement.
 
 ## Implementation
 
diff --git a/files/en-us/games/techniques/crisp_pixel_art_look/index.md b/files/en-us/games/techniques/crisp_pixel_art_look/index.md
index b6a5e2d3d67ebb1..2bad74c4f892853 100644
--- a/files/en-us/games/techniques/crisp_pixel_art_look/index.md
+++ b/files/en-us/games/techniques/crisp_pixel_art_look/index.md
@@ -87,4 +87,5 @@ This code used together produces the following result:
 
 {{ EmbedLiveSample('An_example', '100%', 520) }}
 
-> **Note:** Canvas content is not accessible to screen readers. Include descriptive text as the value of the [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute directly on the canvas element itself or include fallback content placed within the opening and closing canvas tag. Canvas content is not part of the DOM, but nested fallback content is.
+> [!NOTE]
+> Canvas content is not accessible to screen readers. Include descriptive text as the value of the [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute directly on the canvas element itself or include fallback content placed within the opening and closing canvas tag. Canvas content is not part of the DOM, but nested fallback content is.
diff --git a/files/en-us/games/techniques/tilemaps/index.md b/files/en-us/games/techniques/tilemaps/index.md
index 6d3043accbcc5c2..89ed40a5cadea1b 100644
--- a/files/en-us/games/techniques/tilemaps/index.md
+++ b/files/en-us/games/techniques/tilemaps/index.md
@@ -30,7 +30,8 @@ It is common to group all the information needed to handle tilemaps into the sam
 - **Visual grid**: Includes indices showing what type of tile should be placed on each position in the grid.
 - **Logic grid**: This can be a collision grid, a path-finding grid, etc., depending on the type of game.
 
-> **Note:** For the visual grid, a special value (usually a negative number, `0` or `null`) is needed to represent empty tiles.
+> [!NOTE]
+> For the visual grid, a special value (usually a negative number, `0` or `null`) is needed to represent empty tiles.
 
 ## Square tiles
 
@@ -100,7 +101,8 @@ The following screenshot shows an example of both points: a character appearing
 
 Since tilemaps are an actual grid of visual tiles, it is common to create a mapping between this visual grid and a logic grid. The most common case is to use this logic grid to handle collisions, but other uses are possible as well: character spawning points, detecting whether some elements are placed together in the right way to trigger a certain action (like in _Tetris_ or _Bejeweled_), path-finding algorithms, etc.
 
-> **Note:** You can take a look at our demo that shows [how to use a logic grid to handle collisions](https://mozdevs.github.io/gamedev-js-tiles/square/logic-grid.html).
+> [!NOTE]
+> You can take a look at our demo that shows [how to use a logic grid to handle collisions](https://mozdevs.github.io/gamedev-js-tiles/square/logic-grid.html).
 
 ## Isometric tilemaps
 
diff --git a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md
index 94c9e75082e2073..ddbee59cf44ac30 100644
--- a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md
+++ b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md
@@ -8,7 +8,8 @@ page-type: guide
 
 This article covers how to implement scrolling square tilemaps using the [Canvas API](/en-US/docs/Web/API/Canvas_API).
 
-> **Note:** When writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2D canvas context, load images, etc., which is all explained in the [Canvas API tutorial](/en-US/docs/Web/API/Canvas_API/Tutorial), as well as the basic information included in our [Tilemaps](/en-US/docs/Games/Techniques/Tilemaps) introduction article. This article also builds upon [implementing static square tilemaps](/en-US/docs/Games/Techniques/Tilemaps/Square_tilemaps_implementation:_Static_maps) — you should read that too if you've not done so already.
+> [!NOTE]
+> When writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2D canvas context, load images, etc., which is all explained in the [Canvas API tutorial](/en-US/docs/Web/API/Canvas_API/Tutorial), as well as the basic information included in our [Tilemaps](/en-US/docs/Games/Techniques/Tilemaps) introduction article. This article also builds upon [implementing static square tilemaps](/en-US/docs/Games/Techniques/Tilemaps/Square_tilemaps_implementation:_Static_maps) — you should read that too if you've not done so already.
 
 ## The camera
 
diff --git a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md
index a1db4d5f342523b..fa36a0b03ec3b1e 100644
--- a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md
+++ b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md
@@ -8,7 +8,8 @@ page-type: guide
 
 This article covers how to implement static square tilemaps using the [Canvas API](/en-US/docs/Web/API/Canvas_API).
 
-> **Note:** When writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2D canvas context, load images, etc., which is all explained in the [Canvas API tutorial](/en-US/docs/Web/API/Canvas_API/Tutorial), as well as the basic information included in our [Tilemaps](/en-US/docs/Games/Techniques/Tilemaps) introduction article.
+> [!NOTE]
+> When writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2D canvas context, load images, etc., which is all explained in the [Canvas API tutorial](/en-US/docs/Web/API/Canvas_API/Tutorial), as well as the basic information included in our [Tilemaps](/en-US/docs/Games/Techniques/Tilemaps) introduction article.
 
 ## The tile atlas
 
diff --git a/files/en-us/games/tools/asm.js/index.md b/files/en-us/games/tools/asm.js/index.md
index d28eaf83b670abb..c6331934c73c872 100644
--- a/files/en-us/games/tools/asm.js/index.md
+++ b/files/en-us/games/tools/asm.js/index.md
@@ -8,7 +8,8 @@ status:
 
 {{GamesSidebar}}
 
-> **Warning:** The [asm.js](http://asmjs.org/) specification is considered **deprecated**.
+> [!WARNING]
+> The [asm.js](http://asmjs.org/) specification is considered **deprecated**.
 > Developers may look to [WebAssembly](/en-US/docs/WebAssembly) as an alternative to asm.js for running high-performance code in the browser.
 
 [Asm.js](http://asmjs.org/) is a specification defining a subset of JavaScript that is highly optimizable. This article looks at exactly what is permitted in the asm.js subset, what improvements it confers, where and how you can make use of it, and further resources and examples.
diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/buttons/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/buttons/index.md
index 4be0bf3dc939ef3..9a1b647aecc15ff 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_phaser/buttons/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/buttons/index.md
@@ -59,7 +59,8 @@ The `button()` method's parameters are as follows:
 - A reference to `this` to specify the execution context
 - The frames that will be used for the _over_, _out_ and _down_ events.
 
-> **Note:** The over event is the same as hover, out is when the pointer moves out of the button and down is when the button is pressed.
+> [!NOTE]
+> The over event is the same as hover, out is when the pointer moves out of the button and down is when the button is pressed.
 
 Now we need to define the `startGame()` function referenced in the code above:
 
diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md
index d5c42e31e43a9eb..1dff3c1ff633907 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md
@@ -41,7 +41,8 @@ As a note on learning paths — starting with pure JavaScript is the best way to
 
 After that, you can pick any framework you like and use it for your projects; we have chosen Phaser as it is a good solid framework, with a good support and community available, and a good set of plugins. Frameworks speed up development time and help take care of the boring parts, allowing you to concentrate on the fun stuff. However, frameworks are not always perfect, so if something unexpected happens or you want to write some functionality that the framework does not provide, you will need some pure JavaScript knowledge.
 
-> **Note:** This series of articles can be used as material for hands-on game development workshops. You can also make use of the [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) based on this tutorial if you want to give a talk about game development with Phaser.
+> [!NOTE]
+> This series of articles can be used as material for hands-on game development workshops. You can also make use of the [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) based on this tutorial if you want to give a talk about game development with Phaser.
 
 ## Next steps
 
diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md
index c1dcde367f33257..244b152ded1cd5f 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md
@@ -20,7 +20,8 @@ Let's start by creating a JavaScript variable to represent our ball. Add the fol
 let ball;
 ```
 
-> **Note:** For the sake of this tutorial, we will use global variables. The purpose of the tutorial is to teach Phaser-specific approaches to game development rather than dwelling on subjective best approaches.
+> [!NOTE]
+> For the sake of this tutorial, we will use global variables. The purpose of the tutorial is to teach Phaser-specific approaches to game development rather than dwelling on subjective best approaches.
 
 ## Loading the ball sprite
 
diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
index b688798f656e62b..c5eb9d8612637d0 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
@@ -157,7 +157,8 @@ document.getElementById("runButton").addEventListener("click", function () {
 
 {{embedlivesample("compare_your_code", 600, 360)}}
 
-> **Note:** Try changing the color of the ball to a random color every time it hits the wall.
+> [!NOTE]
+> Try changing the color of the ball to a random color every time it hits the wall.
 
 ## Next steps
 
diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
index 6c7c416f7a94f8a..00cc07661732299 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
@@ -247,7 +247,8 @@ document.getElementById("runButton").addEventListener("click", function () {
 
 {{embedlivesample("compare_your_code", 600, 360)}}
 
-> **Note:** Try changing the number of bricks in a row or a column, or their positions.
+> [!NOTE]
+> Try changing the number of bricks in a row or a column, or their positions.
 
 ## Next steps
 
diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
index 0ac2818d772be55..0c090e4d3732821 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
@@ -139,7 +139,8 @@ ctx.closePath();
 
 {{embedlivesample("compare_your_code", 600, 340)}}
 
-> **Note:** Try changing the size and color of the given shapes.
+> [!NOTE]
+> Try changing the size and color of the given shapes.
 
 ## Next steps
 
diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
index 0f42fd06432d558..449395763b1a311 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
@@ -191,7 +191,8 @@ document.getElementById("runButton").addEventListener("click", function () {
 
 {{embedlivesample("compare_your_code", 600, 360)}}
 
-> **Note:** Try making the ball move faster when it hits the paddle.
+> [!NOTE]
+> Try making the ball move faster when it hits the paddle.
 
 ## Next steps
 
diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md
index 015b4bd1a23d1f6..d4fff17fe924b98 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md
@@ -33,8 +33,9 @@ All the lessons — and the different versions of the [MDN Breakout game](https:
 
 Starting with pure JavaScript is the best way to get a solid knowledge of web game development. After that, you can pick any framework you like and use it for your projects. Frameworks are just tools built with the JavaScript language; so even if you plan on working with them, it's good to learn about the language itself first to know what exactly is going on under the hood. Frameworks speed up development time and help take care of boring parts of the game, but if something is not working as expected, you can always try to debug that or just write your own solutions in pure JavaScript.
 
-> **Note:**
-> This series of articles can be used as material for hands-on game development workshops. You can also make use of the [Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit) based on this tutorial if you want to give a talk about game development in general.
+> [!NOTE]
+>
+> > This series of articles can be used as material for hands-on game development workshops. You can also make use of the [Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit) based on this tutorial if you want to give a talk about game development in general.
 >
 > If you are interested in using a game library for learning about 2D web game development, see this series' counterpart, [2D breakout game using Phaser](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser).
 
diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
index 96da0f5d1f5808d..924586ebb77824f 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
@@ -224,7 +224,8 @@ document.getElementById("runButton").addEventListener("click", function () {
 
 {{embedlivesample("compare_your_code", 600, 360)}}
 
-> **Note:** Try adjusting the boundaries of the paddle movement, so the whole paddle will be visible on both edges of the Canvas instead of only half of it.
+> [!NOTE]
+> Try adjusting the boundaries of the paddle movement, so the whole paddle will be visible on both edges of the Canvas instead of only half of it.
 
 ## Next steps
 
diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
index 7feeee9c12af055..39bd8f562782367 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
@@ -134,7 +134,8 @@ function draw() {
 
 You can check the finished code for this article in the live demo below and play with it to understand better how it works.
 
-> **Note:** Live samples run automatically on these pages, so we've added a "start game" button.
+> [!NOTE]
+> Live samples run automatically on these pages, so we've added a "start game" button.
 > This is useful to avoid games starting automatically and triggering alerts or other events too often.
 
 ```html
@@ -186,7 +187,8 @@ document.getElementById("runButton").addEventListener("click", function () {
 
 {{embedlivesample("compare_your_code", 600, 350)}}
 
-> **Note:** Try changing the speed of the moving ball, or the direction it moves in.
+> [!NOTE]
+> Try changing the speed of the moving ball, or the direction it moves in.
 
 ## Next steps
 
diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
index 02238010444c43b..e52007595c6d312 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
@@ -219,7 +219,8 @@ document.getElementById("runButton").addEventListener("click", function () {
 
 {{embedlivesample("compare_your_code", 600, 360)}}
 
-> **Note:** Try making the paddle move faster or slower, or change its size.
+> [!NOTE]
+> Try making the paddle move faster or slower, or change its size.
 
 ## Next steps
 
diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
index f681fa7f72ffc31..b91664057a937fb 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
+++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
@@ -268,7 +268,8 @@ document.getElementById("runButton").addEventListener("click", function () {
 
 {{embedlivesample("compare_your_code", 600, 360)}}
 
-> **Note:** Try adding more points per brick hit, print out the number of collected points in the end game alert box.
+> [!NOTE]
+> Try adding more points per brick hit, print out the number of collected points in the end game alert box.
 
 ## Next steps
 
diff --git a/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
index 179230d20c06dcc..b3b3081d56139f8 100644
--- a/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
+++ b/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
@@ -83,7 +83,8 @@ The line above will initialize the Phaser instance — the arguments are the wid
 
 The important thing to remember is that the framework is setting up helpful methods to speed up a lot of things like image manipulation or assets management, which would be a lot harder to do manually.
 
-> **Note:** You can read the [Building Monster Wants Candy](https://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723) article for the in-depth introduction to the basic Phaser-specific functions and methods.
+> [!NOTE]
+> You can read the [Building Monster Wants Candy](https://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723) article for the in-depth introduction to the basic Phaser-specific functions and methods.
 
 Back to game states: the line below is adding a new state called `Boot` to the game:
 
@@ -324,7 +325,8 @@ The more you tilt the device, the more force is applied to the ball, therefore t
 
 ![An explanation of the X, Y and Z axes of a Flame mobile device with the Cyber Orb game demo on the screen.](cyber-orb-flame-orientation.png)
 
-> **Note:** To find out more about implementing device orientation and what raw code would look like, read [Keep it level: responding to device orientation changes](/en-US/docs/Web/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes).
+> [!NOTE]
+> To find out more about implementing device orientation and what raw code would look like, read [Keep it level: responding to device orientation changes](/en-US/docs/Web/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes).
 
 #### Adding the hole