Breakout Game Help

I've got the basics of a Breakout style game pretty much done. It's my second real attempt at a BB game, so this might seem kinda nooby.

Anyway, all the images are loaded and colliding,and I've got the blocks displaying.

But I'm stumped on how to make the blocks dissapear when they are collided with. Any ideas, or exmaples I can look at?

Code...

Graphics 640,512,0,2

Apptitle "Breakout","Are you sure?"
;PlayMusic("media/music/bg_music.mp3")
SetBuffer BackBuffer()

sndHit = LoadSound("media/sounds/ARRP.WAV")

;------------------
;Coordinates
;------------------

Global Player_X = 272
Global Player_Y = 384

Global Ball_X = 280
Global Ball_Y = 200

;------------------
;Blocks
;------------------

Type Block

	Field x,y,bx,by,image
	
End Type

MakeLevel()


;------------------
;Ball Speed
;------------------

Global SpeedX = 5	
Global SpeedY = 5

;------------------
;Background
;------------------

imgBack = LoadImage("media/images/back.PNG")

;------------------
;Set up the ball
;------------------

Global imgBall = LoadImage("media/images/ball.PNG")

;------------------
;Player Image
;------------------

imgPlayer = LoadImage("media/images/player.PNG")

;------------------
;Blocks to Destroy
;------------------

Global imgBlocks = LoadAnimImage("media/images/blocks_tile.PNG",32,32,0,6)	;All images are on a single image
Global level = 1

;------------------
;
;Main Loop
;
;------------------

While Not KeyHit(1)

;------------------
;Move Player Left
;------------------
	
	If KeyDown(203)
	
		Player_X = Player_X - 10
	
	EndIf

;------------------
;Move Player Right
;------------------

	If KeyDown(205)
	
		Player_X = Player_X + 10
	
	EndIf
	
;-----------------
;Ball to Bat Collision
;-----------------

	If ImagesCollide(imgPlayer,Player_X, Player_Y,0, imgBall, Ball_X, Ball_Y,0) Then SpeedY = SpeedY - (2*SpeedY) PlaySound sndHit

	
;-----------------
;Stop the Player at the Edges
;-----------------

	If Player_X < 8 Then Player_X = 8
	If Player_X > 537 Then Player_X = 537

;-----------------
;Move the Ball
;-----------------

	Ball_X = Ball_X + SpeedX
	Ball_Y = Ball_Y + SpeedY

;-----------------
;Play Area 
;-----------------

	If Ball_x < 10 Or Ball_x > 647 - 40 Then Speedx = -Speedx PlaySound sndHit		;Bounces of the sides
	If Ball_y < 14 Or Ball_y > 470 - 40 Then SpeedY = - SpeedY PlaySound sndHit	;Bounces of the roof/floor

;-----------------
;Show the Images
;-----------------
	
	DrawImage imgBack, 0,0
	MaskImage imgBack, 0,128,0
	DrawImage imgPlayer, Player_X, Player_Y
	MaskImage imgPlayer, 0,0,0	


	DrawImage imgBall, Ball_X, Ball_Y
	MaskImage imgBall, 0,0,0	
	
	DrawBlocks()	;go to DrawBlocks() function below
	
Flip

Wend

End

;------------------
;Display the blocks
;------------------

Function DrawBlocks()

	For b.block = Each block
		DrawImage imgBlocks,b\bx,b\by,b\image
		MaskImage imgBlocks,20,20,60	;random number to allow black outlines to show
		
		;------------------
		;Ball to Block Collision
		;------------------		

		If ImagesCollide(imgBall, Ball_x, Ball_y,0, imgBlocks, b\bx,b\by,0) Then SpeedY = SpeedY - (2*SpeedY)	;ball to block collision	
		
	Next
	
End Function





;------------------
;Position the blocks
;------------------

Function MakeLevel()

Restore level1

	For y = 0 to 15
		For x = 0 to 19
		
	Read d
	
	If d > 0
			b.block = New block
					b\x = x
					b\y = y
					b\bx = (x * 32)
					b\by = (y * 32)
					b\image = d
	End If
	
		Next
			
	Next
			
End Function

;---------------
;Define which blocks go where
;---------------

