sprite.bounce()
Makes the sprite and the target bounce when they touch each other. Both the sprite and the target change how they are moving.
Most games will involve sprites colliding with each other. There are four types of collisions available in Game Lab: bounce
, bounceOff
, collide
and displace
. These blocks will cause a certain type of interaction between the sprite and its target and must be used within the draw() {}
function.
Examples
var sprite1 = createSprite(75, 250, 50, 50);
sprite1.velocityX=2;
sprite1.velocityY=-1;
var sprite2 = createSprite(250, 250, 50, 50);
sprite2.velocityX=-1;
sprite2.velocityY=-0.5;
function draw() {
background("white");
sprite1.bounce(sprite2);
drawSprites();
}
Shuffleboard
Use the arrow keys to move the disc at the bottom. Use the space bar to release the disc.
// Use the arrow keys to move the disc at the bottom.
// Use the space bar to release the disc.
var disc1 = createSprite(200, 375);
disc1.setAnimation("disc");
disc1.setCollider("circle",0,0,25);
var disc2 = createSprite(randomNumber(25, 375), 100);
disc2.setAnimation("disc");
disc2.setCollider("circle",0,0,25);
function draw() {
background("white");
drawSprites();
if (keyDown("right")) {
disc1.x=disc1.x+5;
}
if (keyDown("left")) {
disc1.x=disc1.x-5;
}
if (keyDown("space")) {
disc1.velocityY=-5;
}
disc1.bounce(disc2);
}
Four Collisions
Demonstrate all four types of collisions.
// Demonstrate all four types of collisions.
var spriteDisplace1 = createSprite(75, 50, 50, 50);
spriteDisplace1.setAnimation("displace");
spriteDisplace1.scale=0.75;
spriteDisplace1.velocityX=2;
var spriteDisplace2 = createSprite(250, 50, 50, 50);
spriteDisplace2.setAnimation("displaceTarget");
spriteDisplace2.scale=0.75;
var spriteCollide1 = createSprite(75, 150, 50, 50);
spriteCollide1.setAnimation("collide");
spriteCollide1.scale=0.75;
spriteCollide1.velocityX=2;
var spriteCollide2 = createSprite(250, 150, 50, 50);
spriteCollide2.setAnimation("collideTarget");
spriteCollide2.scale=0.75;
var spriteBounce1 = createSprite(75, 250, 50, 50);
spriteBounce1.setAnimation("bounce");
spriteBounce1.scale=0.75;
spriteBounce1.velocityX=2;
var spriteBounce2 = createSprite(250, 250, 50, 50);
spriteBounce2.setAnimation("bounceTarget");
spriteBounce2.scale=0.75;
var spriteBounceOff1 = createSprite(75, 350, 50, 50);
spriteBounceOff1.setAnimation("bounceOff");
spriteBounceOff1.scale=0.75;
spriteBounceOff1.velocityX=2;
var spriteBounceOff2 = createSprite(250, 350, 50, 50);
spriteBounceOff2.setAnimation("bounceOffTarget");
spriteBounceOff2.scale=0.75;
function draw() {
background("white");
spriteDisplace1.displace(spriteDisplace2);
spriteCollide1.collide(spriteCollide2);
spriteBounce1.bounce(spriteBounce2);
spriteBounceOff1.bounceOff(spriteBounceOff2);
drawSprites();
}
Syntax
sprite.bounce(target)
Parameters
Name | Type | Required? | Description |
---|---|---|---|
target | Sprite or Group | The name of the target sprite or target group you want to check for a collision. |
Returns
Tips
- All four of the collisions are similar to including an "if (sprite.isTouching(target))" in the
draw() {}
function, and then depending on the collision type, updating the sprite and targetsprite.velocityX
andsprite.velocityY
properties. - Only one of the four types of collisions should be specified for each pair of sprites.
- To fine tune your collision detection use
setCollider()
to change the shape and size of the collider area and setdebug
to true for the sprites. - A sprite that is not visible can still collide with other sprites and user mouse interactions.
- The
bounce
collision will return true when the two sprites are touching.
Found a bug in the documentation? Let us know at support@code.org.