├── README.md
├── assets
    ├── coin.jpg
    ├── heart.png
    ├── hero.jpg
    ├── shell.png
    ├── torch.png
    ├── baddie.jpg
    ├── coin-8.jpg
    ├── coin-8.png
    ├── eye-left.jpg
    ├── hero-16.jpg
    ├── ladder.png
    ├── map
    │   ├── lava.png
    │   ├── tiles.png
    │   ├── environment-tiles.png
    │   ├── environment-background.png
    │   ├── simplemap.tmx
    │   └── simplemap.json
    ├── platform.jpg
    ├── spikes.png
    ├── baddie-16.jpg
    ├── dust-small.jpg
    ├── empty-box.jpg
    ├── eye-flame.jpg
    ├── eye-right.jpg
    ├── laddertile.png
    ├── powerup-16.jpg
    ├── touch-knob.png
    ├── empty-box-16.jpg
    ├── heart-filled.png
    ├── shell-small.jpg
    ├── touch-slider.png
    ├── oneway-platform.png
    ├── digitherium-logo.jpg
    ├── one-way-platform.jpg
    ├── collapsing-platform.jpg
    ├── collapsing-platform.png
    ├── question-mark-block.jpg
    ├── collapsing-platform-hot.png
    ├── one-way-platform-large.jpg
    ├── question-mark-block-16.jpg
    └── baddie-16.tsx
├── css
    └── screen.css
├── 1_setup.html
├── 1_introduction.html
├── 2_inertia.html
├── 3_better_jumping.html
├── 4_edgetimer.html
├── 5_touch_controls.html
├── 6_improved_touch_controls.html
├── 7_animating_coins.html
├── 8_baddies.html
├── 9_moving_baddies.html
├── 10_ladders.html
├── 11_improved_ladders.html
└── 12_shells.html


/README.md:
--------------------------------------------------------------------------------
1 | # phaserplatformerseries
2 | Example code for phaser 3 platformer
3 | 


--------------------------------------------------------------------------------
/assets/coin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/coin.jpg


--------------------------------------------------------------------------------
/assets/heart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/heart.png


--------------------------------------------------------------------------------
/assets/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/hero.jpg


--------------------------------------------------------------------------------
/assets/shell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/shell.png


--------------------------------------------------------------------------------
/assets/torch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/torch.png


--------------------------------------------------------------------------------
/assets/baddie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/baddie.jpg


--------------------------------------------------------------------------------
/assets/coin-8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/coin-8.jpg


--------------------------------------------------------------------------------
/assets/coin-8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/coin-8.png


--------------------------------------------------------------------------------
/assets/eye-left.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/eye-left.jpg


--------------------------------------------------------------------------------
/assets/hero-16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/hero-16.jpg


--------------------------------------------------------------------------------
/assets/ladder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/ladder.png


--------------------------------------------------------------------------------
/assets/map/lava.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/map/lava.png


--------------------------------------------------------------------------------
/assets/platform.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/platform.jpg


--------------------------------------------------------------------------------
/assets/spikes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/spikes.png


--------------------------------------------------------------------------------
/assets/baddie-16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/baddie-16.jpg


--------------------------------------------------------------------------------
/assets/dust-small.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/dust-small.jpg


--------------------------------------------------------------------------------
/assets/empty-box.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/empty-box.jpg


--------------------------------------------------------------------------------
/assets/eye-flame.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/eye-flame.jpg


--------------------------------------------------------------------------------
/assets/eye-right.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/eye-right.jpg


--------------------------------------------------------------------------------
/assets/laddertile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/laddertile.png


--------------------------------------------------------------------------------
/assets/map/tiles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/map/tiles.png


--------------------------------------------------------------------------------
/assets/powerup-16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/powerup-16.jpg


--------------------------------------------------------------------------------
/assets/touch-knob.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/touch-knob.png


--------------------------------------------------------------------------------
/assets/empty-box-16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/empty-box-16.jpg


--------------------------------------------------------------------------------
/assets/heart-filled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/heart-filled.png


--------------------------------------------------------------------------------
/assets/shell-small.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/shell-small.jpg


--------------------------------------------------------------------------------
/assets/touch-slider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/touch-slider.png


--------------------------------------------------------------------------------
/assets/oneway-platform.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/oneway-platform.png


--------------------------------------------------------------------------------
/assets/digitherium-logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/digitherium-logo.jpg


--------------------------------------------------------------------------------
/assets/one-way-platform.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/one-way-platform.jpg


--------------------------------------------------------------------------------
/assets/collapsing-platform.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/collapsing-platform.jpg


--------------------------------------------------------------------------------
/assets/collapsing-platform.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/collapsing-platform.png


--------------------------------------------------------------------------------
/assets/question-mark-block.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/question-mark-block.jpg


--------------------------------------------------------------------------------
/assets/collapsing-platform-hot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/collapsing-platform-hot.png


--------------------------------------------------------------------------------
/assets/map/environment-tiles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/map/environment-tiles.png


--------------------------------------------------------------------------------
/assets/one-way-platform-large.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/one-way-platform-large.jpg


--------------------------------------------------------------------------------
/assets/question-mark-block-16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/question-mark-block-16.jpg


--------------------------------------------------------------------------------
/assets/map/environment-background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitherium/phaserplatformerseries/HEAD/assets/map/environment-background.png


--------------------------------------------------------------------------------
/css/screen.css:
--------------------------------------------------------------------------------
1 |  body {
2 |      margin: 0;
3 |      background: #16191b;
4 |  }
5 | 
6 |  canvas {
7 |      display: block;
8 |      margin: auto;
9 |  }


--------------------------------------------------------------------------------
/assets/baddie-16.tsx:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <tileset name="water" tilewidth="32" tileheight="32" tilecount="3" columns="3">
3 |  <image source="map/water.png" width="96" height="32"/>
4 | </tileset>
5 | 


--------------------------------------------------------------------------------
/1_setup.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Setup - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: 'arcade',
 20 |             arcade: {
 21 |                 gravity: { y: 300 }
 22 |             }
 23 |         },
 24 |         scene: {
 25 |             preload: preload,
 26 |             create: create,
 27 |             update: update
 28 |         }
 29 |     };
 30 | 
 31 |     var player,
 32 |         coins,
 33 |         platforms,
 34 |         cursors,
 35 |         score = 0,
 36 |         scoreText;
 37 | 
 38 |     var game = new Phaser.Game(config);
 39 | 
 40 |     function preload() {
 41 |         // this.load.setBaseURL("https://digitherium/codepen/phaserplatformer/");
 42 |         this.load.setBaseURL("assets/");
 43 |         this.load.image("ground", "platform.jpg");
 44 |         this.load.image("coin", "coin.jpg");
 45 |         this.load.image("hero", "hero.jpg");
 46 |         this.load.image("logo", "digitherium-logo.jpg");
 47 | 
 48 |     }
 49 | 
 50 |     function create() {
 51 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 52 |         logo.alpha = 0.4;
 53 |         logo.setScale(0.5);
 54 | 
 55 |         platforms = this.physics.add.staticGroup();
 56 | 
 57 |         platforms.create(400, 400, 'ground').setScale(2).refreshBody();
 58 |         platforms.create(50, 240, 'ground');
 59 |         platforms.create(750, 140, 'ground');
 60 | 
 61 |         player = this.physics.add.sprite(100, 350, 'hero');
 62 | 
 63 |         player.setCollideWorldBounds(true);
 64 | 
 65 |         //Set bounce to 0, so our hero just lands directly
 66 |         player.setBounce(0);
 67 | 
 68 |         cursors = this.input.keyboard.createCursorKeys();
 69 | 
 70 |         coins = this.physics.add.group({
 71 |             key: 'coin',
 72 |             repeat: 11,
 73 |             setXY: { x: 12, y: 0, stepX: 70 }
 74 |         });
 75 | 
 76 |         coins.children.iterate(function(child) {
 77 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
 78 |         });
 79 | 
 80 |         scoreText = this.add.text(config.width - 140, 16, 'score: 0', { fontSize: '24px', fill: '#fff' });
 81 | 
 82 |         this.physics.add.collider(player, platforms);
 83 |         this.physics.add.collider(coins, platforms);
 84 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
 85 |     }
 86 | 
 87 |     function update() {
 88 |         var standing = player.body.blocked.down || player.body.touching.down;
 89 |         //if left key is down then move left
 90 |         if (cursors.left.isDown) {
 91 |             player.setVelocityX(-160);
 92 |         }
 93 |         //same deal but for right arrow
 94 |         else if (cursors.right.isDown) {
 95 |             player.setVelocityX(160);
 96 |         }
 97 |         //if neither left or right arrow is down then...
 98 |         else {
 99 |             player.setVelocityX(0);
100 |         }
101 | 
102 |         //If player is touching floor and up key is pressed then jump
103 |         if (standing && cursors.up.isDown) {
104 |             player.setVelocityY(-330);
105 |         }
106 |     }
107 | 
108 |     function collectCoin(player, coin) {
109 |         coin.disableBody(true, true);
110 |         score += 10;
111 |         scoreText.setText('Score: ' + score);
112 |     }
113 |     </script>
114 | </body>
115 | 
116 | </html>


--------------------------------------------------------------------------------
/1_introduction.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Phaser Platformer Series: 1 Introduction</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: 'arcade',
 20 |             arcade: {
 21 |                 gravity: { y: 300 }
 22 |             }
 23 |         },
 24 |         scene: {
 25 |             preload: preload,
 26 |             create: create,
 27 |             update: update
 28 |         }
 29 |     };
 30 | 
 31 |     var player,
 32 |         coins,
 33 |         platforms,
 34 |         cursors,
 35 |         score = 0,
 36 |         scoreText;
 37 | 
 38 |     var game = new Phaser.Game(config);
 39 | 
 40 |     function preload() {
 41 |         // this.load.setBaseURL("https://digitherium.com/codepen/phaserplatformer/");
 42 |         this.load.setBaseURL("assets/");
 43 |         this.load.image("ground", "platform.jpg");
 44 |         this.load.image("coin", "coin.jpg");
 45 |         this.load.image("hero", "hero.jpg");
 46 |         this.load.image("logo", "digitherium-logo.jpg");
 47 | 
 48 |     }
 49 | 
 50 |     function create() {
 51 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 52 |         logo.alpha = 0.4;
 53 |         logo.setScale(0.5);
 54 | 
 55 |         platforms = this.physics.add.staticGroup();
 56 | 
 57 |         platforms.create(400, 400, 'ground').setScale(2).refreshBody();
 58 |         platforms.create(50, 240, 'ground');
 59 |         platforms.create(750, 140, 'ground');
 60 | 
 61 |         player = this.physics.add.sprite(100, 350, 'hero');
 62 | 
 63 |         player.setCollideWorldBounds(true);
 64 | 
 65 |         //Set bounce to 0, so our hero just lands directly
 66 |         player.setBounce(0);
 67 | 
 68 |         cursors = this.input.keyboard.createCursorKeys();
 69 | 
 70 |         coins = this.physics.add.group({
 71 |             key: 'coin',
 72 |             repeat: 11,
 73 |             setXY: { x: 12, y: 0, stepX: 70 }
 74 |         });
 75 | 
 76 |         coins.children.iterate(function(child) {
 77 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
 78 |         });
 79 | 
 80 |         scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '24px', fill: '#fff' });
 81 | 
 82 |         this.physics.add.collider(player, platforms);
 83 |         this.physics.add.collider(coins, platforms);
 84 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
 85 |     }
 86 | 
 87 |     function update() {
 88 |         //built in arcade physics functions of blocked and touching to test for collisions in a given direction
 89 |         var standing = player.body.blocked.down || player.body.touching.down;
 90 |         //if left key is down then move left
 91 |         if (cursors.left.isDown) {
 92 |             player.setVelocityX(-160);
 93 |         }
 94 |         //same deal but for right arrow
 95 |         else if (cursors.right.isDown) {
 96 |             player.setVelocityX(160);
 97 |         }
 98 |         //if neither left or right arrow is down then...
 99 |         else {
100 |             player.setVelocityX(0);
101 |         }
102 | 
103 |         //If player is touching floor and up key is pressed then jump
104 |         if (standing && cursors.up.isDown) {
105 |             player.setVelocityY(-330);
106 |         }
107 |     }
108 | 
109 |     function collectCoin(player, coin) {
110 |         coin.disableBody(true, true);
111 |         score += 10;
112 |         scoreText.setText('Score: ' + score);
113 |     }
114 |     </script>
115 | </body>
116 | 
117 | </html>


--------------------------------------------------------------------------------
/2_inertia.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Inertia and 'feel' - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: 'arcade',
 20 |             arcade: {
 21 |                 gravity: { y: 300 }
 22 |             }
 23 |         },
 24 |         scene: {
 25 |             preload: preload,
 26 |             create: create,
 27 |             update: update
 28 |         }
 29 |     };
 30 | 
 31 |     var player,
 32 |         coins,
 33 |         platforms,
 34 |         cursors,
 35 |         score = 0,
 36 |         scoreText,
 37 |         acceleration = 600,
 38 |         jumpVelocity = -330;
 39 | 
 40 |     var game = new Phaser.Game(config);
 41 | 
 42 |     function preload() {
 43 |         this.load.setBaseURL("assets/");
 44 |         this.load.image("ground", "platform.jpg");
 45 |         this.load.image("coin", "coin.jpg");
 46 |         this.load.image("hero", "hero.jpg");
 47 |         this.load.image("logo", "digitherium-logo.jpg");
 48 |     }
 49 | 
 50 |     function create() {
 51 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 52 |         logo.alpha = 0.4;
 53 |         logo.setScale(0.5);
 54 | 
 55 |         platforms = this.physics.add.staticGroup();
 56 | 
 57 |         platforms.create(400, 400, 'ground').setScale(2).refreshBody();
 58 |         platforms.create(50, 240, 'ground');
 59 |         platforms.create(750, 140, 'ground');
 60 | 
 61 |         player = this.physics.add.sprite(100, 350, 'hero');
 62 | 
 63 |         player.setCollideWorldBounds(true);
 64 | 
 65 |         //Set bounce to 0, so our hero just lands directly
 66 |         player.setBounce(0);
 67 |         //Set top speeds
 68 |         player.body.maxVelocity.x = 200;
 69 |         player.body.maxVelocity.y = 500;
 70 | 
 71 |         cursors = this.input.keyboard.createCursorKeys();
 72 | 
 73 |         coins = this.physics.add.group({
 74 |             key: 'coin',
 75 |             repeat: 11,
 76 |             setXY: { x: 12, y: 0, stepX: 70 }
 77 |         });
 78 | 
 79 |         coins.children.iterate(function(child) {
 80 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
 81 |         });
 82 | 
 83 |         scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '24px', fill: '#fff' });
 84 | 
 85 |         this.physics.add.collider(player, platforms);
 86 |         this.physics.add.collider(coins, platforms);
 87 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
 88 |     }
 89 | 
 90 |     function update() {
 91 |         var standing = player.body.blocked.down || player.body.touching.down;
 92 |         //if left key is down then move left
 93 |         if (cursors.left.isDown) {
 94 |             //if hero is on ground then use full acceleration
 95 |             if (standing) {
 96 |                 player.setAccelerationX(-acceleration);
 97 |             }
 98 |             //if hero is in the air then accelerate slower
 99 |             else {
100 |                 player.setAccelerationX(-acceleration / 3);
101 |             }
102 |         }
103 |         //same deal but for right arrow
104 |         else if (cursors.right.isDown) {
105 |             if (standing) {
106 |                 player.setAccelerationX(acceleration);
107 |             } else {
108 |                 player.setAccelerationX(acceleration / 3);
109 |             }
110 |         }
111 |         //if neither left or right arrow is down then...
112 |         else {
113 |             //if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
114 |             if (Math.abs(player.body.velocity.x) < 10 && Math.abs(player.body.velocity.x) > -10) {
115 |                 player.setVelocityX(0);
116 |                 player.setAccelerationX(0);
117 |             }
118 |             //if our hero isn't moving left or right then slow them down 
119 |             else {
120 |                 //this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number  
121 |                 player.setAccelerationX(((player.body.velocity.x > 0) ? -1 : 1) * acceleration / 3);
122 |             }
123 |         }
124 | 
125 |         //If player is touching floor and up key is pressed then jump
126 |         if (standing && cursors.up.isDown) {
127 |             player.setVelocityY(jumpVelocity);
128 |         }
129 |     }
130 | 
131 |     function collectCoin(player, coin) {
132 |         coin.disableBody(true, true);
133 |         score += 10;
134 |         scoreText.setText('Score: ' + score);
135 |     }
136 |     </script>
137 | </body>
138 | 
139 | </html>


--------------------------------------------------------------------------------
/3_better_jumping.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Better Jumping - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: "arcade",
 20 |             arcade: {
 21 |                 gravity: { y: 300 }
 22 |             }
 23 |         },
 24 |         scene: {
 25 |             preload: preload,
 26 |             create: create,
 27 |             update: update
 28 |         }
 29 |     };
 30 | 
 31 |     var player,
 32 |         coins,
 33 |         platforms,
 34 |         cursors,
 35 |         score = 0,
 36 |         scoreText,
 37 |         acceleration = 600,
 38 |         jumpVelocity = -330,
 39 |         jumping = false;
 40 | 
 41 |     var game = new Phaser.Game(config);
 42 | 
 43 |     function preload() {
 44 |         this.load.setBaseURL("assets/");
 45 |         this.load.image("ground", "platform.jpg");
 46 |         this.load.image("coin", "coin.jpg");
 47 |         this.load.image("hero", "hero.jpg");
 48 |         this.load.image("logo", "digitherium-logo.jpg");
 49 |     }
 50 | 
 51 |     function create() {
 52 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 53 |         logo.alpha = 0.4;
 54 |         logo.setScale(0.5);
 55 | 
 56 |         platforms = this.physics.add.staticGroup();
 57 | 
 58 |         platforms.create(400, 400, "ground").setScale(2).refreshBody();
 59 |         platforms.create(50, 240, "ground");
 60 |         platforms.create(750, 140, "ground");
 61 | 
 62 |         player = this.physics.add.sprite(100, 350, "hero");
 63 | 
 64 |         player.setCollideWorldBounds(true);
 65 | 
 66 |         //Set bounce to 0, so our hero just lands directly
 67 |         player.setBounce(0);
 68 |         //Set top speeds
 69 |         player.body.maxVelocity.x = 200;
 70 |         player.body.maxVelocity.y = 500;
 71 | 
 72 |         cursors = this.input.keyboard.createCursorKeys();
 73 | 
 74 |         coins = this.physics.add.group({
 75 |             key: "coin",
 76 |             repeat: 11,
 77 |             setXY: { x: 12, y: 0, stepX: 70 }
 78 |         });
 79 | 
 80 |         coins.children.iterate(function(child) {
 81 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
 82 |         });
 83 | 
 84 |         scoreText = this.add.text(16, 16, "score: 0", {
 85 |             fontSize: "24px",
 86 |             fill: "#fff"
 87 |         });
 88 | 
 89 |         this.physics.add.collider(player, platforms);
 90 |         this.physics.add.collider(coins, platforms);
 91 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
 92 |     }
 93 | 
 94 |     function update() {
 95 |         var standing = player.body.blocked.down || player.body.touching.down;
 96 |         //if left key is down then move left
 97 |         if (cursors.left.isDown) {
 98 |             //if hero is on ground then use full acceleration
 99 |             if (standing) {
100 |                 player.setAccelerationX(-acceleration);
101 |             } else {
102 |                 //if hero is in the air then accelerate slower
103 |                 player.setAccelerationX(-acceleration / 3);
104 |             }
105 |         } else if (cursors.right.isDown) {
106 |             //same deal but for right arrow
107 |             if (standing) {
108 |                 player.setAccelerationX(acceleration);
109 |             } else {
110 |                 player.setAccelerationX(acceleration / 3);
111 |             }
112 |         } else {
113 |             //if neither left or right arrow is down then...
114 |             //if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
115 |             if (
116 |                 Math.abs(player.body.velocity.x) < 10 &&
117 |                 Math.abs(player.body.velocity.x) > -10
118 |             ) {
119 |                 player.setVelocityX(0);
120 |                 player.setAccelerationX(0);
121 |             } else {
122 |                 //if our hero isn't moving left or right then slow them down
123 |                 //this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number
124 |                 player.setAccelerationX(
125 |                     (player.body.velocity.x > 0 ? -1 : 1) * acceleration / 3
126 |                 );
127 |             }
128 |         }
129 | 
130 |         if (standing && cursors.up.isDown && !jumping) {
131 |             player.setVelocityY(jumpVelocity);
132 |             jumping = true;
133 |         } else if (!cursors.up.isDown) {
134 |             if (player.body.touching.down) {
135 |                 jumping = false;
136 |             }
137 |         }
138 |     }
139 | 
140 |     function collectCoin(player, coin) {
141 |         coin.disableBody(true, true);
142 | 
143 |         score += 10;
144 |         scoreText.setText("Score: " + score);
145 |     }
146 |     </script>
147 | </body>
148 | 
149 | </html>


--------------------------------------------------------------------------------
/4_edgetimer.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Edge Timer - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: "arcade",
 20 |             arcade: {
 21 |                 gravity: { y: 300 }
 22 |             }
 23 |         },
 24 |         scene: {
 25 |             preload: preload,
 26 |             create: create,
 27 |             update: update
 28 |         }
 29 |     };
 30 | 
 31 |     var player,
 32 |         coins,
 33 |         platforms,
 34 |         cursors,
 35 |         score = 0,
 36 |         scoreText,
 37 |         acceleration = 600,
 38 |         jumpVelocity = -330,
 39 |         wasStanding = false,
 40 |         edgeTimer = 0,
 41 |         jumping = false;
 42 | 
 43 |     var game = new Phaser.Game(config);
 44 | 
 45 |     function preload() {
 46 |         this.load.setBaseURL("assets/");
 47 |         this.load.image("ground", "platform.jpg");
 48 |         this.load.image("coin", "coin.jpg");
 49 |         this.load.image("hero", "hero.jpg");
 50 |         this.load.image("logo", "digitherium-logo.jpg");
 51 |     }
 52 | 
 53 |     function create() {
 54 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 55 |         logo.alpha = 0.4;
 56 |         logo.setScale(0.5);
 57 | 
 58 |         platforms = this.physics.add.staticGroup();
 59 | 
 60 |         platforms.create(400, 400, "ground").setScale(2).refreshBody();
 61 |         platforms.create(50, 240, "ground");
 62 |         platforms.create(750, 140, "ground");
 63 | 
 64 |         player = this.physics.add.sprite(100, 450, "hero");
 65 | 
 66 |         player.setCollideWorldBounds(true);
 67 | 
 68 |         //Set bounce to 0, so our hero just lands directly
 69 |         player.setBounce(0);
 70 |         //Set top speeds
 71 |         player.body.maxVelocity.x = 200;
 72 |         player.body.maxVelocity.y = 500;
 73 | 
 74 |         cursors = this.input.keyboard.createCursorKeys();
 75 | 
 76 |         coins = this.physics.add.group({
 77 |             key: "coin",
 78 |             repeat: 11,
 79 |             setXY: { x: 12, y: 0, stepX: 70 }
 80 |         });
 81 | 
 82 |         coins.children.iterate(function(child) {
 83 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
 84 |         });
 85 | 
 86 |         scoreText = this.add.text(16, 16, "score: 0", {
 87 |             fontSize: "24px",
 88 |             fill: "#fff"
 89 |         });
 90 | 
 91 |         this.physics.add.collider(player, platforms);
 92 |         this.physics.add.collider(coins, platforms);
 93 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
 94 |     }
 95 | 
 96 |     function update() {
 97 |         var standing = player.body.blocked.down || player.body.touching.down;
 98 |         //if left key is down then move left
 99 |         if (cursors.left.isDown) {
100 |             //if hero is on ground then use full acceleration
101 |             if (standing) {
102 |                 player.setAccelerationX(-acceleration);
103 |             } else {
104 |                 //if hero is in the air then accelerate slower
105 |                 player.setAccelerationX(-acceleration / 3);
106 |             }
107 |         } else if (cursors.right.isDown) {
108 |             //same deal but for right arrow
109 |             if (standing) {
110 |                 player.setAccelerationX(acceleration);
111 |             } else {
112 |                 player.setAccelerationX(acceleration / 3);
113 |             }
114 |         } else {
115 |             //if neither left or right arrow is down then...
116 |             //if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
117 |             if (
118 |                 Math.abs(player.body.velocity.x) < 10 &&
119 |                 Math.abs(player.body.velocity.x) > -10
120 |             ) {
121 |                 player.setVelocityX(0);
122 |                 player.setAccelerationX(0);
123 |             } else {
124 |                 //if our hero isn't moving left or right then slow them down
125 |                 //this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number
126 |                 player.setAccelerationX(
127 |                     (player.body.velocity.x > 0 ? -1 : 1) * acceleration / 3
128 |                 );
129 |             }
130 |         }
131 | 
132 |         //get current time in seconds
133 |         var d = new Date();
134 |         var time = d.getTime();
135 | 
136 |         //if we have just left the ground set edge time for 100ms time
137 |         if (!standing && wasStanding) {
138 |             edgeTimer = time + 100;
139 |         }
140 | 
141 |         if ((standing || time <= edgeTimer) && cursors.up.isDown && !jumping) {
142 |             player.setVelocityY(jumpVelocity);
143 |             jumping = true;
144 |         }
145 | 
146 |         if (!cursors.up.isDown) {
147 |             if (player.body.touching.down) {
148 |                 jumping = false;
149 |             }
150 |         }
151 |         wasStanding = standing;
152 |     }
153 | 
154 |     function collectCoin(player, coin) {
155 |         coin.disableBody(true, true);
156 | 
157 |         score += 10;
158 |         scoreText.setText("Score: " + score);
159 |     }
160 |     </script>
161 | </body>
162 | 
163 | </html>


--------------------------------------------------------------------------------
/assets/map/simplemap.tmx:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <map version="1.0" orientation="orthogonal" renderorder="right-down" width="80" height="25" tilewidth="16" tileheight="16" nextobjectid="97">
 3 |  <tileset firstgid="1" name="environment-tiles" tilewidth="16" tileheight="16" tilecount="672" columns="42">
 4 |   <image source="environment-tiles.png" width="672" height="256"/>
 5 |  </tileset>
 6 |  <tileset firstgid="673" name="environment-background" tilewidth="16" tileheight="16" tilecount="280" columns="28">
 7 |   <image source="../../../../../../Users/tombo/Downloads/Grotto-escape-2-files/PNG/environment-background.png" width="448" height="160"/>
 8 |  </tileset>
 9 |  <layer name="platforms" width="80" height="25">
10 |   <data encoding="csv">
11 | 74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
12 | 74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
13 | 74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
14 | 74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
15 | 74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
16 | 74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,116,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
17 | 72,73,72,75,72,73,75,72,72,75,72,73,75,72,72,158,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
18 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,116,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
19 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,158,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,46,47,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
20 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,88,89,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
21 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,171,172,173,174,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
22 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,213,214,215,216,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
23 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,256,257,258,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,527,527,
24 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,297,298,299,300,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,325,326,
25 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,325,326,
26 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,325,326,
27 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,325,326,
28 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,325,326,
29 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,325,326,
30 | 0,0,0,0,0,0,0,0,171,172,173,174,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,403,404,406,406,406,
31 | 0,0,0,0,0,0,0,213,74,214,214,214,300,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,445,446,448,448,448,
32 | 0,0,0,0,0,0,255,74,74,214,214,214,214,173,172,552,551,552,551,552,551,552,551,172,554,304,305,183,183,183,183,183,183,183,183,183,183,183,183,183,183,183,183,183,183,183,183,304,305,432,516,434,516,434,516,434,516,436,437,0,0,0,0,0,0,0,0,0,0,0,0,436,437,186,149,436,437,432,434,186,
33 | 0,0,0,0,0,297,74,74,74,214,214,421,256,421,421,421,214,214,214,256,214,214,214,214,596,349,350,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,349,350,228,228,228,518,228,228,228,228,478,479,432,179,434,179,179,518,179,179,434,179,179,432,478,479,228,228,478,479,228,228,228,
34 | 551,552,552,551,551,214,214,214,214,594,214,214,214,214,214,214,214,594,214,214,256,256,594,214,596,307,308,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,307,308,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,
35 | 214,214,214,214,594,214,214,214,594,214,256,214,594,214,214,214,214,214,214,214,214,214,214,214,596,349,350,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,349,350,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228,228
36 | </data>
37 |  </layer>
38 |  <layer name="foreground" width="80" height="25">
39 |   <data encoding="csv">
40 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,330,0,0,0,0,0,0,0,0,315,315,231,231,231,231,231,231,231,231,231,231,0,
41 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,0,0,315,231,231,231,231,231,231,231,231,231,0,
42 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,414,0,0,0,0,0,0,0,0,0,0,0,231,231,231,231,231,231,231,231,231,0,
43 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,0,0,0,315,231,231,231,231,231,231,231,231,0,
44 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,370,0,0,0,0,0,0,0,0,0,0,0,0,372,315,276,315,315,315,315,315,0,
45 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,412,0,0,0,0,0,0,0,0,0,0,0,0,372,317,318,0,0,246,0,0,0,
46 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,454,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,
47 | 0,0,0,246,0,0,0,0,0,0,0,0,0,114,115,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,
48 | 0,0,0,0,0,0,0,0,0,0,0,0,0,156,157,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,0,0,0,0,370,0,0,0,0,0,0,0,0,
49 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,0,0,0,0,412,0,0,0,0,0,0,0,0,
50 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,0,0,0,0,454,0,0,0,0,0,0,0,0,
51 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,414,0,0,0,0,0,0,0,0,0,0,0,0,414,0,0,0,0,0,0,509,0,
52 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,
53 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,414,0,0,0,0,0,0,0,0,0,0,0,0,414,0,0,0,0,0,0,0,0,
54 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,414,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,
55 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,0,0,0,0,370,0,0,0,0,0,0,0,0,
56 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,370,0,0,0,0,0,0,0,0,0,0,0,0,412,0,0,0,0,0,0,0,0,
57 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,412,0,0,0,0,0,0,0,0,0,0,0,0,454,0,0,0,0,0,0,0,0,
58 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,454,0,0,0,0,0,0,0,0,0,0,0,0,372,0,0,0,0,0,0,0,0,
59 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,414,0,0,0,0,0,0,0,0,0,0,0,0,414,0,0,0,0,0,0,0,0,
60 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,510,510,0,0,0,0,510,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,109,0,0,0,456,0,0,0,0,0,0,0,0,0,0,0,0,456,0,0,0,0,0,0,0,0,
61 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,510,510,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
62 | 0,0,0,509,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
63 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
64 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
65 | </data>
66 |  </layer>
67 | </map>
68 | 


--------------------------------------------------------------------------------
/5_touch_controls.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Touch Controls - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: 'arcade',
 20 |             arcade: {
 21 |                 gravity: { y: 300 }
 22 |             }
 23 |         },
 24 |         scene: {
 25 |             preload: preload,
 26 |             create: create,
 27 |             update: update
 28 |         }
 29 |     };
 30 | 
 31 |     var player,
 32 |         coins,
 33 |         platforms,
 34 |         cursors,
 35 |         score = 0,
 36 |         scoreText,
 37 |         acceleration = 600,
 38 |         jumpVelocity = -330,
 39 |         wasStanding = false,
 40 |         edgeTimer = 0,
 41 |         jumping = false,
 42 |         //added some new variables here to deal with touch jumping
 43 |         prevPos = 0,
 44 |         yPos = 0,
 45 |         touchJump = false,
 46 |         touchJumpThreshold = 5;
 47 | 
 48 |     var game = new Phaser.Game(config);
 49 | 
 50 |     function preload() {
 51 |         this.load.setBaseURL("assets/");
 52 |         this.load.image("ground", "platform.jpg");
 53 |         this.load.image("coin", "coin.jpg");
 54 |         this.load.image("hero", "hero.jpg");
 55 |         this.load.image("logo", "digitherium-logo.jpg");
 56 |     }
 57 | 
 58 |     function create() {
 59 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 60 |         logo.alpha = 0.4;
 61 |         logo.setScale(0.5);
 62 | 
 63 |         this.input.addPointer(1);
 64 |         platforms = this.physics.add.staticGroup();
 65 | 
 66 |         platforms.create(400, 400, 'ground').setScale(2).refreshBody();
 67 |         platforms.create(50, 240, 'ground');
 68 |         platforms.create(750, 140, 'ground');
 69 | 
 70 |         player = this.physics.add.sprite(100, 350, 'hero');
 71 | 
 72 |         player.setCollideWorldBounds(true);
 73 | 
 74 |         //Set bounce to 0, so our hero just lands directly
 75 |         player.setBounce(0);
 76 |         //Set top speeds
 77 |         player.body.maxVelocity.x = 200;
 78 |         player.body.maxVelocity.y = 500;
 79 | 
 80 |         cursors = this.input.keyboard.createCursorKeys();
 81 | 
 82 |         coins = this.physics.add.group({
 83 |             key: 'coin',
 84 |             repeat: 11,
 85 |             setXY: { x: 12, y: 0, stepX: 70 }
 86 |         });
 87 | 
 88 |         coins.children.iterate(function(child) {
 89 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
 90 |         });
 91 | 
 92 |         scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '24px', fill: '#fff' });
 93 | 
 94 |         this.physics.add.collider(player, platforms);
 95 |         this.physics.add.collider(coins, platforms);
 96 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
 97 |     }
 98 | 
 99 |     function moveLeft() {
100 |         var standing = player.body.blocked.down || player.body.touching.down;
101 |         //if hero is on ground then use full acceleration
102 |         if (standing) {
103 |             player.setAccelerationX(-acceleration);
104 |         }
105 |         //if hero is in the air then accelerate slower
106 |         else {
107 |             player.setAccelerationX(-acceleration / 3);
108 |         }
109 |     }
110 | 
111 |     function moveRight() {
112 |         var standing = player.body.blocked.down || player.body.touching.down;
113 |         //if hero is on ground then use full acceleration
114 |         if (standing) {
115 |             player.setAccelerationX(acceleration);
116 |         }
117 |         //if hero is in the air then accelerate slower
118 |         else {
119 |             player.setAccelerationX(acceleration / 3);
120 |         }
121 |     }
122 | 
123 |     function update() {
124 |         var standing = player.body.blocked.down || player.body.touching.down;
125 |         //if left key is down then move left
126 |         if (cursors.left.isDown) {
127 |             moveLeft();
128 |         }
129 |         //same deal but for right arrow
130 |         else if (cursors.right.isDown) {
131 |             moveRight();
132 |         }
133 | 
134 |         //if either touch pointer is down. Two thumbs, two pointers
135 |         if (this.input.pointer1.isDown || this.input.pointer2.isDown) {
136 |             //work out half way point of our game 
137 |             var leftHalf = config.width / 2;
138 |             //if thumb is on the left hand side of the screen we are dealing with horizontal movement
139 |             if (this.input.pointer1.x < leftHalf || this.input.pointer2.x < leftHalf) {
140 |                 //reset pointer variable
141 |                 var myMovePointer = null;
142 |                 //here we get the pointer that is being used on the left hand side of screen. Depends which thumb they touched screen with first.
143 |                 if (this.input.pointer1.x < leftHalf && this.input.pointer1.isDown) {
144 |                     myMovePointer = this.input.pointer1;
145 |                 }
146 |                 if (this.input.pointer2.x < leftHalf && this.input.pointer2.isDown) {
147 |                     myMovePointer = this.input.pointer2;
148 |                 }
149 | 
150 |                 //if we have an active touch pointer on the left hand side of the screen then...
151 |                 if (myMovePointer) {
152 |                     //if thumb is in the left hand quarter of the screen then go left
153 |                     if (Math.floor(myMovePointer.x / (leftHalf / 2)) === 0) {
154 |                         moveLeft();
155 |                     }
156 |                     //If touch is to the right of the player move them right
157 |                     if (Math.floor(myMovePointer.x / (leftHalf / 2)) === 1) {
158 |                         moveRight();
159 |                     }
160 |                 }
161 |             }
162 |             //if thumb is on the right hand side of the screen we are dealing with vertical movement - i.e. jumping.
163 |             if (this.input.pointer1.x > leftHalf || this.input.pointer2.x > leftHalf) {
164 |                 //reset pointer variable
165 |                 var myJumpPointer = null;
166 |                 //get active touch pointer for this side of the screen
167 |                 if (this.input.pointer1.x > leftHalf && this.input.pointer1.isDown) {
168 |                     myJumpPointer = this.input.pointer1;
169 |                 }
170 |                 if (this.input.pointer2.x > leftHalf && this.input.pointer2.isDown) {
171 |                     myJumpPointer = this.input.pointer2;
172 |                 }
173 |                 //if we have a touch pointer on right hand side of screen...
174 |                 if (myJumpPointer) {
175 |                     //store last y position of touch pointer
176 |                     prevPos = yPos;
177 |                     //get new position of touch pointer
178 |                     yPos = myJumpPointer.y;
179 | 
180 |                     //if we have moved our thump upwards and it's more than our threshold then we set jump flag to true
181 |                     if (prevPos - yPos > touchJumpThreshold) {
182 |                         touchJump = true;
183 |                     }
184 |                 }
185 |             }
186 |         }
187 | 
188 |         //if not moving left or right via keys or touch device...
189 |         if (!cursors.right.isDown && !cursors.left.isDown && !this.input.pointer1.isDown && !this.input.pointer2.isDown) {
190 |             //if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
191 |             if (Math.abs(player.body.velocity.x) < 10 && Math.abs(player.body.velocity.x) > -10) {
192 |                 player.setVelocityX(0);
193 |                 player.setAccelerationX(0);
194 |             }
195 |             //if our hero isn't moving left or right then slow them down 
196 |             else {
197 |                 //this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number  
198 |                 player.setAccelerationX(((player.body.velocity.x > 0) ? -1 : 1) * acceleration / 3);
199 |             }
200 |         }
201 | 
202 | 
203 |         //get current time in seconds
204 |         var d = new Date();
205 |         var time = d.getTime();
206 | 
207 |         //if we have just left the ground set edge time for 100ms time
208 |         if (!standing && wasStanding) {
209 |             edgeTimer = time + 100;
210 |         }
211 | 
212 |         //if player is standing, or just fallen off a ledge (within our allowed grace time) and...
213 |         //either up key is press, or touchjump flag is set AND they are not already jumping then jump!
214 |         if ((standing || time <= edgeTimer) && (cursors.up.isDown || touchJump) && !jumping) {
215 |             player.setVelocityY(jumpVelocity);
216 |             jumping = true;
217 |         }
218 | 
219 |         //if not pressing up key...
220 |         if (!cursors.up.isDown) {
221 |             //if player is touching ground / platform then reset jump parametrs
222 |             if (player.body.touching.down) {
223 |                 jumping = false;
224 |                 touchJump = false;
225 |                 prevPos = 0;
226 |             }
227 |         }
228 |         wasStanding = standing;
229 |     }
230 | 
231 |     function collectCoin(player, coin) {
232 |         coin.disableBody(true, true);
233 | 
234 |         score += 10;
235 |         scoreText.setText('Score: ' + score);
236 |     }
237 |     </script>
238 | </body>
239 | 
240 | </html>


--------------------------------------------------------------------------------
/assets/map/simplemap.json:
--------------------------------------------------------------------------------
 1 | { "height":25,
 2 |  "layers":[
 3 |         {
 4 |          "data":[74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 74, 116, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 72, 73, 72, 75, 72, 73, 75, 72, 72, 75, 72, 73, 75, 72, 72, 158, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 116, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 158, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 46, 47, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 88, 89, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 171, 172, 173, 174, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 213, 214, 215, 216, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 255, 256, 257, 258, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 527, 527, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 297, 298, 299, 300, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 325, 326, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 325, 326, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 325, 326, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 325, 326, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 325, 326, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 325, 326, 0, 0, 0, 0, 0, 0, 0, 0, 171, 172, 173, 174, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 403, 404, 406, 406, 406, 0, 0, 0, 0, 0, 0, 0, 213, 74, 214, 214, 214, 300, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 445, 446, 448, 448, 448, 0, 0, 0, 0, 0, 0, 255, 74, 74, 214, 214, 214, 214, 173, 172, 552, 551, 552, 551, 552, 551, 552, 551, 172, 554, 304, 305, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 183, 304, 305, 432, 516, 434, 516, 434, 516, 434, 516, 436, 437, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 436, 437, 186, 149, 436, 437, 432, 434, 186, 0, 0, 0, 0, 0, 297, 74, 74, 74, 214, 214, 421, 256, 421, 421, 421, 214, 214, 214, 256, 214, 214, 214, 214, 596, 349, 350, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 349, 350, 228, 228, 228, 518, 228, 228, 228, 228, 478, 479, 432, 179, 434, 179, 179, 518, 179, 179, 434, 179, 179, 432, 478, 479, 228, 228, 478, 479, 228, 228, 228, 551, 552, 552, 551, 551, 214, 214, 214, 214, 594, 214, 214, 214, 214, 214, 214, 214, 594, 214, 214, 256, 256, 594, 214, 596, 307, 308, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 307, 308, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 214, 214, 214, 214, 594, 214, 214, 214, 594, 214, 256, 214, 594, 214, 214, 214, 214, 214, 214, 214, 214, 214, 214, 214, 596, 349, 350, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 349, 350, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228, 228],
 5 |          "height":25,
 6 |          "name":"platforms",
 7 |          "opacity":1,
 8 |          "type":"tilelayer",
 9 |          "visible":true,
10 |          "width":80,
11 |          "x":0,
12 |          "y":0
13 |         }, 
14 |         {
15 |          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 330, 0, 0, 0, 0, 0, 0, 0, 0, 315, 315, 231, 231, 231, 231, 231, 231, 231, 231, 231, 231, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 315, 231, 231, 231, 231, 231, 231, 231, 231, 231, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 414, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 231, 231, 231, 231, 231, 231, 231, 231, 231, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 315, 231, 231, 231, 231, 231, 231, 231, 231, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 370, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 315, 276, 315, 315, 315, 315, 315, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 412, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 317, 318, 0, 0, 246, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 454, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 246, 0, 0, 0, 0, 0, 0, 0, 0, 0, 114, 115, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 156, 157, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 370, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 412, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 454, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 414, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 414, 0, 0, 0, 0, 0, 0, 509, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 414, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 414, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 414, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 370, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 370, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 412, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 412, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 454, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 454, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 414, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 414, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 510, 510, 0, 0, 0, 0, 510, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 109, 0, 0, 0, 456, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 456, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 510, 510, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 509, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
16 |          "height":25,
17 |          "name":"foreground",
18 |          "opacity":1,
19 |          "type":"tilelayer",
20 |          "visible":true,
21 |          "width":80,
22 |          "x":0,
23 |          "y":0
24 |         }],
25 |  "nextobjectid":97,
26 |  "orientation":"orthogonal",
27 |  "renderorder":"right-down",
28 |  "tileheight":16,
29 |  "tilesets":[
30 |         {
31 |          "columns":42,
32 |          "firstgid":1,
33 |          "image":"environment-tiles.png",
34 |          "imageheight":256,
35 |          "imagewidth":672,
36 |          "margin":0,
37 |          "name":"environment-tiles",
38 |          "spacing":0,
39 |          "tilecount":672,
40 |          "tileheight":16,
41 |          "tilewidth":16
42 |         }, 
43 |         {
44 |          "columns":28,
45 |          "firstgid":673,
46 |          "image":"..\/..\/..\/..\/..\/..\/Users\/tombo\/Downloads\/Grotto-escape-2-files\/PNG\/environment-background.png",
47 |          "imageheight":160,
48 |          "imagewidth":448,
49 |          "margin":0,
50 |          "name":"environment-background",
51 |          "spacing":0,
52 |          "tilecount":280,
53 |          "tileheight":16,
54 |          "tilewidth":16
55 |         }],
56 |  "tilewidth":16,
57 |  "version":1,
58 |  "width":80
59 | }


