Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
bb6e329
Update lesson 1 "Initialize the framework" to Phaser 3.90 (except for…
igrep Jul 13, 2025
ccb6b7f
Forgot to update the URL to the example
igrep Jul 13, 2025
d3ae4c6
Update lesson 2 "Scaling" to Phaser 3.90 (except for the live sample)
igrep Jul 13, 2025
4064490
Update lesson 3 "Load the assets and print them on screen" to Phaser …
igrep Jul 15, 2025
d3e834a
Update lesson 4 "Move the ball" to Phaser 3.90 (except for the live s…
igrep Jul 16, 2025
6c4d861
Update lesson 5 "Physics" to Phaser 3.90 (except for the live sample)
igrep Jul 17, 2025
cda4007
Update lesson 6 "Bounce off the walls" to Phaser 3.90 (except for the…
igrep Jul 19, 2025
3a1c01e
(WIP) Update lesson 7 "Player paddle and controls" to Phaser 3.90
igrep Jul 20, 2025
3deac1b
Update lesson 7 "Player paddle and controls" to Phaser 3.90 except fo…
igrep Jul 21, 2025
19a5a93
Update the live sample in lesson 7 "Player paddle and controls" to Ph…
igrep Jul 21, 2025
5eadc1e
Correct the path to the assets in the live sample
igrep Jul 23, 2025
753cf50
Update lesson 8 "Game over" to Phaser 3.90
igrep Jul 23, 2025
0ce3ffd
Update lesson 9 "Build the brick field" to Phaser 3.90
igrep Jul 26, 2025
083a83a
Update lesson 10 "Collision detection" to Phaser 3.90
igrep Jul 26, 2025
a557f4b
Update lesson 11 "The score" to Phaser 3.90
igrep Jul 26, 2025
3014535
Modify lesson 11 "The score" to Phaser 3.90
igrep Jul 26, 2025
32d2919
Modify lesson 11 "The score" to Phaser 3.90
igrep Jul 26, 2025
6429f21
Modify lesson 12 "Win the game" to Phaser 3.90
igrep Jul 26, 2025
14b3dcd
(WIP) Modify lesson 13 "Extra lives" to Phaser 3.90
igrep Jul 27, 2025
5b37cab
Modify lesson 13 "Extra lives" to Phaser 3.90
igrep Jul 28, 2025
e40e328
Modify lesson 14 "Extra lives" to Phaser 3.90
igrep Jul 28, 2025
b3e64ab
(WIP) Modify lesson 15 "Buttons" to Phaser 3.90
igrep Jul 29, 2025
59be5d9
Modify lesson 15 "Buttons" to Phaser 3.90
igrep Jul 31, 2025
26ec9c4
Modify lesson 16 "Randomizing gameplay" to Phaser 3.90
igrep Jul 31, 2025
4ef696f
Migrate all the lessons to live sample from JSFiddle
igrep Jul 31, 2025
a5e4b71
Fix syntax errors in the example code and several parts I forgot to fix
igrep Aug 1, 2025
854560b
Apply formatter
igrep Aug 2, 2025
a186193
Updates
Josh-Cena Aug 2, 2025
16fdcc0
Fix grammar
Josh-Cena Aug 2, 2025
3287b45
Final tweaks
Josh-Cena Aug 2, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Forgot to update the URL to the example
  • Loading branch information
igrep committed Jul 31, 2025
commit ccb6b7fd19e703919c779c3875fc1428f142563b
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sidebar: games

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser", "Games/Workflows/2D_Breakout_game_Phaser/Scaling")}}

This is the first of 16 tutorials to learn how to use [Gamedev Phaser](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser). After completing this tutorial you can find the source code for this section at [Gamedev-Phaser-Content-Kit/demos/lesson01.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson01.html).
This is the first of 16 tutorials to learn how to use [Gamedev Phaser](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser). After completing this tutorial you can find the source code for this section at [2D_Breakout_game_Phaser/lesson01.html](https://github.com/igrep/2D_Breakout_game_Phaser/blob/main/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 {{htmlelement("canvas")}} element.

Expand Down Expand Up @@ -76,7 +76,33 @@ The {{htmlelement("canvas")}} element is generated automatically by the framewor

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

{{JSFiddleEmbed("https://jsfiddle.net/end3r/h6cwzv2b/","","400")}}
```html interactive-example
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
```

```js interactive-example
class Example extends Phaser.Scene {
preload() {}
create() {}
update() {}
}

const config = {
type: Phaser.CANVAS,
width: 480,
height: 320,
scene: Example,
};

const game = new Phaser.Game(config);
```

```css interactive-example
* {
padding: 0;
margin: 0;
}
```

## Next steps

Expand Down