Create Objects Below Player

Phaser 3
1

Hi. I am creating a clone game of Square Bird for practice. You can play Square Bird at Square Bird 🕹️ Play on CrazyGames.

I have implemented a map and trying to improve things.

I need help regarding two things.

  1. When the player strikes with the collision point, destroy it with animation
  2. When we click anywhere on screen. The player sprite lay eggs below itself and make them destroy if they hit with the collision layer. Here is the code

const config = {

type: Phaser.AUTO,

width: 800,

height: 900,

physics: {

default: "arcade",

arcade: {

  gravity: { y: 1000 },

  debug: true,

},

},

scene: {

preload: preload,

create: create,

update: update,

},

};

const assets = {

scene: {

width: 400,

messageInitial: "message-initial",

},

};

var game = new Phaser.Game(config);

let gameStarted;

let messageInitial;

let framesMoveUp;

let backgroundImage;

var map;

var player;

var cursors;

var mouse;

var input;

function preload() {

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

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

frameWidth: 220,

frameHeight: 160,

});

this.load.image(assets.scene.messageInitial, “assets/square.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() {

mouse = this.input.mousePointer;

input = this.input;

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

messageInitial = this.add.image(

assets.scene.width,

270,

assets.scene.messageInitial

);

messageInitial.setDepth(20);

messageInitial.visible = true;

const backgroundImage = this.add

.image(0, 0, "background")

.setOrigin(0, 0)

.setInteractive();

// backgroundImage.on(“pointerdown”, () => {

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

// this.player.setVelocityX(1000);

// });

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.cameras.main.setBackgroundColor(“#00ffff”);

this.anims.create({

key: "animate",

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

  start: 0,

  end: 2,

}),

frameRate: 10,

repeat: -1,

});

this.player.play(“animate”);

framesMoveUp = 0;

score = 0;

this.input.on(

"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.physics.add.collider(this.player, collision, function (

player,

collision

) {

console.log("player hits collision");

});

}

function startGame() {

messageInitial.visible = false;

gameStarted = true;

}

function update() {

// if (mouse.isDown) {

// //move to mouse position

// this.physics.moveTo(this.player, input.x, input.y, 1000);

// }

// if (cursors.left.isDown) {

// this.player.body.setVelocityX(-200);

// } else if (cursors.right.isDown) {

// this.player.body.setVelocityX(200);

// } else {

// this.player.body.setVelocityX(0);

// }

// if (cursors.up.isDown && this.player.body.onFloor()) {

// this.player.body.setVelocityY(-700);

// }

}