;0 = Empty (none)
;1 = Blue
;2 = Red
;3 = Yellow
;4 = Green
;5 = Purple
.level1

Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0	;two column spaces at the sides, and one empty row at the top, for appearance.
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0	
Data 0,0,1,2,4,1,3,5,1,2,3,4,2,3,1,5,4,1,0,0
Data 0,0,1,2,4,1,3,5,1,2,3,4,2,3,1,5,4,1,0,0
Data 0,0,1,2,4,1,3,5,1,2,3,4,2,3,1,5,4,1,0,0
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
Data 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

*EDIT*

Also, the ball has a habit of going behind the blocks at times, but I'm curious to see if removing the block when it's collided with will alter this. It only seems to go behind when it hits the sides of the blocks or a corner, not the top or bottom.

Hi Muzzer, you need to "delete b" each block.type
One another thing, include "Cls" in the beginning of your loop, just under
While Not KeyHit(1)
Cls.
.......... do your maskimage code there you load your images, it's unnecessary to do it every time, do it like this
imgPlayer = LoadImage("media/images/player.PNG")
maskimage imgPlayer xx,xx,xx ; what ever color you want.

 
Function DrawBlocks()

	For b.block = Each block
		DrawImage imgBlocks,b\bx,b\by,b\image
		MaskImage imgBlocks,20,20,60	;random number to allow black outlines to show
		
		;------------------
		;Ball to Block Collision
		;------------------		

		If ImagesCollide(imgBall, Ball_x, Ball_y,0, imgBlocks, b\bx,b\by,0) Then 
			SpeedY = SpeedY - (2*SpeedY)	;ball to block collision	
			delete b ; <--- add this, this delete each block thats got an hit.
		end if
	Next
	
End Function

Just what I needed, thank you. I knew it would be something simple.

Shouldn't code so late at night.

Need to work on the collisions now. Just tried it and the ball goes behind the blocks and clears most of them in about 3 seconds. :p

Thanks again

You can simplify reversing your balls direction by simply writing your code like this:
SpeedY = -SpeedY

Also, theres no need to mask your images every loop of your program, just do that once at the beginning of your program.

Most likely this is because you are only changing the Y value when you collide with a block. To correct this, you will have to change the X value (not the Y) if you collide with the side of a block or both if you collide with the centerline of the block.

Here's some code that should work:

Function DrawBlocks()

	For b.block = Each block
		DrawImage imgBlocks,b\bx,b\by,b\image
		MaskImage imgBlocks,20,20,60	;random number to allow black outlines to show
		
		;------------------
		;Ball to Block Collision
		;------------------		

		If ImagesCollide(imgBall, Ball_x, Ball_y,0, imgBlocks, b\bx,b\by,0)
			;determine which side was hit
			;reduce x and y values to balls center position on the block
			tx = Ball_x - b\bx + widthOfBallInPixels/2
			ty = Ball_y - b\by + heightOfBallInPixels/2
			If tx < ty ;lowerleft
				If tx > heightOfBlockInPixels-ty ;lowerright
					;ball hit bottom
					SpeedY = -SpeedY
				Else
					;ball hit left
					SpeedX = -SpeedX
				EndIf
			ElseIf tx > ty ;upperright
				If tx > heightOfBlockInPixels-ty ;lowerright
					;ball hit right
					SpeedX = -SpeedX
				Else
					;ball hit top
					SpeedY = -SpeedY
				EndIf
			Else
				;ball hit centerline of block, reverse both directions
				SpeedX = -SpeedX
				SpeedY = -SpeedY
			EndIf
			Delete b ; <--- add this, this delete each block thats got an hit.
		End If
	Next
End Function

Note that heightOfBlockInPixels, heightOfBallInPixels, and widthOfBallInPixels need to equal those values of your images (in pixels) :)

Thanks alot, much appreciated.

Works perfectly as far as I can see.

Here's a quick screeny...



Still some fancy stuff I want to add, but (fingers crossed) I'll be able to work that out on my own.

Just noticed, the health bulbs in the bottom left look a little off too...

Just a note: If you add fancy stuff after you check to see if you can delete the block, you have to put

Return

after you delete them. Otherwise it will check on blocks that don't exist anymore.