# Phaser 3 - bounce back sprite on collision with object

**URL:** <https://phaser.discourse.group/t/phaser-3-bounce-back-sprite-on-collision-with-object/7098>\
**Category:** Phaser 3\
**Created:** [August 4, 2020, 9:09pm UTC](https://phaser.discourse.group/t/phaser-3-bounce-back-sprite-on-collision-with-object/7098 "2020-08-04T21:09:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![balmofgilead](https://avatars.discourse-cdn.com/v4/letter/b/7cd45c/32.png) [@balmofgilead](https://phaser.discourse.group/u/balmofgilead)\
**Post date:** [August 4, 2020, 9:09pm UTC](https://phaser.discourse.group/t/phaser-3-bounce-back-sprite-on-collision-with-object/7098/1 "2020-08-04T21:09:51Z")

</div>

In Phaser3, how do you make a sprite bounce back when it collides with an object? At the moment, I can detect a collision, but I want the car to bounce back when it collides.

My code:

```
import Phaser from 'phaser';

const config = {
  type: Phaser.AUTO,
  parent: "phaser-example",
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      debug: true
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update,
    render: render
  }
};

const game = new Phaser.Game(config);
let platform;
let player;
let cursors;

function preload() {
  this.load.image('car', 'https://labs.phaser.io/assets/sprites/car90.png')
  this.load.image('sky', 'https://labs.phaser.io/assets/skies/gradient11.png');
  this.load.image('ground', 'https://labs.phaser.io/assets/sprites/platform.png');
}

function create() {
  this.add.image(400, 300, 'sky');
  
  platform = this.physics.add.image(400, 400, 'ground');
  platform.body.setBounce(20, 20);
  platform.setImmovable(true);

  player = this.physics.add.sprite(400, 300, 'car', 1);
  player.body.setBounce(20, 20);
  player.setCollideWorldBounds(true);

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

  this.physics.add.collider(player, platform);
}

function update() {
  player.body.velocity.x = 0;
  player.body.velocity.y = 0;
  player.body.angularVelocity = 0;

  if (cursors.left.isDown) {
    player.body.angularVelocity = -40;
  }
  if (cursors.right.isDown) {
    player.body.angularVelocity = 40;
  }

  if (cursors.up.isDown) {
    this.physics.velocityFromRotation(player.rotation, 150, player.body.velocity);
  }
  if (cursors.down.isDown) {
    this.physics.velocityFromRotation(player.rotation, -150, player.body.velocity);
  }
}

function render() {
}

```

Stackblitz: [https://stackblitz.com/edit/phaser3-typescript-ctun9e](https://stackblitz.com/edit/phaser3-typescript-ctun9e)

---

<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:** [August 5, 2020, 4:38pm UTC](https://phaser.discourse.group/t/phaser-3-bounce-back-sprite-on-collision-with-object/7098/2 "2020-08-05T16:38:43Z")

</div>

Use bounce values 1 and don’t zero velocity in `update()`.

> **[phaser3-typescript-rtmymz - StackBlitz](https://stackblitz.com/edit/phaser3-typescript-rtmymz)**
>
> Blank starter project for building TypeScript apps.