fariazz/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Intro to RPG development with Phaser - BootScene">
  <meta charset="utf-8">
  <meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">
  <title>Intro to RPG development with Phaser - Scenes</title>
</head>
<body>
  <div id="phaser-game"></div>
  <script src="http://cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser.js"></script>

<script id="jsbin-javascript">
//BootScene
class BootScene extends Phaser.scene {
  constructor() {
    super('Boot');
  }

  preload() {
    this.load.image('button1', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/blue_button01.png');
    this.load.spritesheet('items', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/items.png', { frameWidth: 32, frameHeight: 32 });
    this.load.spritesheet('characters', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/characters.png', { frameWidth: 32, frameHeight: 32 });
    this.load.audio('goldSound', ['https://jsbin-user-assets.s3.amazonaws.com/fariazz/Pickup.wav']);
  }

  create() {
    var goldPickupAudio = this.sound.add('goldSound', { loop: false, volume: 0.2 });

    var button = this.add.image(100, 100, 'button1');
    button.setOrigin(0.5,0.5);

    this.add.sprite(300,100, 'button1');

    this.chest = this.physics.add.image(300, 300, 'items', 0);

    this.wall = this.physics.add.image(500, 100, 'button1');
    this.wall.setImmovable();

    this.player = this.physics.add.image(32, 32, 'characters', 0);
    this.player.setScale(2);

    this.player.body.setCollideWorldBounds(true);
    this.physics.add.collider(this.player, this.wall);
    this.physics.add.overlap(this.player, this.chest, function(player, chest) {
      goldPickupAudio.play();
      chest.destroy();
    });

    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    this.player.setVelocity(0);

    if(this.cursors.left.isDown) {
      this.player.setVelocityX(-160);
    } else if(this.cursors.right.isDown) {
      this.player.setVelocityX(160);
    }

    if(this.cursors.up.isDown) {
      this.player.setVelocityY(-160);
    } else if(this.cursors.down.isDown) {
      this.player.setVelocityY(160);
    }
  }
}
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Intro to RPG development with Phaser - BootScene">
  <meta charset="utf-8">
  <meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">
  <title>Intro to RPG development with Phaser - Scenes</title>
</head>
<body>
  <div id="phaser-game"></div>
  <script src="//cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser.js"><\/script>

</body>

</html></script>


<script id="jsbin-source-javascript" type="text/javascript">//BootScene
class BootScene extends Phaser.scene {
  constructor() {
    super('Boot');
  }

  preload() {
    this.load.image('button1', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/blue_button01.png');
    this.load.spritesheet('items', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/items.png', { frameWidth: 32, frameHeight: 32 });
    this.load.spritesheet('characters', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/characters.png', { frameWidth: 32, frameHeight: 32 });
    this.load.audio('goldSound', ['https://jsbin-user-assets.s3.amazonaws.com/fariazz/Pickup.wav']);
  }

  create() {
    var goldPickupAudio = this.sound.add('goldSound', { loop: false, volume: 0.2 });

    var button = this.add.image(100, 100, 'button1');
    button.setOrigin(0.5,0.5);

    this.add.sprite(300,100, 'button1');

    this.chest = this.physics.add.image(300, 300, 'items', 0);

    this.wall = this.physics.add.image(500, 100, 'button1');
    this.wall.setImmovable();

    this.player = this.physics.add.image(32, 32, 'characters', 0);
    this.player.setScale(2);

    this.player.body.setCollideWorldBounds(true);
    this.physics.add.collider(this.player, this.wall);
    this.physics.add.overlap(this.player, this.chest, function(player, chest) {
      goldPickupAudio.play();
      chest.destroy();
    });

    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    this.player.setVelocity(0);

    if(this.cursors.left.isDown) {
      this.player.setVelocityX(-160);
    } else if(this.cursors.right.isDown) {
      this.player.setVelocityX(160);
    }

    if(this.cursors.up.isDown) {
      this.player.setVelocityY(-160);
    } else if(this.cursors.down.isDown) {
      this.player.setVelocityY(160);
    }
  }
}


</script></body>

</html>

## jsbin.kimisep.js
//BootScene
class BootScene extends Phaser.scene {
  constructor() {
    super('Boot');
  }

  preload() {
    this.load.image('button1', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/blue_button01.png');
    this.load.spritesheet('items', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/items.png', { frameWidth: 32, frameHeight: 32 });
    this.load.spritesheet('characters', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/characters.png', { frameWidth: 32, frameHeight: 32 });
    this.load.audio('goldSound', ['https://jsbin-user-assets.s3.amazonaws.com/fariazz/Pickup.wav']);
  }

  create() {
    var goldPickupAudio = this.sound.add('goldSound', { loop: false, volume: 0.2 });

    var button = this.add.image(100, 100, 'button1');
    button.setOrigin(0.5,0.5);

    this.add.sprite(300,100, 'button1');

    this.chest = this.physics.add.image(300, 300, 'items', 0);

    this.wall = this.physics.add.image(500, 100, 'button1');
    this.wall.setImmovable();

    this.player = this.physics.add.image(32, 32, 'characters', 0);
    this.player.setScale(2);

    this.player.body.setCollideWorldBounds(true);
    this.physics.add.collider(this.player, this.wall);
    this.physics.add.overlap(this.player, this.chest, function(player, chest) {
      goldPickupAudio.play();
      chest.destroy();
    });

    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    this.player.setVelocity(0);

    if(this.cursors.left.isDown) {
      this.player.setVelocityX(-160);
    } else if(this.cursors.right.isDown) {
      this.player.setVelocityX(160);
    }

    if(this.cursors.up.isDown) {
      this.player.setVelocityY(-160);
    } else if(this.cursors.down.isDown) {
      this.player.setVelocityY(160);
    }
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Intro to RPG development with Phaser - BootScene">
	<meta charset="utf-8">
	<meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">
	<title>Intro to RPG development with Phaser - Scenes</title>
	</head>
	<body>
	<div id="phaser-game"></div>
	<script src="http://cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser.js"></script>

	<script id="jsbin-javascript">
	//BootScene
	class BootScene extends Phaser.scene {
	constructor() {
	super('Boot');
	}

	preload() {
	this.load.image('button1', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/blue_button01.png');
	this.load.spritesheet('items', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/items.png', { frameWidth: 32, frameHeight: 32 });
	this.load.spritesheet('characters', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/characters.png', { frameWidth: 32, frameHeight: 32 });
	this.load.audio('goldSound', ['https://jsbin-user-assets.s3.amazonaws.com/fariazz/Pickup.wav']);
	}

	create() {
	var goldPickupAudio = this.sound.add('goldSound', { loop: false, volume: 0.2 });

	var button = this.add.image(100, 100, 'button1');
	button.setOrigin(0.5,0.5);

	this.add.sprite(300,100, 'button1');

	this.chest = this.physics.add.image(300, 300, 'items', 0);

	this.wall = this.physics.add.image(500, 100, 'button1');
	this.wall.setImmovable();

	this.player = this.physics.add.image(32, 32, 'characters', 0);
	this.player.setScale(2);

	this.player.body.setCollideWorldBounds(true);
	this.physics.add.collider(this.player, this.wall);
	this.physics.add.overlap(this.player, this.chest, function(player, chest) {
	goldPickupAudio.play();
	chest.destroy();
	});

	this.cursors = this.input.keyboard.createCursorKeys();
	}

	update() {
	this.player.setVelocity(0);

	if(this.cursors.left.isDown) {
	this.player.setVelocityX(-160);
	} else if(this.cursors.right.isDown) {
	this.player.setVelocityX(160);
	}

	if(this.cursors.up.isDown) {
	this.player.setVelocityY(-160);
	} else if(this.cursors.down.isDown) {
	this.player.setVelocityY(160);
	}
	}
	}
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Intro to RPG development with Phaser - BootScene">
	<meta charset="utf-8">
	<meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">
	<title>Intro to RPG development with Phaser - Scenes</title>
	</head>
	<body>
	<div id="phaser-game"></div>
	<script src="//cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser.js"><\/script>

	</body>

	</html></script>


	<script id="jsbin-source-javascript" type="text/javascript">//BootScene
	class BootScene extends Phaser.scene {
	constructor() {
	super('Boot');
	}

	preload() {
	this.load.image('button1', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/blue_button01.png');
	this.load.spritesheet('items', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/items.png', { frameWidth: 32, frameHeight: 32 });
	this.load.spritesheet('characters', 'https://jsbin-user-assets.s3.amazonaws.com/fariazz/characters.png', { frameWidth: 32, frameHeight: 32 });
	this.load.audio('goldSound', ['https://jsbin-user-assets.s3.amazonaws.com/fariazz/Pickup.wav']);
	}

	create() {
	var goldPickupAudio = this.sound.add('goldSound', { loop: false, volume: 0.2 });

	var button = this.add.image(100, 100, 'button1');
	button.setOrigin(0.5,0.5);

	this.add.sprite(300,100, 'button1');

	this.chest = this.physics.add.image(300, 300, 'items', 0);

	this.wall = this.physics.add.image(500, 100, 'button1');
	this.wall.setImmovable();

	this.player = this.physics.add.image(32, 32, 'characters', 0);
	this.player.setScale(2);

	this.player.body.setCollideWorldBounds(true);
	this.physics.add.collider(this.player, this.wall);
	this.physics.add.overlap(this.player, this.chest, function(player, chest) {
	goldPickupAudio.play();
	chest.destroy();
	});

	this.cursors = this.input.keyboard.createCursorKeys();
	}

	update() {
	this.player.setVelocity(0);

	if(this.cursors.left.isDown) {
	this.player.setVelocityX(-160);
	} else if(this.cursors.right.isDown) {
	this.player.setVelocityX(160);
	}

	if(this.cursors.up.isDown) {
	this.player.setVelocityY(-160);
	} else if(this.cursors.down.isDown) {
	this.player.setVelocityY(160);
	}
	}
	}



	</script></body>

	</html>