Forums » Help » Breaking Blocks

I'm creating a Breakout-style game, and I have a base Block class and several child classes. I've come up with two ways to break Blocks:

Block.check: function( other ) {
		
		if( other instanceof ball ) {

			var ball = ig.game.getEntitiesByType( EntityBall )[0];
			
			//if ball last touched the player's paddle, up player score
			if(ball.lasttouched == "player") {
				var player = ig.game.getEntitiesByType( EntityPaddlePlayer )[0];
				player.score += this.score;
			} //otherwise up cpu score
			else if(ball.lasttouched == "cpu") {
				var cpu = ig.game.getEntitiesByType( EntityPaddleCpu )[0];
				cpu.score += this.score;
			}
			
			this.kill();
		}
	}

Block.handleMovementTrace: function( res ) {
		if( res.collision.x || res.collision.y ) {

			var ball = ig.game.getEntitiesByType( EntityBall )[0];
			
			//if ball last touched the player's paddle, up player score
			if(ball.lasttouched == "player") {
				var player = ig.game.getEntitiesByType( EntityPaddlePlayer )[0];
				player.score += this.score;
			} //otherwise up cpu score
			else if(ball.lasttouched == "cpu") {
				var cpu = ig.game.getEntitiesByType( EntityPaddleCpu )[0];
				cpu.score += this.score;
			}
			
			this.kill();
		}

		// Continue resolving the collision as normal
		this.parent(res); 
	}

I'm setting both the Ball and Block to ACTIVE collision type, Ball.bounciness = 1 and Block.bounciness = 0.

No Block objects break if I use the first method, but instead, get pushed. Only objects of the base Block class break if I use the second method, and inherited Blocks do not break, but get pushed. What's up? Any ideas?

Maybe I should be asking a different question: let's say I have this for a Block's handleMovementTrace():

	handleMovementTrace: function( res ) {
		if( res.collision.x || res.collision.y ) {
			this.kill();
		}
		
		this.parent(res);
	}

Any Block object will be destroyed on impact. Now let's say I define a child Block class to inherit this method. My child class only defines a few properties while inheriting all the parent methods (doesn't have its own init). When I run this, the parent Block will be destroyed as expected, but the child class will not be. Why?

What exactly is Block in your examples? It seems like you define your methods on an already instantiated entity or as "static" method, instead of defining them on the entity class.

EntityBlock = ig.Entity.extend({
	
	size: {x:8, y:16},
	
	handleMovementTrace: function( res ) {
        if( res.collision.x || res.collision.y ) {
            this.kill();
        }
        
        this.parent(res);
    }
});

// This will inherit the handleMovementTrace method from EntityBlock
EntitySpecialBlock = EntityBlock.extend({
	size: {x:32, y:8}
});


// This function will only be available when calling EntityBlock.fooBar()
// It will NOT be available in subclasses, nor in instances of EntityBlock
// This is NOT the way to define instance methods like handleMovementTrace
EntityBlock.fooBar = function() { /* .... */ };

Thx for the reply! Here's my base class:

ig.module(
	'game.entities.block'
)
.requires(
	'impact.entity'
)
.defines(function(){

EntityBlock = ig.Entity.extend({
	
	size: {x:16, y:32},
	collides: ig.Entity.COLLIDES.ACTIVE,
	
	animSheet: new ig.AnimationSheet( 'media/block-red.png', 16, 32 ),
	
	score: 0,
	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );
		
		this.addAnim( 'idle', 1, [0] );
	},
	
	check: function( other ) {
		
		if( other instanceof ball ) {
			var ball = ig.game.getEntitiesByType( EntityBall )[0];
			
			//if ball last touched the player's paddle, up player score
			if(ball.lasttouched == "player") {
				var player = ig.game.getEntitiesByType( EntityPaddlePlayer )[0];
				player.score += this.score;
			} //other up cpu score
			else if(ball.lasttouched == "cpu") {
				var cpu = ig.game.getEntitiesByType( EntityPaddleCpu )[0];
				cpu.score += this.score;
			}
			
			this.kill();
		}
		
		this.parent(other);
	},
	
	handleMovementTrace: function( res ) {
		if( res.collision.x || res.collision.y ) {
			this.kill();
		}
		
		this.parent(res);
	}
});

});

Here's an inherited class:

ig.module(
	'game.entities.block-blue'
)
.requires(
	'game.entities.block'
)
.defines(function(){

EntityBlockBlue = EntityBlock.extend({
	
	score: 5,
	animSheet: new ig.AnimationSheet( 'media/block-blue.png', 16, 32 )
	
});

});

An instance of the base class will break fine; the inherited class does not. What am I doing wrong?

In your check() method

if( other instanceof ball ) {

Didn't you mean to write:

if( other instanceof EntityBall ) {

?

Damn. Good catch...but it makes no difference. If I comment out my handleMovementTrace(), and run with a basic check() like this:

check: function(other) {
		this.kill();
}

The block never breaks. Indeed, a block only seems to break if I kill() it from the handleMovementTrace(). But what I don't get is that the child block never breaks - ever. Is some sort of scope in play here?

Also, what collide type should I be setting my Ball & Block to? I've been running with both on ACTIVE. If I change the Block to FIXED, nothing breaks. If I change the Block to LITE, blocks get pushed around and the Ball never loses momentum. If I change the Ball to LITE, blocks act like they're FIXED and never break.

Uhh, ok. I think I know what&039;s going on: because your blocks collide with the ball, they never overlap and thus #check() isn't called. Use the .collideWith() method instead to get notified of collisions.

Since only your ball should bounce back from a collision with a block (blocks shouldn't move at all), the blocks should be FIXED and your ball ACTIVE or PASSIVE.

Okay. That makes sense. Could you gimme an example though? I tried this:

collidesWith: function( other, axis ) {
		this.kill();
	}

And blocks act identically to the check() behavior above.

Here's my Ball class:

ig.module(
	'game.entities.ball'
)
.requires(
	'impact.entity'
)
.defines(function(){

EntityBall = ig.Entity.extend({
	
	//ig properties
	size: {x:16, y:16},
	collides: ig.Entity.COLLIDES.ACTIVE,
	bounciness: 1,
	animSheet: new ig.AnimationSheet( 'media/ball.png', 16, 16 ),
	
	//tracks which paddle the ball last touched
	lasttouched: "player",
	
	//methods	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );
		this.addAnim( 'idle', 1, [0] );
                
        this.vel.x = 256;
        this.vel.y = 256;
	},
	
	check: function( other ) {
		
		if( other instanceof EntityPaddlePlayer ) {
			lasttouched = "player";
		}
		else if (other instanceof EntityPaddleCpu) {
			lasttouched = "cpu";
		}
	}
});

});

Hope that may help.

Quote from quidmonkey
Okay. That makes sense. Could you gimme an example though? I tried this:

collidesWith: function( other, axis ) {
	this.kill();
}

It&039;s #.collideWith - without the s :)

Hah! Tried it, and works like a charm. Thx!