mdn · queengooborg · Jul 7, 2023 · Jul 6, 2023 · Jul 7, 2023 · Jul 7, 2023
@@ -100,7 +100,7 @@ Crafty.c("Circle", {
       this.y + this.radius,
       this.radius,
       0,
-      Math.PI * 2
+      Math.PI * 2,
     );
     ctx.closePath();
     ctx.fill();

@@ -19,13 +19,13 @@ To create a **`Box3` instance**, we need to provide the **lower and upper bounda
 ```js
 const knot = new THREE.Mesh(
   new THREE.TorusKnotGeometry(0.5, 0.1),
-  new MeshNormalMaterial({})
+  new MeshNormalMaterial({}),
 );
 
 knot.geometry.computeBoundingBox();
 const knotBBox = new Box3(
   knot.geometry.boundingBox.min,
-  knot.geometry.boundingBox.max
+  knot.geometry.boundingBox.max,
 );
 ```
 
@@ -36,7 +36,7 @@ A more simple alternative that fixes the previous issue is to set those boundari
 ```js
 const knot = new THREE.Mesh(
   new THREE.TorusKnotGeometry(0.5, 0.1),
-  new MeshNormalMaterial({})
+  new MeshNormalMaterial({}),
 );
 
 const knotBBox = new Box3(new THREE.Vector3(), new THREE.Vector3());
@@ -50,12 +50,12 @@ Instantiating **`Sphere` objects** is similar. We need to provide the sphere's c
 ```js
 const knot = new THREE.Mesh(
   new THREE.TorusKnotGeometry(0.5, 0.1),
-  new MeshNormalMaterial({})
+  new MeshNormalMaterial({}),
 );
 
 const knotBSphere = new Sphere(
   knot.position,
-  knot.geometry.boundingSphere.radius
+  knot.geometry.boundingSphere.radius,
 );
 ```
 
@@ -144,7 +144,7 @@ To use it, we need to create a new `BoxHelper` instance and supply the geometry
 ```js
 const knot = new THREE.Mesh(
   new THREE.TorusKnotGeometry(0.5, 0.1),
-  new THREE.MeshNormalMaterial({})
+  new THREE.MeshNormalMaterial({}),
 );
 const knotBoxHelper = new THREE.BoxHelper(knot, 0x00ff00);
 scene.add(knotBoxHelper);

@@ -91,7 +91,7 @@ function isPointInsideSphere(point, sphere) {
   const distance = Math.sqrt(
     (point.x - sphere.x) * (point.x - sphere.x) +
       (point.y - sphere.y) * (point.y - sphere.y) +
-      (point.z - sphere.z) * (point.z - sphere.z)
+      (point.z - sphere.z) * (point.z - sphere.z),
   );
   return distance < sphere.radius;
 }
@@ -118,7 +118,7 @@ function intersect(sphere, other) {
   const distance = Math.sqrt(
     (sphere.x - other.x) * (sphere.x - other.x) +
       (sphere.y - other.y) * (sphere.y - other.y) +
-      (sphere.z - other.z) * (sphere.z - other.z)
+      (sphere.z - other.z) * (sphere.z - other.z),
   );
   return distance < sphere.radius + other.radius;
 }
@@ -143,7 +143,7 @@ function intersect(sphere, box) {
   const distance = Math.sqrt(
     (x - sphere.x) * (x - sphere.x) +
       (y - sphere.y) * (y - sphere.y) +
-      (z - sphere.z) * (z - sphere.z)
+      (z - sphere.z) * (z - sphere.z),
   );
 
   return distance < sphere.radius;

@@ -29,7 +29,7 @@ Let's start by setting up an environment to create something with A-Frame. We'll
 The first step is to create an HTML document — inside your project directory, create a new `index.html` file, and save the follow HTML inside it:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />

@@ -24,7 +24,7 @@ To start developing with Babylon.js, you don't need much. You should start off b
 Here's the HTML structure we will use:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -98,7 +98,7 @@ Now the setup code is in place we need to think about implementing the standard
 const camera = new BABYLON.FreeCamera(
   "camera",
   new BABYLON.Vector3(0, 0, -10),
-  scene
+  scene,
 );
 ```
 
@@ -114,7 +114,7 @@ There are various [light sources](https://doc.babylonjs.com/divingDeeper/lights/
 const light = new BABYLON.PointLight(
   "light",
   new BABYLON.Vector3(10, 10, 0),
-  scene
+  scene,
 );
 ```
 

@@ -28,7 +28,7 @@ To start developing with PlayCanvas, you don't need much. You should start off b
 Here's the HTML structure we will use.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />

@@ -24,7 +24,7 @@ To start developing with Three.js, you don't need much. You should:
 Here's the HTML structure we will use:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />

@@ -47,7 +47,7 @@ To start with the WebGL shaders you don't need much. You should:
 Here's the HTML structure we will use.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />

@@ -177,7 +177,7 @@ for (const button of buttons) {
       stopTime = button.getAttribute("data-stop");
       myAudio.play();
     },
-    false
+    false,
   );
 }
 
@@ -188,7 +188,7 @@ myAudio.addEventListener(
       myAudio.pause();
     }
   },
-  false
+  false,
 );
 ```
 

@@ -105,7 +105,7 @@ const buttonEnclave = this.add.button(
   10,
   "logo-enclave",
   this.clickEnclave,
-  this
+  this,
 );
 ```
 
@@ -117,7 +117,7 @@ this.buttonShoot = this.add.button(
   0,
   "button-alpha",
   null,
-  this
+  this,
 );
 this.buttonShoot.onInputDown.add(this.shootingPressed, this);
 this.buttonShoot.onInputUp.add(this.shootingReleased, this);

@@ -115,7 +115,7 @@ const buttonEnclave = this.add.button(
   10,
   "logo-enclave",
   this.clickEnclave,
-  this
+  this,
 );
 ```
 
@@ -129,7 +129,7 @@ this.buttonShoot = this.add.button(
   0,
   "button-alpha",
   null,
-  this
+  this,
 );
 this.buttonShoot.onInputDown.add(this.goShootPressed, this);
 this.buttonShoot.onInputUp.add(this.goShootReleased, this);

@@ -36,7 +36,7 @@ window.addEventListener(
   (event) => {
     console.log(event.keyCode);
   },
-  true
+  true,
 );
 ```
 
@@ -62,7 +62,7 @@ window.addEventListener(
       // …
     }
   },
-  true
+  true,
 );
 ```
 

@@ -64,7 +64,7 @@ for (let c = startCol; c <= endCol; c++) {
         Math.round(x), // target x
         Math.round(y), // target y
         map.tsize, // target width
-        map.tsize // target height
+        map.tsize, // target height
       );
     }
   }

@@ -84,7 +84,7 @@ for (let c = 0; c < map.cols; c++) {
         c * map.tsize, // target x
         r * map.tsize, // target y
         map.tsize, // target width
-        map.tsize // target height
+        map.tsize, // target height
       );
     }
   }

@@ -46,7 +46,7 @@ startButton = game.add.button(
   this,
   1,
   0,
-  2
+  2,
 );
 startButton.anchor.set(0.5);
 ```

@@ -38,7 +38,7 @@ lifeLostText = game.add.text(
   game.world.width * 0.5,
   game.world.height * 0.5,
   "Life lost, click to continue",
-  { font: "18px Arial", fill: "#0095DD" }
+  { font: "18px Arial", fill: "#0095DD" },
 );
 lifeLostText.anchor.set(0.5);
 lifeLostText.visible = false;
