Collision detection - Game development

Collision detection
===================

* « Previous
* Next »

This is the **7th step** out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson7.html.

We have the bricks appearing on the screen already, but the game still isn't *that* interesting as the ball goes through them. We need to think about adding collision detection so it can bounce off the bricks and break them.

It's our decision how to implement this, of course, but it can be tough to calculate whether the ball is touching the rectangle or not because there are no helper functions in Canvas for this. For the sake of this tutorial we will do it the easiest way possible. We will check if the center of the ball is colliding with any of the given bricks. This won't give a perfect result every time, and there are much more sophisticated ways to do collision detection, but this will work fine for teaching you the basic concepts.

A collision detection function
------------------------------

To kick this all off we want to create a collision detection function that will loop through all the bricks and compare every single brick's position with the ball's coordinates as each frame is drawn. For better readability of the code we will define the `b` variable for storing the brick object in every loop of the collision detection:

```js
function collisionDetection() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      const b = bricks[c][r];
      // calculations
    }
  }
}
```

If the center of the ball is inside the coordinates of one of our bricks, we'll change the direction of the ball. For the center of the ball to be inside the brick, all four of the following statements need to be true:

* The x position of the ball is greater than the x position of the brick.
* The x position of the ball is less than the x position of the brick plus its width.
* The y position of the ball is greater than the y position of the brick.
* The y position of the ball is less than the y position of the brick plus its height.

Let's write that down in code:

```js
function collisionDetection() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      const b = bricks[c][r];
      if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
        dy = -dy;
      }
    }
  }
}
```

Add the above block to your code, below the `keyUpHandler()` function.

Making the bricks disappear after they are hit
----------------------------------------------

The above code will work as desired and the ball changes its direction. The problem is that the bricks are staying where they are. We have to figure out a way to get rid of the ones we've already hit with the ball. We can do that by adding an extra parameter to indicate whether we want to paint each brick on the screen or not. In the part of the code where we initialize the bricks, let's add a `status` property to each brick object. Update the following part of the code as indicated by the highlighted line:

```js
const bricks = [];
for (let c = 0; c < brickColumnCount; c++) {
  bricks[c] = [];
  for (let r = 0; r < brickRowCount; r++) {
    bricks[c][r] = { x: 0, y: 0, status: 1 };
  }
}
```

Next we'll check the value of each brick's `status` property in the `drawBricks()` function before drawing it — if `status` is `1`, then draw it, but if it's `0`, then it was hit by the ball and we don't want it on the screen anymore. Update your `drawBricks()` function as follows:

```js
function drawBricks() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      if (bricks[c][r].status === 1) {
        const brickX = c \* (brickWidth + brickPadding) + brickOffsetLeft;
        const brickY = r \* (brickHeight + brickPadding) + brickOffsetTop;
        bricks[c][r].x = brickX;
        bricks[c][r].y = brickY;
        ctx.beginPath();
        ctx.rect(brickX, brickY, brickWidth, brickHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
    }
  }
}
```

Tracking and updating the status in the collision detection function
--------------------------------------------------------------------

Now we need to involve the brick `status` property in the `collisionDetection()` function: if the brick is active (its status is `1`) we will check whether the collision happens; if a collision does occur we'll set the status of the given brick to `0` so it won't be painted on the screen. Update your `collisionDetection()` function as indicated below:

```js
function collisionDetection() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      const b = bricks[c][r];
      if (b.status === 1) {
        if (
          x > b.x &&
          x < b.x + brickWidth &&
          y > b.y &&
          y < b.y + brickHeight
        ) {
          dy = -dy;
          b.status = 0;
        }
      }
    }
  }
}
```

Activating our collision detection
----------------------------------

The last thing to do is to add a call to the `collisionDetection()` function to our main `draw()` function. Add the following line to the `draw()` function, just below the `drawPaddle()` call:

```js
collisionDetection();
```

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

The collision detection of the ball is now checked on every frame, with every brick. Now we can destroy bricks! :-

**Note:** Try changing the color of the ball when it hits the brick.

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

We are definitely getting there now; let's move on! In the eighth chapter we will be looking at how to Track the score and win.

* « Previous
* Next »


Build the brick field - Game development

Build the brick field
=====================

* « Previous
* Next »

This is the **6th step** out of 10 of the Gamedev Canvas tutorial. You can find the source code as it would look after completing this lesson at Gamedev-Canvas-workshop/lesson6.html.

After modifying the gameplay mechanics, we are now able to lose — this is great as it means the game is finally feeling more like a game. However, it will quickly get boring if all you do is bounce the ball off the walls and the paddle. What a breakout game really needs is some bricks to destroy with the ball, and this is what we'll create now!

Setting up the brick variables
------------------------------

The overall aim of this lesson is to render a few lines of code for the bricks, using a nested loop that works through a two-dimensional array. First however we need to set up some variables to define information about the bricks such as their width and height, rows and columns, etc. Add the following lines to your code below the variables which you have previously declared in your program.

```js
const brickRowCount = 3;
const brickColumnCount = 5;
const brickWidth = 75;
const brickHeight = 20;
const brickPadding = 10;
const brickOffsetTop = 30;
const brickOffsetLeft = 30;
```

Here we've defined the number of rows and columns of bricks, their width and height, the padding between the bricks so they won't touch each other and a top and left offset so they won't start being drawn right from the edge of the Canvas.

We will hold all our bricks in a two-dimensional array. It will contain the brick columns (c), which in turn will contain the brick rows (r), which in turn will each contain an object containing the `x` and `y` position to paint each brick on the screen. Add the following just below your variables:

```js
const bricks = [];
for (let c = 0; c < brickColumnCount; c++) {
  bricks[c] = [];
  for (let r = 0; r < brickRowCount; r++) {
    bricks[c][r] = { x: 0, y: 0 };
  }
}
```

The code above will loop through the rows and columns and create the new bricks. NOTE that the brick objects will also be used for collision detection purposes later.

Brick drawing logic
-------------------

Now let's create a function to loop through all the bricks in the array and draw them on the screen. Our code might look like this:

```js
function drawBricks() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      bricks[c][r].x = 0;
      bricks[c][r].y = 0;
      ctx.beginPath();
      ctx.rect(0, 0, brickWidth, brickHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }
  }
}
```

Again, we're looping through the rows and columns to set the `x` and `y` position of each brick, and we're also painting a brick on the Canvas — size `brickWidth` x `brickHeight` — with each loop iteration. The problem is that we're painting them all in one place, at coordinates `(0,0)`. What we need to do is include some calculations that will work out the `x` and `y` position of each brick for each loop iteration:

```js
const brickX = c \* (brickWidth + brickPadding) + brickOffsetLeft;
const brickY = r \* (brickHeight + brickPadding) + brickOffsetTop;
```

Each `brickX` position is worked out as `brickWidth` + `brickPadding`, multiplied by the column number, `c`, plus the `brickOffsetLeft`; the logic for the brickY is identical except that it uses the values for row number, `r`, `brickHeight`, and `brickOffsetTop`. Now every single brick can be placed in its correct place row and column, with padding between each brick, drawn at an offset from the left and top canvas edges.

The final version of the `drawBricks()` function, after assigning the `brickX` and `brickY` values as the coordinates instead of `(0,0)` each time, will look like this — add this into your code below the `drawPaddle()` function:

```js
function drawBricks() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      const brickX = c \* (brickWidth + brickPadding) + brickOffsetLeft;
      const brickY = r \* (brickHeight + brickPadding) + brickOffsetTop;
      bricks[c][r].x = brickX;
      bricks[c][r].y = brickY;
      ctx.beginPath();
      ctx.rect(brickX, brickY, brickWidth, brickHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }
  }
}
```

Actually drawing the bricks
---------------------------

The last thing to do in this lesson is to add a call to `drawBricks()` somewhere in the `draw()` function, preferably at the beginning, between the clearing of the Canvas and drawing the ball. Add the following just above the `drawBall()` call:

```js
drawBricks();
```

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

At this point, the game has got a little more interesting again:

**Note:** Try changing the number of bricks in a row or a column, or their positions.

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

So now we have bricks! But the ball isn't interacting with them at all — we'll change that as we continue to the seventh chapter: Collision detection.

* « Previous
* Next »


Create the Canvas and draw on it - Game development

Create the Canvas and draw on it
================================

* « Previous
* Next »

This is the **1st step** out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson1.html.

Before we can start writing the game's functionality, we need to create a basic structure to render the game inside. This can be done using HTML and the `<canvas>` element.

The game's HTML
---------------

The HTML document structure is quite simple, as the game will be rendered entirely on the `<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>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
 \* {
 padding: 0;
 margin: 0;
 }
 canvas {
 background: #eee;
 display: block;
 margin: 0 auto;
 }
 </style>
  </head>
  <body>
    <canvas id="myCanvas" width="480" height="320"></canvas>

    <script>
 // JavaScript code goes here
 </script>
  </body>
</html>
```

We have a `charset` defined, `<title>` and some basic CSS in the header. The body contains `<canvas>` and `<script>` elements — we will render the game inside the first one and write the JavaScript code that controls it in the second one. The `<canvas>` element has an `id` of `myCanvas` to allow us to easily grab a reference to it, and it is 480 pixels wide and 320 pixels high. All the JavaScript code we will write in this tutorial will go between the opening `<script>` and closing `</script>` tags.

Canvas basics
-------------

To actually be able to render graphics on the `<canvas>` element, first we have to grab a reference to it in JavaScript. Add the following below your opening `<script>` tag.

```js
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
```

Here we're storing a reference to the `<canvas>` element to the `canvas` variable. Then we're creating the `ctx` variable to store the 2D rendering context — the actual tool we can use to paint on the Canvas.

Let's see an example piece of code that prints a red square on the canvas. Add this below your previous lines of JavaScript, then load your `index.html` in a browser to try it out.

```js
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
```

All the instructions are between the `beginPath()` and `closePath()` methods. We are defining a rectangle using `rect()`: the first two values specify the coordinates of the top left corner of the rectangle on the canvas, while the second two specify the width and height of the rectangle. In our case the rectangle is painted 20 pixels from the left side of the screen and 40 pixels from the top side, and is 50 pixels wide and 50 pixels high, which makes it a perfect square. The `fillStyle` property stores a color that will be used by the `fill()` method to paint the square, in our case, red.

We're not limited to rectangles — here's a piece of code for printing out a green circle. Try adding this to the bottom of your JavaScript, saving and refreshing:

```js
ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI \* 2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
```

As you can see we're using the `beginPath()` and `closePath()` methods again. Between them, the most important part of the code above is the `arc()` method. It takes six parameters:

* `x` and `y` coordinates of the arc's center
* arc radius
* start angle and end angle (what angle to start and finish drawing the circle, in radians)
* direction of drawing (`false` for clockwise, the default, or `true` for anti-clockwise.) This last parameter is optional.

The `fillStyle` property looks different than before. This is because, just as with CSS, color can be specified as a hexadecimal value, a color keyword, the `rgb()` function, or any of the other available color methods.

Instead of using `fill()` and filling the shapes with colors, we can use `stroke()` to only color the outer stroke. Try adding this code to your JavaScript too:

```js
ctx.beginPath();
ctx.rect(160, 10, 100, 40);
ctx.strokeStyle = "rgb(0 0 255 / 50%)";
ctx.stroke();
ctx.closePath();
```

The code above prints a blue-stroked empty rectangle. Thanks to the alpha channel in the `rgb()` function, the blue color is semi transparent.

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

Here's the full source code of the first lesson, running live in a JSFiddle:

**Note:** Try changing the size and color of the given shapes.

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

Now we've set up the basic HTML and learned a bit about canvas, lets continue to the second chapter and work out how to Move the ball in our game.

* « Previous
* Next »


Finishing up - Game development

Finishing up
============

* « Previous

This is the **10th and final step** of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson10.html.

There's always room for improvements in any game we write. For example, we can offer more than one life to the player. They could make a mistake or two and still be able to finish the game. We could also improve our code rendering.

Giving the player some lives
----------------------------

Implementing lives is quite straightforward. Let's first add a variable to store the number of lives in the same place where we declared our other variables:

```js
let lives = 3;
```

Drawing the life counter looks almost the same as drawing the score counter — add the following function to your code, below the `drawScore()` function:

```js
function drawLives() {
  ctx.font = "16px Arial";
  ctx.fillStyle = "#0095DD";
  ctx.fillText(`Lives: ${lives}`, canvas.width - 65, 20);
}
```

Instead of ending the game immediately, we will decrease the number of lives until they are no longer available. We can also reset the ball and the paddle positions when the player begins with their next life. So, in the `draw()` function replace the following three lines:

```js
alert("GAME OVER");
document.location.reload();
clearInterval(interval); // Needed for Chrome to end game
```

With this, we can add slightly more complex logic to it as given below:

```js
lives--;
if (!lives) {
  alert("GAME OVER");
  document.location.reload();
  clearInterval(interval); // Needed for Chrome to end game
} else {
  x = canvas.width / 2;
  y = canvas.height - 30;
  dx = 2;
  dy = -2;
  paddleX = (canvas.width - paddleWidth) / 2;
}
```

Now, when the ball hits the bottom edge of the screen, we're subtracting one life from the `lives` variable. If there are no lives left, the game is lost; if there are still some lives left, then the position of the ball and the paddle are reset, along with the movement of the ball.

### Rendering the lives display

Now you need to add a call to `drawLives()` inside the `draw()` function and add it below the `drawScore()` call.

```js
drawLives();
```

Improving rendering with requestAnimationFrame()
------------------------------------------------

Now let's work on something that is not connected to the game mechanics, but to the way it is being rendered. `requestAnimationFrame` helps the browser render the game better than the fixed frame rate we currently have implemented using `setInterval()`. Replace the following line:

```js
const interval = setInterval(draw, 10);
```

with:

```js
draw();
```

and remove each instance of:

```js
clearInterval(interval); // Needed for Chrome to end game
```

Then, at the very bottom of the `draw()` function (just before the closing curly brace), add in the following line, which causes the `draw()` function to call itself over and over again:

```js
requestAnimationFrame(draw);
```

