[PHASER] Collide an ITEM with GROUND.

Barthandelus · November 17, 2017

Hello,

I am actually trying to make my very first game with Phaser ! Saddly, I am not able to get it work. Actually, the game is simple : There is a ground, a character (player), and a "coin" that fall from the top of the game to the ground. If the player hit it, the score increase by 1. All of this work fine. But I want to end the game if the "coin" hit the grounds. For this, I want the coin to collide with the ground. But unfortunally, the player collide with the ground, and the coin pass through the ground. I don't understand why. Demo here.

Keep in mind that this code & game is only for testing PHASER.

Here is the full code :

Quote

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
<title>Phaser - Making your first game, part 7</title>
   <script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>

<table style="width:100%;height:100%;">
   <tr>
       <td style="width:100%;height:100vh;text-align:center;"><center id="canvasTD"></center></td>
   </tr>
</table>

<script type="text/javascript">

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'canvasTD', { preload: preload, create: create, update: update });

function preload() {
game.load.crossOrigin = 'anonymous';

game.load.spritesheet('player', 'http://phaser.io/content/tutorials/making-your-first-phaser-game/dude.png', 32, 48);
game.load.image('ground', './ressources/ground.png');
   game.load.image('gold', './ressources/gold.png');
}

var ground;
var player;
var golds;
var gold;
var nbGold = 0;
var score = 0;
var scoreText;

function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);

   // Score.
   scoreText = game.add.text(16, 16, 'Score : 0', { fontSize: '32px', fill: '#ffffff' });

   // golds
   golds = game.add.group();
   golds.enableBody = true;
   gold = golds.create(Math.floor((Math.random() * 100) + 1) * 7, 0, 'gold');
   gold.body.gravity.y = 200;
   gold.body.bounce.y = 0;
   gold.body.collideWorldBounds = true;
   nbGold += 1;

// Platforms
platforms = game.add.group();
platforms.enableBody = true;
ground = platforms.create(0, game.world.height - 32, 'ground');
ground.scale.setTo(1, 1);
ground.body.collideWorldBounds = true;
platforms.immovable = true;

// Player
player = game.add.sprite(30, 500, 'player');

game.physics.arcade.enable(player);

player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;

player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
}

function update() {
var hitPlatform = game.physics.arcade.collide(player, platforms);
   game.physics.arcade.collide(golds, platforms);

var cursors = game.input.keyboard.createCursorKeys();

   // Recréer un gold.
   if(nbGold == 0)
   {
       var gold = golds.create(Math.floor((Math.random() * 100) + 1) * 7, 0, 'gold');
       gold.body.gravity.y = 200;
       gold.body.bounce.y = 0;
       gold.body.collideWorldBounds = true;
       nbGold += 1;
   }

// Reset the players velocity (movement)
player.body.velocity.x = 0;

if (cursors.left.isDown)
{
// Move to the left
player.body.velocity.x = -250;

player.animations.play('left');
}
else if (cursors.right.isDown)
{
// Move to the right
player.body.velocity.x = 250;

player.animations.play('right');
}
else
{
// Stand still
player.animations.stop();

player.frame = 4;
}

// Allow the player to jump if they are touching the ground.
if (cursors.up.isDown && player.body.touching.down && hitPlatform)
{
player.body.velocity.y = -350;
}

   game.physics.arcade.overlap(player, golds, collectGold, null, this);
   game.physics.arcade.overlap(gold, ground, endGame, null, this);
}

function collectGold(player, gold)
{
   gold.kill();
   score += 1;
   scoreText.text = 'Score : ' + score;
   nbGold -= 1;
}

function endGame(gold, ground)
{
   console.log('Perdu !');
   alert('Perdu !');
}
</script>

</body>
</html>

Could you please help ? ;...;

xxx lol

EDIT :

I got the problem solved, just misstake to place it :

Quote

game.physics.arcade.collide(golds, platforms);

Now I wonder why my function endGame() isn't call when gold hit the ground.

EDIT² :

I got my second problem solved with this code :

Quote

var goldGround = game.physics.arcade.collide(golds, platforms);

[...]

if(goldGround)
   {
       endGame();
   }

But I don't understand the difference between my code and game.physics.arcade.overlap();. Can someone explain me ?

Code updated aswell !

Sign In

[PHASER] Collide an ITEM with GROUND.

Recommended Posts

Barthandelus

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity