├── assets
├── coin.png
└── player.png
├── game.js
├── index.html
└── readme.md
/assets/coin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lesscake/phaser-game-tutorial/92fc09fa50c8648663e2fb06869a8cbdb4929516/assets/coin.png
--------------------------------------------------------------------------------
/assets/player.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lesscake/phaser-game-tutorial/92fc09fa50c8648663e2fb06869a8cbdb4929516/assets/player.png
--------------------------------------------------------------------------------
/game.js:
--------------------------------------------------------------------------------
1 | class mainScene {
2 | preload() {
3 | this.load.image('player', 'assets/player.png');
4 | this.load.image('coin', 'assets/coin.png');
5 | }
6 |
7 | create() {
8 | this.player = this.physics.add.sprite(100, 100, 'player');
9 | this.coin = this.physics.add.sprite(300, 200, 'coin');
10 |
11 | this.score = 0;
12 | let style = { font: '20px Arial', fill: '#fff' };
13 | this.scoreText = this.add.text(20, 20, 'score: ' + this.score, style);
14 |
15 | this.arrow = this.input.keyboard.createCursorKeys();
16 | }
17 |
18 | update() {
19 | if (this.physics.overlap(this.player, this.coin)) {
20 | this.hit();
21 | }
22 |
23 | if (this.arrow.right.isDown) {
24 | this.player.x += 3;
25 | } else if (this.arrow.left.isDown) {
26 | this.player.x -= 3;
27 | }
28 |
29 | if (this.arrow.down.isDown) {
30 | this.player.y += 3;
31 | } else if (this.arrow.up.isDown) {
32 | this.player.y -= 3;
33 | }
34 | }
35 |
36 | hit() {
37 | this.coin.x = Phaser.Math.Between(100, 600);
38 | this.coin.y = Phaser.Math.Between(100, 200);
39 |
40 | this.score += 10;
41 | this.scoreText.setText('score: ' + this.score);
42 |
43 | this.tweens.add({
44 | targets: this.player,
45 | duration: 200,
46 | scaleX: 1.2,
47 | scaleY: 1.2,
48 | yoyo: true,
49 | });
50 | }
51 | }
52 |
53 | new Phaser.Game({
54 | width: 700,
55 | height: 300,
56 | backgroundColor: '#3498db',
57 | scene: mainScene,
58 | physics: { default: 'arcade' },
59 | parent: 'game',
60 | });
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | My First Phaser Game
6 |
7 |
8 |
9 |
10 | My First Phaser Game
11 |
12 | Use the arrow keys to move around and collect the coins.
13 |
14 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 |
2 | This is a very simple HTML5 game made with the framework Phaser 3.14.
3 |
4 | I wrote a step by step tutorial on how to make this game here: **[lesscake.com/phaser-game-tutorial](https://www.lesscake.com/phaser-game-tutorial)**.
5 |
6 | To test the game, you need to open the index.html file on a webserver.
7 |
--------------------------------------------------------------------------------