# Move Player On Click
**URL:** https://phaser.discourse.group/t/move-player-on-click/6943
**Category:** Phaser 3
**Created:** [July 14, 2020, 2:53pm UTC](https://phaser.discourse.group/t/move-player-on-click/6943 "2020-07-14T14:53:57Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@syedbilal07](https://phaser.discourse.group/u/syedbilal07)
#### Post date: [July 14, 2020, 2:53pm UTC](https://phaser.discourse.group/t/move-player-on-click/6943/1 "2020-07-14T14:53:57Z")
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
);
}
---
### Author:  [@jmb272](https://phaser.discourse.group/u/jmb272)
#### Post date: [July 15, 2020, 12:13pm UTC](https://phaser.discourse.group/t/move-player-on-click/6943/2 "2020-07-15T12:13:11Z")
Try this:
Remove this code from the update method.
```javascript
this.button = this.player.setInteractive()
```
Where you’ve added the player in the create method, append:
```javascript
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:
```javascript
this.player.on('pointerdown', function() {
this.player.body.setVelocityX(1000)
}, this);
```
---
### Author:  [@syedbilal07](https://phaser.discourse.group/u/syedbilal07)
#### Post date: [July 15, 2020, 2:15pm UTC](https://phaser.discourse.group/t/move-player-on-click/6943/3 "2020-07-15T14:15:10Z")
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](https://files.fm/u/yp6tbc94)
I want to click one time and keep the player moving until it reaches the end of the map.
---
### Author:  [@jmb272](https://phaser.discourse.group/u/jmb272)
#### Post date: [July 15, 2020, 3:21pm UTC](https://phaser.discourse.group/t/move-player-on-click/6943/4 "2020-07-15T15:21:23Z")
No problem.
In create, remove or comment out this line:
```javascript
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:
```javascript
backgroundImage.on("pointerdown", () => {
if (!gameStarted) startGame(game.scene.scenes[0]);
this.player.setVelocityX(1000);
});
```
And (still in create), replace this:
```javascript
this.player.on(
"pointerdown",
function () {
this.player.body.setVelocityX(1000);
},
this
);
```
with this:
```javascript
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);
```
---
### Author:  [@syedbilal07](https://phaser.discourse.group/u/syedbilal07)
#### Post date: [July 15, 2020, 4:20pm UTC](https://phaser.discourse.group/t/move-player-on-click/6943/5 "2020-07-15T16:20:28Z")
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](https://www.crazygames.com/game/square-bird)
Thanks for your help
---
### Author:  [@syedbilal07](https://phaser.discourse.group/u/syedbilal07)
#### Post date: [July 15, 2020, 4:45pm UTC](https://phaser.discourse.group/t/move-player-on-click/6943/6 "2020-07-15T16:45:49Z")
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
---
### Author:  [@jmb272](https://phaser.discourse.group/u/jmb272)
#### Post date: [July 15, 2020, 6:01pm UTC](https://phaser.discourse.group/t/move-player-on-click/6943/7 "2020-07-15T18:01:27Z")
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
```javascript
this.player.setBounce(0.1);
```
to
```javascript
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:
```javascript
this.physics.add.collider(this.player, collision, function(player, collision) {
console.log('player hits collision')
});
```
---
### Author:  [@syedbilal07](https://phaser.discourse.group/u/syedbilal07)
#### Post date: [July 15, 2020, 6:40pm UTC](https://phaser.discourse.group/t/move-player-on-click/6943/8 "2020-07-15T18:40:32Z")
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 ?