# 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
End

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

SetDeviceWindow(640,480,0)
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
End

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
Endif

End

Method OnRender()
PushMatrix()
Scale(scaleX,scaleY)

DrawImage gfxBG,0,0

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

PopMatrix()
End

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 itch.io), 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…