--------------------------------------------------------------------------------
/6_improved_touch_controls.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Improved Touch Controls - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: "arcade",
 20 |             arcade: {
 21 |                 gravity: { y: 300 }
 22 |             }
 23 |         },
 24 |         scene: {
 25 |             preload: preload,
 26 |             create: create,
 27 |             update: update
 28 |         }
 29 |     };
 30 | 
 31 |     var player,
 32 |         coins,
 33 |         platforms,
 34 |         cursors,
 35 |         score = 0,
 36 |         scoreText,
 37 |         acceleration = 600,
 38 |         jumpVelocity = -330,
 39 |         wasStanding = false,
 40 |         edgeTimer = 0,
 41 |         jumping = false,
 42 |         prevPos = 0,
 43 |         yPos = 0,
 44 |         touchJump = false,
 45 |         touchJumpThreshold = 5,
 46 |         touchSlider,
 47 |         sliderBar,
 48 |         sliderKnob,
 49 |         touchMoving = false,
 50 |         touchMoveThreshold = 3,
 51 |         largeThumbMoveAcross = 25,
 52 |         thumbSizeOffset = 60,
 53 |         startX;
 54 | 
 55 | 
 56 | 
 57 |     var game = new Phaser.Game(config);
 58 | 
 59 |     function preload() {
 60 |         this.load.setBaseURL("assets/");
 61 |         this.load.image("ground", "platform.jpg");
 62 |         this.load.image("coin", "coin.jpg");
 63 |         this.load.image("hero", "hero.jpg");
 64 |         this.load.image("logo", "digitherium-logo.jpg");
 65 |         this.load.image("touch-slider", "touch-slider.png");
 66 |         this.load.image("touch-knob", "touch-knob.png");
 67 |     }
 68 | 
 69 |     function create() {
 70 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 71 |         logo.alpha = 0.4;
 72 |         logo.setScale(0.5);
 73 | 
 74 |         this.input.addPointer(1);
 75 |         platforms = this.physics.add.staticGroup();
 76 | 
 77 |         platforms.create(400, 400, "ground").setScale(2).refreshBody();
 78 |         platforms.create(50, 240, "ground");
 79 |         platforms.create(750, 140, "ground");
 80 | 
 81 |         player = this.physics.add.sprite(100, 350, "hero");
 82 | 
 83 |         player.setCollideWorldBounds(true);
 84 | 
 85 |         //Set bounce to 0, so our hero just lands directly
 86 |         player.setBounce(0);
 87 |         //Set top speeds
 88 |         player.body.maxVelocity.x = 200;
 89 |         player.body.maxVelocity.y = 500;
 90 | 
 91 |         cursors = this.input.keyboard.createCursorKeys();
 92 | 
 93 |         coins = this.physics.add.group({
 94 |             key: "coin",
 95 |             repeat: 11,
 96 |             setXY: { x: 12, y: 0, stepX: 70 }
 97 |         });
 98 | 
 99 |         coins.children.iterate(function(child) {
100 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
101 |         });
102 | 
103 |         scoreText = this.add.text(16, 16, "score: 0", {
104 |             fontSize: "24px",
105 |             fill: "#fff"
106 |         });
107 | 
108 |         this.physics.add.collider(player, platforms);
109 |         this.physics.add.collider(coins, platforms);
110 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
111 | 
112 |         buildTouchSlider(this);
113 |     }
114 | 
115 |     function buildTouchSlider(game) {
116 |         sliderBar = game.add.sprite(0, 0, "touch-slider");
117 |         sliderKnob = game.add.sprite(0, 0, "touch-knob");
118 | 
119 |         touchSlider = game.add.container(100, 450);
120 |         touchSlider.add(sliderBar);
121 |         touchSlider.add(sliderKnob);
122 |         touchSlider.alpha = 0;
123 |     }
124 | 
125 |     function moveLeft(acceleration) {
126 |         var standing = player.body.blocked.down || player.body.touching.down;
127 |         //if hero is on ground then use full acceleration
128 |         if (standing) {
129 |             player.setAccelerationX(-acceleration);
130 |         } else {
131 |             //if hero is in the air then accelerate slower
132 |             player.setAccelerationX(-acceleration / 3);
133 |         }
134 |     }
135 | 
136 |     function moveRight(acceleration) {
137 |         var standing = player.body.blocked.down || player.body.touching.down;
138 |         //if hero is on ground then use full acceleration
139 |         if (standing) {
140 |             player.setAccelerationX(acceleration);
141 |         } else {
142 |             //if hero is in the air then accelerate slower
143 |             player.setAccelerationX(acceleration / 3);
144 |         }
145 |     }
146 | 
147 |     function update() {
148 |         var standing = player.body.blocked.down || player.body.touching.down;
149 |         //if left key is down then move left
150 |         if (cursors.left.isDown) {
151 |             moveLeft(acceleration);
152 |         } else if (cursors.right.isDown) {
153 |             //same deal but for right arrow
154 |             moveRight(acceleration);
155 |         }
156 | 
157 |         //if either touch pointer is down. Two thumbs, two pointers
158 |         if (this.input.pointer1.isDown || this.input.pointer2.isDown) {
159 |             //work out half way point of our game
160 |             var leftHalf = config.width / 2;
161 | 
162 |             //Left hand side - horizontal movement
163 |             //if thumb is on the left hand side of the screen we are dealing with horizontal movement
164 |             if (this.input.pointer1.x < leftHalf || this.input.pointer2.x < leftHalf) {
165 |                 //reset pointer variable
166 |                 var myMovePointer = null;
167 |                 //here we get the pointer that is being used on the left hand side of screen. Depends which thumb they touched screen with first.
168 |                 if (this.input.pointer1.x < leftHalf && this.input.pointer1.isDown) {
169 |                     myMovePointer = this.input.pointer1;
170 |                 }
171 |                 if (this.input.pointer2.x < leftHalf && this.input.pointer2.isDown) {
172 |                     myMovePointer = this.input.pointer2;
173 |                 }
174 | 
175 |                 //if we have an active touch pointer on the left hand side of the screen then...
176 |                 if (myMovePointer) {
177 |                     //if touchSlide is not already showing then
178 |                     if (!touchSlider.alpha) {
179 |                         //make it visible
180 |                         touchSlider.alpha = 1;
181 |                         //position touchSlider to be where the users thumb or finger is
182 |                         touchSlider.x = myMovePointer.x;
183 |                         //with the Y pos we add a thumbSizeOffset so it's above the users thumb not hidden under it
184 |                         touchSlider.y = myMovePointer.y - thumbSizeOffset;
185 |                         //set our start point and reset slider display
186 |                         startX = myMovePointer.x;
187 |                         sliderKnob.x = 0;
188 |                     }
189 | 
190 |                     //if thumb has moved left or right of where we started then move
191 |                     if (myMovePointer.x < startX || myMovePointer.x > startX) {
192 |                         //work out how far thumb has moved. Is this a big enough movement?
193 |                         var movement = 0;
194 |                         if (myMovePointer.x < startX) movement = startX - myMovePointer.x;
195 |                         if (myMovePointer.x > startX) movement = myMovePointer.x - startX;
196 |                         //If move is significant enough then move our character
197 |                         if (movement > touchMoveThreshold) {
198 |                             //set flag as we are definitely moving
199 |                             touchMoving = true;
200 | 
201 |                             //set slider knob position to be half way to edge
202 |                             var sliderPos = 0;
203 |                             //left
204 |                             if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 4);
205 |                             //right
206 |                             if (myMovePointer.x > startX) sliderPos = sliderBar.width / 4;
207 | 
208 |                             //set acceleration to be an 8th of normal
209 |                             var tmpAcceleration = acceleration / 8;
210 | 
211 |                             //if thumb has moved quite a lot, then go faster
212 |                             if (movement > largeThumbMoveAcross) {
213 |                                 //the knob position should be at the edge as we're at full tilt
214 |                                 if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 2);
215 |                                 if (myMovePointer.x > startX) sliderPos = sliderBar.width / 2;
216 |                                 //acceleration is normal
217 |                                 tmpAcceleration = acceleration;
218 |                             }
219 | 
220 |                             //tween slider knob to position we just worked out
221 |                             var tween = this.tweens.add({
222 |                                 targets: sliderKnob,
223 |                                 x: sliderPos,
224 |                                 ease: "Power1",
225 |                                 duration: 300
226 |                             });
227 |                             if (myMovePointer.x < startX) moveLeft(tmpAcceleration);
228 |                             if (myMovePointer.x > startX) moveRight(tmpAcceleration);
229 |                         } else {
230 |                             //If move is really, really small then we don't count it. Stop moving
231 |                             //set moving flag to false
232 |                             touchMoving = false;
233 |                             //reset slider knob to center position
234 |                             var tween = this.tweens.add({
235 |                                 targets: sliderKnob,
236 |                                 x: 0,
237 |                                 ease: "Power1",
238 |                                 duration: 300
239 |                             });
240 |                         }
241 |                     }
242 |                 }
243 |             }
244 | 
245 |             //Right hand side - Touch Jumping
246 |             //if thumb is on the right hand side of the screen we are dealing with vertical movement - i.e. jumping.
247 |             if (this.input.pointer1.x > leftHalf || this.input.pointer2.x > leftHalf) {
248 |                 //reset pointer variable
249 |                 var myJumpPointer = null;
250 |                 //get active touch pointer for this side of the screen
251 |                 if (this.input.pointer1.x > leftHalf && this.input.pointer1.isDown) {
252 |                     myJumpPointer = this.input.pointer1;
253 |                 }
254 |                 if (this.input.pointer2.x > leftHalf && this.input.pointer2.isDown) {
255 |                     myJumpPointer = this.input.pointer2;
256 |                 }
257 |                 //if we have a touch pointer on right hand side of screen...
258 |                 if (myJumpPointer) {
259 |                     //store last y position of touch pointer
260 |                     prevPos = yPos;
261 |                     //get new position of touch pointer
262 |                     yPos = myJumpPointer.y;
263 | 
264 |                     //if we have moved our thump upwards and it's more than our threshold then we set jump flag to true
265 |                     if (prevPos - yPos > touchJumpThreshold) {
266 |                         touchJump = true;
267 |                     }
268 |                 }
269 |             }
270 |             //neither thumb is down so reset touch movement variables and hide touchSlider
271 |         } else {
272 |             touchSlider.alpha = 0;
273 |             startX = 0;
274 |             touchMoving = false;
275 |         }
276 | 
277 |         //if not moving left or right via keys or touch device...
278 |         if (!cursors.right.isDown && !cursors.left.isDown && !touchMoving) {
279 |             //if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
280 |             if (
281 |                 Math.abs(player.body.velocity.x) < 10 &&
282 |                 Math.abs(player.body.velocity.x) > -10
283 |             ) {
284 |                 player.setVelocityX(0);
285 |                 player.setAccelerationX(0);
286 |             } else {
287 |                 //if our hero isn't moving left or right then slow them down
288 |                 //this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number
289 |                 player.setAccelerationX(
290 |                     (player.body.velocity.x > 0 ? -1 : 1) * acceleration / 3
291 |                 );
292 |             }
293 |         }
294 | 
295 |         //get current time in seconds
296 |         var d = new Date();
297 |         var time = d.getTime();
298 | 
299 |         //if we have just left the ground set edge time for 100ms time
300 |         if (!standing && wasStanding) {
301 |             edgeTimer = time + 100;
302 |         }
303 | 
304 |         //if player is standing, or just fallen off a ledge (within our allowed grace time) and...
305 |         //either up key is press, or touchjump flag is set AND they are not already jumping then jump!
306 |         if (
307 |             (standing || time <= edgeTimer) &&
308 |             (cursors.up.isDown || touchJump) &&
309 |             !jumping
310 |         ) {
311 |             player.setVelocityY(jumpVelocity);
312 |             jumping = true;
313 |         }
314 | 
315 |         //if not pressing up key...
316 |         if (!cursors.up.isDown) {
317 |             //if player is touching ground / platform then reset jump parametrs
318 |             if (player.body.touching.down) {
319 |                 jumping = false;
320 |                 touchJump = false;
321 |                 prevPos = 0;
322 |             }
323 |         }
324 |         wasStanding = standing;
325 |     }
326 | 
327 |     function collectCoin(player, coin) {
328 |         coin.disableBody(true, true);
329 | 
330 |         score += 10;
331 |         scoreText.setText("Score: " + score);
332 |     }
333 |     </script>
334 | </body>
335 | 
336 | </html>


--------------------------------------------------------------------------------
/7_animating_coins.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Animating Coins - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: "arcade",
 20 |             arcade: {
 21 |                 gravity: { y: 300 }
 22 |             }
 23 |         },
 24 |         scene: {
 25 |             preload: preload,
 26 |             create: create,
 27 |             update: update
 28 |         }
 29 |     };
 30 | 
 31 |     var player,
 32 |         coins,
 33 |         scoreCoin,
 34 |         scoreCoinTimeline,
 35 |         platforms,
 36 |         cursors,
 37 |         score = 0,
 38 |         scoreText,
 39 |         acceleration = 600,
 40 |         jumpVelocity = -330,
 41 |         wasStanding = false,
 42 |         edgeTimer = 0,
 43 |         jumping = false,
 44 |         prevPos = 0,
 45 |         yPos = 0,
 46 |         touchJump = false,
 47 |         touchJumpThreshold = 5,
 48 |         touchSlider,
 49 |         sliderBar,
 50 |         sliderKnob,
 51 |         touchMoving = false,
 52 |         touchMoveThreshold = 3,
 53 |         largeThumbMoveAcross = 25,
 54 |         thumbSizeOffset = 60,
 55 |         startX;
 56 | 
 57 |     var game = new Phaser.Game(config);
 58 | 
 59 |     function preload() {
 60 |         this.load.setBaseURL("assets/");
 61 |         this.load.image("ground", "platform.jpg");
 62 |         this.load.image("coin", "coin.jpg");
 63 |         this.load.image("hero", "hero.jpg");
 64 |         this.load.image("logo", "digitherium-logo.jpg");
 65 |         this.load.image("touch-slider", "touch-slider.png");
 66 |         this.load.image("touch-knob", "touch-knob.png");
 67 |     }
 68 | 
 69 |     function create() {
 70 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 71 |         logo.alpha = 0.4;
 72 |         logo.setScale(0.5);
 73 |         this.input.addPointer(1);
 74 |         platforms = this.physics.add.staticGroup();
 75 |         platforms.create(400, 400, "ground").setScale(2).refreshBody();
 76 |         platforms.create(50, 240, "ground");
 77 |         platforms.create(750, 140, "ground");
 78 | 
 79 |         player = this.physics.add.sprite(100, 350, "hero");
 80 | 
 81 |         player.setCollideWorldBounds(true);
 82 |         buildTouchSlider(this);
 83 |         //Set bounce to 0, so our hero just lands directly
 84 |         player.setBounce(0);
 85 |         //Set top speeds
 86 |         player.body.maxVelocity.x = 200;
 87 |         player.body.maxVelocity.y = 500;
 88 | 
 89 |         cursors = this.input.keyboard.createCursorKeys();
 90 | 
 91 |         coins = this.physics.add.group({
 92 |             key: "coin",
 93 |             repeat: 11,
 94 |             setXY: { x: 12, y: 0, stepX: 70 }
 95 |         });
 96 | 
 97 |         coins.children.iterate(function(child) {
 98 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
 99 |         });
100 | 
101 |         scoreCoin = this.add.sprite(30, 32, "coin");
102 |         scoreCoin.setOrigin(0.5, 0.5);
103 |         scoreCoin.scaleX = 0.5;
104 |         scoreCoin.scaleY = 0.5;
105 |         scoreText = this.add.text(46, 20, "0", { fontSize: "24px", fill: "#fff" });
106 | 
107 |         this.physics.add.collider(player, platforms);
108 |         this.physics.add.collider(coins, platforms);
109 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
110 |     }
111 | 
112 |     function buildTouchSlider(game) {
113 |         sliderBar = game.add.sprite(0, 0, "touch-slider");
114 |         sliderKnob = game.add.sprite(0, 0, "touch-knob");
115 | 
116 |         touchSlider = game.add.container(100, 450);
117 |         touchSlider.add(sliderBar);
118 |         touchSlider.add(sliderKnob);
119 |         touchSlider.alpha = 0;
120 |     }
121 | 
122 |     function moveLeft(acceleration) {
123 |         var standing = player.body.blocked.down || player.body.touching.down;
124 |         //if hero is on ground then use full acceleration
125 |         if (standing) {
126 |             player.setAccelerationX(-acceleration);
127 |         } else {
128 |             //if hero is in the air then accelerate slower
129 |             player.setAccelerationX(-acceleration / 3);
130 |         }
131 |     }
132 | 
133 |     function moveRight(acceleration) {
134 |         var standing = player.body.blocked.down || player.body.touching.down;
135 |         //if hero is on ground then use full acceleration
136 |         if (standing) {
137 |             player.setAccelerationX(acceleration);
138 |         } else {
139 |             //if hero is in the air then accelerate slower
140 |             player.setAccelerationX(acceleration / 3);
141 |         }
142 |     }
143 | 
144 |     function update() {
145 |         var standing = player.body.blocked.down || player.body.touching.down;
146 |         //if left key is down then move left
147 |         if (cursors.left.isDown) {
148 |             moveLeft(acceleration);
149 |         } else if (cursors.right.isDown) {
150 |             //same deal but for right arrow
151 |             moveRight(acceleration);
152 |         }
153 | 
154 |         //if either touch pointer is down. Two thumbs, two pointers
155 |         if (this.input.pointer1.isDown || this.input.pointer2.isDown) {
156 |             //work out half way point of our game
157 |             var leftHalf = config.width / 2;
158 | 
159 |             //Left hand side - horizontal movement
160 |             //if thumb is on the left hand side of the screen we are dealing with horizontal movement
161 |             if (this.input.pointer1.x < leftHalf || this.input.pointer2.x < leftHalf) {
162 |                 //reset pointer variable
163 |                 var myMovePointer = null;
164 |                 //here we get the pointer that is being used on the left hand side of screen. Depends which thumb they touched screen with first.
165 |                 if (this.input.pointer1.x < leftHalf && this.input.pointer1.isDown) {
166 |                     myMovePointer = this.input.pointer1;
167 |                 }
168 |                 if (this.input.pointer2.x < leftHalf && this.input.pointer2.isDown) {
169 |                     myMovePointer = this.input.pointer2;
170 |                 }
171 | 
172 |                 //if we have an active touch pointer on the left hand side of the screen then...
173 |                 if (myMovePointer) {
174 |                     //if touchSlide is not already showing then
175 |                     if (!touchSlider.alpha) {
176 |                         //make it visible
177 |                         touchSlider.alpha = 1;
178 |                         //position touchSlider to be where the users thumb or finger is
179 |                         touchSlider.x = myMovePointer.x;
180 |                         //with the Y pos we add a thumbSizeOffset so it's above the users thumb not hidden under it
181 |                         touchSlider.y = myMovePointer.y - thumbSizeOffset;
182 |                         //set our start point and reset slider display
183 |                         startX = myMovePointer.x;
184 |                         sliderKnob.x = 0;
185 |                     }
186 | 
187 |                     //if thumb has moved left or right of where we started then move
188 |                     if (myMovePointer.x < startX || myMovePointer.x > startX) {
189 |                         //work out how far thumb has moved. Is this a big enough movement?
190 |                         var movement = 0;
191 |                         if (myMovePointer.x < startX) movement = startX - myMovePointer.x;
192 |                         if (myMovePointer.x > startX) movement = myMovePointer.x - startX;
193 |                         //If move is significant enough then move our character
194 |                         if (movement > touchMoveThreshold) {
195 |                             //set flag as we are definitely moving
196 |                             touchMoving = true;
197 | 
198 |                             //set slider knob position to be half way to edge
199 |                             var sliderPos = 0;
200 |                             //left
201 |                             if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 4);
202 |                             //right
203 |                             if (myMovePointer.x > startX) sliderPos = sliderBar.width / 4;
204 | 
205 |                             //set acceleration to be an 8th of normal
206 |                             var tmpAcceleration = acceleration / 8;
207 | 
208 |                             //if thumb has moved quite a lot, then go faster
209 |                             if (movement > largeThumbMoveAcross) {
210 |                                 //the knob position should be at the edge as we're at full tilt
211 |                                 if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 2);
212 |                                 if (myMovePointer.x > startX) sliderPos = sliderBar.width / 2;
213 |                                 //acceleration is normal
214 |                                 tmpAcceleration = acceleration;
215 |                             }
216 | 
217 |                             //tween slider knob to position we just worked out
218 |                             var tween = this.tweens.add({
219 |                                 targets: sliderKnob,
220 |                                 x: sliderPos,
221 |                                 ease: "Power1",
222 |                                 duration: 300
223 |                             });
224 |                             if (myMovePointer.x < startX) moveLeft(tmpAcceleration);
225 |                             if (myMovePointer.x > startX) moveRight(tmpAcceleration);
226 |                         } else {
227 |                             //If move is really, really small then we don't count it. Stop moving
228 |                             //set moving flag to false
229 |                             touchMoving = false;
230 |                             //reset slider knob to center position
231 |                             var tween = this.tweens.add({
232 |                                 targets: sliderKnob,
233 |                                 x: 0,
234 |                                 ease: "Power1",
235 |                                 duration: 300
236 |                             });
237 |                         }
238 |                     }
239 |                 }
240 |             }
241 | 
242 |             //Right hand side - Touch Jumping
243 |             //if thumb is on the right hand side of the screen we are dealing with vertical movement - i.e. jumping.
244 |             if (this.input.pointer1.x > leftHalf || this.input.pointer2.x > leftHalf) {
245 |                 //reset pointer variable
246 |                 var myJumpPointer = null;
247 |                 //get active touch pointer for this side of the screen
248 |                 if (this.input.pointer1.x > leftHalf && this.input.pointer1.isDown) {
249 |                     myJumpPointer = this.input.pointer1;
250 |                 }
251 |                 if (this.input.pointer2.x > leftHalf && this.input.pointer2.isDown) {
252 |                     myJumpPointer = this.input.pointer2;
253 |                 }
254 |                 //if we have a touch pointer on right hand side of screen...
255 |                 if (myJumpPointer) {
256 |                     //store last y position of touch pointer
257 |                     prevPos = yPos;
258 |                     //get new position of touch pointer
259 |                     yPos = myJumpPointer.y;
260 | 
261 |                     //if we have moved our thump upwards and it's more than our threshold then we set jump flag to true
262 |                     if (prevPos - yPos > touchJumpThreshold) {
263 |                         touchJump = true;
264 |                     }
265 |                 }
266 |             }
267 |             //neither thumb is down so reset touch movement variables and hide touchSlider
268 |         } else {
269 |             touchSlider.alpha = 0;
270 |             startX = 0;
271 |             touchMoving = false;
272 |         }
273 | 
274 |         //if not moving left or right via keys or touch device...
275 |         if (!cursors.right.isDown && !cursors.left.isDown && !touchMoving) {
276 |             //if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
277 |             if (
278 |                 Math.abs(player.body.velocity.x) < 10 &&
279 |                 Math.abs(player.body.velocity.x) > -10
280 |             ) {
281 |                 player.setVelocityX(0);
282 |                 player.setAccelerationX(0);
283 |             } else {
284 |                 //if our hero isn't moving left or right then slow them down
285 |                 //this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number
286 |                 player.setAccelerationX(
287 |                     (player.body.velocity.x > 0 ? -1 : 1) * acceleration / 3
288 |                 );
289 |             }
290 |         }
291 | 
292 |         //get current time in seconds
293 |         var d = new Date();
294 |         var time = d.getTime();
295 | 
296 |         //if we have just left the ground set edge time for 100ms time
297 |         if (!standing && wasStanding) {
298 |             edgeTimer = time + 100;
299 |         }
300 | 
301 |         //if player is standing, or just fallen off a ledge (within our allowed grace time) and...
302 |         //either up key is press, or touchjump flag is set AND they are not already jumping then jump!
303 |         if (
304 |             (standing || time <= edgeTimer) &&
305 |             (cursors.up.isDown || touchJump) &&
306 |             !jumping
307 |         ) {
308 |             player.setVelocityY(jumpVelocity);
309 |             jumping = true;
310 |         }
311 | 
312 |         //if not pressing up key...
313 |         if (!cursors.up.isDown) {
314 |             //if player is touching ground / platform then reset jump parametrs
315 |             if (player.body.touching.down) {
316 |                 jumping = false;
317 |                 touchJump = false;
318 |                 prevPos = 0;
319 |             }
320 |         }
321 |         wasStanding = standing;
322 |     }
323 | 
324 |     function collectCoin(player, coin) {
325 |         //stop coin for being collected twice, as it will stick around on the screen as it animnates
326 |         coin.disableBody(false, false);
327 | 
328 |         //tween coin to score coin in corner shrink
329 |         var tween = this.tweens.add({
330 |             targets: coin,
331 |             alpha: 0.3,
332 |             angle: 720,
333 |             x: scoreCoin.x,
334 |             y: scoreCoin.y,
335 |             scaleX: 0.5,
336 |             scaleY: 0.5,
337 |             ease: "Linear",
338 |             duration: 500,
339 |             onComplete: function() {
340 |                 destroyGameObject(coin);
341 |             }
342 |         });
343 | 
344 |         //check if we already have an animation
345 |         if (scoreCoinTimeline) {
346 |             //if animation isn't currently running, then run again
347 |             if (scoreCoinTimeline.progress == 1) {
348 |                 animateScoreCoin(this);
349 |             }
350 |         } else {
351 |             //no animation to create one
352 |             animateScoreCoin(this);
353 |         }
354 |         score += 10;
355 |         scoreText.setText(score);
356 |     }
357 | 
358 |     //rotate score coin and make bigger before shrinking again
359 |     function animateScoreCoin(game) {
360 |         scoreCoinTimeline = game.tweens.timeline({
361 |             targets: scoreCoin,
362 |             duration: 100,
363 |             tweens: [{
364 |                     scaleX: 0.8,
365 |                     scaleY: 0.8,
366 |                     angle: "+=45"
367 |                 },
368 |                 {
369 |                     scaleX: 0.5,
370 |                     scaleY: 0.5,
371 |                     angle: "+=45"
372 |                 }
373 |             ]
374 |         });
375 |     }
376 | 
377 |     function destroyGameObject(gameObject) {
378 |         // Removes any game object from the screen
379 |         gameObject.destroy();
380 |     }
381 |     </script>
382 | </body>
383 | 
384 | </html>


--------------------------------------------------------------------------------
/8_baddies.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Baddies - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: "arcade",
 20 |             arcade: {
 21 |                 gravity: { y: 300 }
 22 |             }
 23 |         },
 24 |         scene: {
 25 |             preload: preload,
 26 |             create: create,
 27 |             update: update
 28 |         }
 29 |     };
 30 | 
 31 |     var player,
 32 |         baddie,
 33 |         coins,
 34 |         scoreCoin,
 35 |         scoreCoinTimeline,
 36 |         platforms,
 37 |         cursors,
 38 |         score = 0,
 39 |         scoreText,
 40 |         acceleration = 600,
 41 |         jumpVelocity = -330,
 42 |         wasStanding = false,
 43 |         edgeTimer = 0,
 44 |         jumping = false,
 45 |         prevPos = 0,
 46 |         yPos = 0,
 47 |         touchJump = false,
 48 |         touchJumpThreshold = 5,
 49 |         touchSlider,
 50 |         sliderBar,
 51 |         sliderKnob,
 52 |         touchMoving = false,
 53 |         touchMoveThreshold = 3,
 54 |         largeThumbMoveAcross = 25,
 55 |         thumbSizeOffset = 60,
 56 |         startX;
 57 | 
 58 |     var game = new Phaser.Game(config);
 59 | 
 60 |     function preload() {
 61 |         this.load.setBaseURL("assets/");
 62 |         this.load.image("ground", "platform.jpg");
 63 |         this.load.image("coin", "coin.jpg");
 64 |         this.load.image("hero", "hero.jpg");
 65 |         this.load.image("baddie", "baddie.jpg");
 66 |         this.load.image("logo", "digitherium-logo.jpg");
 67 |         this.load.image("touch-slider", "touch-slider.png");
 68 |         this.load.image("touch-knob", "touch-knob.png");
 69 |     }
 70 | 
 71 |     function create() {
 72 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 73 |         logo.alpha = 0.4;
 74 |         logo.setScale(0.5);
 75 |         this.input.addPointer(1);
 76 |         platforms = this.physics.add.staticGroup();
 77 | 
 78 |         platforms.create(400, 400, "ground").setScale(2).refreshBody();
 79 |         platforms.create(50, 240, "ground");
 80 |         platforms.create(750, 140, "ground");
 81 | 
 82 |         player = this.physics.add.sprite(100, 350, "hero");
 83 | 
 84 |         player.setCollideWorldBounds(true);
 85 |         buildTouchSlider(this);
 86 |         //Set bounce to 0, so our hero just lands directly
 87 |         player.setBounce(0);
 88 |         //Set top speeds
 89 |         player.body.maxVelocity.x = 200;
 90 |         player.body.maxVelocity.y = 500;
 91 | 
 92 |         baddie = this.physics.add.sprite(620, 352, 'baddie');
 93 |         baddie.setCollideWorldBounds(true);
 94 | 
 95 | 
 96 | 
 97 |         cursors = this.input.keyboard.createCursorKeys();
 98 | 
 99 |         coins = this.physics.add.group({
100 |             key: "coin",
101 |             repeat: 11,
102 |             setXY: { x: 12, y: 0, stepX: 70 }
103 |         });
104 | 
105 |         coins.children.iterate(function(child) {
106 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
107 |         });
108 | 
109 |         scoreCoin = this.add.sprite(30, 32, "coin");
110 |         scoreCoin.setOrigin(0.5, 0.5);
111 |         scoreCoin.scaleX = 0.5;
112 |         scoreCoin.scaleY = 0.5;
113 |         scoreText = this.add.text(46, 20, "0", { fontSize: "24px", fill: "#fff" });
114 | 
115 |         this.physics.add.collider(player, platforms);
116 |         this.physics.add.collider(baddie, platforms);
117 |         this.physics.add.collider(coins, platforms);
118 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
119 |         this.physics.add.overlap(player, baddie, hitBaddie, null, this);
120 |     }
121 | 
122 |     function hitBaddie(player, baddie) {
123 |         //if the collision is on the baddies head
124 |         if (baddie.body.touching.up) {
125 |             // set baddie as being hit by removing physics
126 |             baddie.disableBody(false, false);
127 |             //make player jump up in the air a little bit
128 |             player.setVelocityY(jumpVelocity);
129 | 
130 |             //animate baddie, fading out and getting bigger
131 |             var tween = this.tweens.add({
132 |                 targets: baddie,
133 |                 alpha: 0.3,
134 |                 scaleX: 1.5,
135 |                 scaleY: 1.5,
136 |                 ease: 'Linear',
137 |                 duration: 200,
138 |                 onComplete: function() {
139 |                     //remove the game object
140 |                     destroyGameObject(baddie);
141 |                 },
142 |             });
143 |         }
144 |         //otherwise you've hit baddie, but not on the head. This makes you die
145 |         else {
146 |             //set player to dead
147 |             player.disableBody(false, false);
148 | 
149 |             //animate players death scene
150 |             var tween = this.tweens.add({
151 |                 targets: player,
152 |                 alpha: 0.3,
153 |                 scaleX: 1.1,
154 |                 scaleY: 1.1,
155 |                 angle: 90,
156 |                 x: player.x - 20,
157 |                 y: player.y - 20,
158 |                 ease: 'Linear',
159 |                 duration: 200,
160 |                 onComplete: function() {
161 |                     restartGame(this);
162 |                 },
163 |                 onCompleteScope: this
164 |             });
165 |         }
166 |     }
167 | 
168 |     function restartGame(game) {
169 |         game.scene.restart();
170 |     }
171 | 
172 |     function buildTouchSlider(game) {
173 |         sliderBar = game.add.sprite(0, 0, "touch-slider");
174 |         sliderKnob = game.add.sprite(0, 0, "touch-knob");
175 | 
176 |         touchSlider = game.add.container(100, 450);
177 |         touchSlider.add(sliderBar);
178 |         touchSlider.add(sliderKnob);
179 |         touchSlider.alpha = 0;
180 |     }
181 | 
182 |     function moveLeft(acceleration) {
183 |         var standing = player.body.blocked.down || player.body.touching.down;
184 |         //if hero is on ground then use full acceleration
185 |         if (standing) {
186 |             player.setAccelerationX(-acceleration);
187 |         } else {
188 |             //if hero is in the air then accelerate slower
189 |             player.setAccelerationX(-acceleration / 3);
190 |         }
191 |     }
192 | 
193 |     function moveRight(acceleration) {
194 |         var standing = player.body.blocked.down || player.body.touching.down;
195 |         //if hero is on ground then use full acceleration
196 |         if (standing) {
197 |             player.setAccelerationX(acceleration);
198 |         } else {
199 |             //if hero is in the air then accelerate slower
200 |             player.setAccelerationX(acceleration / 3);
201 |         }
202 |     }
203 | 
204 |     function update() {
205 |         var standing = player.body.blocked.down || player.body.touching.down;
206 |         //if left key is down then move left
207 |         if (cursors.left.isDown) {
208 |             moveLeft(acceleration);
209 |         } else if (cursors.right.isDown) {
210 |             //same deal but for right arrow
211 |             moveRight(acceleration);
212 |         }
213 | 
214 |         //if either touch pointer is down. Two thumbs, two pointers
215 |         if (this.input.pointer1.isDown || this.input.pointer2.isDown) {
216 |             //work out half way point of our game
217 |             var leftHalf = config.width / 2;
218 | 
219 |             //Left hand side - horizontal movement
220 |             //if thumb is on the left hand side of the screen we are dealing with horizontal movement
221 |             if (this.input.pointer1.x < leftHalf || this.input.pointer2.x < leftHalf) {
222 |                 //reset pointer variable
223 |                 var myMovePointer = null;
224 |                 //here we get the pointer that is being used on the left hand side of screen. Depends which thumb they touched screen with first.
225 |                 if (this.input.pointer1.x < leftHalf && this.input.pointer1.isDown) {
226 |                     myMovePointer = this.input.pointer1;
227 |                 }
228 |                 if (this.input.pointer2.x < leftHalf && this.input.pointer2.isDown) {
229 |                     myMovePointer = this.input.pointer2;
230 |                 }
231 | 
232 |                 //if we have an active touch pointer on the left hand side of the screen then...
233 |                 if (myMovePointer) {
234 |                     //if touchSlide is not already showing then
235 |                     if (!touchSlider.alpha) {
236 |                         //make it visible
237 |                         touchSlider.alpha = 1;
238 |                         //position touchSlider to be where the users thumb or finger is
239 |                         touchSlider.x = myMovePointer.x;
240 |                         //with the Y pos we add a thumbSizeOffset so it's above the users thumb not hidden under it
241 |                         touchSlider.y = myMovePointer.y - thumbSizeOffset;
242 |                         //set our start point and reset slider display
243 |                         startX = myMovePointer.x;
244 |                         sliderKnob.x = 0;
245 |                     }
246 | 
247 |                     //if thumb has moved left or right of where we started then move
248 |                     if (myMovePointer.x < startX || myMovePointer.x > startX) {
249 |                         //work out how far thumb has moved. Is this a big enough movement?
250 |                         var movement = 0;
251 |                         if (myMovePointer.x < startX) movement = startX - myMovePointer.x;
252 |                         if (myMovePointer.x > startX) movement = myMovePointer.x - startX;
253 |                         //If move is significant enough then move our character
254 |                         if (movement > touchMoveThreshold) {
255 |                             //set flag as we are definitely moving
256 |                             touchMoving = true;
257 | 
258 |                             //set slider knob position to be half way to edge
259 |                             var sliderPos = 0;
260 |                             //left
261 |                             if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 4);
262 |                             //right
263 |                             if (myMovePointer.x > startX) sliderPos = sliderBar.width / 4;
264 | 
265 |                             //set acceleration to be an 8th of normal
266 |                             var tmpAcceleration = acceleration / 8;
267 | 
268 |                             //if thumb has moved quite a lot, then go faster
269 |                             if (movement > largeThumbMoveAcross) {
270 |                                 //the knob position should be at the edge as we're at full tilt
271 |                                 if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 2);
272 |                                 if (myMovePointer.x > startX) sliderPos = sliderBar.width / 2;
273 |                                 //acceleration is normal
274 |                                 tmpAcceleration = acceleration;
275 |                             }
276 | 
277 |                             //tween slider knob to position we just worked out
278 |                             var tween = this.tweens.add({
279 |                                 targets: sliderKnob,
280 |                                 x: sliderPos,
281 |                                 ease: "Power1",
282 |                                 duration: 300
283 |                             });
284 |                             if (myMovePointer.x < startX) moveLeft(tmpAcceleration);
285 |                             if (myMovePointer.x > startX) moveRight(tmpAcceleration);
286 |                         } else {
287 |                             //If move is really, really small then we don't count it. Stop moving
288 |                             //set moving flag to false
289 |                             touchMoving = false;
290 |                             //reset slider knob to center position
291 |                             var tween = this.tweens.add({
292 |                                 targets: sliderKnob,
293 |                                 x: 0,
294 |                                 ease: "Power1",
295 |                                 duration: 300
296 |                             });
297 |                         }
298 |                     }
299 |                 }
300 |             }
301 | 
302 |             //Right hand side - Touch Jumping
303 |             //if thumb is on the right hand side of the screen we are dealing with vertical movement - i.e. jumping.
304 |             if (this.input.pointer1.x > leftHalf || this.input.pointer2.x > leftHalf) {
305 |                 //reset pointer variable
306 |                 var myJumpPointer = null;
307 |                 //get active touch pointer for this side of the screen
308 |                 if (this.input.pointer1.x > leftHalf && this.input.pointer1.isDown) {
309 |                     myJumpPointer = this.input.pointer1;
310 |                 }
311 |                 if (this.input.pointer2.x > leftHalf && this.input.pointer2.isDown) {
312 |                     myJumpPointer = this.input.pointer2;
313 |                 }
314 |                 //if we have a touch pointer on right hand side of screen...
315 |                 if (myJumpPointer) {
316 |                     //store last y position of touch pointer
317 |                     prevPos = yPos;
318 |                     //get new position of touch pointer
319 |                     yPos = myJumpPointer.y;
320 | 
321 |                     //if we have moved our thump upwards and it's more than our threshold then we set jump flag to true
322 |                     if (prevPos - yPos > touchJumpThreshold) {
323 |                         touchJump = true;
324 |                     }
325 |                 }
326 |             }
327 |             //neither thumb is down so reset touch movement variables and hide touchSlider
328 |         } else {
329 |             touchSlider.alpha = 0;
330 |             startX = 0;
331 |             touchMoving = false;
332 |         }
333 | 
334 |         //if not moving left or right via keys or touch device...
335 |         if (!cursors.right.isDown && !cursors.left.isDown && !touchMoving) {
336 |             //if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
337 |             if (
338 |                 Math.abs(player.body.velocity.x) < 10 &&
339 |                 Math.abs(player.body.velocity.x) > -10
340 |             ) {
341 |                 player.setVelocityX(0);
342 |                 player.setAccelerationX(0);
343 |             } else {
344 |                 //if our hero isn't moving left or right then slow them down
345 |                 //this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number
346 |                 player.setAccelerationX(
347 |                     (player.body.velocity.x > 0 ? -1 : 1) * acceleration / 3
348 |                 );
349 |             }
350 |         }
351 | 
352 |         //get current time in seconds
353 |         var d = new Date();
354 |         var time = d.getTime();
355 | 
356 |         //if we have just left the ground set edge time for 100ms time
357 |         if (!standing && wasStanding) {
358 |             edgeTimer = time + 100;
359 |         }
360 | 
361 |         //if player is standing, or just fallen off a ledge (within our allowed grace time) and...
362 |         //either up key is press, or touchjump flag is set AND they are not already jumping then jump!
363 |         if (
364 |             (standing || time <= edgeTimer) &&
365 |             (cursors.up.isDown || touchJump) &&
366 |             !jumping
367 |         ) {
368 |             player.setVelocityY(jumpVelocity);
369 |             jumping = true;
370 |         }
371 | 
372 |         //if not pressing up key...
373 |         if (!cursors.up.isDown) {
374 |             //if player is touching ground / platform then reset jump parametrs
375 |             if (player.body.touching.down) {
376 |                 jumping = false;
377 |                 touchJump = false;
378 |                 prevPos = 0;
379 |             }
380 |         }
381 |         wasStanding = standing;
382 |     }
383 | 
384 |     function collectCoin(player, coin) {
385 |         //stop coin for being collected twice, as it will stick around on the screen as it animnates
386 |         coin.disableBody(false, false);
387 | 
388 |         //tween coin to score coin in corner shrink
389 |         var tween = this.tweens.add({
390 |             targets: coin,
391 |             alpha: 0.3,
392 |             angle: 720,
393 |             x: scoreCoin.x,
394 |             y: scoreCoin.y,
395 |             scaleX: 0.5,
396 |             scaleY: 0.5,
397 |             ease: "Linear",
398 |             duration: 500,
399 |             onComplete: function() {
400 |                 destroyGameObject(coin);
401 |             }
402 |         });
403 | 
404 |         //check if we already have an animation
405 |         if (scoreCoinTimeline) {
406 |             //if animation isn't currently running, then run again
407 |             if (scoreCoinTimeline.progress == 1) {
408 |                 animateScoreCoin(this);
409 |             }
410 |         } else {
411 |             //no animation to create one
412 |             animateScoreCoin(this);
413 |         }
414 |         score += 10;
415 |         scoreText.setText(score);
416 |     }
417 | 
418 |     //rotate score coin and make bigger before shrinking again
419 |     function animateScoreCoin(game) {
420 |         scoreCoinTimeline = game.tweens.timeline({
421 |             targets: scoreCoin,
422 |             duration: 100,
423 |             tweens: [{
424 |                     scaleX: 0.8,
425 |                     scaleY: 0.8,
426 |                     angle: "+=45"
427 |                 },
428 |                 {
429 |                     scaleX: 0.5,
430 |                     scaleY: 0.5,
431 |                     angle: "+=45"
432 |                 }
433 |             ]
434 |         });
435 |     }
436 | 
437 |     function destroyGameObject(gameObject) {
438 |         // Removes any game object from the screen
439 |         gameObject.destroy();
440 |     }
441 |     </script>
442 | </body>
443 | 
444 | </html>


--------------------------------------------------------------------------------
/9_moving_baddies.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Moving Baddies - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: "arcade",
 20 |             arcade: {
 21 |                 gravity: { y: 300 }
 22 |             }
 23 |         },
 24 |         scene: {
 25 |             preload: preload,
 26 |             create: create,
 27 |             update: update
 28 |         }
 29 |     };
 30 | 
 31 |     var player,
 32 |         baddie,
 33 |         coins,
 34 |         scoreCoin,
 35 |         scoreCoinTimeline,
 36 |         platforms,
 37 |         cursors,
 38 |         score = 0,
 39 |         scoreText,
 40 |         acceleration = 600,
 41 |         jumpVelocity = -330,
 42 |         wasStanding = false,
 43 |         edgeTimer = 0,
 44 |         jumping = false,
 45 |         prevPos = 0,
 46 |         yPos = 0,
 47 |         touchJump = false,
 48 |         touchJumpThreshold = 5,
 49 |         touchSlider,
 50 |         sliderBar,
 51 |         sliderKnob,
 52 |         touchMoving = false,
 53 |         touchMoveThreshold = 3,
 54 |         largeThumbMoveAcross = 25,
 55 |         thumbSizeOffset = 60,
 56 |         startX;
 57 | 
 58 |     var game = new Phaser.Game(config);
 59 | 
 60 |     function preload() {
 61 |         this.load.setBaseURL("assets/");
 62 |         this.load.image("ground", "platform.jpg");
 63 |         this.load.image("coin", "coin.jpg");
 64 |         this.load.image("hero", "hero.jpg");
 65 |         this.load.image("baddie", "baddie.jpg");
 66 |         this.load.image("logo", "digitherium-logo.jpg");
 67 |         this.load.image("touch-slider", "touch-slider.png");
 68 |         this.load.image("touch-knob", "touch-knob.png");
 69 |     }
 70 | 
 71 |     function create() {
 72 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 73 |         logo.alpha = 0.4;
 74 |         logo.setScale(0.5);
 75 |         this.input.addPointer(1);
 76 |         platforms = this.physics.add.staticGroup();
 77 | 
 78 |         platforms.create(400, 400, "ground").setScale(2).refreshBody();
 79 |         platforms.create(50, 240, "ground");
 80 |         platforms.create(750, 140, "ground");
 81 | 
 82 |         player = this.physics.add.sprite(100, 350, "hero");
 83 | 
 84 |         player.setCollideWorldBounds(true);
 85 |         buildTouchSlider(this);
 86 |         //Set bounce to 0, so our hero just lands directly
 87 |         player.setBounce(0);
 88 |         //Set top speeds
 89 |         player.body.maxVelocity.x = 200;
 90 |         player.body.maxVelocity.y = 500;
 91 | 
 92 |         baddie = this.physics.add.sprite(620, 350, 'baddie');
 93 |         baddie.setOrigin(.5, .5);
 94 |         baddie.setCollideWorldBounds(true);
 95 | 
 96 |         baddie.body.velocity.x = -100;
 97 |         baddie.maxDistance = 300;
 98 |         baddie.previousX = baddie.x;
 99 | 
100 |         cursors = this.input.keyboard.createCursorKeys();
101 | 
102 |         coins = this.physics.add.group({
103 |             key: "coin",
104 |             repeat: 11,
105 |             setXY: { x: 12, y: 0, stepX: 70 }
106 |         });
107 | 
108 |         coins.children.iterate(function(child) {
109 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
110 |         });
111 | 
112 |         scoreCoin = this.add.sprite(30, 32, "coin");
113 |         scoreCoin.setOrigin(0.5, 0.5);
114 |         scoreCoin.scaleX = 0.5;
115 |         scoreCoin.scaleY = 0.5;
116 |         scoreText = this.add.text(46, 20, "0", { fontSize: "24px", fill: "#fff" });
117 | 
118 |         this.physics.add.collider(player, platforms);
119 |         this.physics.add.collider(baddie, platforms);
120 |         this.physics.add.collider(coins, platforms);
121 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
122 |         this.physics.add.overlap(player, baddie, hitBaddie, null, this);
123 |     }
124 | 
125 |     function hitBaddie(player, baddie) {
126 |         //if the collision is on the baddies head, and baddie hasn't ready been hit...
127 |         if (baddie.body.touching.up && !baddie.hit) {
128 |             // set baddie as being hit and remove physics
129 |             baddie.disableBody(false, false);
130 |             //make player jump up in the air a little bit
131 |             player.setVelocityY(jumpVelocity);
132 | 
133 |             //animate baddie, fading out and getting bigger
134 |             var tween = this.tweens.add({
135 |                 targets: baddie,
136 |                 alpha: 0.3,
137 |                 scaleX: 1.5,
138 |                 scaleY: 1.5,
139 |                 ease: 'Linear',
140 |                 duration: 200,
141 |                 onComplete: function() {
142 |                     //remove the game object
143 |                     destroyGameObject(baddie);
144 |                 },
145 |             });
146 |         }
147 |         //otherwise you've hit baddie, but not on the head. This makes you die
148 |         else {
149 |             //set player to dead
150 |             player.disableBody(false, false);
151 | 
152 |             //animate players death scene
153 |             var tween = this.tweens.add({
154 |                 targets: player,
155 |                 alpha: 0.3,
156 |                 scaleX: 1.1,
157 |                 scaleY: 1.1,
158 |                 angle: 90,
159 |                 x: player.x - 20,
160 |                 y: player.y - 20,
161 |                 ease: 'Linear',
162 |                 duration: 200,
163 |                 onComplete: function() {
164 |                     restartGame(this);
165 |                 },
166 |                 onCompleteScope: this
167 |             });
168 |         }
169 |     }
170 | 
171 |     function restartGame(game) {
172 |         game.scene.restart();
173 |     }
174 | 
175 |     function buildTouchSlider(game) {
176 |         sliderBar = game.add.sprite(0, 0, "touch-slider");
177 |         sliderKnob = game.add.sprite(0, 0, "touch-knob");
178 | 
179 |         touchSlider = game.add.container(100, 450);
180 |         touchSlider.add(sliderBar);
181 |         touchSlider.add(sliderKnob);
182 |         touchSlider.alpha = 0;
183 |     }
184 | 
185 |     function moveLeft(acceleration) {
186 |         var standing = player.body.blocked.down || player.body.touching.down;
187 |         //if hero is on ground then use full acceleration
188 |         if (standing) {
189 |             player.setAccelerationX(-acceleration);
190 |         } else {
191 |             //if hero is in the air then accelerate slower
192 |             player.setAccelerationX(-acceleration / 3);
193 |         }
194 |     }
195 | 
196 |     function moveRight(acceleration) {
197 |         var standing = player.body.blocked.down || player.body.touching.down;
198 |         //if hero is on ground then use full acceleration
199 |         if (standing) {
200 |             player.setAccelerationX(acceleration);
201 |         } else {
202 |             //if hero is in the air then accelerate slower
203 |             player.setAccelerationX(acceleration / 3);
204 |         }
205 |     }
206 | 
207 |     function switchDirection(baddie) {
208 |         //reverse velocity so baddie moves are same speed but in opposite direction
209 |         baddie.body.velocity.x *= -1;
210 |         //reset count
211 |         baddie.previousX = baddie.x;
212 |     }
213 | 
214 | 
215 |     function update() {
216 |         var standing = player.body.blocked.down || player.body.touching.down;
217 |         //if left key is down then move left
218 |         if (cursors.left.isDown) {
219 |             moveLeft(acceleration);
220 |         } else if (cursors.right.isDown) {
221 |             //same deal but for right arrow
222 |             moveRight(acceleration);
223 |         }
224 | 
225 |         if (Math.abs(baddie.x - baddie.previousX) >= baddie.maxDistance) {
226 |             switchDirection(baddie);
227 |         }
228 | 
229 |         //if either touch pointer is down. Two thumbs, two pointers
230 |         if (this.input.pointer1.isDown || this.input.pointer2.isDown) {
231 |             //work out half way point of our game
232 |             var leftHalf = config.width / 2;
233 | 
234 |             //Left hand side - horizontal movement
235 |             //if thumb is on the left hand side of the screen we are dealing with horizontal movement
236 |             if (this.input.pointer1.x < leftHalf || this.input.pointer2.x < leftHalf) {
237 |                 //reset pointer variable
238 |                 var myMovePointer = null;
239 |                 //here we get the pointer that is being used on the left hand side of screen. Depends which thumb they touched screen with first.
240 |                 if (this.input.pointer1.x < leftHalf && this.input.pointer1.isDown) {
241 |                     myMovePointer = this.input.pointer1;
242 |                 }
243 |                 if (this.input.pointer2.x < leftHalf && this.input.pointer2.isDown) {
244 |                     myMovePointer = this.input.pointer2;
245 |                 }
246 | 
247 |                 //if we have an active touch pointer on the left hand side of the screen then...
248 |                 if (myMovePointer) {
249 |                     //if touchSlide is not already showing then
250 |                     if (!touchSlider.alpha) {
251 |                         //make it visible
252 |                         touchSlider.alpha = 1;
253 |                         //position touchSlider to be where the users thumb or finger is
254 |                         touchSlider.x = myMovePointer.x;
255 |                         //with the Y pos we add a thumbSizeOffset so it's above the users thumb not hidden under it
256 |                         touchSlider.y = myMovePointer.y - thumbSizeOffset;
257 |                         //set our start point and reset slider display
258 |                         startX = myMovePointer.x;
259 |                         sliderKnob.x = 0;
260 |                     }
261 | 
262 |                     //if thumb has moved left or right of where we started then move
263 |                     if (myMovePointer.x < startX || myMovePointer.x > startX) {
264 |                         //work out how far thumb has moved. Is this a big enough movement?
265 |                         var movement = 0;
266 |                         if (myMovePointer.x < startX) movement = startX - myMovePointer.x;
267 |                         if (myMovePointer.x > startX) movement = myMovePointer.x - startX;
268 |                         //If move is significant enough then move our character
269 |                         if (movement > touchMoveThreshold) {
270 |                             //set flag as we are definitely moving
271 |                             touchMoving = true;
272 | 
273 |                             //set slider knob position to be half way to edge
274 |                             var sliderPos = 0;
275 |                             //left
276 |                             if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 4);
277 |                             //right
278 |                             if (myMovePointer.x > startX) sliderPos = sliderBar.width / 4;
279 | 
280 |                             //set acceleration to be an 8th of normal
281 |                             var tmpAcceleration = acceleration / 8;
282 | 
283 |                             //if thumb has moved quite a lot, then go faster
284 |                             if (movement > largeThumbMoveAcross) {
285 |                                 //the knob position should be at the edge as we're at full tilt
286 |                                 if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 2);
287 |                                 if (myMovePointer.x > startX) sliderPos = sliderBar.width / 2;
288 |                                 //acceleration is normal
289 |                                 tmpAcceleration = acceleration;
290 |                             }
291 | 
292 |                             //tween slider knob to position we just worked out
293 |                             var tween = this.tweens.add({
294 |                                 targets: sliderKnob,
295 |                                 x: sliderPos,
296 |                                 ease: "Power1",
297 |                                 duration: 300
298 |                             });
299 |                             if (myMovePointer.x < startX) moveLeft(tmpAcceleration);
300 |                             if (myMovePointer.x > startX) moveRight(tmpAcceleration);
301 |                         } else {
302 |                             //If move is really, really small then we don't count it. Stop moving
303 |                             //set moving flag to false
304 |                             touchMoving = false;
305 |                             //reset slider knob to center position
306 |                             var tween = this.tweens.add({
307 |                                 targets: sliderKnob,
308 |                                 x: 0,
309 |                                 ease: "Power1",
310 |                                 duration: 300
311 |                             });
312 |                         }
313 |                     }
314 |                 }
315 |             }
316 | 
317 |             //Right hand side - Touch Jumping
318 |             //if thumb is on the right hand side of the screen we are dealing with vertical movement - i.e. jumping.
319 |             if (this.input.pointer1.x > leftHalf || this.input.pointer2.x > leftHalf) {
320 |                 //reset pointer variable
321 |                 var myJumpPointer = null;
322 |                 //get active touch pointer for this side of the screen
323 |                 if (this.input.pointer1.x > leftHalf && this.input.pointer1.isDown) {
324 |                     myJumpPointer = this.input.pointer1;
325 |                 }
326 |                 if (this.input.pointer2.x > leftHalf && this.input.pointer2.isDown) {
327 |                     myJumpPointer = this.input.pointer2;
328 |                 }
329 |                 //if we have a touch pointer on right hand side of screen...
330 |                 if (myJumpPointer) {
331 |                     //store last y position of touch pointer
332 |                     prevPos = yPos;
333 |                     //get new position of touch pointer
334 |                     yPos = myJumpPointer.y;
335 | 
336 |                     //if we have moved our thump upwards then we set jump flag to true
337 |                     if (prevPos - yPos > touchJumpThreshold) {
338 |                         touchJump = true;
339 |                     }
340 |                 }
341 |             }
342 |             //neither thumb is down so reset touch movement variables and hide touchSlider
343 |         } else {
344 |             touchSlider.alpha = 0;
345 |             startX = 0;
346 |             touchMoving = false;
347 |         }
348 | 
349 |         //if not moving left or right via keys or touch device...
350 |         if (!cursors.right.isDown && !cursors.left.isDown && !touchMoving) {
351 |             //if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
352 |             if (Math.abs(player.body.velocity.x) < 10 && Math.abs(player.body.velocity.x) > -10) {
353 |                 player.setVelocityX(0);
354 |                 player.setAccelerationX(0);
355 |             } else {
356 |                 //if our hero isn't moving left or right then slow them down
357 |                 //this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number
358 |                 player.setAccelerationX(
359 |                     (player.body.velocity.x > 0 ? -1 : 1) * acceleration / 3
360 |                 );
361 |             }
362 |         }
363 | 
364 |         //get current time in seconds
365 |         var d = new Date();
366 |         var time = d.getTime();
367 | 
368 |         //if we have just left the ground set edge time for 100ms time
369 |         if (!standing && wasStanding) {
370 |             edgeTimer = time + 100;
371 |         }
372 | 
373 |         //if player is standing, or just fallen off a ledge (within our allowed grace time) and...
374 |         //either up key is press, or touchjump flag is set AND they are not already jumping then jump!
375 |         if (
376 |             (standing || time <= edgeTimer) &&
377 |             (cursors.up.isDown || touchJump) &&
378 |             !jumping
379 |         ) {
380 |             player.setVelocityY(jumpVelocity);
381 |             jumping = true;
382 |         }
383 | 
384 |         //if not pressing up key...
385 |         if (!cursors.up.isDown) {
386 |             //if player is touching ground / platform then reset jump parametrs
387 |             if (player.body.touching.down) {
388 |                 jumping = false;
389 |                 touchJump = false;
390 |                 prevPos = 0;
391 |             }
392 |         }
393 |         wasStanding = standing;
394 |     }
395 | 
396 |     function collectCoin(player, coin) {
397 |         //stop coin for being collected twice, as it will stick around on the screen as it animnates
398 |         coin.disableBody(false, false);
399 | 
400 |         //tween coin to score coin in corner shrink
401 |         var tween = this.tweens.add({
402 |             targets: coin,
403 |             alpha: 0.3,
404 |             angle: 720,
405 |             x: scoreCoin.x,
406 |             y: scoreCoin.y,
407 |             scaleX: 0.5,
408 |             scaleY: 0.5,
409 |             ease: "Linear",
410 |             duration: 500,
411 |             onComplete: function() {
412 |                 destroyGameObject(coin);
413 |             }
414 |         });
415 | 
416 |         //check if we already have an animation
417 |         if (scoreCoinTimeline) {
418 |             //if animation isn't currently running, then run again
419 |             if (scoreCoinTimeline.progress == 1) {
420 |                 animateScoreCoin(this);
421 |             }
422 |         } else {
423 |             //no animation to create one
424 |             animateScoreCoin(this);
425 |         }
426 |         score += 10;
427 |         scoreText.setText(score);
428 |     }
429 | 
430 |     //rotate score coin and make bigger before shrinking again
431 |     function animateScoreCoin(game) {
432 |         scoreCoinTimeline = game.tweens.timeline({
433 |             targets: scoreCoin,
434 |             duration: 100,
435 |             tweens: [{
436 |                     scaleX: 0.8,
437 |                     scaleY: 0.8,
438 |                     angle: "+=45"
439 |                 },
440 |                 {
441 |                     scaleX: 0.5,
442 |                     scaleY: 0.5,
443 |                     angle: "+=45"
444 |                 }
445 |             ]
446 |         });
447 |     }
448 | 
449 |     function destroyGameObject(gameObject) {
450 |         // Removes any game object from the screen
451 |         gameObject.destroy();
452 |     }
453 |     </script>
454 | </body>
455 | 
456 | </html>


