Basically, i use this.scene.start(‘SceneA.js’); to start the scene when the player collect all stars.
This is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Here we can see how we change the title of phaser, we changed it to 'Guillermo García-->
<!-- this is a comment for HTML format-->
<title>Guillermo García</title>
<script src="phaser.js"></script>
<script type="text/javascript" src="sceneA.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
// this is a comment for javascript.
// here we can see how we create the variable 'config', this variable will keep some configurations that are will be used by our game, such as for example, the physics, the width and height of our game, etc.
var config = {
type: Phaser.AUTO,
width: 1200,
height: 900,
physics: {
// for example, this part 'arcade' will be the definition of what type of physics we want for our game, (in this case our character will fall after a jump)
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload ()
{
var progress = this.add.graphics();
this.load.on('progress', function (value) {
progress.clear();
progress.fillStyle(0x0000ff, 1);
progress.fillRect(0, 270, 800 * value, 60);
});
this.load.on('complete', function () {
progress.destroy();
});
// with this functions, we prepare 'sky' (the background) and 'ground' (the platforms). We put this two phrases into the function preload, that's because we want to let our game load this assets whe we start the game, this is the two first things who will load our game.
this.load.image('sky','assets/sky.jpg');
this.load.image('ground', 'assets/platform.png');
this.load.image('lava', 'assets/lava.png');
// this is the preload resources for our game theme
this.load.audio('theme', [
'assets/music/music.mp3'
]);
this.load.spritesheet('dude',
'assets/dude.png',
{ frameWidth: 32, frameHeight: 48 }
);
this.load.image('star', 'assets/star.png');
this.load.image('coin', 'assets/coin.png');
this.load.image('moneda', 'assets/moneda.png');
}
var platforms;
var score = 0;
var scoreText;
var puntaje;
var player;
var lava;
// this is a variable about the music that will be using for our game
var music = this.sound.add('theme');
//var coin;
function create ()
{
scoreText = this.add.text(100, 21, 'Estrellitas: 0', { fontSize: '32px', fill: '#000' }).setDepth(2);
cursors = this.input.keyboard.createCursorKeys();
player = this.physics.add.sprite(100, 450, 'dude').setDepth(2);
player.body.setGravityY(300)
player.setBounce(0.2);
player.setCollideWorldBounds(true);
this.cameras.main.startFollow(player);
this.cameras.main.setBounds(0, 0, 720 * 2, 176);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
// with this command, we make a background, 'sky' is called by this, and we can change our width and height if we edit the following values (the numbers below)
this.add.image(400, 300, 'sky');
//this is the same variable that we used above, but in the create section, so we can create the music.
var music = this.sound.add('theme');
//this command basically tells the game to play the music.
music.play();
platforms = this.physics.add.staticGroup();
lava = this.physics.add.staticGroup();
this.physics.add.collider(player, lava);
this.physics.add.collider(player, platforms);
// with this, we create some platforms, as i said above, instead of 'sky' we call to 'ground' to get the assets and let the game load the plaftorms corretcly.
// but in this case, we can't modify the heigth and width, we can only modify the coordinates of the platforms.
//platforms.create(500, 900, 'ground').setScale(5).refreshBody();
lava.create(500,900, 'lava').setScale(5).refreshBody();
/*function hitlava (player, lava)
{
this.physics.pause();
player.setTint(0xff0000);
player.anims.play('turn');
gameOver = true;
}
*/
platforms.create(999, 500, 'ground');
platforms.create(100, 600, 'ground');
platforms.create(800, 999, 'ground');
stars = this.physics.add.group({
key: 'star',
repeat: 0,
setXY: { x: 12, y: 0, stepX: 70 }
});
stars.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
this.physics.add.collider(stars, platforms);
this.physics.add.overlap(player, stars, collectStar, null, this);
function collectStar (player, star)
{
star.disableBody(true, true);
score += 10;
scoreText.setText('Estrellitas: ' + score);
/*if (stars.countActive(true) === 0)
{
player.setTint(0xff0000);
this.physics.pause();
gameOver = true;
music.stop();
//this.scene.start('SceneA.js');
};*/
}
coin = this.physics.add.group({
key: 'coin',
repeat: 3,
setXY: { x: 12, y: 0, stepX: 70 }
});
coin.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.1, 0.3));
});
this.physics.add.collider(coin, platforms);
this.physics.add.overlap(player, coin, collectcoin, null, this);
function collectcoin (player, coin)
{
coin.disableBody(true, true);
score += 100;
scoreText.setText('Estrellitas: ' + score);
/*if (coin.countActive(true) === 0)
{
player.setTint(0xff0000);
this.physics.pause();
gameOver = true;
music.stop();
//this.scene.start('SceneA.js');
};*/
}
moneda = this.physics.add.group({
key: 'moneda',
repeat: 1,
setXY: { x: 12, y: 0, stepX: 70 }
});
coin.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.9, 0.3));
});
this.physics.add.collider(moneda, platforms);
this.physics.add.overlap(player, moneda, collectmoneda, null, this);
function collectmoneda (player, moneda)
{
moneda.disableBody(true, true);
//score += 100;
//scoreText.setText('Estrellitas: ' + score);
if (moneda.countActive(true) === 0)
{
player.setTint(0xff0000);
this.physics.pause();
gameOver = true;
music.stop();
//this.scene.start('SceneA.js');
};
}
}
function update ()
{
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(160);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-330);
}
}
</script>
</body>
</html>
Basically i have a black screen while the player collect the stars and it suppose to start the new scene… any idea about this?
regards.