@@ -64,14 +64,14 @@ livesText = game.add.text(
   game.world.width - 5,
   5,
   `Lives: ${lives}`,
-  textStyle
+  textStyle,
 );
 livesText.anchor.set(1, 0);
 lifeLostText = game.add.text(
   game.world.width * 0.5,
   game.world.height * 0.5,
   "Life lost, click to continue",
-  textStyle
+  textStyle,
 );
 lifeLostText.anchor.set(0.5);
 lifeLostText.visible = false;

@@ -17,7 +17,7 @@ Before we can start writing the game's functionality, we need to create a basic
 The HTML document structure is quite simple, as the game will be rendered entirely on the {{htmlelement("canvas")}} element generated by the framework. Using your favorite text editor, create a new HTML document, save it as `index.html`, in a sensible location, and add the following code to it:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />

@@ -46,7 +46,7 @@ Next up, we will initialize our paddle by adding the following `add.sprite()` ca
 paddle = game.add.sprite(
   game.world.width * 0.5,
   game.world.height - 5,
-  "paddle"
+  "paddle",
 );
 ```
 

@@ -17,7 +17,7 @@ Before we can start writing the game's functionality, we need to create a basic
 The HTML document structure is quite simple, as the game will be rendered entirely on the {{htmlelement("canvas")}} element. Using your favorite text editor, create a new HTML document, save it as `index.html`, in a sensible location, and add the following code to it:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />

@@ -35,7 +35,7 @@ You can open the index file in your favorite browser to launch the game and try
 We will be rendering our game on Canvas, but we won't do it manually — this will be taken care of by the framework. Let's set it up: our starting point is the `index.html` file with the following content. You can create this yourself if you want to follow along:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -135,12 +135,12 @@ Ball.Preloader.prototype = {
     this.preloadBg = this.add.sprite(
       (Ball._WIDTH - 297) * 0.5,
       (Ball._HEIGHT - 145) * 0.5,
-      "preloaderBg"
+      "preloaderBg",
     );
     this.preloadBar = this.add.sprite(
       (Ball._WIDTH - 158) * 0.5,
       (Ball._HEIGHT - 50) * 0.5,
-      "preloaderBar"
+      "preloaderBar",
     );
     this.load.setPreloadSprite(this.preloadBar);
 
@@ -181,7 +181,7 @@ Ball.MainMenu.prototype = {
       this,
       2,
       0,
-      1
+      1,
     );
     this.startButton.anchor.set(0.5, 0);
     this.startButton.input.useHandCursor = true;
@@ -218,7 +218,7 @@ Ball.Howto.prototype = {
       0,
       "screen-howtoplay",
       this.startGame,
-      this
+      this,
     );
   },
   startGame() {
@@ -400,14 +400,14 @@ this.physics.arcade.collide(
   this.borderGroup,
   this.wallCollision,
   null,
-  this
+  this,
 );
 this.physics.arcade.collide(
   this.ball,
   this.levels[this.level - 1],
   this.wallCollision,
   null,
-  this
+  this,
 );
 ```
 
@@ -463,13 +463,13 @@ this.timerText = this.game.add.text(
   15,
   15,
   `Time: ${this.timer}`,
-  this.fontBig
+  this.fontBig,
 );
 this.totalTimeText = this.game.add.text(
   120,
   30,
   `Total time: ${this.totalTimer}`,
-  this.fontSmall
+  this.fontSmall,
 );
 ```
 

@@ -26,7 +26,11 @@ div.warning {
 }
 
 #customized {
-  font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
+  font:
+    16px Lucida Grande,
+    Arial,
+    Helvetica,
+    sans-serif;
 }
 ```
-Original file line number
+Diff line change
@@ Expand Up / @@ -177,7 +177,7 @@ for (const button of buttons) { @@
           stopTime = button.getAttribute("data-stop");
           myAudio.play();
         },
-        false
+        false,
       );
     }
@@ Expand All / @@ -188,7 +188,7 @@ myAudio.addEventListener( @@
           myAudio.pause();
         }
       },
-      false
+      false,
     );
     ```
@@ Expand Down @@