Phaser

Main.js

import Player from 'objects/Player';

class Main extends Phaser.State {

	preload() {
		this.game.load.image('collision', 'assets/images/collision.png');
		this.game.load.image('tiles', 'assets/images/tiles.png');
		// levels
		this.game.load.tilemap('level1', 'assets/levels/prototype.json', null, Phaser.Tilemap.TILED_JSON);

		// player
		this.game.load.spritesheet('player', 'assets/images/player.png', 16, 32, 7);
		this.game.load.spritesheet('celery', 'assets/images/celery.png', 18, 18, 7);
		this.game.load.image('bullet', 'assets/images/shmup-bullet.png');

	}

	create() {
		//Enable Arcade Physics
		// const {centerX: x, centerY: y} = this.world;
		//let pixel = new Pixel();

		this.game.physics.startSystem(Phaser.Physics.ARCADE);
		this.game.physics.arcade.gravity.y = 700;
		this.game.plugins.add(Phaser.Plugin.ArcadeSlopes);

		this.map = this.game.add.tilemap('level1');
		this.map.addTilesetImage('Collision', 'collision');
		this.map.addTilesetImage('Background_1', 'tiles');

		//Set the games background colour
		this.game.stage.backgroundColor = '#000000';


		this.ground = this.map.createLayer('Collision');
		this.bg = this.map.createLayer('Background_1');
		this.bg.resizeWorld();
		this.ground.resizeWorld();

		this.ground.alpha = 0;

		this.game.slopes.convertTilemapLayer(this.ground, {
		    2:  'FULL',
		    3:  'HALF_BOTTOM_LEFT',
		    4:  'HALF_BOTTOM_RIGHT',
		    6:  'HALF_TOP_LEFT',
		    5:  'HALF_TOP_RIGHT',
		    15: 'QUARTER_BOTTOM_LEFT_LOW',
		    16: 'QUARTER_BOTTOM_RIGHT_LOW',
		    17: 'QUARTER_TOP_RIGHT_LOW',
		    18: 'QUARTER_TOP_LEFT_LOW',
		    19: 'QUARTER_BOTTOM_LEFT_HIGH',
		    20: 'QUARTER_BOTTOM_RIGHT_HIGH',
		    21: 'QUARTER_TOP_RIGHT_HIGH',
		    22: 'QUARTER_TOP_LEFT_HIGH',
		    23: 'QUARTER_LEFT_BOTTOM_HIGH',
		    24: 'QUARTER_RIGHT_BOTTOM_HIGH',
		    25: 'QUARTER_RIGHT_TOP_LOW',
		    26: 'QUARTER_LEFT_TOP_LOW',
		    27: 'QUARTER_LEFT_BOTTOM_LOW',
		    28: 'QUARTER_RIGHT_BOTTOM_LOW',
		    29: 'QUARTER_RIGHT_TOP_HIGH',
		    30: 'QUARTER_LEFT_TOP_HIGH',
		    31: 'HALF_BOTTOM',
		    32: 'HALF_RIGHT',
		    33: 'HALF_TOP',
		    34: 'HALF_LEFT'
		});

		this.map.setCollisionBetween(1, 34, true, 'Collision');

		// Player
		let playerPosition = this.findObjectsByType('playerStart', this.map, 'ObjectLayer');
		this.player = new Player(this.game, playerPosition[0].x, playerPosition[0].y, 'player', this.ground);
		// this.game.stage.addChild(this.player);
		this.game.slopes.enable(this.player);
		//this.player.body.slopes.preferY = true;

		this.game.time.advancedTiming = true;

		this.game.stage.smoothed = false;

		// timer
		this.timer = this.game.time.create();
		this.timerEvent = this.timer.add(Phaser.Timer.MINUTE * 1 + Phaser.Timer.SECOND * 30, this.endTimer, this);
		// Start the timer
    this.timer.start();
	}

	endTimer() {
      // Stop the timer when the delayed event triggers
      this.timer.stop();
  }

	findObjectsByType(type, map, layer) {
		console.log(type, map, layer);
		var result = new Array();
		map.objects[layer].forEach(function(element){
		 if(element.properties.type === type) {
			 //Phaser uses top left, Tiled bottom left so we have to adjust the y position
			 //also keep in mind that the cup images are a bit smaller than the tile which is 16x16
			 //so they might not be placed in the exact pixel position as in Tiled
			 element.y -= map.tileHeight;
			 result.push(element);
		 }
		});
		return result;
 	}

	update() {
		super.update();
		//this.player.update();
	}

	render() {
		// this.game.debug.body(this.player);
		//this.game.debug.spriteInfo(this.player, 20, 32);
		// this.game.debug.body(this.player.celery);
		this.game.debug.text(this.game.time.fps, 100, 14, "#00ff00");
	 	// this.game.debug.cameraInfo(this.game.camera, 32, 32);
		if (this.timer.running) {
				// Math.round(( this.timerEvent.delay - this.timer.ms)
				 this.game.debug.text(this.formatTime(Math.round(( this.timer.ms) / 1000)), 2, 14, "#ff0");
		 }
	}

	formatTime(s) {
      // Convert seconds (s) to a nicely formatted and padded time string
      var minutes = "0" + Math.floor(s / 60);
      var seconds = "0" + (s - minutes * 60);
      return minutes.substr(-2) + ":" + seconds.substr(-2);
  }



}

