Skip to content

Commit 1a0be46

Browse files
authored
Remove EASY from games (#42320)
1 parent dbf4bd5 commit 1a0be46

File tree

18 files changed

+28
-29
lines changed

18 files changed

+28
-29
lines changed

files/en-us/games/anatomy/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Other games demand control over each of the smallest possible individual timesli
1919

2020
But it might not need per-frame control. Your game loop might be similar to the _find the differences_ example and base itself on input events. It might require both input and simulated time. It might even loop based on something else entirely.
2121

22-
Modern JavaScript — as described in the next sections — thankfully makes it easy to develop an efficient, execute-once-per-frame main loop. Of course, your game will only be as optimized as you make it. If something looks like it should be attached to a more infrequent event then it is often a good idea to break it out of the main loop (but not always).
22+
Modern JavaScript — as described in the next sections — thankfully makes it less difficult to develop an efficient, execute-once-per-frame main loop. Of course, your game will only be as optimized as you make it. If something looks like it should be attached to a more infrequent event then it is often a good idea to break it out of the main loop (but not always).
2323

2424
## Building a main loop in JavaScript
2525

@@ -50,7 +50,7 @@ But do not immediately assume animations require frame-by-frame control. Simple
5050

5151
## Building a better main loop in JavaScript
5252

53-
There are two obvious issues with our previous main loop: `main()` pollutes the {{ domxref("window") }} object (where all global variables are stored) and the example code did not leave us with a way to _stop_ the loop unless the whole tab is closed or refreshed. For the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an Immediately-Invoked Function Expression (IIFE).
53+
There are two obvious issues with our previous main loop: `main()` pollutes the {{ domxref("window") }} object (where all global variables are stored) and the example code did not leave us with a way to _stop_ the loop unless the whole tab is closed or refreshed. For the first issue, if you want the main loop to just run and you do not need direct access to it, you could create it as an Immediately-Invoked Function Expression (IIFE).
5454

5555
<!-- prettier-ignore-start -->
5656
```js

files/en-us/games/techniques/3d_collision_detection/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ function isPointInsideSphere(point, sphere) {
107107
```
108108

109109
> [!NOTE]
110-
> 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`.
110+
> The code above features a square root, which can be expensive to calculate. An effective 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`.
111111
112112
### Sphere vs. sphere
113113

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ render();
320320

321321
## Summary
322322

323-
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. It's a great time to start experimenting with such frameworks.
323+
A-Frame targets web developers by offering web markup with advantages such as JavaScript manipulation. It provides a powerful API for advanced concepts, as well as dealing with cross browser differences. It's a great time to start experimenting with such frameworks.
324324

325325
## See also
326326

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ The `StandardMaterial` takes two parameters: a name, and the scene you want to a
169169

170170
## Babylon.js shapes example
171171

172-
Congratulations, you've created your first object in a 3D environment using Babylon.js! It was easier than you thought, right?
172+
Congratulations, you've created your first object in a 3D environment using Babylon.js! It was less painful than you thought, right?
173173
Here's what we have created so far in a live sample.
174174
You can click "Play" to edit the code in the MDN Playground:
175175

@@ -283,7 +283,7 @@ The `t` variable will be incremented on every rendered frame.
283283

284284
### Rotation
285285

286-
Applying rotation is as easy as adding this line at the end of the `renderLoop` function:
286+
Applying rotation requires adding this line at the end of the `renderLoop` function:
287287

288288
```js
289289
box.rotation.y = t * 2;

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ sidebar: games
77

88
A typical 3D scene in a game — even the simplest one — contains standard items like shapes located in a coordinate system, a camera to view it, 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.js, including setting up a development environment, structuring the necessary HTML, the fundamental objects of Three, and how to build up a basic demo.
99

10-
Three is one of the most popular [WebGL](/en-US/docs/Web/API/WebGL_API) libraries, and it is easy to get started with.
11-
We are not saying it is better than any other WebGL library, and you should feel free to try other libraries.
10+
Three is one of the most popular [WebGL](/en-US/docs/Web/API/WebGL_API) libraries, though we are not saying it is better than any other WebGL library, and you should feel free to try other libraries.
1211

1312
> [!NOTE]
1413
> This guide was last updated in November 2024, and is compatible with Three.js version `r79`.
@@ -184,7 +183,7 @@ cube.rotation.set(0.4, 0.2, 0);
184183
## Three.js shape example
185184

186185
If you've followed everything so far without any problems, you've created your first object in a 3D environment using Three.js!
187-
It was easier than you thought, right?
186+
Congratulations.
188187
Your code should look like the following live sample.
189188
You can click "Play" to view and edit the code in the MDN Playground:
190189

files/en-us/games/techniques/3d_on_the_web/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ It's hard to imagine a game without collision detection — we always need to wo
3636

3737
The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the [Meta Quest](https://www.meta.com/quest/), and the (currently experimental) [WebXR API](/en-US/docs/Web/API/WebXR_Device_API) for capturing information from XR hardware and making it available for use in JavaScript applications. For more, read [WebXR — Virtual and Augmented Reality for the Web](/en-US/docs/Games/Techniques/3D_on_the_web/WebXR).
3838

39-
There's also the [Building up a basic demo with A-Frame](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) article showing you how easy it is to build 3D environments for virtual reality using the [A-Frame](https://aframe.io/) framework.
39+
There's also the [Building up a basic demo with A-Frame](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) article showing you how to build 3D environments for virtual reality using the [A-Frame](https://aframe.io/) framework.
4040

4141
## The rise of libraries and frameworks
4242

@@ -58,7 +58,7 @@ PlayCanvas is a popular 3D WebGL game engine open-sourced on GitHub, with an edi
5858

5959
### Building up a basic demo with Three.js
6060

61-
Three.js, like any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the [Building up a basic demo with Three.js](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) subpage for the step-by-step process of creating the demo.
61+
Three.js, like any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot faster. See the [Building up a basic demo with Three.js](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) subpage for the step-by-step process of creating the demo.
6262

6363
### Other tools
6464

files/en-us/games/techniques/audio_for_web_games/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ myAudio.addEventListener("timeupdate", () => {
122122

123123
Music in games can have a powerful emotional effect. You can mix and match various music samples and assuming you can control the volume of your audio element you could cross-fade different musical pieces. Using the [`playbackRate()`](/en-US/docs/Web/API/HTMLMediaElement/playbackRate) method you can even adjust the speed of your music without affecting the pitch, to sync it up better with the action.
124124

125-
All this is possible using the standard {{htmlelement("audio")}} element and associated {{domxref("HTMLMediaElement")}}, but it becomes much easier and more flexible with the more advanced [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). Let's look at this next.
125+
All this is possible using the standard {{htmlelement("audio")}} element and associated {{domxref("HTMLMediaElement")}}, but it becomes more flexible with the more advanced [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). Let's look at this next.
126126

127127
### Web Audio API for games
128128

files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ sidebar: games
99

1010
Now, when we have our mobile controls in place and the game is playable on touch-enabled devices, it would be good to add mouse and keyboard support so the game can be playable on desktop also. That way we can broaden the list of supported platforms. We'll look at this below.
1111

12-
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.
12+
It's also more straightforward 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.
1313

1414
> [!NOTE]
15-
> 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.
15+
> 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 faster development, but it's totally up to you which approach you chose.
1616
1717
## Pure JavaScript approach
1818

@@ -79,7 +79,7 @@ You can see this example in action online at [end3r.github.io/JavaScript-Game-Co
7979

8080
## Phaser approach
8181

82-
As I mentioned before, you can write everything on your own, but you can also take advantage of built-in functions in frameworks like Phaser. These will make your life easier and development a lot faster. All the edge cases--differences between browser implementations, etc.--are handled by the framework, so you can focus on the actual task you want to do.
82+
As I mentioned before, you can write everything on your own, but you can also take advantage of built-in functions in frameworks like Phaser. These should make development a lot faster. All the edge cases--differences between browser implementations, etc.--are handled by the framework, so you can focus on the actual task you want to do.
8383

8484
### Mouse
8585

files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ sidebar: games
77

88
{{NextMenu("Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard", "Games/Techniques/Control_mechanisms")}}
99

10-
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.
10+
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 implement mobile controls in an HTML game, and enjoy playing on a mobile touch-enabled device.
1111

1212
> [!NOTE]
13-
> 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.
13+
> 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 faster development, but it's entirely up to you which approach you to choose.
1414
1515
## Pure JavaScript approach
1616

files/en-us/games/techniques/controls_gamepad_api/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,4 +247,4 @@ There were more events available in the spec than just `gamepadconnected` and `g
247247

248248
## Summary
249249

250-
The Gamepad API is very easy to develop with. Now it's easier than ever to deliver a console-like experience to the browser without the need for any plugins. You can play the full version of the [Hungry Fridge](https://enclavegames.com/games/hungry-fridge/) game directly in your browser. Check the other resources on the [Gamepad API Content Kit](https://end3r.github.io/Gamepad-API-Content-Kit/).
250+
The Gamepad API enables delivering a console-like experience to the browser without the need for any plugins. You can play the full version of the [Hungry Fridge](https://enclavegames.com/games/hungry-fridge/) game directly in your browser. Check the other resources on the [Gamepad API Content Kit](https://end3r.github.io/Gamepad-API-Content-Kit/).

0 commit comments

Comments
 (0)