Bouncing of the ball when it touches the Bat (80s Krakout style)

It’s night when I’m writing this. I came up with a little Monkey X tutorial on how to program the bouncing of the ball, when it touches the bat in the “old school way” — like in the popular C64 game Krakout in the 80s.

In the video for the tutorial you can see, that as the ball touches the bat for the first time, delta y doesn’t change. This is because both the ball and the bat are uneven as height in pixels; now both the ball and the bat have a middle point.

This is just a short piece of code, that doesn’t handle the case, when the ball is at the horizontal top or bottom of the bat. There’s some extra work for anyone who wants to make an 80s style Krakout game. 🙂

The delta y for the ball is calculated simply how the ball’s y-position is related to the middle point to the bat. The “scale” variable is used to adjust the max y-speed of the ball.

Source code below:

Import mojo

Function Main()
	New MyApp

Class MyApp Extends App

	Field gfxBG:Image, gfxBat:Image, gfxBall:Image
	Field scaleX:Float, scaleY:Float
	Field touchX:Float, touchY:Float
	Field prevTX:Float, prevTY:Float
	Field batY:Float
	Field ballX:Float, ballY:Float
	Field ballDX:Float, ballDY:Float
	Field scale:Float
	Method OnCreate()
		' Load graphics
		gfxBG = LoadImage("bg2.png")
		gfxBat = LoadImage("bat3.png")
		gfxBall = LoadImage("ball4.png")

		scaleX = DeviceWidth() / 640.0
		scaleY = DeviceHeight() / 480.0
		ballX = 42
		batY = 230
		ballY = 230 + 36 - 8

		ballDX = 2
		ballDY = 0
		prevTY = 0
		touchY = 0
		touchX = 0
		touchY = 0
		scale = 16
	Method OnUpdate()

		' The if-sentence prevents the bat to appear at bottom of the screen at the start..
		If prevTY <> 0 Then batY = batY - (prevTY - touchY)

		prevTY = touchY
		touchY = TouchY()
		touchY = touchY / scaleY
		' Keep the bat in the borders of the screen
		If batY < 0 Then batY = 0
		If batY > 479 - 72 Then batY = 479 - 72
		' Move the ball
		ballX = ballX + ballDX
		ballY = ballY + ballDY

		' Keep the ball in the borders of the screen
		If ballY < Abs(ballDY) Then ballDY = -ballDY
		If ballY > 479 - 17 Then ballDY = -ballDY
		If ballX < -Abs(ballDX) Then ballDX = -ballDX
		If ballX > 639 - Abs(ballDX) - 16 Then ballDX = -ballDX
		' Calculate the deltaY value for the ball in the "old school way"...
		If ballX >= 601 - 16 And ballY + 16 > batY And ballY < batY + 72 Then
			ballDY = -((batY + 36) - (ballY + 8)) / scale		
			ballDX = -ballDX

	Method OnRender()
		DrawImage gfxBG,0,0

		DrawImage gfxBall, ballX, ballY
		DrawImage gfxBat, 601, batY
End Class

Feel free to use and improve the source above in your own projects.

Here’s the graphics to download (license: public domain), except the background picture (right click and save as…):



The bat is 32 x 73 pixels as size, the ball is 16 x 17 pixels.


For comparing to the C64’s popular Krakout, see the video below:

Link: Monkey X (from, it’s free.

Many years ago I started to program Krakout style game in the spirit of the good old Commodore 64, but as usual, something went wrong. Three months work with multiple levels and a level editor programmed in Blitz3D were lost because I hadn’t taken backups of the files, when I, well, “fixed” the Windows installation I had at the time…

%d bloggers like this: