# Move by mouse

**URL:** https://phaser.discourse.group/t/move-by-mouse/5564
**Category:** Phaser 3
**Created:** [March 18, 2020, 7:43pm UTC](https://phaser.discourse.group/t/move-by-mouse/5564 "2020-03-18T19:43:52Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![casey](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/casey/32/2503_2.png) [@casey](https://phaser.discourse.group/u/casey)
#### Post date: [March 18, 2020, 7:43pm UTC](https://phaser.discourse.group/t/move-by-mouse/5564/1 "2020-03-18T19:43:52Z")

</div>

I’ve been struggling with this all day. Thought I’d sorted it with moveTo, but no luck.  
I have a character that I can move right now with cursors. I only want them to move on the X axis.

I want the player to be able to move the character to the left or the right (and stop!) by clicking on the screen with the mouse. That works, but I can’t get the animation to play. The animation works on cursor control, but not mouse.

> class PlayerTest extends Phaser.Scene {  
> constructor(){  
> super(“PlayerTest”);  
> }  
> preload(){
> 
> ```
> this.load.image('bg', 'assets/bg.png');
> this.load.spritesheet('char', 'assets/char.png', {
> frameWidth: 202.5,
> frameHeight: 288
>         
> });
> 
> }
> 
> create(){
>   
> let bg = this.add.image(0, 0, 'bg').setOrigin(0,0);
> 
> this.player = this.physics.add.sprite(500, 400, 'char', 3);
>     
> // walking animation
> this.anims.create({
> key: 'walking',
> frames: this.anims.generateFrameNames('char', {
> frames: [0, 1, 2, 3]
> }),
> frameRate: 12,
> yoyo: true,
> repeat: -1
> });
>     
> 
> // enable cursor keys
> 
> ```
> 
> this.cursors = this.input.keyboard.createCursorKeys();
> 
> ```
> }
> 
> test(){
> if(!this.player.anims.isPlaying){
> this.player.anims.play('walking');
> 
> ```
> 
> }
> 
> ```
> }
> 
> ```
> 
> update (){  
> // movement to the left  
> if(this.cursors.left.isDown) {  
> this.player.body.setVelocityX(-150);
> 
> ```
> this.player.flipX = true;
> 
> // play animation if none is playing
> if(!this.player.anims.isPlaying)
> this.player.anims.play('walking');
> 
> ```
> 
> }
> 
> // movement to the right  
> else if(this.cursors.right.isDown) {  
> this.player.body.setVelocityX(150);
> 
> ```
> this.player.flipX = false;
> if(!this.player.anims.isPlaying)
> this.player.anims.play('walking');
> 
> ```
> 
> }  
> else {  
> // make the player stop  
> this.player.body.setVelocityX(0);
> 
> ```
> // stop walking animation
> this.player.anims.stop('walking');
> 
> // set default frame
> this.player.setFrame(3);
> 
> ```
> 
> }
> 
> this.input.on(‘pointerdown’, (pointer)=\>{
> 
> ```
> if(pointer.x > this.player.body.x){
> console.log("moving right");
> this.player.flipX = false;
> this.player.body.setVelocityX(150);
>                 
> this.tweens.add({
> targets: this.player,
> x: 1000,
> duration: 1000,
> ease: 'Sine.easeInOut',
> onUpdate: this.test //I WANT TO RUN WALK ANIMATION WHILE CHAR MOVES
> 
> });
>             
>               
>             
> }
> });
> 
> ```
> 
> }

}

---

<div class="post-metadata">

### Author: ![casey](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/casey/32/2503_2.png) [@casey](https://phaser.discourse.group/u/casey)
#### Post date: [March 19, 2020, 7:50pm UTC](https://phaser.discourse.group/t/move-by-mouse/5564/2 "2020-03-19T19:50:13Z")

</div>

Is this possible? Anyone?

---

<div class="post-metadata">

### Author: ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)
#### Post date: [March 19, 2020, 7:56pm UTC](https://phaser.discourse.group/t/move-by-mouse/5564/3 "2020-03-19T19:56:30Z")

</div>

I’ll take a look. Probably you should use either physics or tweens, not both.

---

<div class="post-metadata">

### Author: ![casey](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/casey/32/2503_2.png) [@casey](https://phaser.discourse.group/u/casey)
#### Post date: [March 20, 2020, 3:04pm UTC](https://phaser.discourse.group/t/move-by-mouse/5564/4 "2020-03-20T15:04:27Z")

</div>

I figured, but how? This is a common way to move in point and click adventures, there must be a way!

---

<div class="post-metadata">

### Author: ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)
#### Post date: [March 20, 2020, 8:39pm UTC](https://phaser.discourse.group/t/move-by-mouse/5564/5 "2020-03-20T20:39:42Z")

</div>

> [@casey](#):
>
> I want the player to be able to move the character to the left or the right (and stop!) by clicking on the screen with the mouse.

You can do [move and stop at position](http://labs.phaser.io/view.html?src=src/physics%5Carcade%5Cmove%20and%20stop%20at%20position.js), then check `body.velocity.x` to update animations.

---

<div class="post-metadata">

### Author: ![casey](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/casey/32/2503_2.png) [@casey](https://phaser.discourse.group/u/casey)
#### Post date: [March 22, 2020, 2:10pm UTC](https://phaser.discourse.group/t/move-by-mouse/5564/6 "2020-03-22T14:10:53Z")

</div>

Thanks I’ll try to get that working.
