Move Player On Click

Phaser 3
1

Hi Devs,

I have a game in Phaser and i want the player to keep moving continuously till it reaches the end of the map. I have to click everytime to make it move. For now, i have set the cursor keys to move it but i want the click approach. Here is the code

const config = {

type: Phaser.AUTO,
width: 800,
height: 900,
physics: {
default: “arcade”,
arcade: {
gravity: { y: 1000 },
debug: false,
},
},

scene: {
preload: preload,
create: create,
update: update,
},
};
const assets = {
scene: {
width: 400,
gameOver: “game-over”,
restart: “restart-button”,
messageInitial: “message-initial”,
},
};

var game = new Phaser.Game(config);

let gameOver;
let gameStarted;
let restartButton;
let gameOverBanner;
let messageInitial;
let framesMoveUp;
let backgroundImage;
var map;
var player;
var cursors;
var text;
var score = 0;

function preload() {
// Backgrounds
this.load.image(“background”, “assets/sky.png”);
// At last image must be loaded with its JSON
this.load.spritesheet(“player”, “assets/white-bird-sprite.png”, {
frameWidth: 220,
frameHeight: 160,
});
// Start game
this.load.image(assets.scene.messageInitial, “assets/square.png”, {
height: 200,
width: 200,
});
// End game
this.load.image(assets.scene.gameOver, “assets/gameover.png”);
this.load.image(assets.scene.restart, “assets/restart-button.png”);
// tiles in spritesheet
this.load.spritesheet(“tiles”, “assets/tiles.png”, {
frameWidth: 100,
frameHeight: 100,
});
// Load the export Tiled JSON
this.load.tilemapTiledJSON(“map”, “assets/map.json”);
}
function movePlayer() {}
function create() {
cursors = this.input.keyboard.createCursorKeys();
// Square Bird Logo
messageInitial = this.add.image(
assets.scene.width,
230,
assets.scene.messageInitial
);
messageInitial.setDepth(30);
messageInitial.visible = true;
const backgroundImage = this.add
.image(0, 0, “background”)
.setOrigin(0, 0)
.setInteractive();
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);
// set the boundaries of our game world
this.physics.world.bounds.width = platforms.width;
this.physics.world.bounds.height = platforms.height;
// Adding Player
this.player = this.physics.add.sprite(0, 0, “player”);
this.player.setBounce(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;
// set bounds so the camera won’t go outside the game world
this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
// make the camera follow the player
this.cameras.main.startFollow(this.player);
this.cameras.main.setBackgroundColor("#00ffff");
// White Bird Animations
this.anims.create({
key: “animate”,
frames: this.anims.generateFrameNumbers(“player”, {
start: 0,
end: 2,
}),
frameRate: 10,
repeat: -1,
});
this.player.play(“animate”);
backgroundImage.on(“pointerdown”, () => {
if (gameOver) return;
if (!gameStarted) startGame(game.scene.scenes[1]);
this.player.setVelocityX(1000);
});
framesMoveUp = 0;
score = 0;
gameOver = false;
}

function startGame() {
messageInitial.visible = false;
gameStarted = true;
}
function update() {
this.button = this.player.setInteractive();
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);
}
// jump
if (cursors.up.isDown && this.player.body.onFloor()) {
this.player.body.setVelocityY(-700);
}

this.button.on(
“pointerdown”,
function () {
this.player.body.setVelocityX(1000);
},
this
);
}

2

Try this:

Remove this code from the update method.

this.button = this.player.setInteractive()

Where you’ve added the player in the create method, append:

this.player.setInteractive();

which enables the Input manager on the player sprite.

Remove the button on pointerdown event code from the bottom of the update method and put this at the bottom of the create method:

this.player.on('pointerdown', function() {
    this.player.body.setVelocityX(1000)
}, this);
3

Hi. Thanks for helping, i have added the following lines

create(){
this.player = this.physics.add.sprite(0, 0, “player”).setInteractive();
this.player.on(
“pointerdown”,
function () {
this.player.body.setVelocityX(1000);
},
this
);
}

commented the update() function code, but when i click the player moves forward then coming back. I can share the whole code as a zip, check https://files.fm/u/yp6tbc94

I want to click one time and keep the player moving until it reaches the end of the map.

4

No problem.

In create, remove or comment out this line:

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

Why have the player move when clicking the background image or the player sprite when you can click anywhere?

Remove this code:

backgroundImage.on("pointerdown", () => {
  if (!gameStarted) startGame(game.scene.scenes[0]);
  this.player.setVelocityX(1000);
});

And (still in create), replace this:

this.player.on(
  "pointerdown",
  function () {
    this.player.body.setVelocityX(1000);
  },
  this
);

with this:

this.input.on("pointerdown", function () {
  if (!gameStarted) startGame(game.scene.scenes[0]);
  this.player.body.setVelocityX(1000);
}, this);

this.input.on("pointerup", function () {
  this.player.body.setVelocityX(0);
}, this);
5

thanks i have implemented this, whenever i click it moves, i want the player to move continuously on clicking only one time. Like any way to call that pointerdown function recursively till it reaches the end of map. Also, for this question
Why have the player move when clicking the background image or the player sprite when you can click anywhere?
the answer is when i click anywhere. See the live Square Bird game to have a good understanding at https://www.crazygames.com/game/square-bird
Thanks for your help

6

updated this

this.input.on(“pointerup”, function () {
this.player.body.setVelocityX(1000);
}, this);

the player moving till end of screen and coming backward. I want it to stay at the end and also i want to make it collide with the collision points. The line which you told me to comment. How is it possible ?

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

this line

7

It moves backwards when it reaches the end because it’s bounce property is set to 0.1 in both the X and Y axis. If you only set the bounce on the Y axis, the player doesn’t bounce off the wall at the end.

In create, change

this.player.setBounce(0.1);

to

this.player.setBounceY(0.1);

Now it will bounce when it hits the ground, but not when hitting a wall.

To make it collide with the collision points then that line needs to stay, don’t remove it or comment it like I said before.

You can add a callback function so you can take action when the player hits a collision point:

this.physics.add.collider(this.player, collision, function(player, collision) {
  console.log('player hits collision')
});
8

Hey man, thanks for the help. One more thing, i want to add boxes below the player like in original game as i click anywhere on the screen and make them destroy when they hit collision. Can you give me any idea about it ?