recursal/MDN huggingface dataset:
Collision detection
===================

* « Previous
* Next »

This is the **10th step** out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson10.html.

Now onto the next challenge — the collision detection between the ball and the bricks. Luckily enough we can use the physics engine to check collisions not only between single objects (like the ball and the paddle), but also between an object and the group.

Brick/Ball collision detection
------------------------------

The physics engine makes everything a lot easier — we just need to add two simple pieces of code. First, add a new line inside your `update()` function that checks for collision detection between ball and bricks, as shown below:


```js
function update() {
  game.physics.arcade.collide(ball, paddle);
  game.physics.arcade.collide(ball, bricks, ballHitBrick);
  paddle.x = game.input.x || game.world.width \* 0.5;
}
```


The ball's position is calculated against the positions of all the bricks in the group. The third, optional parameter is the function executed when a collision occurs — `ballHitBrick()`. Create this new function as the bottom of your code, just before the closing `</script>` tag, as follows:


```js
function ballHitBrick(ball, brick) {
  brick.kill();
}
```


And that's it! Reload your code and you should see the new collision detection working just as required.

Thanks to Phaser there are two parameters passed to the function — the first one is the ball, which we explicitly defined in the collide method, and the second one is the single brick from the bricks group that the ball is colliding with. Inside the function we remove the brick in question from the screen by running the `kill()` method on it.

You would expect to have to write a lot more calculations of your own to implement collision detection when using pure JavaScript. That's the beauty of using the framework — you can leave a lot of boring code to Phaser, and focus on the most fun and interesting parts of making a game.

Compare your code
-----------------

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

Next steps
----------

We can hit the bricks and remove them, which is a nice addition to the gameplay already. It would be even better to count the destroyed bricks increment the score as a result.

* « Previous
* Next »
Move the ball
=============

* « Previous
* Next »

This is the **4th step** out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson04.html.

We have our blue ball printed on screen, but it's doing nothing — It would be cool to make it move somehow. This article covers how to do just that.

Updating the ball's position on each frame
------------------------------------------

Remember the `update()` function and its definition? The code inside it is executed on every frame, so it's a perfect place to put the code that will update the ball's position on screen. Add the following new lines of the code inside `update()`, as shown:


```js
function update() {
  ball.x += 1;
  ball.y += 1;
}
```


The code above adds 1 to the `x` and `y` properties representing the ball coordinates on the canvas, on each frame. Reload index.html and you should see the ball rolling across the screen.

Compare your code
-----------------

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

Next steps
----------

The next step is to add some basic collision detection, so our ball can bounce off the walls. This would take several lines of code — a significantly more complex step than we have seen so far, especially if we want to add paddle and brick collisions too — but fortunately Phaser allows us to do this much more easily than if we wanted to use pure JavaScript.

In any case, before we do all that we will first introduce Phaser's physics engines, and do some setup work.

* « Previous
* Next »
Bounce off the walls
====================

* « Previous
* Next »

This is the **6th step** out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson06.html.

Now that physics have been introduced, we can start implementing collision detection into the game — first we'll look at the walls.

Bouncing off the world boundaries
---------------------------------

The easiest way to get our ball bouncing off the walls is to tell the framework that we want to treat the boundaries of the `<canvas>` element as walls and not let the ball move past them. In Phaser this can be easily accomplished using the `collideWorldsBound` property. Add this line right after the existing `game.physics.enable()` method call:


```js
ball.body.collideWorldBounds = true;
```


Now the ball will stop at the edge of the screen instead of disappearing, but it doesn't bounce. To make this occur we have to set its bounciness. Add the following line below the previous one:


```js
ball.body.bounce.set(1);
```


Try reloading index.html again — now you should see the ball bouncing off all the walls and moving inside the canvas area.

Compare your code
-----------------

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

Next steps
----------

This is starting to look more like a game now, but we can't control it in any way — it's high time we introduced the player paddle and controls.

* « Previous
* Next »
Randomizing gameplay
====================

* « Previous

This is the **16th step** out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson16.html.

Our game appears to be completed, but if you look close enough you'll notice that the ball is bouncing off the paddle at the same angle throughout the whole game. This means that every game is quite similar. To fix this and improve playability we should make the rebound angles more random, and in this article we'll look at how.

Making rebounds more random
---------------------------

We can change the ball's velocity depending on the exact spot it hits the paddle, by modifying the `x` velocity each time the `ballHitPaddle()` function is run using a line along the lines of the below. Add this new line to your code now, and try it out.


```js
function ballHitPaddle(ball, paddle) {
  ball.animations.play("wobble");
  ball.body.velocity.x = -5 \* (paddle.x - ball.x);
}
```


It's a little bit of magic — the new velocity is higher, the larger the distance between the center of the paddle and the place where the ball hits it. Also, the direction (left or right) is determined by that value — if the ball hits the left side of the paddle it will bounce left, whereas hitting the right side will bounce it to the right. It ended up that way because of a little bit of experimentation with the given values, you can do your own experimentation and see what happens. It's not completely random of course, but it does make the gameplay a bit more unpredictable and therefore more interesting.

Compare your code
-----------------

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

Summary
-------

You've finished all the lessons — congratulations! By this point you would have learnt the basics of Phaser and the logic behind simple 2D games.

### Exercises to follow

You can do a lot more in the game — add whatever you feel would be best to make it more fun and interesting. It's a basic intro scratching the surface of the countless helpful methods that Phaser provides. Below are some suggestions as to how you could expand our little game, to get you started:

* Add a second ball or paddle.
* Change the color of the background on every hit.
* Change the images and use your own.
* Grant extra bonus points if bricks are destroyed rapidly, several-in-a-row (or other bonuses of your choosing.)
* Create levels with different brick layouts.

Be sure to check the ever-growing list of examples and the official documentation, and visit the HTML5 Gamedevs forums if you ever need any help.

You could also go back to this tutorial series' index page.

* « Previous
Game over
=========

* « Previous
* Next »

This is the **8th step** out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson08.html.

To make the game more interesting we can introduce the ability to lose — if you don't hit the ball before it reaches the bottom edge of the screen it will be game over.

How to lose
-----------

To provide the ability to lose, we will disable the ball's collision with the bottom edge of the screen. Add the code below inside the `create()` function; just after you define the ball's attributes is fine:


```js
game.physics.arcade.checkCollision.down = false;
```


This will make the three walls (top, left and right) bounce the ball back, but the fourth (bottom) will disappear, letting the ball fall off the screen if the paddle misses it. We need a way to detect this and act accordingly. Add the following lines just below the previous new one:


```js
ball.checkWorldBounds = true;
ball.events.onOutOfBounds.add(() => {
  alert("Game over!");
  location.reload();
}, this);
```


Adding those lines will make the ball check the world (in our case canvas) bounds and execute the function bound to the `onOutOfBounds` event. When you click on the resulting alert, the page will be reloaded so you can play again.

Compare your code
-----------------

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

Next steps
----------

Now the basic gameplay is in place let's make it more interesting by introducing bricks to smash — it's time to build the brick field.

* « Previous
* Next »
Load the assets and print them on screen
========================================

* « Previous
* Next »

This is the **3rd step** out of 16 in the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson03.html.

Our game will feature a ball rolling around the screen, bouncing off a paddle, and destroying bricks to earn points — familiar, huh? In this article we'll look at how to add sprites into our gameworld.

Having a ball
-------------

Let's start by creating a JavaScript variable to represent our ball. Add the following line between the game initialization code (our `const game` block) and the `preload()` function:


```js
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.

Loading the ball sprite
-----------------------

Loading images and printing them on our canvas is a lot easier using Phaser than using pure JavaScript. To load the asset, we will use the `game` object created by Phaser, executing its `load.image()` method. Add the following new line just inside the `preload()` function, at the bottom:


```js
function preload() {
  // …
  game.load.image("ball", "img/ball.png");
}
```


The first parameter we want to give the asset is the name that will be used across our game code — for example, in our `ball` variable name — so we need to make sure it is the same. The second parameter is the relative path to the graphic asset. In our case, we will load the image for our ball. (Note that the file name does not also have to be the same, but we'd recommend it, as it makes everything easier to follow.)

Of course, to load the image, it must be available in our code directory. Grab the ball image from GitHub, and save it inside an `/img` directory in the same place as your `index.html` file.

Now, to show it on the screen we will use another Phaser method called `add.sprite()`; add the following new code line inside the `create()` function as shown:


```js
function create() {
  ball = game.add.sprite(50, 50, "ball");
}
```


This will add the ball to the game and render it on the screen. The first two parameters are the x and y coordinates of the canvas where you want it added, and the third one is the name of the asset we defined earlier. That's it — if you load your `index.html` file you will see the image already loaded and rendered on the canvas!

Compare your code
-----------------

You can check the finished code for this lesson for yourself in the live demo below, and play with it to better understand how it works:

Next steps
----------

Printing out the ball was easy; next, we'll try moving the ball on screen.

* « Previous
* Next »
Scaling
=======

* « Previous
* Next »

This is the **2nd step** out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson02.html.

Scaling refers to how the game canvas will scale on different screen sizes. We can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later.

The Phaser scale object
-----------------------

There's a special `scale` object available in Phaser with a few handy methods and properties available. Update your existing `preload()` function as follows:


```js
function preload() {
  game.scale.scaleMode = Phaser.ScaleManager.SHOW\_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
}
```


`scaleMode` has a few different options available for how the Canvas can be scaled:

* `NO_SCALE` — nothing is scaled.
* `EXACT_FIT` — scale the canvas to fill all the available space both vertically and horizontally, without preserving the aspect ratio.
* `SHOW_ALL` — scales the canvas, but keeps the aspect ratio untouched, so images won't be skewed like in the previous mode. There might be black stripes visible on the edges of the screen, but we can live with that.
* `RESIZE` — creates the canvas with the same size as the available width and height, so you have to place the objects inside your game dynamically; this is more of an advanced mode.
* `USER_SCALE` — allows you to have custom dynamic scaling, calculating the size, scale and ratio on your own; again, this is more of an advanced mode

The other two lines of code in the `preload()` function are responsible for aligning the canvas element horizontally and vertically, so it is always centered on screen regardless of size.

Adding a custom canvas background color
---------------------------------------

We can also add a custom background color to our canvas, so it won't stay black. The `stage` object has a `backgroundColor` property for this purpose, which we can set using CSS color definition syntax. Add the following line below the other three you added earlier:


```js
game.stage.backgroundColor = "#eee";
```

Compare your code
-----------------

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

Next steps
----------

Now we've set up the scaling for our game, let's continue to the third lesson and work out how to load the assets and print them on screen.

* « Previous
* Next »
The score
=========

* « Previous
* Next »

This is the **11th step** out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson11.html.

Having a score can also make the game more interesting — you can try to beat your own high score, or your friend's. In this article we'll add a scoring system to our game.

We will use a separate variable for storing the score and Phaser's `text()` method to print it out onto the screen.

New variables
-------------

Add two new variables right after the previously defined ones:


```js
// …
let scoreText;
let score = 0;
```

Adding score text to the game display
-------------------------------------

Now add this line at the end of the `create()` function:


```js
scoreText = game.add.text(5, 5, "Points: 0", {
  font: "18px Arial",
  fill: "#0095DD",
});
```


The `text()` method can take four parameters:

* The x and y coordinates to draw the text at.
* The actual text that will be rendered.
* The font style to render the text with.

The last parameter looks very similar to CSS styling. In our case the score text will be blue, sized at 18 pixels, and use the Arial font.

Updating the score when bricks are destroyed
--------------------------------------------

We will increase the number of points every time the ball hits a brick and update the `scoreText` to display the current score. This can be done using the `setText()` method — add the two new lines seen below to the `ballHitBrick()` function:


```js
function ballHitBrick(ball, brick) {
  brick.kill();
  score += 10;
  scoreText.setText(`Points: ${score}`);
}
```


That's it for now — reload your `index.html` and check that the score updates on every brick hit.

Compare your code
-----------------

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

Next steps
----------

We now have a scoring system, but what's the point of playing and keeping score if you can't win? Let's see how we can add a victory state, allowing us to win the game.

* « Previous
* Next »
Win the game
============

* « Previous
* Next »

This is the **12th step** out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson12.html.

Implementing winning in our game is quite easy: if you happen to destroy all the bricks, then you win.

How to win?
-----------

Add the following new code into your `ballHitBrick()` function:


```js
function ballHitBrick(ball, brick) {
  brick.kill();
  score += 10;
  scoreText.setText(`Points: ${score}`);

  let count_alive = 0;
  for (let i = 0; i < bricks.children.length; i++) {
    if (bricks.children[i].alive) {
      count_alive++;
    }
  }
  if (count_alive === 0) {
    alert("You won the game, congratulations!");
    location.reload();
  }
}
```


We loop through the bricks in the group using `bricks.children`, checking for the aliveness of each with each brick's `.alive()` method. If there are no more bricks left alive, then we show a winning message, restarting the game once the alert is dismissed.

Compare your code
-----------------

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

Next steps
----------

Both losing and winning are implemented, so the core gameplay of our game is finished. Now let's add something extra — we'll give the player three lives instead of one.

* « Previous
* Next »
Firefox 123 for developers
==========================

This article provides information about the changes in Firefox 123 that affect developers. Firefox 123 is the current Nightly version of Firefox and ships on February 20, 2024.

Changes for web developers
--------------------------

### Developer Tools

### HTML

#### Removals

### CSS

#### Removals

### JavaScript

#### Removals

### SVG

#### Removals

### HTTP

#### Removals

### Security

#### Removals

### APIs

#### DOM

#### Media, WebRTC, and Web Audio

#### Removals

### WebAssembly

#### Removals

### WebDriver conformance (WebDriver BiDi, Marionette)

#### General

#### WebDriver BiDi

#### Marionette

Changes for add-on developers
-----------------------------

* Addition of fhe `contextualIdentities.move` function enables items to be moved in the list of contextual identities. This function enables extensions to customize the order in which contextual identities display in the UI (Firefox bug 1333395).
### Removals

### Other

Experimental web features
-------------------------

These features are newly shipped in Firefox 123 but are disabled by default. To experiment with them, search for the appropriate preference on the `about:config` page and set it to `true`. You can find more such features on the Experimental features page.

Older versions
--------------

* Firefox 122 for developers
* Firefox 121 for developers
* Firefox 120 for developers
* Firefox 119 for developers
* Firefox 118 for developers
* Firefox 117 for developers
* Firefox 116 for developers
* Firefox 115 for developers
* Firefox 114 for developers
* Firefox 113 for developers
* Firefox 112 for developers
* Firefox 111 for developers
* Firefox 110 for developers
* Firefox 109 for developers
* Firefox 108 for developers
* Firefox 107 for developers
* Firefox 106 for developers
* Firefox 105 for developers
* Firefox 104 for developers
* Firefox 103 for developers
* Firefox 102 for developers
* Firefox 101 for developers
* Firefox 100 for developers
* Firefox 99 for developers
* Firefox 98 for developers
* Firefox 97 for developers
* Firefox 96 for developers
* Firefox 95 for developers
* Firefox 94 for developers
* Firefox 93 for developers
* Firefox 92 for developers
Firefox 98 for developers
=========================

This article provides information about the changes in Firefox 98 that affect developers. Firefox 98 was released on March 8, 2022.

Changes for web developers
--------------------------

### HTML

* The HTML `<dialog>` element is now available by default. This element and its associated DOM APIs provide support for HTML-based modal dialog boxes (Firefox bug 1733536).
### CSS

* The `hyphenate-character` property sets a string that is used instead of a hyphen character (`-`) at the end of a hyphenation line break (Firefox bug 1751024).
### JavaScript

No notable changes

### APIs

* `navigator.registerProtocolHandler()` can now register protocol handlers for the `ftp`, `sftp`, and `ftps` schemes (Firefox bug 1705202).

#### DOM

* `HTMLElement.outerText` is now supported (Firefox bug 1709790).
* The properties `colorSpaceConversion`, `resizeWidth` and `resizeHeight` can be passed to the method `createImageBitmap()` using the `options` object (Firefox bug 1748868 and Firefox bug 1733559).

#### Removals

* The deprecated WebVR API is now disabled by default on all builds (previously it was enabled on Windows, macOS, and all nightly/dev builds).
 It can be re-enabled in `about:config` by setting `dom.vr.enabled` to `true` (Firefox bug 1750902).
### WebDriver conformance (Marionette)

* Improved initial page load checks for newly opened tabs (Firefox bug 1747359).
Changes for add-on developers
-----------------------------

* Web extensions using `webRequest` were started early during Firefox startup. This has changed to only trigger early start-up for extensions using `webRequest` blocking calls. Non-blocking calls no longer cause the early startup of an extension. (Firefox bug 1749871)
* `cookieStoreId` added to `userScripts.register`. This enables extensions to register container-specific user scripts (Firefox bug 1738567).
Older versions
--------------

* Firefox 97 for developers
* Firefox 96 for developers
* Firefox 95 for developers
* Firefox 94 for developers
* Firefox 93 for developers
* Firefox 92 for developers
* Firefox 91 for developers
* Firefox 90 for developers
* Firefox 89 for developers
* Firefox 88 for developers
* Firefox 87 for developers
* Firefox 86 for developers
* Firefox 85 for developers
* Firefox 84 for developers
* Firefox 83 for developers
* Firefox 82 for developers
* Firefox 81 for developers
* Firefox 80 for developers
* Firefox 79 for developers
* Firefox 78 for developers
* Firefox 77 for developers
* Firefox 76 for developers
* Firefox 75 for developers
* Firefox 74 for developers
* Firefox 73 for developers
* Firefox 72 for developers
* Firefox 71 for developers
* Firefox 70 for developers
* Firefox 69 for developers
* Firefox 68 for developers
* Firefox 67 for developers