Add Eggs On Click Below Player

Phaser 3
1

Hi Devs,
I am creating a game in phaser 3 and if anyone could help me. I will appreciate it. I need help soon. So i am creating a square bird clone. Play original game at crazygames.com, i want to add the boxes or eggs below player on click. How can i accomplish that ?

The code is

const config = {

type: Phaser.AUTO,

parent: “game”,

width: 800,

height: 900,

physics: {

default: "arcade",

arcade: {

  gravity: { y: 1200 },

  debug: true,

},

},

scene: {

preload: preload,

create: create,

update: update,

},

};

const assets = {

scene: {

width: 400,

messageInitial: "message-initial",

startText: "start-text",

},

};

var game = new Phaser.Game(config);

let gameStarted = false;

let messageInitial;

let framesMoveUp;

let backgroundImage;

var map;

var player;

var dropsound;

var dead;

function preload() {

this.load.image(“background”, “assets/sky.png”);

this.load.image(“star1”, “assets/star-1.png”);

this.load.image(“star2”, “assets/star-2.png”);

this.load.image(“star3”, “assets/star-3.png”);

this.load.image(“star4”, “assets/star-4.png”);

this.load.image(“star5”, “assets/star-5.png”);

this.load.image(“box”, “assets/box.jpg”);

this.load.audio(“dropsound”, “assets/eggdrop.mp3”);

this.load.audio(“dead”, “assets/dead.wav”);

this.load.spritesheet(“player”, “assets/white-bird-sprite.png”, {

frameWidth: 220,

frameHeight: 160,

});

this.load.image(“destroy-player”, “assets/destroy.png”, {

frameWidth: 220,

frameHeight: 160,

});

this.load.image(assets.scene.messageInitial, “assets/square.png”, {

height: 200,

width: 200,

});

this.load.image(assets.scene.startText, “assets/start-text.png”, {

height: 200,

width: 200,

});

this.load.spritesheet(“tiles”, “assets/tiles.png”, {

frameWidth: 100,

frameHeight: 100,

});

this.load.tilemapTiledJSON(“map”, “assets/map.json”);

}

function create() {

// Audio

dropsound = this.sound.add(“dropsound”);

dead = this.sound.add(“dead”);

// Stretch Image To Full Size

let image = this.add.image(

this.cameras.main.width / 2,

this.cameras.main.height / 2,

"background"

);

let scaleX = this.cameras.main.width / image.width;

let scaleY = this.cameras.main.height / image.height;

let scale = Math.max(scaleX, scaleY);

image.setScale(scale).setScrollFactor(0);

messageInitial = this.add.image(

assets.scene.width,

220,

assets.scene.messageInitial

);

messageInitial.setDepth(20);

messageInitial.visible = true;

startText = this.add.image(assets.scene.width, 870, assets.scene.startText);

startText.setDepth(20);

startText.visible = true;

const backgroundImage = this.add

.image(0, 0, "background")

.setOrigin(0, 0)

.setInteractive();

// stars

this.star1 = this.add.image(

config.width / 300 - 60, // these lines are responsible for stars positioning

config.height / 3, // this make the star to appear in middle of screen, can not change it to negative value otherwise it won't work!

"star1"

);

this.star2 = this.add.image(

config.width / 300 - 140,

config.height / 3,

"star2"

);

this.star3 = this.add.image(

config.width / 300 - 260,

config.height / 2,

"star3"

);

this.star4 = this.add.image(

config.width / 300 - 380,

config.height / 2,

"star4"

);

this.star5 = this.add.image(

config.width / 300 - 400,

config.height / 3,

"star5"

);

this.star2.setScale(2);

map = this.make.tilemap({ key: “map” });

var tileset = map.addTilesetImage(“tiles”, “tiles”);

var platforms = map.createDynamicLayer(“Platform”, tileset, 0, 0);

var collision = map.createDynamicLayer(“Collision”, tileset, 0, 0);

platforms.setCollisionByExclusion(-1);

collision.setCollisionByExclusion(-1);

this.physics.world.bounds.width = platforms.width;

this.physics.world.bounds.height = platforms.height;

this.player = this.physics.add.sprite(0, 0, “player”).setInteractive();

this.player.setBounceY(0.1);

this.player.setCollideWorldBounds(true);

this.physics.add.collider(this.player, platforms);

// this.physics.add.collider(this.player, collision);

this.player.body.allowGravity = true;

this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

this.cameras.main.startFollow(this.player);

this.anims.create({

key: "animate",

frames: this.anims.generateFrameNumbers("player", {

  start: 0,

  end: 2,

}),

frameRate: 10,

repeat: -1,

});

this.player.play(“animate”);

this.anims.create({

key: "destroy",

frames: this.anims.generateFrameNumbers("player", {

  start: 0,

  end: 2,

}),

frameRate: 10,

repeat: -1,

});

this.input.once(

"pointerdown",

function () {

  if (!gameStarted) startGame(game.scene.scenes[0]);

  this.player.body.setVelocityX(500);

},

this

);

this.input.on(

"pointerup",

function () {

  this.player.body.setVelocityX(500);

},

this

);

this.input.on(

"pointerdown",

function () {

  dropsound.play();

  this.player.setVelocityY(-50);

  let box = this.add.image(this.player.x, this.player.y, "box");

  // this.player.y = box.displayHeight;

},

this

);

this.physics.add.collider(this.player, collision, function (

player,

collision

) {

console.log("player hits collision");

player.play("destroy");

dead.play();

});

}

function animateStars(star, speed) {

star.visible = true;

star.x += speed;

if (star.x > map.widthInPixels) {

this.resetStarsPos(star);

}

}

function resetStarsPos(star) {

star.x = 0;

var randomX = Phaser.Math.Between(0, config.width);

star.x = randomX;

}

function startGame() {

messageInitial.visible = false;

startText.visible = false;

gameStarted = true;

}

function update() {

animateStars(this.star1, 1);

animateStars(this.star2, 2);

animateStars(this.star3, 2);

animateStars(this.star4, 3);

animateStars(this.star5, 3);

}

right now the boxes are adding on click but not below the player. Any help ? :frowning: