diff --git a/harkka2/phaser3-tutorial/assets/bomb.png b/harkka2/phaser3-tutorial/assets/bomb.png
new file mode 100644
index 0000000000000000000000000000000000000000..28a0fbbddc37fd0a6872bbd170cbebdc81e7f597
Binary files /dev/null and b/harkka2/phaser3-tutorial/assets/bomb.png differ
diff --git a/harkka2/phaser3-tutorial/assets/dude.png b/harkka2/phaser3-tutorial/assets/dude.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b35f4b4b1b00e757700e0852b8527200e82c538
Binary files /dev/null and b/harkka2/phaser3-tutorial/assets/dude.png differ
diff --git a/harkka2/phaser3-tutorial/assets/platform.png b/harkka2/phaser3-tutorial/assets/platform.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e4a3f86d7311592c4fdd257daaf21db4176dd21
Binary files /dev/null and b/harkka2/phaser3-tutorial/assets/platform.png differ
diff --git a/harkka2/phaser3-tutorial/assets/sky.png b/harkka2/phaser3-tutorial/assets/sky.png
new file mode 100644
index 0000000000000000000000000000000000000000..5972639f229c7362edac856b42b86b93811ef3f2
Binary files /dev/null and b/harkka2/phaser3-tutorial/assets/sky.png differ
diff --git a/harkka2/phaser3-tutorial/assets/star.png b/harkka2/phaser3-tutorial/assets/star.png
new file mode 100644
index 0000000000000000000000000000000000000000..bfc2d298426648f2a31e48db711b84a9962af703
Binary files /dev/null and b/harkka2/phaser3-tutorial/assets/star.png differ
diff --git a/harkka2/phaser3-tutorial/part1.html b/harkka2/phaser3-tutorial/part1.html
new file mode 100644
index 0000000000000000000000000000000000000000..3a7aaccc90bd19043555e4a91d38e96fc7ea0f5e
--- /dev/null
+++ b/harkka2/phaser3-tutorial/part1.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Making your first Phaser 3 Game - Part 1</title>
+ <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ </style>
+</head>
+<body>
+
+<script type="text/javascript">
+
+ var config = {
+ type: Phaser.AUTO,
+ width: 800,
+ height: 600,
+ scene: {
+ preload: preload,
+ create: create,
+ update: update
+ }
+ };
+
+ var game = new Phaser.Game(config);
+
+ function preload ()
+ {
+ }
+
+ function create ()
+ {
+ }
+
+ function update ()
+ {
+ }
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/harkka2/phaser3-tutorial/part10.html b/harkka2/phaser3-tutorial/part10.html
new file mode 100644
index 0000000000000000000000000000000000000000..a77bfd03f55b72ba4eff827e61375ccdf8cb6516
--- /dev/null
+++ b/harkka2/phaser3-tutorial/part10.html
@@ -0,0 +1,207 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Making your first Phaser 3 Game - Part 10</title>
+ <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ </style>
+</head>
+<body>
+
+<script type="text/javascript">
+
+var config = {
+ type: Phaser.AUTO,
+ width: 800,
+ height: 600,
+ physics: {
+ default: 'arcade',
+ arcade: {
+ gravity: { y: 300 },
+ debug: false
+ }
+ },
+ scene: {
+ preload: preload,
+ create: create,
+ update: update
+ }
+};
+
+var player;
+var stars;
+var bombs;
+var platforms;
+var cursors;
+var score = 0;
+var gameOver = false;
+var scoreText;
+
+var game = new Phaser.Game(config);
+
+function preload ()
+{
+ this.load.image('sky', 'assets/sky.png');
+ this.load.image('ground', 'assets/platform.png');
+ this.load.image('star', 'assets/star.png');
+ this.load.image('bomb', 'assets/bomb.png');
+ this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
+}
+
+function create ()
+{
+ // A simple background for our game
+ this.add.image(400, 300, 'sky');
+
+ // The platforms group contains the ground and the 2 ledges we can jump on
+ platforms = this.physics.add.staticGroup();
+
+ // Here we create the ground.
+ // Scale it to fit the width of the game (the original sprite is 400x32 in size)
+ platforms.create(400, 568, 'ground').setScale(2).refreshBody();
+
+ // Now let's create some ledges
+ platforms.create(600, 400, 'ground');
+ platforms.create(50, 250, 'ground');
+ platforms.create(750, 220, 'ground');
+
+ // The player and its settings
+ player = this.physics.add.sprite(100, 450, 'dude');
+
+ // Player physics properties. Give the little guy a slight bounce.
+ player.setBounce(0.2);
+ player.setCollideWorldBounds(true);
+
+ // Our player animations, turning, walking left and walking right.
+ this.anims.create({
+ key: 'left',
+ frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
+ frameRate: 10,
+ repeat: -1
+ });
+
+ this.anims.create({
+ key: 'turn',
+ frames: [ { key: 'dude', frame: 4 } ],
+ frameRate: 20
+ });
+
+ this.anims.create({
+ key: 'right',
+ frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
+ frameRate: 10,
+ repeat: -1
+ });
+
+ // Input Events
+ cursors = this.input.keyboard.createCursorKeys();
+
+ // Some stars to collect, 12 in total, evenly spaced 70 pixels apart along the x axis
+ stars = this.physics.add.group({
+ key: 'star',
+ repeat: 11,
+ setXY: { x: 12, y: 0, stepX: 70 }
+ });
+
+ stars.children.iterate(function (child) {
+
+ // Give each star a slightly different bounce
+ child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
+
+ });
+
+ bombs = this.physics.add.group();
+
+ // The score
+ scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
+
+ // Collide the player and the stars with the platforms
+ this.physics.add.collider(player, platforms);
+ this.physics.add.collider(stars, platforms);
+ this.physics.add.collider(bombs, platforms);
+
+ // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
+ this.physics.add.overlap(player, stars, collectStar, null, this);
+
+ this.physics.add.collider(player, bombs, hitBomb, null, this);
+}
+
+function update ()
+{
+ if (gameOver)
+ {
+ return;
+ }
+
+ if (cursors.left.isDown)
+ {
+ player.setVelocityX(-160);
+
+ player.anims.play('left', true);
+ }
+ else if (cursors.right.isDown)
+ {
+ player.setVelocityX(160);
+
+ player.anims.play('right', true);
+ }
+ else
+ {
+ player.setVelocityX(0);
+
+ player.anims.play('turn');
+ }
+
+ if (cursors.up.isDown && player.body.touching.down)
+ {
+ player.setVelocityY(-330);
+ }
+}
+
+function collectStar (player, star)
+{
+ star.disableBody(true, true);
+
+ // Add and update the score
+ score += 10;
+ scoreText.setText('Score: ' + score);
+
+ if (stars.countActive(true) === 0)
+ {
+ // A new batch of stars to collect
+ stars.children.iterate(function (child) {
+
+ child.enableBody(true, child.x, 0, true, true);
+
+ });
+
+ var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);
+
+ var bomb = bombs.create(x, 16, 'bomb');
+ bomb.setBounce(1);
+ bomb.setCollideWorldBounds(true);
+ bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);
+ bomb.allowGravity = false;
+
+ }
+}
+
+function hitBomb (player, bomb)
+{
+ this.physics.pause();
+
+ player.setTint(0xff0000);
+
+ player.anims.play('turn');
+
+ gameOver = true;
+}
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/harkka2/phaser3-tutorial/part2.html b/harkka2/phaser3-tutorial/part2.html
new file mode 100644
index 0000000000000000000000000000000000000000..115d3784e854855ea88d737b475a68215b9e9bef
--- /dev/null
+++ b/harkka2/phaser3-tutorial/part2.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Making your first Phaser 3 Game - Part 2</title>
+ <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ </style>
+</head>
+<body>
+
+<script type="text/javascript">
+
+ var config = {
+ type: Phaser.AUTO,
+ width: 800,
+ height: 600,
+ scene: {
+ preload: preload,
+ create: create,
+ update: update
+ }
+ };
+
+ var game = new Phaser.Game(config);
+
+ function preload ()
+ {
+ this.load.image('sky', 'assets/sky.png');
+ this.load.image('ground', 'assets/platform.png');
+ this.load.image('star', 'assets/star.png');
+ this.load.image('bomb', 'assets/bomb.png');
+ this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
+ }
+
+ function create ()
+ {
+ }
+
+ function update ()
+ {
+ }
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/harkka2/phaser3-tutorial/part3.html b/harkka2/phaser3-tutorial/part3.html
new file mode 100644
index 0000000000000000000000000000000000000000..0f884330feb282734d0e95beaf0b70bd73b48056
--- /dev/null
+++ b/harkka2/phaser3-tutorial/part3.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Making your first Phaser 3 Game - Part 3</title>
+ <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ </style>
+</head>
+<body>
+
+<script type="text/javascript">
+
+ var config = {
+ type: Phaser.AUTO,
+ width: 800,
+ height: 600,
+ scene: {
+ preload: preload,
+ create: create,
+ update: update
+ }
+ };
+
+ var game = new Phaser.Game(config);
+
+ function preload ()
+ {
+ this.load.image('sky', 'assets/sky.png');
+ this.load.image('ground', 'assets/platform.png');
+ this.load.image('star', 'assets/star.png');
+ this.load.image('bomb', 'assets/bomb.png');
+ this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
+ }
+
+ function create ()
+ {
+ this.add.image(400, 300, 'sky');
+ }
+
+ function update ()
+ {
+ }
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/harkka2/phaser3-tutorial/part4.html b/harkka2/phaser3-tutorial/part4.html
new file mode 100644
index 0000000000000000000000000000000000000000..3cc10e857318fc5d2785ca6afb09d16b1884034a
--- /dev/null
+++ b/harkka2/phaser3-tutorial/part4.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Making your first Phaser 3 Game - Part 4</title>
+ <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ </style>
+</head>
+<body>
+
+<script type="text/javascript">
+
+ var config = {
+ type: Phaser.AUTO,
+ width: 800,
+ height: 600,
+ physics: {
+ default: 'arcade',
+ arcade: {
+ gravity: { y: 300 },
+ debug: false
+ }
+ },
+ scene: {
+ preload: preload,
+ create: create,
+ update: update
+ }
+ };
+
+ var platforms;
+
+ var game = new Phaser.Game(config);
+
+ function preload ()
+ {
+ this.load.image('sky', 'assets/sky.png');
+ this.load.image('ground', 'assets/platform.png');
+ this.load.image('star', 'assets/star.png');
+ this.load.image('bomb', 'assets/bomb.png');
+ this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
+ }
+
+ var platforms;
+
+ function create ()
+ {
+ this.add.image(400, 300, 'sky');
+
+ platforms = this.physics.add.staticGroup();
+
+ platforms.create(400, 568, 'ground').setScale(2).refreshBody();
+
+ platforms.create(600, 400, 'ground');
+ platforms.create(50, 250, 'ground');
+ platforms.create(750, 220, 'ground');
+ }
+
+ function update ()
+ {
+ }
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/harkka2/phaser3-tutorial/part5.html b/harkka2/phaser3-tutorial/part5.html
new file mode 100644
index 0000000000000000000000000000000000000000..10b8fa707ac754d729aa777e78a3840f9af1c012
--- /dev/null
+++ b/harkka2/phaser3-tutorial/part5.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Making your first Phaser 3 Game - Part 5</title>
+ <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ </style>
+</head>
+<body>
+
+<script type="text/javascript">
+
+ var config = {
+ type: Phaser.AUTO,
+ width: 800,
+ height: 600,
+ physics: {
+ default: 'arcade',
+ arcade: {
+ gravity: { y: 300 },
+ debug: false
+ }
+ },
+ scene: {
+ preload: preload,
+ create: create,
+ update: update
+ }
+ };
+
+ var player;
+ var platforms;
+
+ var game = new Phaser.Game(config);
+
+ function preload ()
+ {
+ this.load.image('sky', 'assets/sky.png');
+ this.load.image('ground', 'assets/platform.png');
+ this.load.image('star', 'assets/star.png');
+ this.load.image('bomb', 'assets/bomb.png');
+ this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
+ }
+
+ function create ()
+ {
+ this.add.image(400, 300, 'sky');
+
+ platforms = this.physics.add.staticGroup();
+
+ platforms.create(400, 568, 'ground').setScale(2).refreshBody();
+
+ platforms.create(600, 400, 'ground');
+ platforms.create(50, 250, 'ground');
+ platforms.create(750, 220, 'ground');
+
+ player = this.physics.add.sprite(100, 450, 'dude');
+
+ player.setBounce(0.2);
+ player.setCollideWorldBounds(true);
+
+ this.anims.create({
+ key: 'left',
+ frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
+ frameRate: 10,
+ repeat: -1
+ });
+
+ this.anims.create({
+ key: 'turn',
+ frames: [ { key: 'dude', frame: 4 } ],
+ frameRate: 20
+ });
+
+ this.anims.create({
+ key: 'right',
+ frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
+ frameRate: 10,
+ repeat: -1
+ });
+ }
+
+ function update ()
+ {
+ }
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/harkka2/phaser3-tutorial/part6.html b/harkka2/phaser3-tutorial/part6.html
new file mode 100644
index 0000000000000000000000000000000000000000..fad2192711eeeb4a3acbcf7f54738723c6f460be
--- /dev/null
+++ b/harkka2/phaser3-tutorial/part6.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Making your first Phaser 3 Game - Part 6</title>
+ <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ </style>
+</head>
+<body>
+
+<script type="text/javascript">
+
+ var config = {
+ type: Phaser.AUTO,
+ width: 800,
+ height: 600,
+ physics: {
+ default: 'arcade',
+ arcade: {
+ gravity: { y: 300 },
+ debug: false
+ }
+ },
+ scene: {
+ preload: preload,
+ create: create,
+ update: update
+ }
+ };
+
+ var player;
+ var platforms;
+
+ var game = new Phaser.Game(config);
+
+ function preload ()
+ {
+ this.load.image('sky', 'assets/sky.png');
+ this.load.image('ground', 'assets/platform.png');
+ this.load.image('star', 'assets/star.png');
+ this.load.image('bomb', 'assets/bomb.png');
+ this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
+ }
+
+ function create ()
+ {
+ this.add.image(400, 300, 'sky');
+
+ platforms = this.physics.add.staticGroup();
+
+ platforms.create(400, 568, 'ground').setScale(2).refreshBody();
+
+ platforms.create(600, 400, 'ground');
+ platforms.create(50, 250, 'ground');
+ platforms.create(750, 220, 'ground');
+
+ player = this.physics.add.sprite(100, 450, 'dude');
+
+ player.setBounce(0.2);
+ player.setCollideWorldBounds(true);
+
+ this.anims.create({
+ key: 'left',
+ frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
+ frameRate: 10,
+ repeat: -1
+ });
+
+ this.anims.create({
+ key: 'turn',
+ frames: [ { key: 'dude', frame: 4 } ],
+ frameRate: 20
+ });
+
+ this.anims.create({
+ key: 'right',
+ frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
+ frameRate: 10,
+ repeat: -1
+ });
+
+ this.physics.add.collider(player, platforms);
+ }
+
+ function update ()
+ {
+ }
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/harkka2/phaser3-tutorial/part7.html b/harkka2/phaser3-tutorial/part7.html
new file mode 100644
index 0000000000000000000000000000000000000000..4e1d6cdc65177892d44a6840aba9c785db41fb3e
--- /dev/null
+++ b/harkka2/phaser3-tutorial/part7.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Making your first Phaser 3 Game - Part 7</title>
+ <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ </style>
+</head>
+<body>
+
+<script type="text/javascript">
+
+ var config = {
+ type: Phaser.AUTO,
+ width: 800,
+ height: 600,
+ physics: {
+ default: 'arcade',
+ arcade: {
+ gravity: { y: 300 },
+ debug: false
+ }
+ },
+ scene: {
+ preload: preload,
+ create: create,
+ update: update
+ }
+ };
+
+ var player;
+ var platforms;
+ var cursors;
+
+ var game = new Phaser.Game(config);
+
+ function preload ()
+ {
+ this.load.image('sky', 'assets/sky.png');
+ this.load.image('ground', 'assets/platform.png');
+ this.load.image('star', 'assets/star.png');
+ this.load.image('bomb', 'assets/bomb.png');
+ this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
+ }
+
+ function create ()
+ {
+ this.add.image(400, 300, 'sky');
+
+ platforms = this.physics.add.staticGroup();
+
+ platforms.create(400, 568, 'ground').setScale(2).refreshBody();
+
+ platforms.create(600, 400, 'ground');
+ platforms.create(50, 250, 'ground');
+ platforms.create(750, 220, 'ground');
+
+ player = this.physics.add.sprite(100, 450, 'dude');
+
+ player.setBounce(0.2);
+ player.setCollideWorldBounds(true);
+
+ this.anims.create({
+ key: 'left',
+ frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
+ frameRate: 10,
+ repeat: -1
+ });
+
+ this.anims.create({
+ key: 'turn',
+ frames: [ { key: 'dude', frame: 4 } ],
+ frameRate: 20
+ });
+
+ this.anims.create({
+ key: 'right',
+ frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
+ frameRate: 10,
+ repeat: -1
+ });
+
+ cursors = this.input.keyboard.createCursorKeys();
+
+ this.physics.add.collider(player, platforms);
+ }
+
+ function update ()
+ {
+ if (cursors.left.isDown)
+ {
+ player.setVelocityX(-160);
+
+ player.anims.play('left', true);
+ }
+ else if (cursors.right.isDown)
+ {
+ player.setVelocityX(160);
+
+ player.anims.play('right', true);
+ }
+ else
+ {
+ player.setVelocityX(0);
+
+ player.anims.play('turn');
+ }
+
+ if (cursors.up.isDown && player.body.touching.down)
+ {
+ player.setVelocityY(-330);
+ }
+ }
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/harkka2/phaser3-tutorial/part8.html b/harkka2/phaser3-tutorial/part8.html
new file mode 100644
index 0000000000000000000000000000000000000000..75bf1fec1458deea54d76003e851ee08e98b9954
--- /dev/null
+++ b/harkka2/phaser3-tutorial/part8.html
@@ -0,0 +1,143 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Making your first Phaser 3 Game - Part 8</title>
+ <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ </style>
+</head>
+<body>
+
+<script type="text/javascript">
+
+ var config = {
+ type: Phaser.AUTO,
+ width: 800,
+ height: 600,
+ physics: {
+ default: 'arcade',
+ arcade: {
+ gravity: { y: 300 },
+ debug: false
+ }
+ },
+ scene: {
+ preload: preload,
+ create: create,
+ update: update
+ }
+ };
+
+ var player;
+ var stars;
+ var platforms;
+ var cursors;
+
+ var game = new Phaser.Game(config);
+
+ function preload ()
+ {
+ this.load.image('sky', 'assets/sky.png');
+ this.load.image('ground', 'assets/platform.png');
+ this.load.image('star', 'assets/star.png');
+ this.load.image('bomb', 'assets/bomb.png');
+ this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
+ }
+
+ function create ()
+ {
+ this.add.image(400, 300, 'sky');
+
+ platforms = this.physics.add.staticGroup();
+
+ platforms.create(400, 568, 'ground').setScale(2).refreshBody();
+
+ platforms.create(600, 400, 'ground');
+ platforms.create(50, 250, 'ground');
+ platforms.create(750, 220, 'ground');
+
+ player = this.physics.add.sprite(100, 450, 'dude');
+
+ player.setBounce(0.2);
+ player.setCollideWorldBounds(true);
+
+ this.anims.create({
+ key: 'left',
+ frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
+ frameRate: 10,
+ repeat: -1
+ });
+
+ this.anims.create({
+ key: 'turn',
+ frames: [ { key: 'dude', frame: 4 } ],
+ frameRate: 20
+ });
+
+ this.anims.create({
+ key: 'right',
+ frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
+ frameRate: 10,
+ repeat: -1
+ });
+
+ cursors = this.input.keyboard.createCursorKeys();
+
+ stars = this.physics.add.group({
+ key: 'star',
+ repeat: 11,
+ setXY: { x: 12, y: 0, stepX: 70 }
+ });
+
+ stars.children.iterate(function (child) {
+
+ child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
+
+ });
+
+ this.physics.add.collider(player, platforms);
+ this.physics.add.collider(stars, platforms);
+
+ this.physics.add.overlap(player, stars, collectStar, null, this);
+ }
+
+ function update ()
+ {
+ if (cursors.left.isDown)
+ {
+ player.setVelocityX(-160);
+
+ player.anims.play('left', true);
+ }
+ else if (cursors.right.isDown)
+ {
+ player.setVelocityX(160);
+
+ player.anims.play('right', true);
+ }
+ else
+ {
+ player.setVelocityX(0);
+
+ player.anims.play('turn');
+ }
+
+ if (cursors.up.isDown && player.body.touching.down)
+ {
+ player.setVelocityY(-330);
+ }
+ }
+
+ function collectStar (player, star)
+ {
+ star.disableBody(true, true);
+ }
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/harkka2/phaser3-tutorial/part9.html b/harkka2/phaser3-tutorial/part9.html
new file mode 100644
index 0000000000000000000000000000000000000000..fb9b4581ab2c9bad990919d36c1723b93ba3cfe7
--- /dev/null
+++ b/harkka2/phaser3-tutorial/part9.html
@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Making your first Phaser 3 Game - Part 9</title>
+ <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+ </style>
+</head>
+<body>
+
+<script type="text/javascript">
+
+ var config = {
+ type: Phaser.AUTO,
+ width: 800,
+ height: 600,
+ physics: {
+ default: 'arcade',
+ arcade: {
+ gravity: { y: 300 },
+ debug: false
+ }
+ },
+ scene: {
+ preload: preload,
+ create: create,
+ update: update
+ }
+ };
+
+ var player;
+ var stars;
+ var platforms;
+ var cursors;
+ var score = 0;
+ var scoreText;
+
+ var game = new Phaser.Game(config);
+
+ function preload ()
+ {
+ this.load.image('sky', 'assets/sky.png');
+ this.load.image('ground', 'assets/platform.png');
+ this.load.image('star', 'assets/star.png');
+ this.load.image('bomb', 'assets/bomb.png');
+ this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
+ }
+
+ function create ()
+ {
+ this.add.image(400, 300, 'sky');
+
+ platforms = this.physics.add.staticGroup();
+
+ platforms.create(400, 568, 'ground').setScale(2).refreshBody();
+
+ platforms.create(600, 400, 'ground');
+ platforms.create(50, 250, 'ground');
+ platforms.create(750, 220, 'ground');
+
+ player = this.physics.add.sprite(100, 450, 'dude');
+
+ player.setBounce(0.2);
+ player.setCollideWorldBounds(true);
+
+ this.anims.create({
+ key: 'left',
+ frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
+ frameRate: 10,
+ repeat: -1
+ });
+
+ this.anims.create({
+ key: 'turn',
+ frames: [ { key: 'dude', frame: 4 } ],
+ frameRate: 20
+ });
+
+ this.anims.create({
+ key: 'right',
+ frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
+ frameRate: 10,
+ repeat: -1
+ });
+
+ cursors = this.input.keyboard.createCursorKeys();
+
+ stars = this.physics.add.group({
+ key: 'star',
+ repeat: 11,
+ setXY: { x: 12, y: 0, stepX: 70 }
+ });
+
+ stars.children.iterate(function (child) {
+
+ child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
+
+ });
+
+ scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
+
+ this.physics.add.collider(player, platforms);
+ this.physics.add.collider(stars, platforms);
+
+ this.physics.add.overlap(player, stars, collectStar, null, this);
+ }
+
+ function update ()
+ {
+ if (cursors.left.isDown)
+ {
+ player.setVelocityX(-160);
+
+ player.anims.play('left', true);
+ }
+ else if (cursors.right.isDown)
+ {
+ player.setVelocityX(160);
+
+ player.anims.play('right', true);
+ }
+ else
+ {
+ player.setVelocityX(0);
+
+ player.anims.play('turn');
+ }
+
+ if (cursors.up.isDown && player.body.touching.down)
+ {
+ player.setVelocityY(-330);
+ }
+ }
+
+ function collectStar (player, star)
+ {
+ star.disableBody(true, true);
+
+ score += 10;
+ scoreText.setText('Score: ' + score);
+ }
+
+</script>
+
+</body>
+</html>
\ No newline at end of file