export default Main;

Player.js

import Weapon from 'objects/Weapon';

class Player extends Phaser.Sprite {

	constructor(game, x, y, asset, collision){
    super(game, x, y, asset);
    this.game = game;
    this.ground = collision;

		// Player default attribute
		this.features = {
			facing: 'right',
			isAttacking: false,
			currentWeaponName: 'celery',
			currentWeapon: null,
			standing: false,
			jump: 372,
			position: {
				x: x,
				y: y
			}
		}

    // player attribute
    this.anchor.setTo(0.5, 0.5);
    this.health = 100;
    this.game.physics.arcade.enable(this);
    this.body.collideWorldBounds = true;
    this.body.gravity.y = 300;

    this.body.setSize(19, 32);

    //this.animations.add('right', [0, 1, 2], 10, true);
    //this.animations.add('left', [4, 5, 7], 10, true);

		// player health bar
    this.playerHealthBar = this.game.add.sprite(8, 8, this.drawRect(64, 4, '#33ff00'));
    this.playerHealthBar.fixedToCamera = true;

    this.camera();
    this.controls();


    this.celery = new Weapon(this.game, 0, 0, 'celery', this);

    // add Player
    this.game.add.existing(this);
	}

  update() {
    super.update();
    this.game.physics.arcade.collide(this, this.ground); // move to main
		this.body.velocity.x = 0;
    this.controllPlayer();
    this.celery.frame = 0;
    if (this.features.facing === 'right') {
      this.celery.x = this.x + 18;
    }else {
      this.celery.x = this.x - 18;
    }

    this.celery.y = this.y;

		this.playerHealthBar.scale.x = this.health/100;
  }

  camera() {
		this.game.camera.follow(this); // make it to center
		this.game.camera.lerp.setTo(0.2, 0.2);
  }

  controls() {
    this.controls = this.game.input.keyboard.createCursorKeys();
    this.jumpButton = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
    this.attackKey = this.game.input.keyboard.addKey(Phaser.Keyboard.Z);
    this.fireWepon = this.game.input.keyboard.addKey(Phaser.Keyboard.A);
  }

  controllPlayer() {
		if (this.controls.left.isDown) {
	    this.body.velocity.x = -150;
      //this.play('left');
      if (this.features.facing !== 'left') {
        this.features.facing = 'left';
        console.log(this.features.facing);
      }
		} else if (this.controls.right.isDown) {
	    this.body.velocity.x = 150;
      //this.play('right');
      if (this.features.facing !== 'right') {
        this.features.facing = 'right';
        console.log(this.features.facing);
      }
		} else {
      //this.frame = 0;
	    this.animations.stop();
		}

		// jump
		if (this.jumpButton.isDown) {
			if (this.body.blocked.down || this.body.touching.down) {
		    this.body.velocity.y = -372;
				console.log(this.body.blocked.down);
			} else {
				null
			}
		}


    // attackKey
    if (this.attackKey.isDown) {
      if (this.features.facing === 'left') {
        if (this.body.blocked.down === false) {
          this.frame = 11;
        } else {
          this.frame = 9;
        }
      } else {
        if (this.body.blocked.down === false) {
          this.frame = 10;
        }else {
          this.frame = 8;
        }
      }
      this.attack();
    }


    // attack


		if (this.fireWepon.isDown) {
      this.celery.frame = 3;
      //this.celery.play('swing');
	    // this.weapon.fire();
      //setTimeout(()=>{
      //  this.health -= 10;
      //  if (this.health <= 0) {
      //    this.playerDead();
      //  }
      //}, 1000);
		}

		if (this.body.touching.right) {
			if (this.jumpButton.isDown) {
				this.scale.x = this.scale.x * -1;
				this.body.velocity.y = -300;
				this.body.acceleration.x = -20000;
			}
		} else if (this.body.touching.left) {
			if (this.jumpButton.isDown) {
				this.scale.x = this.scale.x * -1;
				this.body.velocity.y = -300;
				this.body.acceleration.x = 20000;
			}
		} else {
			this.body.acceleration.x = 0;
		}
	}

  attack() {
    if (this.features.currentWeaponName === 'celery') {
      this.features.currentWeapon = this.celery;
      if (this.attackKey.isDown && this.features.isAttacking === false) {

        if (this.features.facing === 'right') {
          this.celery.scale.x = 1;
        }else {
          this.celery.scale.x = -1;
        }

        this.celery.reset(this.x, this.y);
        this.celery.play('swing', 30);
        //this.celery.animations.play('swing', 30, Phaser.ArrayUtils.numberArray(0, 6));
        this.features.isAttacking = true;

        this.celery.events.onAnimationComplete.add(function() {
          this.celery.kill();
        }, this);
      }
    }

    this.attackKey.onUp.add(function() {
      this.features.isAttacking = false;
      this.features.currentWeapon = null;
    }, this);
  }

  drawRect(width, height, color) {
    var bmd = this.game.add.bitmapData(width, height);
    bmd.ctx.beginPath();
    bmd.ctx.rect(0, 0, width, height);
    bmd.ctx.fillStyle = color;
    bmd.ctx.fill();
    return bmd;
  }

  playerDead() {
    this.reset(this.features.position.x, this.features.position.y);
    this.health = 100;
  }

}

export default Player;