--------------------------------------------------------------------------------
/10_ladders.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Ladders - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: 'arcade',
 20 |             arcade: {
 21 |                 fps: 120,
 22 |                 gravity: { y: 300 }
 23 |             }
 24 |         },
 25 |         scene: {
 26 |             preload: preload,
 27 |             create: create,
 28 |             update: update
 29 |         }
 30 |     };
 31 | 
 32 |     var player,
 33 |         baddie,
 34 |         coins,
 35 |         scoreCoin,
 36 |         scoreCoinTimeline,
 37 |         platforms,
 38 |         ladders,
 39 |         cursors,
 40 |         score = 0,
 41 |         scoreText,
 42 |         acceleration = 600,
 43 |         jumpVelocity = -330,
 44 |         wasStanding = false,
 45 |         onLadder = false,
 46 |         edgeTimer = 0,
 47 |         prevPos = 0,
 48 |         yPos = 0,
 49 |         touchJump = false,
 50 |         touchJumpThreshold = 5,
 51 |         touchSlider,
 52 |         sliderBar,
 53 |         sliderKnob,
 54 |         touchMoving = false,
 55 |         isTouch = false,
 56 |         touchMoveThreshold = 3,
 57 |         largeThumbMoveAcross = 25,
 58 |         thumbSizeOffset = 60,
 59 |         startX;
 60 | 
 61 |     var game = new Phaser.Game(config);
 62 | 
 63 |     function preload() {
 64 |         this.load.setBaseURL("assets/");
 65 |         this.load.image('ground', 'platform.jpg');
 66 |         this.load.image('coin', 'coin.jpg');
 67 |         this.load.image('hero', 'hero.jpg');
 68 |         this.load.image('baddie', 'baddie.jpg');
 69 |         this.load.image('ladder', 'ladder.png');
 70 |         this.load.image("logo", "digitherium-logo.jpg");
 71 |         this.load.image('touch-slider', 'touch-slider.png');
 72 |         this.load.image('touch-knob', 'touch-knob.png');
 73 |     }
 74 | 
 75 |     function create() {
 76 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 77 |         logo.alpha = 0.4;
 78 |         logo.setScale(0.5);
 79 | 
 80 |         this.input.addPointer(1);
 81 |         platforms = this.physics.add.staticGroup();
 82 | 
 83 |         platforms.create(400, 400, 'ground').setScale(2).refreshBody();
 84 |         platforms.create(50, 240, 'ground');
 85 |         platforms.create(750, 140, 'ground');
 86 | 
 87 |         ladders = this.physics.add.staticGroup();
 88 |         ladders.enableBody = true;
 89 |         ladder = ladders.create(268, 296, 'ladder');
 90 |         ladder.body.immovable = true;
 91 | 
 92 |         player = this.physics.add.sprite(100, 350, 'hero');
 93 |         player.setOrigin(.5, .5);
 94 |         player.setCollideWorldBounds(true);
 95 | 
 96 |         baddie = this.physics.add.sprite(620, 350, 'baddie');
 97 |         baddie.setOrigin(.5, .5);
 98 |         baddie.setCollideWorldBounds(true);
 99 |         baddie.body.velocity.x = -100;
100 |         baddie.maxDistance = 300;
101 |         baddie.previousX = baddie.x;
102 | 
103 |         buildTouchSlider(this);
104 |         //Set bounce to 0, so our hero just lands directly
105 |         player.setBounce(0);
106 |         //Set top speeds
107 |         player.body.maxVelocity.x = 200;
108 |         player.body.maxVelocity.y = 500;
109 | 
110 |         cursors = this.input.keyboard.createCursorKeys();
111 | 
112 |         coins = this.physics.add.group({
113 |             key: 'coin',
114 |             repeat: 11,
115 |             setXY: { x: 12, y: 0, stepX: 70 }
116 |         });
117 | 
118 |         coins.children.iterate(function(child) {
119 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
120 |         });
121 | 
122 |         scoreCoin = this.add.sprite(30, 32, 'coin');
123 |         scoreCoin.setOrigin(.5, .5);
124 |         scoreCoin.scaleX = .5;
125 |         scoreCoin.scaleY = .5;
126 |         scoreText = this.add.text(46, 20, '0', { fontSize: '24px', fill: '#fff' });
127 | 
128 |         this.physics.add.collider(player, platforms);
129 |         this.physics.add.collider(baddie, platforms);
130 |         this.physics.add.collider(coins, platforms);
131 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
132 |         this.physics.add.overlap(player, baddie, hitBaddie, null, this);
133 |         this.physics.add.overlap(player, ladders, isOnLadder, null, this);
134 |     }
135 | 
136 |     function hitBaddie(player, baddie) {
137 |         if (baddie.body.touching.up && !baddie.hit) {
138 |             // set baddie as being hit and remove physics
139 |             baddie.disableBody(false, false);
140 |             player.setVelocityY(jumpVelocity);
141 | 
142 |             var tween = this.tweens.add({
143 |                 targets: baddie,
144 |                 alpha: 0.3,
145 |                 scaleX: 1.5,
146 |                 scaleY: 1.5,
147 |                 ease: 'Linear',
148 |                 duration: 200,
149 |                 onComplete: function() {
150 |                     destroyGameObject(baddie);
151 |                 },
152 |             });
153 |         }
154 |         //otherwise you've hit baddie, but not on the head. This makes you die
155 |         else {
156 |             //set player to dead
157 | 
158 |             player.disableBody(false, false);
159 |             var tween = this.tweens.add({
160 |                 targets: player,
161 |                 alpha: 0.3,
162 |                 scaleX: 1.1,
163 |                 scaleY: 1.1,
164 |                 angle: 90,
165 |                 x: player.x - 20,
166 |                 y: player.y - 20,
167 |                 ease: 'Linear',
168 |                 duration: 200,
169 |                 onComplete: function() {
170 |                     restartGame(this);
171 |                 },
172 |                 onCompleteScope: this
173 |             });
174 |         }
175 |     }
176 | 
177 |     function restartGame(game) {
178 |         game.scene.restart();
179 |     }
180 | 
181 |     function buildTouchSlider(game) {
182 |         sliderBar = game.add.sprite(0, 0, 'touch-slider');
183 |         sliderKnob = game.add.sprite(0, 0, 'touch-knob');
184 | 
185 |         touchSlider = game.add.container(100, 450);
186 |         touchSlider.add(sliderBar);
187 |         touchSlider.add(sliderKnob);
188 |         touchSlider.alpha = 0;
189 |     }
190 | 
191 |     function moveLeft(acceleration) {
192 |         var standing = player.body.blocked.down || player.body.touching.down;
193 |         //if hero is on ground then use full acceleration
194 |         if (standing) {
195 |             player.setAccelerationX(-acceleration);
196 |         }
197 |         //if hero is in the air then accelerate slower
198 |         else {
199 |             player.setAccelerationX(-acceleration / 3);
200 |         }
201 |     }
202 | 
203 |     function moveRight(acceleration) {
204 |         var standing = player.body.blocked.down || player.body.touching.down;
205 |         //if hero is on ground then use full acceleration
206 |         if (standing) {
207 |             player.setAccelerationX(acceleration);
208 |         }
209 |         //if hero is in the air then accelerate slower
210 |         else {
211 |             player.setAccelerationX(acceleration / 3);
212 |         }
213 |     }
214 | 
215 |     function switchDirection(baddie) {
216 |         //reverse velocity so baddie moves are same speed but in opposite direction
217 |         baddie.body.velocity.x *= -1;
218 |         //reset count
219 |         baddie.previousX = baddie.x;
220 |         //flip sprite
221 |         //baddie.scale.setTo(-baddie.scale.x, 1);
222 |     }
223 | 
224 |     //called when player overlaps ladder
225 |     function isOnLadder(player, ladder) {
226 |         //set ladder flag to true and remove gravity
227 |         onLadder = true;
228 |         player.body.setAllowGravity(false);
229 |     }
230 | 
231 |     function update() {
232 |         //built in arcade physics functions of blocked and touching to test for collisions in a given direction
233 |         var standing = player.body.blocked.down || player.body.touching.down,
234 |             //get current time in seconds
235 |             d = new Date(),
236 |             time = d.getTime();
237 | 
238 |         //if left key is down then move left
239 |         if (cursors.left.isDown) {
240 |             moveLeft(acceleration);
241 |         }
242 |         //same deal but for right arrow
243 |         else if (cursors.right.isDown) {
244 |             moveRight(acceleration);
245 |         }
246 | 
247 |         if (Math.abs(baddie.x - baddie.previousX) >= baddie.maxDistance) {
248 |             switchDirection(baddie);
249 |         }
250 | 
251 |         //if either touch pointer is down. Two thumbs, two pointers
252 |         if (this.input.pointer1.isDown || this.input.pointer2.isDown) {
253 |             //work out half way point of our game
254 |             var leftHalf = config.width / 2;
255 | 
256 |             //Left hand side - horizontal movement
257 |             //if thumb is on the left hand side of the screen we are dealing with horizontal movement
258 |             if (this.input.pointer1.x < leftHalf || this.input.pointer2.x < leftHalf) {
259 |                 //reset pointer variable
260 |                 var myMovePointer = null;
261 |                 //here we get the pointer that is being used on the left hand side of screen. Depends which thumb they touched screen with first.
262 |                 if (this.input.pointer1.x < leftHalf && this.input.pointer1.isDown) {
263 |                     myMovePointer = this.input.pointer1;
264 |                 }
265 |                 if (this.input.pointer2.x < leftHalf && this.input.pointer2.isDown) {
266 |                     myMovePointer = this.input.pointer2;
267 |                 }
268 | 
269 |                 //if we have an active touch pointer on the left hand side of the screen then...
270 |                 if (myMovePointer) {
271 |                     //if touchSlide is not already showing then
272 |                     if (!touchSlider.alpha) {
273 |                         //make it visible
274 |                         touchSlider.alpha = 1;
275 |                         //position touchSlider to be where the users thumb or finger is
276 |                         touchSlider.x = myMovePointer.x;
277 |                         //with the Y pos we add a thumbSizeOffset so it's above the users thumb not hidden under it
278 |                         touchSlider.y = myMovePointer.y - thumbSizeOffset;
279 |                         //set our start point and reset slider display
280 |                         startX = myMovePointer.x;
281 |                         sliderKnob.x = 0;
282 |                     }
283 | 
284 |                     //if thumb has moved left or right of where we started then move
285 |                     if (myMovePointer.x < startX || myMovePointer.x > startX) {
286 |                         //work out how far thumb has moved. Is this a big enough movement?
287 |                         var movement = 0;
288 |                         if (myMovePointer.x < startX) movement = startX - myMovePointer.x;
289 |                         if (myMovePointer.x > startX) movement = myMovePointer.x - startX;
290 |                         //If move is significant enough then move our character
291 |                         if (movement > touchMoveThreshold) {
292 |                             //set flag as we are definitely moving
293 |                             touchMoving = true;
294 |                             //set a flag so we know we are on a mobile device
295 |                             isTouch = true;
296 | 
297 |                             //set slider knob position to be half way to edge
298 |                             var sliderPos = 0;
299 |                             //left
300 |                             if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 4);
301 |                             //right
302 |                             if (myMovePointer.x > startX) sliderPos = sliderBar.width / 4;
303 | 
304 |                             //set acceleration to be an 8th of normal
305 |                             var tmpAcceleration = acceleration / 8;
306 | 
307 |                             //if thumb has moved quite a lot, then go faster
308 |                             if (movement > largeThumbMoveAcross) {
309 |                                 //the knob position should be at the edge as we're at full tilt
310 |                                 if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 2);
311 |                                 if (myMovePointer.x > startX) sliderPos = sliderBar.width / 2;
312 |                                 //acceleration is normal
313 |                                 tmpAcceleration = acceleration;
314 |                             }
315 | 
316 |                             //tween slider knob to position we just worked out
317 |                             var tween = this.tweens.add({
318 |                                 targets: sliderKnob,
319 |                                 x: sliderPos,
320 |                                 ease: "Power1",
321 |                                 duration: 300
322 |                             });
323 |                             if (myMovePointer.x < startX) moveLeft(tmpAcceleration);
324 |                             if (myMovePointer.x > startX) moveRight(tmpAcceleration);
325 |                         } else {
326 |                             //If move is really, really small then we don't count it. Stop moving
327 |                             //set moving flag to false
328 |                             touchMoving = false;
329 |                             //reset slider knob to center position
330 |                             var tween = this.tweens.add({
331 |                                 targets: sliderKnob,
332 |                                 x: 0,
333 |                                 ease: "Power1",
334 |                                 duration: 300
335 |                             });
336 |                         }
337 |                     }
338 |                 }
339 |             }
340 | 
341 |             //Right hand side - Touch Jumping
342 |             //if thumb is on the right hand side of the screen we are dealing with vertical movement - i.e. jumping.
343 |             if (this.input.pointer1.x > leftHalf || this.input.pointer2.x > leftHalf) {
344 |                 //reset pointer variable
345 |                 var myJumpPointer = null;
346 | 
347 |                 //get active touch pointer for this side of the screen
348 |                 if (this.input.pointer1.x > leftHalf && this.input.pointer1.isDown) {
349 |                     myJumpPointer = this.input.pointer1;
350 |                 }
351 |                 if (this.input.pointer2.x > leftHalf && this.input.pointer2.isDown) {
352 |                     myJumpPointer = this.input.pointer2;
353 |                 }
354 |                 //if we have a touch pointer on right hand side of screen...
355 |                 if (myJumpPointer) {
356 |                     //store last y position of touch pointer
357 |                     prevPos = yPos;
358 |                     //get new position of touch pointer
359 |                     yPos = myJumpPointer.y;
360 | 
361 |                     //check if we are currently overlapping a ladder. If we are then...
362 |                     if (onLadder) {
363 |                         //kill any upwards / downwards velocity from our hero
364 |                         player.setVelocityY(0);
365 | 
366 |                         //if moving up with thumb then climb up the ladder
367 |                         if (Math.floor(prevPos) > Math.floor(yPos)) {
368 |                             if (!myMovePointer) {
369 |                                 //when moving vertically we want the player pefectly lined up
370 |                                 player.x = ladder.x;
371 |                                 //also kill any x velocity to be sure
372 |                                 player.setVelocityX(0);
373 |                                 player.setVelocityY(-100);
374 |                             }
375 |                         }
376 |                         //if moving down with thumb then climb down the ladder
377 |                         if (Math.floor(prevPos) < Math.floor(yPos)) {
378 |                             if (!myMovePointer) {
379 |                                 //when moving vertically we want the player pefectly lined up
380 |                                 player.x = ladder.x;
381 |                                 //also kill any x velocity to be sure
382 |                                 player.setVelocityX(0);
383 |                                 player.setVelocityY(100);
384 |                             }
385 |                         }
386 |                     }
387 |                     //not on a ladder so go for a standard jump 
388 |                     else {
389 |                         //  if we have moved our thump upwards then we set jump flag to true
390 |                         if (prevPos - yPos > touchJumpThreshold) {
391 |                             touchJump = true;
392 |                         }
393 |                     }
394 |                 }
395 |             }
396 |             //neither thumb is down so reset touch movement variables and hide touchSlider
397 |         } else {
398 |             touchSlider.alpha = 0;
399 |             startX = 0;
400 |             touchMoving = false;
401 | 
402 |             if (onLadder) {
403 |                 player.setVelocityY(0);
404 |             }
405 |         }
406 | 
407 |         //if not moving left or right via keys or touch device...
408 |         if (!cursors.right.isDown && !cursors.left.isDown && !touchMoving) {
409 |             //if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
410 |             if (Math.abs(player.body.velocity.x) < 10 && Math.abs(player.body.velocity.x) > -10) {
411 |                 player.setVelocityX(0);
412 |                 player.setAccelerationX(0);
413 |             } else {
414 |                 //if our hero isn't moving left or right then slow them down
415 |                 //this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number
416 |                 player.setAccelerationX(
417 |                     (player.body.velocity.x > 0 ? -1 : 1) * acceleration / 3
418 |                 );
419 |             }
420 |         }
421 | 
422 |         //get current time in seconds
423 |         var d = new Date();
424 |         var time = d.getTime();
425 | 
426 |         //if we have just left the ground set edge time for 100ms time
427 |         if (!standing && wasStanding) {
428 |             edgeTimer = time + 100;
429 |         }
430 | 
431 |         //if we are on a ladder and not on a touch device
432 |         if (onLadder && !isTouch) {
433 |             //kill any upwards / downwards velocity from our hero
434 |             player.setVelocityY(0);
435 | 
436 |             if (cursors.up.isDown) {
437 |                 if (!cursors.left.isDown && !cursors.right.isDown) {
438 |                     //when moving vertically we want the player pefectly lined up
439 |                     player.x = ladder.x;
440 |                     //also kill any x velocity to be sure
441 |                     player.setVelocityX(0);
442 |                     player.setVelocityY(-100);
443 |                 }
444 |             }
445 |             //if JUST down is being pressed then line up player perfectly with ladder. 
446 |             //We do this to make it quicker - but like a firemans pole
447 |             if (cursors.down.isDown && !cursors.left.isDown && !cursors.right.isDown) {
448 |                 //when moving vertically we want the player pefectly lined up
449 |                 player.x = ladder.x;
450 |                 //also kill any x velocity to be sure
451 |                 player.setVelocityX(0);
452 |                 player.setVelocityY(100);
453 |             }
454 |         }
455 | 
456 | 
457 |         //if player is standing, or just fallen off a ledge (within our allowed grace time) and..
458 |         //either up key is press, or touchjump flag is set AND they are not already jumping then jump!
459 |         if (
460 |             (standing || time <= edgeTimer) &&
461 |             (cursors.up.isDown || touchJump) &&
462 |             !jumping && !onLadder
463 |         ) {
464 |             player.setVelocityY(jumpVelocity);
465 |             jumping = true;
466 |         }
467 | 
468 |         //if not pressing up key...
469 |         if (!cursors.up.isDown) {
470 |             //if player is touching ground / platform then reset jump parametrs
471 |             if (player.body.touching.down) {
472 |                 jumping = false;
473 |                 touchJump = false;
474 |                 prevPos = 0;
475 |             }
476 |         }
477 |         wasStanding = standing;
478 |         //if player is no longer on on ladder then turn gravity back on
479 |         if (!onLadder) player.body.setAllowGravity(true);
480 |         onLadder = false;
481 |     }
482 | 
483 | 
484 |     function collectCoin(player, coin) {
485 |         //stop coin for being collected twice, as it will stick around on the screen as it animnates
486 |         coin.disableBody(false, false);
487 | 
488 |         //tween coin to score coin in corner shrink
489 |         var tween = this.tweens.add({
490 |             targets: coin,
491 |             alpha: 0.3,
492 |             angle: 720,
493 |             x: scoreCoin.x,
494 |             y: scoreCoin.y,
495 |             scaleX: 0.5,
496 |             scaleY: 0.5,
497 |             ease: 'Linear',
498 |             duration: 500,
499 |             onComplete: function() {
500 |                 destroyGameObject(coin);
501 |             },
502 |         });
503 | 
504 |         //check if we already have an animation
505 |         if (scoreCoinTimeline) {
506 |             //if animation isn't currently running, then run again
507 |             if (scoreCoinTimeline.progress == 1) {
508 |                 animateScoreCoin(this);
509 |             }
510 |         }
511 |         //no animation to create one
512 |         else {
513 |             animateScoreCoin(this);
514 |         }
515 |         score += 10;
516 |         scoreText.setText(score);
517 |     }
518 | 
519 |     //rotate score coin and make bigger before shrinking again
520 |     function animateScoreCoin(game) {
521 |         scoreCoinTimeline = game.tweens.timeline({
522 |             targets: scoreCoin,
523 |             duration: 100,
524 |             tweens: [{
525 |                     scaleX: 0.8,
526 |                     scaleY: 0.8,
527 |                     angle: "+=45"
528 |                 },
529 |                 {
530 |                     scaleX: 0.5,
531 |                     scaleY: 0.5,
532 |                     angle: "+=45"
533 |                 }
534 |             ]
535 |         });
536 |     }
537 | 
538 |     function destroyGameObject(gameObject) {
539 |         // Removes any game object from the screen
540 |         gameObject.destroy();
541 |     }
542 |     </script>
543 | </body>
544 | 
545 | </html>


--------------------------------------------------------------------------------
/11_improved_ladders.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Ladders Improved - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: 'arcade',
 20 |             arcade: {
 21 |                 fps: 120,
 22 |                 gravity: { y: 300 }
 23 |             }
 24 |         },
 25 |         scene: {
 26 |             preload: preload,
 27 |             create: create,
 28 |             update: update
 29 |         }
 30 |     };
 31 | 
 32 |     var player,
 33 |         baddie,
 34 |         coins,
 35 |         scoreCoin,
 36 |         scoreCoinTimeline,
 37 |         platforms,
 38 |         ladders,
 39 |         cursors,
 40 |         score = 0,
 41 |         scoreText,
 42 |         acceleration = 600,
 43 |         jumpVelocity = -330,
 44 |         wasStanding = false,
 45 |         onLadder = false,
 46 |         edgeTimer = 0,
 47 |         prevPos = 0,
 48 |         yPos = 0,
 49 |         touchJump = false,
 50 |         touchJumpThreshold = 5,
 51 |         touchSlider,
 52 |         sliderBar,
 53 |         sliderKnob,
 54 |         touchMoving = false,
 55 |         isTouch = false,
 56 |         touchMoveThreshold = 3,
 57 |         largeThumbMoveAcross = 25,
 58 |         thumbSizeOffset = 60,
 59 |         startX;
 60 | 
 61 |     var game = new Phaser.Game(config);
 62 | 
 63 |     function preload() {
 64 |         this.load.setBaseURL("assets/");
 65 |         this.load.image('ground', 'platform.jpg');
 66 |         this.load.image('coin', 'coin.jpg');
 67 |         this.load.image('hero', 'hero.jpg');
 68 |         this.load.image('baddie', 'baddie.jpg');
 69 |         this.load.image('ladder', 'ladder.png');
 70 |         this.load.image("logo", "digitherium-logo.jpg");
 71 |         this.load.image('touch-slider', 'touch-slider.png');
 72 |         this.load.image('touch-knob', 'touch-knob.png');
 73 |     }
 74 | 
 75 |     function create() {
 76 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 77 |         logo.alpha = 0.4;
 78 |         logo.setScale(0.5);
 79 | 
 80 |         this.input.addPointer(1);
 81 |         platforms = this.physics.add.staticGroup();
 82 | 
 83 |         platforms.create(400, 400, 'ground').setScale(2).refreshBody();
 84 |         platforms.create(50, 240, 'ground');
 85 |         platforms.create(750, 140, 'ground');
 86 | 
 87 |         ladders = this.physics.add.staticGroup();
 88 |         ladders.enableBody = true;
 89 |         ladder = ladders.create(268, 296, 'ladder');
 90 |         ladder.body.immovable = true;
 91 | 
 92 |         player = this.physics.add.sprite(100, 350, 'hero');
 93 |         player.setOrigin(.5, .5);
 94 |         player.setCollideWorldBounds(true);
 95 | 
 96 |         baddie = this.physics.add.sprite(620, 350, 'baddie');
 97 |         baddie.setOrigin(.5, .5);
 98 |         baddie.setCollideWorldBounds(true);
 99 |         baddie.body.velocity.x = -100;
100 |         baddie.maxDistance = 300;
101 |         baddie.previousX = baddie.x;
102 | 
103 |         buildTouchSlider(this);
104 |         //Set bounce to 0, so our hero just lands directly
105 |         player.setBounce(0);
106 |         //Set top speeds
107 |         player.body.maxVelocity.x = 200;
108 |         player.body.maxVelocity.y = 500;
109 | 
110 |         cursors = this.input.keyboard.createCursorKeys();
111 | 
112 |         coins = this.physics.add.group({
113 |             key: 'coin',
114 |             repeat: 11,
115 |             setXY: { x: 12, y: 0, stepX: 70 }
116 |         });
117 | 
118 |         coins.children.iterate(function(child) {
119 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
120 |         });
121 | 
122 |         scoreCoin = this.add.sprite(30, 32, 'coin');
123 |         scoreCoin.setOrigin(.5, .5);
124 |         scoreCoin.scaleX = .5;
125 |         scoreCoin.scaleY = .5;
126 |         scoreText = this.add.text(46, 20, '0', { fontSize: '24px', fill: '#fff' });
127 | 
128 |         this.physics.add.collider(player, platforms);
129 |         this.physics.add.collider(baddie, platforms);
130 |         this.physics.add.collider(coins, platforms);
131 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
132 |         this.physics.add.overlap(player, baddie, hitBaddie, null, this);
133 |         this.physics.add.overlap(player, ladders, isOnLadder, null, this);
134 |         this.physics.add.collider(player, ladders, null, checkLadderTop, this);
135 |     }
136 | 
137 |     function hitBaddie(player, baddie) {
138 |         if (baddie.body.touching.up && !baddie.hit) {
139 |             // set baddie as being hit and remove physics
140 |             baddie.disableBody(false, false);
141 |             player.setVelocityY(jumpVelocity);
142 | 
143 |             var tween = this.tweens.add({
144 |                 targets: baddie,
145 |                 alpha: 0.3,
146 |                 scaleX: 1.5,
147 |                 scaleY: 1.5,
148 |                 ease: 'Linear',
149 |                 duration: 200,
150 |                 onComplete: function() {
151 |                     destroyGameObject(baddie);
152 |                 },
153 |             });
154 |         }
155 |         //otherwise you've hit baddie, but not on the head. This makes you die
156 |         else {
157 |             //set player to dead
158 | 
159 |             player.disableBody(false, false);
160 |             var tween = this.tweens.add({
161 |                 targets: player,
162 |                 alpha: 0.3,
163 |                 scaleX: 1.1,
164 |                 scaleY: 1.1,
165 |                 angle: 90,
166 |                 x: player.x - 20,
167 |                 y: player.y - 20,
168 |                 ease: 'Linear',
169 |                 duration: 200,
170 |                 onComplete: function() {
171 |                     restartGame(this);
172 |                 },
173 |                 onCompleteScope: this
174 |             });
175 |         }
176 |     }
177 | 
178 |     function restartGame(game) {
179 |         game.scene.restart();
180 |     }
181 | 
182 |     function buildTouchSlider(game) {
183 |         sliderBar = game.add.sprite(0, 0, 'touch-slider');
184 |         sliderKnob = game.add.sprite(0, 0, 'touch-knob');
185 | 
186 |         touchSlider = game.add.container(100, 450);
187 |         touchSlider.add(sliderBar);
188 |         touchSlider.add(sliderKnob);
189 |         touchSlider.alpha = 0;
190 |     }
191 | 
192 |     function moveLeft(acceleration) {
193 |         var standing = player.body.blocked.down || player.body.touching.down;
194 |         //if hero is on ground then use full acceleration
195 |         if (standing) {
196 |             player.setAccelerationX(-acceleration);
197 |         }
198 |         //if hero is in the air then accelerate slower
199 |         else {
200 |             player.setAccelerationX(-acceleration / 3);
201 |         }
202 |     }
203 | 
204 |     function moveRight(acceleration) {
205 |         var standing = player.body.blocked.down || player.body.touching.down;
206 |         //if hero is on ground then use full acceleration
207 |         if (standing) {
208 |             player.setAccelerationX(acceleration);
209 |         }
210 |         //if hero is in the air then accelerate slower
211 |         else {
212 |             player.setAccelerationX(acceleration / 3);
213 |         }
214 |     }
215 | 
216 |     function switchDirection(baddie) {
217 |         //reverse velocity so baddie moves are same speed but in opposite direction
218 |         baddie.body.velocity.x *= -1;
219 |         //reset count
220 |         baddie.previousX = baddie.x;
221 |         //flip sprite
222 |         //baddie.scale.setTo(-baddie.scale.x, 1);
223 |     }
224 | 
225 |     //called when player overlaps ladder
226 |     function isOnLadder(player, ladder) {
227 |         //set ladder flag to true and remove gravity
228 |         if (Math.floor(player.y) + (player.height / 2) > ladder.y - (ladder.height / 2)) {
229 |             onLadder = true;
230 |             player.body.setAllowGravity(false);
231 |         }
232 |     }
233 | 
234 |     //called when player collides with ladder
235 |     function checkLadderTop(player, ladder) {
236 |         /* We check here if our player is higher up than the ladder i.e. if the player is on top of the ladder
237 |         the sprites are positioned from their centres, so we have to add or subtract half their height to find the heroes feet and the top of the ladder. 
238 |         With the player we add half the height so we are checking the positon of their feet. With the ladder we add half the height so we are checking the top of the ladder. We also round the two values differently, floor for the player to give us the smallest number possible and ceil for the ladder height to give us the highest number possible. This deals with any subpixel values.
239 |         */
240 |         if (Math.floor(player.y + (player.height / 2)) <= Math.ceil(ladder.y - (ladder.height / 2))) {
241 |             //if pressing the down key, or touch down return false and cancel collision
242 |             if (cursors.down.isDown || (Math.floor(prevPos) < Math.floor(yPos))) return false;
243 |             //return true making our collision happen i.e. the player can walk on top of the ladder
244 |             else return true;
245 |         }
246 |         //otherwise return false which cancels the collision
247 |         else {
248 |             return false;
249 |         }
250 |     }
251 | 
252 |     function update() {
253 |         //built in arcade physics functions of blocked and touching to test for collisions in a given direction
254 |         var standing = player.body.blocked.down || player.body.touching.down,
255 |             //get current time in seconds
256 |             d = new Date(),
257 |             time = d.getTime();
258 | 
259 |         //if left key is down then move left
260 |         if (cursors.left.isDown) {
261 |             moveLeft(acceleration);
262 |         }
263 |         //same deal but for right arrow
264 |         else if (cursors.right.isDown) {
265 |             moveRight(acceleration);
266 |         }
267 | 
268 |         if (Math.abs(baddie.x - baddie.previousX) >= baddie.maxDistance) {
269 |             switchDirection(baddie);
270 |         }
271 | 
272 |         //if either touch pointer is down. Two thumbs, two pointers
273 |         if (this.input.pointer1.isDown || this.input.pointer2.isDown) {
274 |             //work out half way point of our game
275 |             var leftHalf = config.width / 2;
276 | 
277 |             //Left hand side - horizontal movement
278 |             //if thumb is on the left hand side of the screen we are dealing with horizontal movement
279 |             if (this.input.pointer1.x < leftHalf || this.input.pointer2.x < leftHalf) {
280 |                 //reset pointer variable
281 |                 var myMovePointer = null;
282 |                 //here we get the pointer that is being used on the left hand side of screen. Depends which thumb they touched screen with first.
283 |                 if (this.input.pointer1.x < leftHalf && this.input.pointer1.isDown) {
284 |                     myMovePointer = this.input.pointer1;
285 |                 }
286 |                 if (this.input.pointer2.x < leftHalf && this.input.pointer2.isDown) {
287 |                     myMovePointer = this.input.pointer2;
288 |                 }
289 | 
290 |                 //if we have an active touch pointer on the left hand side of the screen then...
291 |                 if (myMovePointer) {
292 |                     //if touchSlide is not already showing then
293 |                     if (!touchSlider.alpha) {
294 |                         //make it visible
295 |                         touchSlider.alpha = 1;
296 |                         //position touchSlider to be where the users thumb or finger is
297 |                         touchSlider.x = myMovePointer.x;
298 |                         //with the Y pos we add a thumbSizeOffset so it's above the users thumb not hidden under it
299 |                         touchSlider.y = myMovePointer.y - thumbSizeOffset;
300 |                         //set our start point and reset slider display
301 |                         startX = myMovePointer.x;
302 |                         sliderKnob.x = 0;
303 |                     }
304 | 
305 |                     //if thumb has moved left or right of where we started then move
306 |                     if (myMovePointer.x < startX || myMovePointer.x > startX) {
307 |                         //work out how far thumb has moved. Is this a big enough movement?
308 |                         var movement = 0;
309 |                         if (myMovePointer.x < startX) movement = startX - myMovePointer.x;
310 |                         if (myMovePointer.x > startX) movement = myMovePointer.x - startX;
311 |                         //If move is significant enough then move our character
312 |                         if (movement > touchMoveThreshold) {
313 |                             //set flag as we are definitely moving
314 |                             touchMoving = true;
315 |                             //set a flag so we know we are on a mobile device
316 |                             isTouch = true;
317 | 
318 |                             //set slider knob position to be half way to edge
319 |                             var sliderPos = 0;
320 |                             //left
321 |                             if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 4);
322 |                             //right
323 |                             if (myMovePointer.x > startX) sliderPos = sliderBar.width / 4;
324 | 
325 |                             //set acceleration to be an 8th of normal
326 |                             var tmpAcceleration = acceleration / 8;
327 | 
328 |                             //if thumb has moved quite a lot, then go faster
329 |                             if (movement > largeThumbMoveAcross) {
330 |                                 //the knob position should be at the edge as we're at full tilt
331 |                                 if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 2);
332 |                                 if (myMovePointer.x > startX) sliderPos = sliderBar.width / 2;
333 |                                 //acceleration is normal
334 |                                 tmpAcceleration = acceleration;
335 |                             }
336 | 
337 |                             //tween slider knob to position we just worked out
338 |                             var tween = this.tweens.add({
339 |                                 targets: sliderKnob,
340 |                                 x: sliderPos,
341 |                                 ease: "Power1",
342 |                                 duration: 300
343 |                             });
344 |                             if (myMovePointer.x < startX) moveLeft(tmpAcceleration);
345 |                             if (myMovePointer.x > startX) moveRight(tmpAcceleration);
346 |                         } else {
347 |                             //If move is really, really small then we don't count it. Stop moving
348 |                             //set moving flag to false
349 |                             touchMoving = false;
350 |                             //reset slider knob to center position
351 |                             var tween = this.tweens.add({
352 |                                 targets: sliderKnob,
353 |                                 x: 0,
354 |                                 ease: "Power1",
355 |                                 duration: 300
356 |                             });
357 |                         }
358 |                     }
359 |                 }
360 |             }
361 | 
362 |             //Right hand side - Touch Jumping
363 |             //if thumb is on the right hand side of the screen we are dealing with vertical movement - i.e. jumping.
364 |             if (this.input.pointer1.x > leftHalf || this.input.pointer2.x > leftHalf) {
365 |                 //reset pointer variable
366 |                 var myJumpPointer = null;
367 | 
368 |                 //get active touch pointer for this side of the screen
369 |                 if (this.input.pointer1.x > leftHalf && this.input.pointer1.isDown) {
370 |                     myJumpPointer = this.input.pointer1;
371 |                 }
372 |                 if (this.input.pointer2.x > leftHalf && this.input.pointer2.isDown) {
373 |                     myJumpPointer = this.input.pointer2;
374 |                 }
375 |                 //if we have a touch pointer on right hand side of screen...
376 |                 if (myJumpPointer) {
377 |                     //store last y position of touch pointer
378 |                     prevPos = yPos;
379 |                     //get new position of touch pointer
380 |                     yPos = myJumpPointer.y;
381 | 
382 |                     //check if we are currently overlapping a ladder. If we are then...
383 |                     if (onLadder) {
384 |                         //kill any upwards / downwards velocity from our hero
385 |                         player.setVelocityY(0);
386 | 
387 |                         //if moving up with thumb then climb up the ladder
388 |                         if (Math.floor(prevPos) > Math.floor(yPos)) {
389 |                             if (!myMovePointer) {
390 |                                 //when moving vertically we want the player pefectly lined up
391 |                                 player.x = ladder.x;
392 |                                 //also kill any x velocity to be sure
393 |                                 player.setVelocityX(0);
394 |                                 player.setVelocityY(-100);
395 |                             }
396 |                         }
397 |                         //if moving down with thumb then climb down the ladder
398 |                         if (Math.floor(prevPos) < Math.floor(yPos)) {
399 |                             if (!myMovePointer) {
400 |                                 //when moving vertically we want the player pefectly lined up
401 |                                 player.x = ladder.x;
402 |                                 //also kill any x velocity to be sure
403 |                                 player.setVelocityX(0);
404 |                                 player.setVelocityY(100);
405 |                             }
406 |                         }
407 |                     }
408 |                     //not on a ladder so go for a standard jump 
409 |                     else {
410 |                         //  if we have moved our thump upwards then we set jump flag to true
411 |                         if (prevPos - yPos > touchJumpThreshold) {
412 |                             touchJump = true;
413 |                         }
414 |                     }
415 |                 }
416 |             }
417 |             //neither thumb is down so reset touch movement variables and hide touchSlider
418 |         } else {
419 |             touchSlider.alpha = 0;
420 |             startX = 0;
421 |             touchMoving = false;
422 | 
423 |             if (onLadder) {
424 |                 //if player is on top of the ladder we reset the velocity, otherwise we leave them be to climb or descend
425 |                 if (Math.floor(player.y + (player.height / 2)) <= Math.ceil(ladder.y - (ladder.height / 2))) {
426 |                     player.setVelocityY(0);
427 |                 }
428 |             }
429 |         }
430 | 
431 |         //if not moving left or right via keys or touch device...
432 |         if (!cursors.right.isDown && !cursors.left.isDown && !touchMoving) {
433 |             //if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
434 |             if (Math.abs(player.body.velocity.x) < 10 && Math.abs(player.body.velocity.x) > -10) {
435 |                 player.setVelocityX(0);
436 |                 player.setAccelerationX(0);
437 |             } else {
438 |                 //if our hero isn't moving left or right then slow them down
439 |                 //this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number
440 |                 player.setAccelerationX(
441 |                     (player.body.velocity.x > 0 ? -1 : 1) * acceleration / 3
442 |                 );
443 |             }
444 |         }
445 | 
446 |         //get current time in seconds
447 |         var d = new Date();
448 |         var time = d.getTime();
449 | 
450 |         //if we have just left the ground set edge time for 100ms time
451 |         if (!standing && wasStanding) {
452 |             edgeTimer = time + 100;
453 |         }
454 | 
455 |         //if we are on a ladder and not on a touch device
456 |         if (onLadder && !isTouch) {
457 |             //kill any upwards / downwards velocity from our hero
458 |             player.setVelocityY(0);
459 | 
460 |             if (cursors.up.isDown) {
461 |                 if (!cursors.left.isDown && !cursors.right.isDown) {
462 |                     //when moving vertically we want the player pefectly lined up
463 |                     player.x = ladder.x;
464 |                     //also kill any x velocity to be sure
465 |                     player.setVelocityX(0);
466 |                     player.setVelocityY(-100);
467 |                 }
468 |             }
469 |             //if JUST down is being pressed then line up player perfectly with ladder. 
470 |             //We do this to make it quicker - but like a firemans pole
471 |             if (cursors.down.isDown && !cursors.left.isDown && !cursors.right.isDown) {
472 |                 //when moving vertically we want the player pefectly lined up
473 |                 player.x = ladder.x;
474 |                 //also kill any x velocity to be sure
475 |                 player.setVelocityX(0);
476 |                 player.setVelocityY(100);
477 |             }
478 |         }
479 | 
480 | 
481 |         //if player is standing, or just fallen off a ledge (within our allowed grace time) and..
482 |         //either up key is press, or touchjump flag is set AND they are not already jumping then jump!
483 |         if (
484 |             (standing || time <= edgeTimer) &&
485 |             (cursors.up.isDown || touchJump) &&
486 |             !jumping && !onLadder
487 |         ) {
488 |             player.setVelocityY(jumpVelocity);
489 |             jumping = true;
490 |         }
491 | 
492 |         //if not pressing up key...
493 |         if (!cursors.up.isDown) {
494 |             //if player is touching ground / platform then reset jump parametrs
495 |             if (player.body.touching.down) {
496 |                 jumping = false;
497 |                 touchJump = false;
498 |                 prevPos = 0;
499 |             }
500 |         }
501 |         wasStanding = standing;
502 |         //if player is no longer on on ladder then turn gravity back on
503 |         if (!onLadder) player.body.setAllowGravity(true);
504 |         onLadder = false;
505 |     }
506 | 
507 | 
508 |     function collectCoin(player, coin) {
509 |         //stop coin for being collected twice, as it will stick around on the screen as it animnates
510 |         coin.disableBody(false, false);
511 | 
512 |         //tween coin to score coin in corner shrink
513 |         var tween = this.tweens.add({
514 |             targets: coin,
515 |             alpha: 0.3,
516 |             angle: 720,
517 |             x: scoreCoin.x,
518 |             y: scoreCoin.y,
519 |             scaleX: 0.5,
520 |             scaleY: 0.5,
521 |             ease: 'Linear',
522 |             duration: 500,
523 |             onComplete: function() {
524 |                 destroyGameObject(coin);
525 |             },
526 |         });
527 | 
528 |         //check if we already have an animation
529 |         if (scoreCoinTimeline) {
530 |             //if animation isn't currently running, then run again
531 |             if (scoreCoinTimeline.progress == 1) {
532 |                 animateScoreCoin(this);
533 |             }
534 |         }
535 |         //no animation to create one
536 |         else {
537 |             animateScoreCoin(this);
538 |         }
539 |         score += 10;
540 |         scoreText.setText(score);
541 |     }
542 | 
543 |     //rotate score coin and make bigger before shrinking again
544 |     function animateScoreCoin(game) {
545 |         scoreCoinTimeline = game.tweens.timeline({
546 |             targets: scoreCoin,
547 |             duration: 100,
548 |             tweens: [{
549 |                     scaleX: 0.8,
550 |                     scaleY: 0.8,
551 |                     angle: "+=45"
552 |                 },
553 |                 {
554 |                     scaleX: 0.5,
555 |                     scaleY: 0.5,
556 |                     angle: "+=45"
557 |                 }
558 |             ]
559 |         });
560 |     }
561 | 
562 |     function destroyGameObject(gameObject) {
563 |         // Removes any game object from the screen
564 |         gameObject.destroy();
565 |     }
566 |     </script>
567 | </body>
568 | 
569 | </html>


--------------------------------------------------------------------------------
/12_shells.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Shells - Phaser Platformer series</title>
  7 |     <script src="js/phaser.min.js"></script>
  8 |     <link rel="stylesheet" href="css/screen.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script type="text/javascript">
 13 |     var config = {
 14 |         type: Phaser.AUTO,
 15 |         width: 800,
 16 |         height: 400,
 17 |         transparent: true,
 18 |         physics: {
 19 |             default: 'arcade',
 20 |             arcade: {
 21 |                 fps: 120,
 22 |                 gravity: { y: 300 }
 23 |             }
 24 |         },
 25 |         scene: {
 26 |             preload: preload,
 27 |             create: create,
 28 |             update: update
 29 |         }
 30 |     };
 31 | 
 32 |     var player,
 33 |         baddie,
 34 |         coins,
 35 |         scoreCoin,
 36 |         scoreCoinTimeline,
 37 |         platforms,
 38 |         ladders,
 39 |         cursors,
 40 |         score = 0,
 41 |         scoreText,
 42 |         acceleration = 600,
 43 |         jumpVelocity = -330,
 44 |         wasStanding = false,
 45 |         onLadder = false,
 46 |         edgeTimer = 0,
 47 |         prevPos = 0,
 48 |         yPos = 0,
 49 |         touchJump = false,
 50 |         touchJumpThreshold = 5,
 51 |         touchSlider,
 52 |         sliderBar,
 53 |         sliderKnob,
 54 |         touchMoving = false,
 55 |         isTouch = false,
 56 |         touchMoveThreshold = 3,
 57 |         largeThumbMoveAcross = 25,
 58 |         thumbSizeOffset = 60,
 59 |         startX,
 60 |         shell,
 61 |         shellSpeed = 500;
 62 | 
 63 |     var game = new Phaser.Game(config);
 64 | 
 65 |     function preload() {
 66 |         this.load.setBaseURL("assets/");
 67 |         this.load.image('ground', 'platform.jpg');
 68 |         this.load.image('coin', 'coin.jpg');
 69 |         this.load.image('hero', 'hero.jpg');
 70 |         this.load.image('baddie', 'baddie.jpg');
 71 |         this.load.image('ladder', 'ladder.png');
 72 |         this.load.image('shell', 'shell.png');
 73 |         this.load.image("logo", "digitherium-logo.jpg");
 74 |         this.load.image('touch-slider', 'touch-slider.png');
 75 |         this.load.image('touch-knob', 'touch-knob.png');
 76 |     }
 77 | 
 78 |     function create() {
 79 |         var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
 80 |         logo.alpha = 0.4;
 81 |         logo.setScale(0.5);
 82 | 
 83 |         this.input.addPointer(1);
 84 |         platforms = this.physics.add.staticGroup();
 85 | 
 86 |         platforms.create(400, 400, 'ground').setScale(2).refreshBody();
 87 |         platforms.create(50, 240, 'ground');
 88 |         platforms.create(750, 140, 'ground');
 89 | 
 90 |         ladders = this.physics.add.staticGroup();
 91 |         ladders.enableBody = true;
 92 |         ladder = ladders.create(268, 296, 'ladder');
 93 |         ladder.body.immovable = true;
 94 | 
 95 |         player = this.physics.add.sprite(100, 350, 'hero');
 96 |         player.setOrigin(.5, .5);
 97 |         player.setCollideWorldBounds(true);
 98 | 
 99 |         baddie = this.physics.add.sprite(620, 350, 'baddie');
100 |         baddie.setOrigin(.5, .5);
101 |         baddie.setCollideWorldBounds(true);
102 |         baddie.body.velocity.x = -100;
103 |         baddie.maxDistance = 300;
104 |         baddie.previousX = baddie.x;
105 | 
106 |         shell = this.physics.add.sprite(200, 350, 'shell');
107 |         shell.setOrigin(.5, .5);
108 | 
109 |         buildTouchSlider(this);
110 |         //Set bounce to 0, so our hero just lands directly
111 |         player.setBounce(0);
112 |         //Set top speeds
113 |         player.body.maxVelocity.x = 200;
114 |         player.body.maxVelocity.y = 500;
115 | 
116 |         cursors = this.input.keyboard.createCursorKeys();
117 | 
118 |         coins = this.physics.add.group({
119 |             key: 'coin',
120 |             repeat: 11,
121 |             setXY: { x: 12, y: 0, stepX: 70 }
122 |         });
123 | 
124 |         coins.children.iterate(function(child) {
125 |             child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
126 |         });
127 | 
128 |         scoreCoin = this.add.sprite(30, 32, 'coin');
129 |         scoreCoin.setOrigin(.5, .5);
130 |         scoreCoin.scaleX = .5;
131 |         scoreCoin.scaleY = .5;
132 |         scoreText = this.add.text(46, 20, '0', { fontSize: '24px', fill: '#fff' });
133 | 
134 |         this.physics.add.collider(player, platforms);
135 |         this.physics.add.collider(baddie, platforms);
136 |         this.physics.add.collider(coins, platforms);
137 |         this.physics.add.collider(shell, platforms);
138 |         this.physics.add.collider(player, shell, shellHit, null, this);
139 |         this.physics.add.overlap(player, coins, collectCoin, null, this);
140 |         this.physics.add.overlap(player, baddie, hitBaddie, null, this);
141 |         this.physics.add.overlap(player, ladders, isOnLadder, null, this);
142 |         this.physics.add.collider(player, ladders, null, checkLadderTop, this);
143 |         this.physics.add.overlap(shell, baddie, shellHitBaddie, null, this);
144 |     }
145 | 
146 |     function hitBaddie(player, baddie) {
147 |         if (baddie.body.touching.up && !baddie.hit) {
148 |             // set baddie as being hit and remove physics
149 |             baddie.disableBody(false, false);
150 |             player.setVelocityY(jumpVelocity);
151 | 
152 |             var tween = this.tweens.add({
153 |                 targets: baddie,
154 |                 alpha: 0.3,
155 |                 scaleX: 1.5,
156 |                 scaleY: 1.5,
157 |                 ease: 'Linear',
158 |                 duration: 200,
159 |                 onComplete: function() {
160 |                     destroyGameObject(baddie);
161 |                 },
162 |             });
163 |         }
164 |         //otherwise you've hit baddie, but not on the head. This makes you die
165 |         else {
166 |             //set player to dead
167 | 
168 |             player.disableBody(false, false);
169 |             var tween = this.tweens.add({
170 |                 targets: player,
171 |                 alpha: 0.3,
172 |                 scaleX: 1.1,
173 |                 scaleY: 1.1,
174 |                 angle: 90,
175 |                 x: player.x - 20,
176 |                 y: player.y - 20,
177 |                 ease: 'Linear',
178 |                 duration: 200,
179 |                 onComplete: function() {
180 |                     restartGame(this);
181 |                 },
182 |                 onCompleteScope: this
183 |             });
184 |         }
185 |     }
186 | 
187 |     function shellHitBaddie(shell, baddie) {
188 |         if (!baddie.hit) {
189 |             // set baddie as being hit and remove physics
190 |             baddie.disableBody(false, false);
191 |             //play baddie death animation
192 |             var tween = this.tweens.add({
193 |                 targets: baddie,
194 |                 alpha: 0.3,
195 |                 scaleX: 1.5,
196 |                 scaleY: 1.5,
197 |                 ease: 'Linear',
198 |                 duration: 200,
199 |                 onComplete: function() {
200 |                     destroyGameObject(baddie);
201 |                 },
202 |             });
203 | 
204 |             //disable physics of shell
205 |             shell.disableBody(false, false);
206 |             //play shell hit animation
207 |             var tween2 = this.tweens.add({
208 |                 targets: shell,
209 |                 alpha: 0.3,
210 |                 scaleX: 2,
211 |                 scaleY: 2,
212 |                 y: "-=100",
213 |                 rotation: -360,
214 |                 ease: 'Linear',
215 |                 duration: 200,
216 |                 onComplete: function() {
217 |                     destroyGameObject(shell);
218 |                 },
219 |             });
220 |         }
221 |     }
222 | 
223 |     function shellHit(player, shell) {
224 |         //work out the center point of the shell and player
225 |         var threshold = shell.x + (shell.width / 2),
226 |             playerX = player.x + (player.width / 2);
227 | 
228 |         //if the player has jumped on top of the shell...
229 |         if (shell.body.touching.up) {
230 |             //if player landed on left hand side of shell send shell off to right
231 |             if (playerX < threshold) shell.body.velocity.x = shellSpeed;
232 |             //if player landed on right hand side of shell send shell off to left
233 |             else shell.body.velocity.x = -shellSpeed;
234 |         }
235 |         //player hit shell from left so send right
236 |         if (shell.body.touching.left) {
237 |             shell.body.velocity.x = shellSpeed;
238 |         }
239 |         //player hit shell from right so send left
240 |         if (shell.body.touching.right) {
241 |             shell.body.velocity.x = -shellSpeed;
242 |         }
243 |         //make player react to shell by bouncing slightly
244 |         player.body.velocity.y = -200;
245 |     }
246 | 
247 |     function restartGame(game) {
248 |         game.scene.restart();
249 |     }
250 | 
251 |     function buildTouchSlider(game) {
252 |         sliderBar = game.add.sprite(0, 0, 'touch-slider');
253 |         sliderKnob = game.add.sprite(0, 0, 'touch-knob');
254 | 
255 |         touchSlider = game.add.container(100, 450);
256 |         touchSlider.add(sliderBar);
257 |         touchSlider.add(sliderKnob);
258 |         touchSlider.alpha = 0;
259 |     }
260 | 
261 |     function moveLeft(acceleration) {
262 |         var standing = player.body.blocked.down || player.body.touching.down;
263 |         //if hero is on ground then use full acceleration
264 |         if (standing) {
265 |             player.setAccelerationX(-acceleration);
266 |         }
267 |         //if hero is in the air then accelerate slower
268 |         else {
269 |             player.setAccelerationX(-acceleration / 3);
270 |         }
271 |     }
272 | 
273 |     function moveRight(acceleration) {
274 |         var standing = player.body.blocked.down || player.body.touching.down;
275 |         //if hero is on ground then use full acceleration
276 |         if (standing) {
277 |             player.setAccelerationX(acceleration);
278 |         }
279 |         //if hero is in the air then accelerate slower
280 |         else {
281 |             player.setAccelerationX(acceleration / 3);
282 |         }
283 |     }
284 | 
285 |     function switchDirection(baddie) {
286 |         //reverse velocity so baddie moves are same speed but in opposite direction
287 |         baddie.body.velocity.x *= -1;
288 |         //reset count
289 |         baddie.previousX = baddie.x;
290 |         //flip sprite
291 |         //baddie.scale.setTo(-baddie.scale.x, 1);
292 |     }
293 | 
294 |     //called when player overlaps ladder
295 |     function isOnLadder(player, ladder) {
296 |         //set ladder flag to true and remove gravity but only if not at the top of the ladder
297 |         if (Math.floor(player.y) + (player.height / 2) > ladder.y - (ladder.height / 2)) {
298 |             onLadder = true;
299 |             player.body.setAllowGravity(false);
300 |         }
301 |     }
302 | 
303 |     //called when player collides with ladder
304 |     function checkLadderTop(player, ladder) {
305 |         /* We check here if our player is higher up than the ladder i.e. if the player is on top of the ladder
306 |         the sprites are positioned from their centres, so we have to add or subtract half their height to find the heroes feet and the top of the ladder. 
307 |         With the player we add half the height so we are checking the positon of their feet. With the ladder we add half the height so we are checking the top of the ladder. We also round the two values differently, floor for the player to give us the smallest number possible and ceil for the ladder height to give us the highest number possible. This deals with any subpixel values.
308 |         */
309 |         if (Math.floor(player.y + (player.height / 2)) <= Math.ceil(ladder.y - (ladder.height / 2))) {
310 |             //if pressing the down key, or touch down return false and cancel collision
311 |             if (cursors.down.isDown || (Math.floor(prevPos) < Math.floor(yPos))) return false;
312 |             //return true making our collision happen i.e. the player can walk on top of the ladder
313 |             else return true;
314 |         }
315 |         //otherwise return false which cancels the collision
316 |         else {
317 |             return false;
318 |         }
319 |     }
320 | 
321 |     function update() {
322 |         //built in arcade physics functions of blocked and touching to test for collisions in a given direction
323 |         var standing = player.body.blocked.down || player.body.touching.down,
324 |             //get current time in seconds
325 |             d = new Date(),
326 |             time = d.getTime();
327 | 
328 |         //if left key is down then move left
329 |         if (cursors.left.isDown) {
330 |             moveLeft(acceleration);
331 |         }
332 |         //same deal but for right arrow
333 |         else if (cursors.right.isDown) {
334 |             moveRight(acceleration);
335 |         }
336 | 
337 |         if (Math.abs(baddie.x - baddie.previousX) >= baddie.maxDistance) {
338 |             switchDirection(baddie);
339 |         }
340 | 
341 |         //if either touch pointer is down. Two thumbs, two pointers
342 |         if (this.input.pointer1.isDown || this.input.pointer2.isDown) {
343 |             //work out half way point of our game
344 |             var leftHalf = config.width / 2;
345 | 
346 |             //Left hand side - horizontal movement
347 |             //if thumb is on the left hand side of the screen we are dealing with horizontal movement
348 |             if (this.input.pointer1.x < leftHalf || this.input.pointer2.x < leftHalf) {
349 |                 //reset pointer variable
350 |                 var myMovePointer = null;
351 |                 //here we get the pointer that is being used on the left hand side of screen. Depends which thumb they touched screen with first.
352 |                 if (this.input.pointer1.x < leftHalf && this.input.pointer1.isDown) {
353 |                     myMovePointer = this.input.pointer1;
354 |                 }
355 |                 if (this.input.pointer2.x < leftHalf && this.input.pointer2.isDown) {
356 |                     myMovePointer = this.input.pointer2;
357 |                 }
358 | 
359 |                 //if we have an active touch pointer on the left hand side of the screen then...
360 |                 if (myMovePointer) {
361 |                     //if touchSlide is not already showing then
362 |                     if (!touchSlider.alpha) {
363 |                         //make it visible
364 |                         touchSlider.alpha = 1;
365 |                         //position touchSlider to be where the users thumb or finger is
366 |                         touchSlider.x = myMovePointer.x;
367 |                         //with the Y pos we add a thumbSizeOffset so it's above the users thumb not hidden under it
368 |                         touchSlider.y = myMovePointer.y - thumbSizeOffset;
369 |                         //set our start point and reset slider display
370 |                         startX = myMovePointer.x;
371 |                         sliderKnob.x = 0;
372 |                     }
373 | 
374 |                     //if thumb has moved left or right of where we started then move
375 |                     if (myMovePointer.x < startX || myMovePointer.x > startX) {
376 |                         //work out how far thumb has moved. Is this a big enough movement?
377 |                         var movement = 0;
378 |                         if (myMovePointer.x < startX) movement = startX - myMovePointer.x;
379 |                         if (myMovePointer.x > startX) movement = myMovePointer.x - startX;
380 |                         //If move is significant enough then move our character
381 |                         if (movement > touchMoveThreshold) {
382 |                             //set flag as we are definitely moving
383 |                             touchMoving = true;
384 |                             //set a flag so we know we are on a mobile device
385 |                             isTouch = true;
386 | 
387 |                             //set slider knob position to be half way to edge
388 |                             var sliderPos = 0;
389 |                             //left
390 |                             if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 4);
391 |                             //right
392 |                             if (myMovePointer.x > startX) sliderPos = sliderBar.width / 4;
393 | 
394 |                             //set acceleration to be an 8th of normal
395 |                             var tmpAcceleration = acceleration / 8;
396 | 
397 |                             //if thumb has moved quite a lot, then go faster
398 |                             if (movement > largeThumbMoveAcross) {
399 |                                 //the knob position should be at the edge as we're at full tilt
400 |                                 if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 2);
401 |                                 if (myMovePointer.x > startX) sliderPos = sliderBar.width / 2;
402 |                                 //acceleration is normal
403 |                                 tmpAcceleration = acceleration;
404 |                             }
405 | 
406 |                             //tween slider knob to position we just worked out
407 |                             var tween = this.tweens.add({
408 |                                 targets: sliderKnob,
409 |                                 x: sliderPos,
410 |                                 ease: "Power1",
411 |                                 duration: 300
412 |                             });
413 |                             if (myMovePointer.x < startX) moveLeft(tmpAcceleration);
414 |                             if (myMovePointer.x > startX) moveRight(tmpAcceleration);
415 |                         } else {
416 |                             //If move is really, really small then we don't count it. Stop moving
417 |                             //set moving flag to false
418 |                             touchMoving = false;
419 |                             //reset slider knob to center position
420 |                             var tween = this.tweens.add({
421 |                                 targets: sliderKnob,
422 |                                 x: 0,
423 |                                 ease: "Power1",
424 |                                 duration: 300
425 |                             });
426 |                         }
427 |                     }
428 |                 }
429 |             }
430 | 
431 |             //Right hand side - Touch Jumping
432 |             //if thumb is on the right hand side of the screen we are dealing with vertical movement - i.e. jumping.
433 |             if (this.input.pointer1.x > leftHalf || this.input.pointer2.x > leftHalf) {
434 |                 //reset pointer variable
435 |                 var myJumpPointer = null;
436 | 
437 |                 //get active touch pointer for this side of the screen
438 |                 if (this.input.pointer1.x > leftHalf && this.input.pointer1.isDown) {
439 |                     myJumpPointer = this.input.pointer1;
440 |                 }
441 |                 if (this.input.pointer2.x > leftHalf && this.input.pointer2.isDown) {
442 |                     myJumpPointer = this.input.pointer2;
443 |                 }
444 |                 //if we have a touch pointer on right hand side of screen...
445 |                 if (myJumpPointer) {
446 |                     //store last y position of touch pointer
447 |                     prevPos = yPos;
448 |                     //get new position of touch pointer
449 |                     yPos = myJumpPointer.y;
450 | 
451 |                     //check if we are currently overlapping a ladder. If we are then...
452 |                     if (onLadder) {
453 |                         //kill any upwards / downwards velocity from our hero
454 |                         player.setVelocityY(0);
455 | 
456 |                         //if moving up with thumb then climb up the ladder
457 |                         if (Math.floor(prevPos) > Math.floor(yPos)) {
458 |                             if (!myMovePointer) {
459 |                                 //when moving vertically we want the player pefectly lined up
460 |                                 player.x = ladder.x;
461 |                                 //also kill any x velocity to be sure
462 |                                 player.setVelocityX(0);
463 |                                 player.setVelocityY(-100);
464 |                             }
465 |                         }
466 |                         //if moving down with thumb then climb down the ladder
467 |                         if (Math.floor(prevPos) < Math.floor(yPos)) {
468 |                             if (!myMovePointer) {
469 |                                 //when moving vertically we want the player pefectly lined up
470 |                                 player.x = ladder.x;
471 |                                 //also kill any x velocity to be sure
472 |                                 player.setVelocityX(0);
473 |                                 player.setVelocityY(100);
474 |                             }
475 |                         }
476 |                     }
477 |                     //not on a ladder so go for a standard jump 
478 |                     else {
479 |                         //  if we have moved our thump upwards then we set jump flag to true
480 |                         if (prevPos - yPos > touchJumpThreshold) {
481 |                             touchJump = true;
482 |                         }
483 |                     }
484 |                 }
485 |             }
486 |             //neither thumb is down so reset touch movement variables and hide touchSlider
487 |         } else {
488 |             touchSlider.alpha = 0;
489 |             startX = 0;
490 |             touchMoving = false;
491 | 
492 |             if (onLadder) {
493 |                 //if player is on top of the ladder we reset the velocity, otherwise we leave them be to climb or descend
494 |                 if (Math.floor(player.y + (player.height / 2)) <= Math.ceil(ladder.y - (ladder.height / 2))) {
495 |                     player.setVelocityY(0);
496 |                 }
497 |             }
498 |         }
499 | 
500 |         //if not moving left or right via keys or touch device...
501 |         if (!cursors.right.isDown && !cursors.left.isDown && !touchMoving) {
502 |             //if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
503 |             if (Math.abs(player.body.velocity.x) < 10 && Math.abs(player.body.velocity.x) > -10) {
504 |                 player.setVelocityX(0);
505 |                 player.setAccelerationX(0);
506 |             } else {
507 |                 //if our hero isn't moving left or right then slow them down
508 |                 //this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number
509 |                 player.setAccelerationX(
510 |                     (player.body.velocity.x > 0 ? -1 : 1) * acceleration / 3
511 |                 );
512 |             }
513 |         }
514 | 
515 |         //get current time in seconds
516 |         var d = new Date();
517 |         var time = d.getTime();
518 | 
519 |         //if we have just left the ground set edge time for 100ms time
520 |         if (!standing && wasStanding) {
521 |             edgeTimer = time + 100;
522 |         }
523 | 
524 |         //if we are on a ladder and not on a touch device
525 |         if (onLadder && !isTouch) {
526 |             //kill any upwards / downwards velocity from our hero
527 |             player.setVelocityY(0);
528 | 
529 |             if (cursors.up.isDown) {
530 |                 if (!cursors.left.isDown && !cursors.right.isDown) {
531 |                     //when moving vertically we want the player pefectly lined up
532 |                     player.x = ladder.x;
533 |                     //also kill any x velocity to be sure
534 |                     player.setVelocityX(0);
535 |                     player.setVelocityY(-100);
536 |                 }
537 |             }
538 |             //if JUST down is being pressed then line up player perfectly with ladder. 
539 |             //We do this to make it quicker - but like a firemans pole
540 |             if (cursors.down.isDown && !cursors.left.isDown && !cursors.right.isDown) {
541 |                 //when moving vertically we want the player pefectly lined up
542 |                 player.x = ladder.x;
543 |                 //also kill any x velocity to be sure
544 |                 player.setVelocityX(0);
545 |                 player.setVelocityY(100);
546 |             }
547 |         }
548 | 
549 | 
550 |         //if player is standing, or just fallen off a ledge (within our allowed grace time) and..
551 |         //either up key is press, or touchjump flag is set AND they are not already jumping then jump!
552 |         if (
553 |             (standing || time <= edgeTimer) &&
554 |             (cursors.up.isDown || touchJump) &&
555 |             !jumping && !onLadder
556 |         ) {
557 |             player.setVelocityY(jumpVelocity);
558 |             jumping = true;
559 |         }
560 | 
561 |         //if not pressing up key...
562 |         if (!cursors.up.isDown) {
563 |             //if player is touching ground / platform then reset jump parametrs
564 |             if (player.body.touching.down) {
565 |                 jumping = false;
566 |                 touchJump = false;
567 |                 prevPos = 0;
568 |             }
569 |         }
570 |         wasStanding = standing;
571 |         //if player is no longer on on ladder then turn gravity back on
572 |         if (!onLadder) player.body.setAllowGravity(true);
573 |         onLadder = false;
574 |     }
575 | 
576 | 
577 |     function collectCoin(player, coin) {
578 |         //stop coin for being collected twice, as it will stick around on the screen as it animnates
579 |         coin.disableBody(false, false);
580 | 
581 |         //tween coin to score coin in corner shrink
582 |         var tween = this.tweens.add({
583 |             targets: coin,
584 |             alpha: 0.3,
585 |             angle: 720,
586 |             x: scoreCoin.x,
587 |             y: scoreCoin.y,
588 |             scaleX: 0.5,
589 |             scaleY: 0.5,
590 |             ease: 'Linear',
591 |             duration: 500,
592 |             onComplete: function() {
593 |                 destroyGameObject(coin);
594 |             },
595 |         });
596 | 
597 |         //check if we already have an animation
598 |         if (scoreCoinTimeline) {
599 |             //if animation isn't currently running, then run again
600 |             if (scoreCoinTimeline.progress == 1) {
601 |                 animateScoreCoin(this);
602 |             }
603 |         }
604 |         //no animation to create one
605 |         else {
606 |             animateScoreCoin(this);
607 |         }
608 |         score += 10;
609 |         scoreText.setText(score);
610 |     }
611 | 
612 |     //rotate score coin and make bigger before shrinking again
613 |     function animateScoreCoin(game) {
614 |         scoreCoinTimeline = game.tweens.timeline({
615 |             targets: scoreCoin,
616 |             duration: 100,
617 |             tweens: [{
618 |                     scaleX: 0.8,
619 |                     scaleY: 0.8,
620 |                     angle: "+=45"
621 |                 },
622 |                 {
623 |                     scaleX: 0.5,
624 |                     scaleY: 0.5,
625 |                     angle: "+=45"
626 |                 }
627 |             ]
628 |         });
629 |     }
630 | 
631 |     function destroyGameObject(gameObject) {
632 |         // Removes any game object from the screen
633 |         gameObject.destroy();
634 |     }
635 |     </script>
636 | </body>
637 | 
638 | </html>


--------------------------------------------------------------------------------