Sign in to follow this  
callidus

need help how do you program balls to bounce off walls

Recommended Posts

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;
}
}
 
 

Share this post


Link to post
Share on other sites

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);

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.