need help how do you program balls to bounce off walls

[callidus]

I want a ball to bounce but my current code isn't working and I don't know why, thanks for any feedback. 

 

My Code:

 

* I have made the parts of the code which are relevant green

 

 

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,});

var x = Math.floor(Math.random () * 800);      // ball spawns in a random place

var y = Math.floor(Math.random() * 600);

var text; 

 

function preload() {

cursors = game.input.keyboard.createCursorKeys();                    //allows keyboard input

this.game.load.image("block","assets/block.png");

this.game.load.image("redBlock","assets/red.png");

this.game.load.image("greenBlock","assets/green.png");

this.game.load.image("blueBlock","assets/blue.png");

}

 

function create() {

this.game.physics.startSystem(Phaser.Physics.ARCADE);

this.game.scale.pageAlignHorizontally = true; //centers canvas

this.game.scale.pageAlignVertically = true;

this.game.scale.refresh();

 

block = this.game.add.sprite(x,y,"redBlock");                                 // x and y are randomy coordinates the ball spawns at

this.game.physics.arcade.enable(block);

 

player = this.game.add.sprite(10,10,"block");

this.game.physics.arcade.enable(player);

player.scale.setTo(0.2,0.2);

player.body.collideWorldBounds = true;

 

}

 

function update() {

 

player.body.velocity.x = 0;

player.body.velocity.y = 0;

 

block.body.velocity.x += 50;

block.body.velocity.y += 50;

 

if(x > game.world.width){                     //if the balls x coordinate is larger than the width of the screen make the x velocity

block.body.velocity.x = block.body.velocity.x * -1;       //of the ball the opposite of what it is, making it seem like it bounces off of it.

}

 

if(x < game.world.width - game.world.width){           //if the balls x coordinate is smaller than the width of the screen make the x velocity

block.body.velocity.x = block.body.velocity.x * -1;      //make it bounce

}

 

if(y > game.world.height){                                          //if the balls y coordinate is larger than the height of the screen make it bounce

block.body.velocity.y = block.body.velocity.y * -1;

}

 

if(y < game.world.height - game.world.height){          //if the balls y coordinate is smaller than the height of the screen make it bounce

block.body.velocity.y = block.body.velocity.y * -1;

}

 

 

if(cursors.left.isDown){

player.body.velocity.x += -200; 

}

 

if(cursors.right.isDown){

player.body.velocity.x += 200;

}

 

if(cursors.down.isDown){

player.body.velocity.y += 200;

}

 

if(cursors.up.isDown){

player.body.velocity.y += -200;

}

}

 

 

[SignalSin]

It looks like there's already a working example here of what you're trying to do. There's a few other bounce examples in the list too.

 

You don't need to manually check if the ball's colliding with the screen boundary - Phaser does that for you, which you can indicate with this in your create function:

block.body.collideWorldBounds = true;

Then call this to set the amount of bounce:

block.body.bounce.set(1);

Then finally, call this to get the ball moving:

block.body.velocity.setTo(200,200);

If you want the block to bounce of the player, call this in your update function:

game.physics.arcade.collide(player, block);