GDT @ Plymouth Phaser Activity

var cursors;
var mainCamera;
var score = 0;
var scoreText;
var winText;
var GroundLayer;
var DecorationLayer;
var playerCharacter;
var coinGroup;
var eventEmitter = new Phaser.Events.EventEmitter();

var mainScene = class SceneA extends Phaser.Scene {

preload() {
    this.load.image('base_tiles', 'images/tiles_map.png')
    this.load.tilemapTiledJSON('tilemap', 'data/Map.json')
    this.load.spritesheet('playerSprite', 'images/characters_packed.png', { frameWidth: 24, frameHeight: 24 });
    this.load.image('coin1', 'images/coin.png');
    this.load.image('coin2', 'images/coinspin.png');
}

create() {
   mainCamera = this.cameras.main;
   coinGroup = this.physics.add.group({
        immovable: true,
        allowGravity: false
    });

this.scale.displaySize.setAspectRatio(window.innerWidth / window.innerHeight);

const map = this.make.tilemap({ key: 'tilemap' });
    const tileset = map.addTilesetImage('TileSet', 'base_tiles');
    GroundLayer = map.createLayer('Ground', tileset, 0, 0);
    DecorationLayer = map.createLayer('Decorations', tileset, 0, 0);

GroundLayer.setCollisionByExclusion(-1, true);

//Create Player
    playerCharacter = this.physics.add.sprite(300, 200, 'playerSprite', 4);
    playerCharacter.setBounce(0.1);
    playerCharacter.setGravityY(200);
    this.physics.add.collider(playerCharacter, GroundLayer);

//Create Coins, Maybe you could add more?
    coinGroup.create(400, 200, 'coin1');
    coinGroup.create(550, 150, 'coin1');
    coinGroup.create(700, 10, 'coin1');

//Animation creation
    this.anims.create({
        key: "walk",
        frameRate: 7,
        frames: this.anims.generateFrameNumbers("playerSprite", { start: 4, end: 5 }),
        repeat: -1
    });

this.anims.create({
        key: "spinningcoin",
        frameRate: 4,
        frames: [
            { key: 'coin1' },
            { key: 'coin2' }
        ],
        repeat: -1
    });

//Start the animations
    coinGroup.playAnimation('spinningcoin');

cursors = this.input.keyboard.createCursorKeys();
    mainCamera.centerOn(playerCharacter.x, playerCharacter.y);
    mainCamera.setZoom(2, 2)

// Add code below here

}

update() {

if (cursors.left.isDown) {
            playerCharacter.setVelocityX(-200);
            playerCharacter.flipX = false;
            if (playerCharacter.body.onFloor()) {
                playerCharacter.play('walk', true);

}
        } else if (cursors.right.isDown) {
            playerCharacter.setVelocityX(200);
            playerCharacter.flipX = true;
            if (playerCharacter.body.onFloor()) {
                playerCharacter.play('walk', true);

}
        } else {
            // If no keys are pressed, the player keeps still
            playerCharacter.setVelocityX(0);
            // Only show the idle animation if the player is footed
            // If this is not included, the player would look idle while jumping
            if (playerCharacter.body.onFloor()) {
                playerCharacter.play('walk', false);
            }
        }
        
        // Add Jumping here

}

};

function CollectCoin(player, coin) {
  coin.disableBody(true, true);
  score += 1;
  eventEmitter.emit('coinCollected');
};

var UIScene = class SceneB extends Phaser.Scene {

constructor ()
    {
        super({ key: 'UIScene', active: true });

this.score = 0;
    }

create ()
    {

eventEmitter.on('coinCollected', this.updateScore, this);

//Instruction Text
      this.add.text(16, window.innerHeight - 50, 'Collect the coins!', { fontSize: '24px', fill: '#000', fontStyle: 'Bold' });

//  Our Text object to display the Score
        scoreText = this.add.text(16, 16, 'Coins: 0', { fontSize: '32px', fill: '#000' });

//  Grab a reference to the Game Scene
        let ourGame = this.scene.get('SceneA');

//Win Text 
        winText = this.add.text(window.innerWidth / 2 - 40, 16, '', { fontSize: '32px', fill: '#F54441', fontStyle: 'Bold' });
    }

updateScore()
    {
      scoreText.setText('Score: ' + score + '/' + coinGroup.getLength());
      if (score >= coinGroup.length)
      {
        winText.setText('You win!');
        winText.setShadow(3, 3, 'rgba(0,0,0,0.2)', 5);
      }
    }

};

var config = {
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
    antialias: false,
    pixelArt: true,
    backgroundColor: '#87CEEB',

physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: [mainScene, UIScene]

};

var game = new Phaser.Game(config);

Phaser Activity

Modify the code & complete the game using the snippets below!

Code Snippets

1. Add Jumping

2. Camera Follow

2.1 Smooth that camera!

3. Coin collisons

4. More Coins!

5. Play around