The `draw()` function is now getting executed again and again within a `requestAnimationFrame()` loop, but instead of the fixed 10 milliseconds frame rate, we are giving control of the frame rate back to the browser. It will sync the frame rate accordingly and render the shapes only when needed. This produces a more efficient, smoother animation loop than the older `setInterval()` method.

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

That's all — the final version of the game is ready and set to go !

**Note:**: Try changing the number of lives and the angle the ball bounces off the paddle.

Game over - for now!
--------------------

You've finished all the lessons - congratulations! By this point, you should now know the basics of canvas manipulation and the logic behind simple 2D games. Now it's a good time to learn some frameworks and continue game development. You can check out this series' counterpart, 2D breakout game using Phaser or the Cyber Orb built in Phaser tutorial. You can also look through the Games section on MDN for inspiration and more knowledge.

You could also go back to this tutorial series' index page. Have fun coding!

* « Previous


Game over - Game development

Game over
=========

* « Previous
* Next »

This is the **5th step** out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson5.html.

It's fun to watch the ball bouncing off the walls and be able to move the paddle around, but other than that the game does nothing and doesn't have any progression or end goal. It would be good from the gameplay point of view to be able to lose. The logic behind losing in breakout is simple. If you miss the ball with the paddle and let it reach the bottom edge of the screen, then it's game over.

Implementing game over
----------------------

Let's try to implement game over in our game. Here's the piece of code from the third lesson where we made the ball bounce off the walls:

```js
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
  dx = -dx;
}

if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
  dy = -dy;
}
```

Instead of allowing the ball to bounce off all four walls, let's only allow three now — left, top and right. Hitting the bottom wall will end the game. We'll edit the second if block so it's an if else block that will trigger our "game over" state upon the ball colliding with the bottom edge of the canvas. For now we'll keep it simple, showing an alert message and restarting the game by reloading the page.

First, replace where you initially called `setInterval()`

```js
setInterval(draw, 10);
```

with:

```js
const interval = setInterval(draw, 10);
```

Then replace the second if statement with the following:

```js
if (y + dy < ballRadius) {
  dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
  alert("GAME OVER");
  document.location.reload();
  clearInterval(interval); // Needed for Chrome to end game
}
```

Letting the paddle hit the ball
-------------------------------

The last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area. The easiest thing to do is to check whether the center of the ball is between the left and right edges of the paddle. Update the last bit of code you modified again, to the following:

```js
if (y + dy < ballRadius) {
  dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
  if (x > paddleX && x < paddleX + paddleWidth) {
    dy = -dy;
  } else {
    alert("GAME OVER");
    document.location.reload();
    clearInterval(interval);
  }
}
```

If the ball hits the bottom edge of the Canvas we need to check whether it hits the paddle. If so, then it bounces off just like you'd expect; if not, then the game is over as before.

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

Here's the working code for you to compare yours against:

**Note:** Try making the ball move faster when it hits the paddle.

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

We're doing quite well so far and our game is starting to feel a lot more worth playing now that you can lose! But it is still missing something. Let's move on to the sixth chapter — Build the brick field — and create some bricks for the ball to destroy.

* « Previous
* Next »


Paddle and keyboard controls - Game development

Paddle and keyboard controls
============================

* « Previous
* Next »

This is the **4th step** out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson4.html.

The ball is bouncing off the walls freely and you can watch it indefinitely, but currently there's no interactivity. It's not a game if you cannot control it! So let's add some user interaction: a controllable paddle.

Defining a paddle to hit the ball
---------------------------------

So, we need a paddle to hit the ball. Let's define a few variables for that. Add the following variables near the top of your code, beside your other variables:

```js
const paddleHeight = 10;
const paddleWidth = 75;
let paddleX = (canvas.width - paddleWidth) / 2;
```

Here we're defining the height and width of the paddle and its starting point on the `x` axis for use in calculations further on down the code. Let's create a function that will draw the paddle on the screen. Add the following just below your `drawBall()` function:

```js
function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}
```

Allowing the user to control the paddle
---------------------------------------

We can draw the paddle wherever we want, but it should respond to the user's actions. It's time to implement some keyboard controls. We will need the following:

* Two variables for storing information on whether the left or right control button is pressed.
* Two event listeners for `keydown` and `keyup` events. We want to run some code to handle the paddle movement when the buttons are pressed.
* Two functions handling the `keydown` and `keyup` events the code that will be run when the buttons are pressed.
* The ability to move the paddle left and right

Pressed buttons can be defined and initialized with boolean variables like in the example. Add these lines somewhere near the rest of your variables:

```js
let rightPressed = false;
let leftPressed = false;
```

The default value for both is `false` because at the beginning the control buttons are not pressed. To listen for key presses, we will set up two event listeners. Add the following lines just above the `setInterval()` line at the bottom of your JavaScript:

```js
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
```

When the `keydown` event is fired on any of the keys on your keyboard (when they are pressed), the `keyDownHandler()` function will be executed. The same pattern is true for the second listener: `keyup` events will fire the `keyUpHandler()` function (when the keys stop being pressed). Add these to your code now, below the `addEventListener()` lines:

```js
function keyDownHandler(e) {
  if (e.key === "Right" || e.key === "ArrowRight") {
    rightPressed = true;
  } else if (e.key === "Left" || e.key === "ArrowLeft") {
    leftPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.key === "Right" || e.key === "ArrowRight") {
    rightPressed = false;
  } else if (e.key === "Left" || e.key === "ArrowLeft") {
    leftPressed = false;
  }
}
```

When we press a key down, this information is stored in a variable. The relevant variable in each case is set to `true`. When the key is released, the variable is set back to `false`.

Both functions take an event as a parameter, represented by the `e` variable. From that you can get useful information: the `key` holds the information about the key that was pressed. Most browsers use `ArrowRight` and `ArrowLeft` for the left/right cursor keys, but we need to also include `Right` and `Left` checks to support IE/Edge browsers. If the left cursor is pressed, then the `leftPressed` variable is set to `true`, and when it is released, the `leftPressed` variable is set to `false`. The same pattern follows with the right cursor and the `rightPressed` variable.

### The paddle moving logic

We've now set up the variables for storing the info about the pressed keys, event listeners, and relevant functions. Next we'll get into the code to use all the things we just set up and to move the paddle on the screen. Inside the `draw()` function, we will check if the left or right cursor keys are pressed when each frame is rendered. Our code might look like this:

```js
if (rightPressed) {
  paddleX += 7;
} else if (leftPressed) {
  paddleX -= 7;
}
```

If the left cursor is pressed, the paddle will move seven pixels to the left, and if the right cursor is pressed, the paddle will move seven pixels to the right. This currently works, but the paddle disappears off the edge of the canvas if we hold either key for too long. We could improve that and move the paddle only within the boundaries of the canvas by changing the code like this:

```js
if (rightPressed) {
  paddleX = Math.min(paddleX + 7, canvas.width - paddleWidth);
} else if (leftPressed) {
  paddleX = Math.max(paddleX - 7, 0);
}
```

The `paddleX` position we're using will move between `0` on the left side of the canvas and `canvas.width-paddleWidth` on the right-hand side, which will work exactly as we want it to.

Add the above code block into the `draw()` function at the bottom, just above the closing curly brace.

The only thing left to do now is call the `drawPaddle()` function from within the `draw()` function, to actually print it on the screen. Add the following line inside your `draw()` function, just below the line that calls `drawBall()`:

```js
drawPaddle();
```

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

Here's the working code for you to compare yours against:

**Note:** Try making the paddle move faster or slower, or change its size.

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

Now we have something resembling a game. The only trouble now is that you can just continue hitting the ball with the paddle forever. This will all change in the fifth chapter, Game over, when we start to add in an endgame state for our game.

* « Previous
* Next »


Collision detection - Game development

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 »


Initialize the framework - Game development

Initialize the framework
========================

* « Previous
* Next »

This is the first of 16 tutorials to learn how to use Gamedev Phaser. After completing this tutorial you can find the source code for this section at Gamedev-Phaser-Content-Kit/demos/lesson01.html.

Before we can start writing the game's functionality, we need to create a basic structure to render the game inside. This can be done using HTML — the Phaser framework will generate the required `<canvas>` element.

The game's HTML
---------------

The HTML document structure is quite simple, as the game will be rendered entirely on the `<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>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Gamedev Phaser Workshop - lesson 01: Initialize the framework</title>
    <style>
 \* {
 padding: 0;
 margin: 0;
 }
 </style>
    <script src="js/phaser.min.js"></script>
  </head>
  <body>
    <script>
 const game = new Phaser.Game(480, 320, Phaser.CANVAS, null, {
 preload,
 create,
 update,
 });
 function preload() {}
 function create() {}
 function update() {}
 </script>
  </body>
</html>
```

Downloading the Phaser code
---------------------------

Next, we need to go through the process of downloading the Phaser source code and applying it to our HTML document. This tutorial uses Phaser V2 — it won't work with the current version on Phaser (V3). The V2 library is still available on the Phaser download page, below the links for the V3 download.

1. Go to the Phaser download page.
2. Choose an option that suits you best — we recommend the *min.js* option as it keeps the source code smaller, and you are unlikely to go through the source code anyway. **Please make sure to use Phaser version 2 as that's what this tutorial was written for.**
3. Save the Phaser code inside a `/js` directory in the same location as your `index.html` file.
4. Update the `src` value of the first `<script>` element as shown above.
Walking through what we have so far
-----------------------------------

At this point we have a `charset` defined, `<title>` and some basic CSS in the header to reset the default `margin` and `padding`. We also have a `<script>` element to apply the Phaser source code to the page. The body contains a second `<script>` element, where we will write the JavaScript code to render the game and control it.

The `<canvas>` element is generated automatically by the framework. We are initializing it by creating a new `Phaser.Game` object and assigning it to the game variable. The parameters are:

* The width and height to set the `<canvas>` to.
* The rendering method. The three options are `AUTO`, `CANVAS` and `WEBGL`. We can set one of the latter two explicitly or use `AUTO` to let Phaser decide which one to use. It usually uses WebGL if available in the browser, falling back to Canvas 2D if not.
* The `id` of the `<canvas>` to use for rendering if one already exists on the page (we've specified null because we want Phaser to create its own.)
* The names to use for Phaser's three key functions that load and start the game, and update the game loop on every frame; we will use the same names to keep it clean.
    + `preload` takes care of preloading the assets
    + `create` is executed once when everything is loaded and ready
    + `update` is executed on every frame.
Compare your code
-----------------

Here's the full source code of the first lesson, running live in a JSFiddle:

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

Now we've set up the basic HTML and learned a bit about Phaser initialization, let's continue to the second lesson and learn about scaling.

* « Previous
* Next »


Move the ball - Game development

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 - Game development

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 - Game development

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


Build the brick field
=====================

* « Previous
* Next »

This is the **9th 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/lesson09.html.

Building the brick field is a little bit more complicated than adding a single object to the screen, although It's still easier with Phaser than in pure JavaScript. Let's explore how to create a group of bricks and print them on screen using a loop.

Defining new variables
----------------------

First, let's define the needed variables — add the following below your previous variable definitions:

```js
let bricks;
let newBrick;
let brickInfo;
```

The `bricks` variable will be used to create a group, `newBrick` will be a new object added to the group on every iteration of the loop, and `brickInfo` will store all the data we need.

Rendering the brick image
-------------------------

Next, let's load the image of the brick — add the following `load.image()` call just below the others:

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

You also need to grab the brick image from GitHub and save it in your `/img` directory.

Drawing the bricks
------------------

We will place all the code for drawing the bricks inside an `initBricks` function to keep it separated from the rest of the code. Add a call to `initBricks` at the end of the `create()` function:

```js
function create() {
  // …
  initBricks();
}
```

Now onto the function itself. Add the `initBricks()` function at the end of our games code, just before the closing </script> tag, as shown below. To begin with we've included the `brickInfo` object, as this will come in handy very soon:

```js
function initBricks() {
  brickInfo = {
    width: 50,
    height: 20,
    count: {
      row: 3,
      col: 7,
    },
    offset: {
      top: 50,
      left: 60,
    },
    padding: 10,
  };
}
```

This `brickInfo` object will hold all the information we need: the width and height of a single brick, the number of rows and columns of bricks we will see on screen, the top and left offset (the location on the canvas where we shall start to draw the bricks) and the padding between each row and column of bricks.

Now, let's start creating the bricks themselves — add an empty group first to contain the bricks, by adding the following line at the bottom of the `initBricks()` function:

```js
bricks = game.add.group();
```

We can loop through the rows and columns to create new brick on each iteration — add the following nested loop below the previous line of code:

```js
for (let c = 0; c < brickInfo.count.col; c++) {
  for (let r = 0; r < brickInfo.count.row; r++) {
    // create new brick and add it to the group
  }
}
```

This way we will create the exact number of bricks we need and have them all contained in a group. Now we need to add some code inside the nested loop structure to draw each brick. Fill in the contents as shown below:

```js
for (let c = 0; c < brickInfo.count.col; c++) {
  for (let r = 0; r < brickInfo.count.row; r++) {
    let brickX = 0;
    let brickY = 0;
    newBrick = game.add.sprite(brickX, brickY, "brick");
    game.physics.enable(newBrick, Phaser.Physics.ARCADE);
    newBrick.body.immovable = true;
    newBrick.anchor.set(0.5);
    bricks.add(newBrick);
  }
}
```

Here we're looping through the rows and columns to create the new bricks and place them on the screen. The newly created brick is enabled for the Arcade physics engine, it's body is set to be immovable (so it won't move when hit by the ball), and we're also setting the anchor to be in the middle and adding the brick to the group.

The problem currently is that we're painting all the bricks in one place, at coordinates (0,0). What we need to do is draw each brick at its own x and y position. Update the `brickX` and `brickY` lines as follows:

```js
const brickX =
  c \* (brickInfo.width + brickInfo.padding) + brickInfo.offset.left;
const brickY =
  r \* (brickInfo.height + brickInfo.padding) + brickInfo.offset.top;
```

Each `brickX` position is worked out as `brickInfo.width` plus `brickInfo.padding`, multiplied by the column number, `c`, plus the `brickInfo.offset.left`; the logic for the `brickY` is identical except that it uses the values for row number, `r`, `brickInfo.height`, and `brickInfo.offset.top`. Now every single brick can be placed in its correct place, with padding between each brick, and drawn at an offset from the left and top Canvas edges.

Checking the initBricks() code
------------------------------

Here is the complete code for the `initBricks()` function:

```js
function initBricks() {
  brickInfo = {
    width: 50,
    height: 20,
    count: {
      row: 3,
      col: 7,
    },
    offset: {
      top: 50,
      left: 60,
    },
    padding: 10,
  };
  bricks = game.add.group();
  for (let c = 0; c < brickInfo.count.col; c++) {
    for (let r = 0; r < brickInfo.count.row; r++) {
      const brickX =
        c \* (brickInfo.width + brickInfo.padding) + brickInfo.offset.left;
      const brickY =
        r \* (brickInfo.height + brickInfo.padding) + brickInfo.offset.top;
      newBrick = game.add.sprite(brickX, brickY, "brick");
      game.physics.enable(newBrick, Phaser.Physics.ARCADE);
      newBrick.body.immovable = true;
      newBrick.anchor.set(0.5);
      bricks.add(newBrick);
    }
  }
}
```

If you reload `index.html` at this point, you should see the bricks printed on screen, at an even distance from one another.

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
----------

Something is missing though. The ball goes through the bricks without stopping — we need proper collision detection.

* « Previous
* Next »


Game over - Game development

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 »


Physics - Game development

Physics
=======

* « Previous
* Next »

This is the **5th 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/lesson05.html.

For proper collision detection between objects in our game we will need to have physics; this article introduces you to what's available in Phaser, as well as demonstrating a typical simple setup.

Adding physics
--------------

Phaser is bundled with three different physics engines — Arcade Physics, P2 and Ninja Physics — with a fourth option, Box2D, being available as a commercial plugin. For simple games like ours, we can use the Arcade Physics engine. We don't need any heavy geometry calculations — after all it's just a ball bouncing off walls and bricks.

First, let's initialize the Arcade Physics engine in our game. Add the `physics.startSystem()` method at the beginning of the `create` function (make it the first line inside the function), as shown below:

```js
game.physics.startSystem(Phaser.Physics.ARCADE);
```

Next, we need to enable our ball for the physics system — Phaser object physics is not enabled by default. Add the following line at the bottom of the `create()` function:

```js
game.physics.enable(ball, Phaser.Physics.ARCADE);
```

Next, if we want to move our ball on the screen, we can set `velocity` on its `body`. Add the following line, again at the bottom of `create()`:

```js
ball.body.velocity.set(150, 150);
```

Removing our previous update instructions
-----------------------------------------

Remember to remove our old method of adding values to `x` and `y` from the `update()` function:

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

we are now handling this properly, with a physics engine.

Final code check
----------------

The latest code should look like this:

```js
let ball;

function preload() {
  game.scale.scaleMode = Phaser.ScaleManager.SHOW\_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
  game.stage.backgroundColor = "#eee";
  game.load.image("ball", "img/ball.png");
}

function create() {
  game.physics.startSystem(Phaser.Physics.ARCADE);
  ball = game.add.sprite(50, 50, "ball");
  game.physics.enable(ball, Phaser.Physics.ARCADE);
  ball.body.velocity.set(150, 150);
}

function update() {}
```

Try reloading `index.html` again — The ball should now be moving constantly in the given direction. At the moment, the physics engine has gravity and friction set to zero. Adding gravity would result in the ball falling down while friction would eventually stop the ball.

Fun with physics
----------------

You can do much more with physics, for example by adding `ball.body.gravity.y = 100;` you will set the vertical gravity of the ball. As a result it will be launched upwards, but then fall due to the effects of gravity pulling it down.

This kind of functionality is just the tip of the iceberg — there are various functions and variables that can help you manipulate the physics objects. Check out the official physics documentation and see the huge collection of examples using the Arcade and P2 physics systems.

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 can move to the next lesson and see how to make the ball bounce off the walls.

* « Previous
* Next »


Buttons - Game development

Buttons
=======

* « Previous
* Next »

This is the **15th 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/lesson15.html.

Instead of starting the game right away we can leave that decision to the player by adding a Start button they can press. Let's investigate how to do that.

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

We will need a variable to store a boolean value representing whether the game is currently being played or not, and another one to represent our button. Add these lines below your other variable definitions:

```js
let playing = false;
let startButton;
```

Loading the button spritesheet
------------------------------

We can load the button spritesheet the same way we loaded the ball's wobble animation. Add the following to the bottom of the `preload()` function:

```js
game.load.spritesheet("button", "img/button.png", 120, 40);
```

A single button frame is 120 pixels wide and 40 pixels high.

You also need to grab the button spritesheet from GitHub, and save it in your `/img` directory.

Adding the button to the game
-----------------------------

Adding the new button to the game is done by using the `add.button` method. Add the following lines to the bottom of your `create()` function:

```js
startButton = game.add.button(
  game.world.width \* 0.5,
  game.world.height \* 0.5,
  "button",
  startGame,
  this,
  1,
  0,
  2,
);
startButton.anchor.set(0.5);
```

The `button()` method's parameters are as follows:

* The button's x and y coordinates
* The name of the graphic asset to be displayed for the button
* A callback function that will be executed when the button is pressed
* 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.

Now we need to define the `startGame()` function referenced in the code above:

```js
function startGame() {
  startButton.destroy();
  ball.body.velocity.set(150, -150);
  playing = true;
}
```

When the button is pressed, we remove the button, sets the ball's initial velocity and set the `playing` variable to `true`.

Finally for this section, go back into your `create()` function, find the `ball.body.velocity.set(150, -150);` line, and remove it. You only want the ball to move when the button is pressed, not before!

Keeping the paddle still before the game starts
-----------------------------------------------

It works as expected, but we can still move the paddle when the game hasn't started yet, which looks a bit silly. To stop this, we can take advantage of the `playing` variable and make the paddle movable only when the game has started. To do that, adjust the `update()` function like so:

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

That way the paddle is immovable after everything is loaded and prepared, but before the start of the actual 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
----------

The last thing we will do in this article series is make the gameplay even more interesting by adding some randomization to the way the ball bounces off the paddle.

* « Previous
* Next »


Load the assets and print them on screen - Game development

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 »


Player paddle and controls - Game development

Player paddle and controls
==========================

* « Previous
* Next »

This is the **7th 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/lesson07.html.

We have the ball moving and bouncing off the walls, but it quickly gets boring — there's no interactivity! We need a way to introduce gameplay, so in this article we'll create a paddle to move around and hit the ball with.

Rendering the paddle
--------------------

From the framework point of view the paddle is very similar to the ball — we need to add a variable to represent it, load the relevant image asset, and then do the magic.

### Loading the paddle

First, add the `paddle` variable we will be using in our game, right after the `ball` variable:

```js
let paddle;
```

Then, in the `preload` function, load the `paddle` image by adding the following new `load.image()` call:

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

### Adding the paddle graphic

Just so we don't forget, at this point you should grab the paddle graphic from GitHub, and save it in your `/img` folder.

### Rendering the paddle, with physics

Next up, we will initialize our paddle by adding the following `add.sprite()` call inside the `create()` function — add it right at the bottom:

```js
paddle = game.add.sprite(
  game.world.width \* 0.5,
  game.world.height - 5,
  "paddle",
);
```

We can use the `world.width` and `world.height` values to position the paddle exactly where we want it: `game.world.width*0.5` will be right in the middle of the screen. In our case the world is the same as the Canvas, but for other types of games, like side-scrollers for example, the world will be bigger, and you can tinker with it to create interesting effects.

As you'll notice if you reload your `index.html` at this point, the paddle is currently not exactly in the middle. Why? Because the anchor from which the position is calculated always starts from the top left edge of the object. We can change that to have the anchor in the middle of the paddle's width and at the bottom of its height, so it's easier to position it against the bottom edge. Add the following line below the previous new one:

```js
paddle.anchor.set(0.5, 1);
```

The paddle is now positioned right where we want it to be. Now, to make it collide with the ball we have to enable physics for the paddle. Continue by adding the following new line, again at the bottom of the `create()` function:

```js
game.physics.enable(paddle, Phaser.Physics.ARCADE);
```

Now the magic can start to happen — the framework can take care of checking the collision detection on every frame. To enable collision detection between the paddle and ball, add the `collide()` method to the `update()` function as shown:

```js
function update() {
  game.physics.arcade.collide(ball, paddle);
}
```

The first parameter is one of the objects we are interested in — the ball — and the second is the other one, the paddle. This works, but not quite as we expected it to — when the ball hits the paddle, the paddle falls off the screen! All we want is the ball bouncing off the paddle and the paddle staying in the same place. We can set the `body` of the paddle to be `immovable`, so it won't move when the ball hits it. To do this, add the below line at the bottom of the `create()` function:

```js
paddle.body.immovable = true;
```

Now it works as expected.

Controlling the paddle
----------------------

The next problem is that we can't move the paddle. To do that we can use the system's default input (mouse or touch, depending on platform) and set the paddle position to where the `input` position is. Add the following new line to the `update()` function, as shown:

```js
function update() {
  game.physics.arcade.collide(ball, paddle);
  paddle.x = game.input.x;
}
```

Now on every new frame the paddle's `x` position will adjust accordingly to the input's `x` position, however when we start the game, the position of the paddle is not in the middle. It's because the input position is not yet defined. To fix that we can set the default position (if an input position is not yet defined) to be the middle of the screen. Update the previous line as follows:

```js
paddle.x = game.input.x || game.world.width \* 0.5;
```

If you haven't already done so, reload your `index.html` and try it out!

Position the ball
-----------------

We have the paddle working as expected, so let's position the ball on it. It's very similar to positioning the paddle — we need to have it placed in the middle of the screen horizontally and at the bottom vertically with a little offset from the bottom. To place it exactly as we want it we will set the anchor to the exact middle of the ball. Find the existing `ball = game.add.sprite()` line, and replace it with the following two lines:

```js
ball = game.add.sprite(game.world.width \* 0.5, game.world.height - 25, "ball");
ball.anchor.set(0.5);
```

The velocity stays almost the same — we're just changing the second parameter's value from 150 to -150, so the ball will start the game by moving up instead of down. Find the existing `ball.body.velocity.set()` line and update it to the following:

```js
ball.body.velocity.set(150, -150);
```

Now the ball will start right from the middle of the paddle.

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 move the paddle and bounce the ball off it, but what's the point if the ball is bouncing off the bottom edge of the screen anyway? Let's introduce the possibility of losing — also known as game over logic.

* « Previous
* Next »


Scaling - Game development

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 - Game development

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 - Game development

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 »


Animations and tweens - Game development

Animations and tweens
=====================

* « Previous
* Next »

This is the **14th 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/lesson14.html.

To make the game look more juicy and alive we can use animations and tweens. This will result in a better, more entertaining experience. Let's explore how to implement Phaser animations and tweens in our game.

Animations
----------

In Phaser, animations, involve taking a spritesheet from an external source and displaying the sprites sequentially. As an example, we will make the ball wobble when it hits something.

First of all, grab the spritesheet from GitHub and save it in your `/img` directory.

Next, we will load the spritesheet — put the following line at the bottom of your `preload()` function:

```js
game.load.spritesheet("ball", "img/wobble.png", 20, 20);
```

Instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images. We will show the sprites sequentially to create the illusion of animation. The `spritesheet()` method's two extra parameters determine the width and height of each single frame in the given spritesheet file, indicating to the program how to chop it up to get the individual frames.

Loading the animation
---------------------

Next up, go into your create() function, find the line that loads the ball sprite, and below it put the call to `animations.add()` seen below:

```js
ball = game.add.sprite(50, 250, "ball");
ball.animations.add("wobble", [0, 1, 0, 2, 0, 1, 0, 2, 0], 24);
```

To add an animation to the object we use the `animations.add()` method, which contains the following parameters

* The name we chose for the animation
* An array defining the order in which to display the frames during the animation. If you look again at the `wobble.png` image, you'll see there are three frames. Phaser extracts these and stores references to them in an array — positions 0, 1, and 2. The above array says that we are displaying frame 0, then 1, then 0, etc.
* The frame rate, in fps. Since we are running the animation at 24fps and there are 9 frames, the animation will display just under three times per second.
Applying the animation when the ball hits the paddle
----------------------------------------------------

In the `arcade.collide()` method call that handles the collision between the ball and the paddle (the first line inside `update()`, see below) we can add an extra parameter that specifies a function to be executed every time the collision happens, in the same fashion as the `ballHitBrick()` function. Update the first line inside `update()` as shown below:

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

Then we can create the `ballHitPaddle()` function (having `ball` and `paddle` as default parameters), playing the wobble animation when it is called. Add the following function just before your closing `</script>` tag:

```js
function ballHitPaddle(ball, paddle) {
  ball.animations.play("wobble");
}
```

The animation is played every time the ball hits the paddle. You can add the `animations.play()` call inside the `ballHitBrick()` function too, if you feel it would make the game look better.

Tweens
------

Whereas animations play external sprites sequentially, tweens smoothly animate properties of an object in the gameworld, such as width or opacity.

Let's add a tween to our game to make the bricks smoothly disappear when they are hit by the ball. Go to your `ballHitBrick()` function, find your `brick.kill();` line, and replace it with the following:

```js
const killTween = game.add.tween(brick.scale);
killTween.to({ x: 0, y: 0 }, 200, Phaser.Easing.Linear.None);
killTween.onComplete.addOnce(() => {
  brick.kill();
}, this);
killTween.start();
```

Let's walk through this so you can see what's happening here:

1. When defining a new tween you have to specify which property will be tweened — in our case, instead of hiding the bricks instantly when hit by the ball, we will make their width and height scale to zero, so they will nicely disappear. To the end, we use the `add.tween()` method, specifying `brick.scale` as the argument as this is what we want to tween.
2. The `to()` method defines the state of the object at the end of the tween. It takes an object containing the chosen parameter's desired ending values (scale takes a scale value, 1 being 100% of size, 0 being 0% of size, etc.), the time of the tween in milliseconds and the type of easing to use for the tween.
3. We will also add the optional `onComplete` event handler, which defines a function to be executed when the tween finishes.
4. The last thing do to is to start the tween right away using `start()`.

That's the expanded version of the tween definition, but we can also use the shorthand syntax:

```js
game.add
  .tween(brick.scale)
  .to({ x: 2, y: 2 }, 500, Phaser.Easing.Elastic.Out, true, 100);
```

This tween will double the brick's scale in half a second using Elastic easing, will start automatically, and have a delay of 100 milliseconds.

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
----------

Animations and tweens look very nice, but we can add even more to our game — in the next section we'll look at handling button inputs.

* « Previous
* Next »


Extra lives - Game development

Extra lives
===========

* « Previous
* Next »

This is the **13th 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/lesson13.html.

We can make the game enjoyable for longer by adding lives. In this article we'll implement a lives system, so that the player can continue playing until they have lost three lives, not just one.

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

Add the following new variables below the existing ones in your code:

```js
let lives = 3;
let livesText;
let lifeLostText;
```

These respectively will store the number of lives, the text label that displays the number of lives that remain, and a text label that will be shown on screen when the player loses one of their lives.

Defining the new text labels
----------------------------

Defining the texts look like something we already did in the score lesson. Add the following lines below the existing `scoreText` definition inside your `create()` function:

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

The `livesText` and `lifeLostText` objects look very similar to the `scoreText` one — they define a position on the screen, the actual text to display, and the font styling. The former is anchored on its top right edge to align properly with the screen, and the latter is centered, both using `anchor.set()`.

The `lifeLostText` will be shown only when the life is lost, so its visibility is initially set to `false`.

### Making our text styling DRY

As you probably noticed we're using the same styling for all three texts: `scoreText`, `livesText` and `lifeLostText`. If we ever want to change the font size or color we will have to do it in multiple places. To make it easier for us to maintain in the future we can create a separate variable that will hold our styling, let's call it `textStyle` and place it before the text definitions:

```js
textStyle = { font: "18px Arial", fill: "#0095DD" };
```

We can now use this variable when styling our text labels — update your code so that the multiple instances of the text styling are replaced with the variable:

```js
scoreText = game.add.text(5, 5, "Points: 0", textStyle);
livesText = game.add.text(
  game.world.width - 5,
  5,
  `Lives: ${lives}`,
  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,
);
lifeLostText.anchor.set(0.5);
lifeLostText.visible = false;
```

This way changing the font in one variable will apply the changes to every place it is used.

The lives handling code
-----------------------

To implement lives in our game, let's first change the ball's function bound to the `onOutOfBounds` event. Instead of executing an anonymous function and showing the alert right away:

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

We will assign a new function called `ballLeaveScreen`; delete the previous event handler (shown above) and replace it with the following line:

```js
ball.events.onOutOfBounds.add(ballLeaveScreen, this);
```

We want to decrease the number of lives every time the ball leaves the canvas. Add the `ballLeaveScreen()` function definition at the end of our code:

```js
function ballLeaveScreen() {
  lives--;
  if (lives) {
    livesText.setText(`Lives: ${lives}`);
    lifeLostText.visible = true;
    ball.reset(game.world.width \* 0.5, game.world.height - 25);
    paddle.reset(game.world.width \* 0.5, game.world.height - 5);
    game.input.onDown.addOnce(() => {
      lifeLostText.visible = false;
      ball.body.velocity.set(150, -150);
    }, this);
  } else {
    alert("You lost, game over!");
    location.reload();
  }
}
```

Instead of instantly printing out the alert when you lose a life, we first subtract one life from the current number and check if it's a non-zero value. If yes, then the player still has some lives left and can continue to play — they will see the life lost message, the ball and paddle positions will be reset on screen and on the next input (click or touch) the message will be hidden and the ball will start to move again.

When the number of available lives reaches zero, the game is over and the game over alert message will be shown.

Events
------

You have probably noticed the `add()` and `addOnce()` method calls in the above two code blocks and wondered how they differ. The difference is that the `add()` method binds the given function and causes it to be executed every time the event occurs, while `addOnce()` is useful when you want to have the bound function executed only once and then unbound so it is not executed again. In our case, on every `outOfBounds` event the `ballLeaveScreen` will be executed, but when the ball leaves the screen we only want to remove the message from the screen once.

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
----------

Lives made the game more forgiving — if you lose one life, you still have two more left and can continue to play. Now let's expand the look and feel of the game by adding animations and tweens.

* « Previous
* Next »


Firefox - Mozilla

Firefox
=======

Firefox is Mozilla's popular Web browser, available for multiple platforms including Windows, macOS, and Linux on the desktop and all Android and iOS mobile devices. With broad compatibility, the latest in Web technologies, and powerful development tools, Firefox is a great choice for both Web developers and end users.

Firefox is an open source project; much of the code is contributed by our huge community of volunteers. Here you can learn about how to contribute to the Firefox project and you will also find links to information about the construction of Firefox add-ons, using the developer tools in Firefox, and other topics.

Learn how to create add-ons for Firefox, how to develop and build Firefox itself, and how the internals of Firefox and its subprojects work.

Key resources
-------------

Firefox developer guide

Our developer guide explains how to get Firefox source code, how to build it on Linux, macOS and Windows, how to find your way around, and how to contribute to the project.

Firefox add-on guide

The Add-on guide provides information about developing and deploying Firefox extensions.

Developer release notes

Developer-focused release notes; learn what new capabilities for both websites and add-ons arrive in each version of Firefox.

Firefox channels
----------------

Firefox is available in five **channels**.

### Firefox Nightly

Each night we build Firefox from the latest code in mozilla-central. These builds are for Firefox developers or those who want to try out the very latest cutting edge features while they're still under active development.

Download Firefox Nightly

### Firefox Developer Edition

This is a version of Firefox tailored for developers. Firefox Developer Edition has all the latest developer tools that have reached beta. We also add some extra features for developers that are only available in this channel. It uses its own path and profile, so that you can run it alongside Release or Beta Firefox.

Download Firefox Developer Edition

### Firefox Beta

Every four weeks, we take the features that are stable enough, and create a new version of Firefox Beta. Firefox Beta builds are for Firefox enthusiasts to test what's destined to become the next released Firefox version.

Download Firefox Beta

### Firefox

After stabilizing for another four weeks in Beta, we're ready to ship the new features to hundreds of millions of users in a new release version of Firefox.

Download Firefox

### Firefox Extended Support Release (ESR)

Firefox ESR is the long-term support edition of Firefox for desktop for use by organizations including schools, universities, businesses and others who need extended support for mass deployments.

Download Firefox ESR

Contents
--------

Experimental features in FirefoxThis page lists Firefox's experimental and partially implemented features, including those for proposed or cutting-edge web platform standards, along with information on the builds in which they are present, whether or not they are activated "by default", and which *preference* can be used to activate or deactivate them.
 This allows you to test the features before they are released.

Firefox release notes for developersBelow you'll find links to the developer release notes for every Firefox release. These lovingly-crafted notes provide details on what features and APIs were added and improved and what bugs were eliminated in each version of Firefox. All written to give developers like you the information they need most. You're welcome.

See also
--------

* Mailing list
* Release schedule


Add-ons - Mozilla

Add-ons
=======

Add-ons allow developers to extend and modify the functionality of Firefox. They are written using standard Web technologies - JavaScript, HTML, and CSS - plus some dedicated JavaScript APIs.

Among other things, an add-on could:

* Change the appearance or content of particular websites
* Modify the Firefox user interface
* Add new features to Firefox

There are several types of add-ons, but the most common type are extensions.

Developing extensions
---------------------

In the past, there were several toolsets for developing Firefox extensions, but as of November 2017, extensions must be built using WebExtensions APIs. Other toolsets, such as overlay add-ons, bootstrapped add-ons, and the Add-on SDK, are no longer supported.

Extensions written using WebExtensions APIs for Firefox are designed to be cross-browser compatible. In most cases, it will run in Chrome, Edge, and Opera with few if any changes. They are also fully compatible with multiprocess Firefox. You can see the APIs currently supported in Firefox and other browsers.

### Extension Workshop

The Firefox Extension Workshop can help you develop extensions for Firefox and give your users simple, yet powerful ways to customize their browsing experience. You'll find:

* Overview of the Firefox extension features
* Tools and processes for developing and testing
* How to publish your extension on addons.mozilla.org or distribute it yourself
* How to manage your published extension
* An enterprise guide for developing and using extensions
* How to develop themes for Firefox
* Firefox developer communities
### Extensions for Firefox for Android

In 2020, Mozilla will release a new Firefox for Android experience. This new, high-performance browser for Android has been rebuilt from the ground up using GeckoView, Mozilla's mobile browser engine. We are currently building support for the WebExtensions API on GeckoView.

### Migrate an existing extension

If you maintain a legacy extension, such as an XUL overlay, bootstrapped, or Add-on SDK-based extension, you can still port it to use WebExtension APIs. There are some porting resources on Firefox Extension Workshop, our site for Firefox-specific development resources.

For more information about transition support, please visit our wiki page.

Publishing add-ons
------------------

Addons.mozilla.org, commonly known as "AMO," is Mozilla's official site for developers to list add-ons, and for users to discover them. By uploading your add-on to AMO, you can participate in our community of users and creators and find an audience for your add-on.

You are not required to list your add-on on AMO, but your add-on must be signed by Mozilla else users will not be able to install it.

For an overview for the process of publishing your add-on see Signing and distributing your add-on.

Other types of add-ons
----------------------

In addition to extensions, there are a few other add-on types that allow users to customize Firefox. Those add-ons include:

* User dictionaries let you spell-check in different languages.
* Language packs let you have more languages available for the user interface of Firefox.
Contact us
----------

Check out the contact us page for details on how to get help, keep up to date with add-ons news, and give us feedback.


Firefox release notes for developers - Mozilla

Firefox release notes for developers
====================================

Below you'll find links to the developer release notes for every Firefox release. These lovingly-crafted notes provide details on what features and APIs were added and improved and what bugs were eliminated in each version of Firefox. All written to give developers like you the information they need most. You're welcome.

1. Firefox 123 for developers
2. Firefox 122 for developers
3. Firefox 121 for developers
4. Firefox 120 for developers
5. Firefox 119 for developers
6. Firefox 118 for developers
7. Firefox 117 for developers
8. Firefox 116 for developers
9. Firefox 115 for developers
10. Firefox 114 for developers
11. Firefox 113 for developers
12. Firefox 112 for developers
13. Firefox 111 for developers
14. Firefox 110 for developers
15. Firefox 109 for developers
16. Firefox 108 for developers
17. Firefox 107 for developers
18. Firefox 106 for developers
19. Firefox 105 for developers
20. Firefox 104 for developers
21. Firefox 103 for developers
22. Firefox 102 for developers
23. Firefox 101 for developers
24. Firefox 100 for developers
25. Firefox 99 for developers
26. Firefox 98 for developers
27. Firefox 97 for developers
28. Firefox 96 for developers
29. Firefox 95 for developers
30. Firefox 94 for developers
31. Firefox 93 for developers
32. Firefox 92 for developers
33. Firefox 91 for developers
34. Firefox 90 for developers
35. Firefox 89 for developers
36. Firefox 88 for developers
37. Firefox 87 for developers
38. Firefox 86 for developers
39. Firefox 85 for developers
40. Firefox 84 for developers
41. Firefox 83 for developers
42. Firefox 82 for developers
43. Firefox 81 for developers
44. Firefox 80 for developers
45. Firefox 79 for developers
46. Firefox 78 for developers
47. Firefox 77 for developers
48. Firefox 76 for developers
49. Firefox 75 for developers
50. Firefox 74 for developers
51. Firefox 73 for developers
52. Firefox 72 for Developers
53. Firefox 71 for Developers
54. Firefox 70 for developers
55. Firefox 69 for developers
56. Firefox 68 for developers
57. Firefox 67 for developers
58. Firefox 66 for developers
59. Firefox 65 for developers
60. Firefox 64 for developers
61. Firefox 63 for developers
62. Firefox 62 for developers
63. Firefox 61 for developers
64. Firefox 60 for developers
65. Firefox 59 for developers
66. Firefox 58 for developers
67. Firefox 57 (Quantum) for developers
68. Firefox 56 for developers
69. Firefox 55 for developers
70. Firefox 54 for developers
71. Firefox 53 for developers
72. Firefox 52 for developers
73. Firefox 51 for developers
74. Firefox 50 for developers
75. Firefox 49 for developers
76. Firefox 48 for developers
77. Firefox 47 for developers
78. Firefox 46 for developers
79. Firefox 45 for developers
80. Firefox 44 for developers
81. Firefox 43 for developers
82. Firefox 42 for developers
83. Firefox 41 for developers
84. Firefox 40 for developers
85. Firefox 39 for developers
86. Firefox 38 for developers
87. Firefox 37 for developers
88. Firefox 36 for developers
89. Firefox 35 for developers
90. Firefox 34 for developers
91. Firefox 33 for developers
92. Firefox 32 for developers
93. Firefox 31 for developers
94. Firefox 30 for developers
95. Firefox 29 for developers
96. Firefox 28 for developers
97. Firefox 27 for developers
98. Firefox 26 for developers
99. Firefox 25 for developers
100. Firefox 24 for developers
101. Firefox 23 for developers
102. Firefox 22 for developers
103. Firefox 21 for developers
104. Firefox 20 for developers
105. Firefox 19 for developers
106. Firefox 18 for developers
107. Firefox 17 for developers
108. Firefox 16 for developers
109. Firefox 15 for developers
110. Firefox 14 for developers
111. Firefox 13 for developers
112. Firefox 12 for developers
113. Firefox 11 for developers
114. Firefox 10 for developers
115. Firefox 9 for developers
116. Firefox 8 for developers
117. Firefox 7 for developers
118. Firefox 6 for developers
119. Firefox 5 for developers
120. Firefox 4 for developers
121. Firefox 3.6 for developers
122. Firefox 3.5 for developers
123. Firefox 3 for developers
124. Firefox 2 for developers
125. Firefox 1.5 for developers

Whew! That's a lot of Firefoxen!