Gaming Introduction

Video games have been an important part of computer systems since their early days. We will start by making the simplest possible video game.

Prerequisite

You must have a basic understanding of coding and have completed the Drawing lesson.

Back to the Basics

Python and C# can be used to build powerful and modern game, thanks to the modern graphical frameworks and libraries, like DirectX. The problem with learning how to build games in the modern world is that all the basics are missed. Things forgotten are things like he mathematics needed to draw a shape like a circle and understanding pixels and how they are handled.

Our goal here is not to build a modern 3D game. The goal is to show how Pong was made in the 70s and how games are made on a foundation level. We will focus on using the small screen on the hardware.

Game Objective

The player will need to catch falling eggs in a basket. For simplicity, the eggs are just a circle and the basket is just a rectangle.

Basket Drawing

The player, which is a basket in this case, is just a DrawLine(), or we can use DrawFillRect() to make a thicker line.

BrainPad.Display.Clear(0);
BrainPad.Display.DrawFillRect(1,10,60,20,3);
BrainPad.Display.Show();

BrainPad.Display.Clear(0)
BrainPad.Display.DrawFillRect(1,10,60,20,3)
BrainPad.Display.Show()

Basket Control

Buttons A and B will be used to control the player (basket). Instead of using the BtnDown() function, we will use DRead(). This is because we will need to know if the button is constantly down vs reading a button click. The B variable will be used to for the basket’s position. We can create a subroutine that processes the basket.

In Python, we need point out which variables we’ll be using inside the function we create so that it does not create new variables. So, we add the keyword ‘global‘. This ensures that we’re using the original variable we created at the beginning of our code.

var basketX = 10;

void ProcessBasket(){
    if (!BrainPad.Digital.Read(BrainPad.Pin.ButtonA,BrainPad.Pin.PullUp)){
        basketX = basketX - 6;
    }
    if (!BrainPad.Digital.Read(BrainPad.Pin.ButtonB,BrainPad.Pin.PullUp)){
        basketX = basketX + 6;
    }
}

basketX = 10

def ProcessBasket():
    global basketX   

    if (BrainPad.Digital.Read(BrainPad.Pin.ButtonA,BrainPad.Pin.PullUp)) == 0:
        basketX = basketX - 6

    if (BrainPad.Digital.Read(BrainPad.Pin.ButtonB,BrainPad.Pin.PullUp)) == 0:
        basketX = basketX + 6

With the basket process in place, we can now create the game loop, to process and draw the “basket”.

while (true){
    BrainPad.Display.Clear(0);
    BrainPad.Display.DrawFillRect(1, basketX, 60, 20, 3);  
    BrainPad.Display.Show();   
    ProcessBasket();    
}

while True:
    BrainPad.Display.Clear(0)
    BrainPad.Display.DrawFillRect(1,basketX,60,20,3)
    BrainPad.Display.Show() 
    ProcessBasket()

The entire code listing is here in case you have missed something.

var basketX = 10;

void ProcessBasket(){
    if (!BrainPad.Digital.Read(BrainPad.Pin.ButtonA,BrainPad.Pin.PullUp)){
        basketX = basketX - 6;
    }
    if (!BrainPad.Digital.Read(BrainPad.Pin.ButtonB,BrainPad.Pin.PullUp)){
        basketX = basketX + 6;
    }
}

while (true){
    BrainPad.Display.Clear(0);
    BrainPad.Display.DrawFillRect(1, basketX, 60, 20, 3);
    BrainPad.Display.Show();   
    ProcessBasket();  
}

basketX = 10

def ProcessBasket():
    global basketX   

    if (BrainPad.Digital.Read(BrainPad.Pin.ButtonA,BrainPad.Pin.PullUp)) == 0:
        basketX = basketX - 6

    if (BrainPad.Digital.Read(BrainPad.Pin.ButtonB,BrainPad.Pin.PullUp)) == 0:
        basketX = basketX + 6 

while True:
    BrainPad.Display.Clear(0)
    BrainPad.Display.DrawFillRect(1,basketX,60,20,3)
    BrainPad.Display.Show() 
    ProcessBasket()

Try what we have so far. Did you notice how the basket can leave the screen if you keep pushing one of the buttons? Any ideas on how we can keep the basket from leaving the screen?

Stay on Screen

Keeping the basket on the screen is somewhat easy. We will check the basket position and only change its position if the buttons are pressed and also if the basket is not leaving the screen. Notice how we used “and” in the previous sentence. The code will also be exactly just that.

Can you see why we did 0 & 110?

void ProcessBasket(){
    if (!BrainPad.Digital.Read(BrainPad.Pin.ButtonA,BrainPad.Pin.PullUp) && basketX > 0){
        basketX = basketX - 6;
    }
    if (!BrainPad.Digital.Read(BrainPad.Pin.ButtonA, BrainPad.Pin.PullUp) && basketX < 110){
        basketX = basketX + 6;
    }
}

def ProcessBasket():
    global basketX   

    if ((BrainPad.Digital.Read(BrainPad.Pin.ButtonA,BrainPad.Pin.PullUp)==0) and basketX > 0):
        basketX = basketX - 6

    if ((BrainPad.Digital.Read(BrainPad.Pin.ButtonB,BrainPad.Pin.PullUp)==False) and basketX < 110):
        basketX = basketX + 6

Falling Eggs

We’ll use a DrawCircle() function inside our while true loop and add egg variables eggY & eggX at the top of our code to track the eggs x and y positions on the screen.

var eggY = 0;
var eggX = 20;

while (true){
    BrainPad.Display.Clear(0);
    BrainPad.Display.DrawCircle(1, eggX, eggY, 3); 
    BrainPad.Display.DrawFillRect(1, basketX, 60, 20, 3);   
    BrainPad.Display.Show();   
    ProcessBasket();
}

eggY = 0
eggX = 20

while True:
    BrainPad.Display.Clear(0)
    BrainPad.Display.DrawCircle(1,eggX,eggY,3)
    BrainPad.Display.DrawFillRect(1,basketX,60,20,3)
    BrainPad.Display.Show() 
    ProcessBasket()

The eggs will always start at the top of the screen and fall down. The “down movement” means the Y axis location will increase. Remember, the top of the screen is 0. eggY variable will keep track of the egg position as it’s falling.

Let’s create a function called ProcessEgg() to handle our egg. Inside the function lets increment the eggY variable by +3. This will make our egg fall by 3 pixels every time the function is called.

void ProcessEgg(){
    eggY = eggY + 3;
}

def ProcessEgg():
    global eggY
    eggY = eggY + 3

Also we want to add some code to see when the egg reaches the bottom. We’ll use an if-statement to check and see if eggY is greater than 64. That means it has left the bottom of the screen. Once it does will can send it back to the top by setting eggY variable back to = 0.

void ProcessEgg(){
    eggY = eggY + 3;
    if (eggY > 64) {
        eggY = 0;  
    }
}

def ProcessEgg():
    global eggY
    eggY = eggY + 3
    if eggY > 64:
        eggY = 0

For the X axis position, we will use our eggX variable. Let’s just keep it set at 20 for now. Here is the full code listing.

var basketX = 10;
var eggY = 0;
var eggX = 20;

void ProcessBasket(){
    if (!BrainPad.Digital.Read(BrainPad.Pin.ButtonA,BrainPad.Pin.PullUp) && basketX > 0){
        basketX = basketX - 6;
    }
    if (!BrainPad.Digital.Read(BrainPad.Pin.ButtonA, BrainPad.Pin.PullUp) && basketX < 110){
        basketX = basketX + 6;
    }
}
void ProcessEgg(){
    eggY = eggY + 3;
    if (eggY > 64) {
        eggY = 0;  
    }
}

while (true){
    BrainPad.Display.Clear(0);
    BrainPad.Display.DrawCircle(1, eggX, eggY, 3);
    BrainPad.Display.DrawFillRect(1, basketX, 60, 20, 3);
    BrainPad.Display.Show();   
    ProcessBasket();
    ProcessEgg();
}

basketX = 10
eggY = 0
eggX = 20

def ProcessBasket():
    global basketX   

    if ((BrainPad.Digital.Read(BrainPad.Pin.ButtonA,BrainPad.Pin.PullUp)==0) and basketX > 0):
        basketX = basketX - 6

    if ((BrainPad.Digital.Read(BrainPad.Pin.ButtonB,BrainPad.Pin.PullUp)==0) and basketX < 110):
        basketX = basketX + 6 
        
def ProcessEgg():
    global eggY
    eggY = eggY + 3
    if eggY > 64:
        eggY = 0

while True:
    BrainPad.Display.Clear(0)
    BrainPad.Display.DrawCircle(1,eggX,eggY,3)
    BrainPad.Display.DrawFillRect(1,basketX,60,20,3)
    BrainPad.Display.Show() 
    ProcessBasket()
    ProcessEgg()

That is starting to look like a game. Now we need to change where the egg falls down from at the top. We want it coming down from a random location. Thankfully, random is a built-in feature in most programming languages. Lets create a variable to hold our random number, and place it near the top with our other variables. Inside our ProcessEgg() function we’ll generate the random number every time after our egg leaves the bottom of the screen.

var rnd = new Random();

void ProcessEgg(){
    eggY = eggY + 3;
    if (eggY > 64) {
        eggY = 0;
        eggX = rnd.Next(127);
    }  
}

import random

def ProcessEgg():
    global eggY
    global eggX
    eggY = eggY + 3
    if eggY > 64:
        eggY = 0
        eggX = random.randint(0,128)

Keeping Score

The basket is moving and the egg is falling but where is the score? This is done by comparing the position of the egg to the basket. We only need to do this when the egg reaches the bottom so we can use the if-statement inside our ProcessEgg() function to check.

Create a variable to hold our score set it to 0, and place it with our other variables at the top. Increase the score by one inside the if-statement that we use to check to see if our egg and basket are in the same spot.

var score = 0;

void ProcessEgg(){
    eggY = eggY + 3;
    if (eggY > 64) {
        //Check for collision
        if (eggX > basketX && eggX < basketX + 20){
            score = score + 1;
        }
        //New Egg
        eggY = 0;
        eggX = rnd.Next(120);
    }  
}

score = 0

def ProcessEgg():
    global eggY
    global eggX
    global basketX
    global score

    eggY = eggY + 3
    if eggY > 64:
        # Check for collision
        if eggX > basketX and eggX < basketX + 20:
            score = score + 1

        # new egg
        eggY = 0
        eggX = random.randint(0,120)

We finally can show off our score! Let’s place it in the top left corner.

while (true){
    BrainPad.Display.Clear(0);
    BrainPad.Display.DrawCircle(1, eggX, eggY, 3);
    BrainPad.Display.DrawFillRect(1, basketX, 60, 20, 3);
    BrainPad.Display.DrawText(score.ToString(), 1, 0, 0);
    BrainPad.Display.Show();
    ProcessBasket();
    ProcessEgg();
    BrainPad.System.Wait(10);
}

while True:
    BrainPad.Display.Clear(0)
    BrainPad.Display.DrawCircle(1,eggX,eggY,3)
    BrainPad.Display.DrawFillRect(1,basketX,60,20,3)
    BrainPad.Display.DrawTextScale(score,1,0,0,3,2)
    BrainPad.Display.Show() 
    ProcessBasket()
    ProcessEgg()
    BrainPad.System.Wait(10)

Making Noise!

How about some tone when the egg is caught and different tone when lost? We can use System.Beep() to generate simple tones.

void ProcessEgg(){
    eggY = eggY + 3;
    if (eggY > 64) {
        //Check for collision
        if (eggX > basketX && eggX < basketX + 20){
            score = score + 1;
            BrainPad.System.Beep(BrainPad.Pin.Piezo, 1000, 100);
        }
        else {
            BrainPad.System.Beep(BrainPad.Pin.Piezo, 256, 100);
        }
        //New Egg
        eggY = 0;
        eggX = rnd.Next(127);
    }  
}

def ProcessEgg():
    global eggY
    global eggX
    global basketX
    global score

    eggY = eggY + 3
    if eggY > 64:
        # Check for collision
        if eggX > basketX and eggX < basketX + 20:
            score = score + 1
            BrainPad.System.Beep(BrainPad.Pin.Piezo,1000,100)
        else:
            BrainPad.System.Beep(BrainPad.Pin.Piezo,256,100)
        # new egg
        eggY = 0
        eggX = random.randint(0,120)

Final Results

A playable game with under 50 lines of code! Not bad considering commercial games are usually thousands or millions of lines of code. Here is the complete code with all the parts we’ve shown above:

using GHIElectronics.DUELink;
var availablePort = DUELinkController.GetConnectionPort();
var BrainPad = new DUELinkController(availablePort);

var basketX = 10;
var eggY = 0;
var eggX = 20;
var rnd = new Random();
var score = 0;

void ProcessBasket(){
    if (!BrainPad.Digital.Read(BrainPad.Pin.ButtonA,BrainPad.Pin.PullUp) && basketX > 0){
        basketX = basketX - 6;
    }
    if (!BrainPad.Digital.Read(BrainPad.Pin.ButtonB, BrainPad.Pin.PullUp) && basketX < 110){
        basketX = basketX + 6;
    }
}
void ProcessEgg(){
    eggY = eggY + 3;
    if (eggY > 64) {
        //Check for collision
        if (eggX > basketX && eggX < basketX + 20){
            score = score + 1;
            BrainPad.System.Beep(BrainPad.Pin.Piezo, 1000, 100);
        }
        else {
            BrainPad.System.Beep(BrainPad.Pin.Piezo, 256, 100);
        }
        //New Egg
        eggY = 0;
        eggX = rnd.Next(127);
    }   
}

while (true){
    BrainPad.Display.Clear(0);
    BrainPad.Display.DrawCircle(1, eggX, eggY, 3);
    BrainPad.Display.DrawFillRect(1, basketX, 60, 20, 3);
    BrainPad.Display.DrawText(score.ToString(), 1, 0, 0);
    BrainPad.Display.Show();
    ProcessBasket();
    ProcessEgg();
    BrainPad.System.Wait(10);
}

from DUELink.DUELinkController import DUELinkController
availablePort = DUELinkController.GetConnectionPort()
BrainPad = DUELinkController(availablePort)

import random

basketX = 10
eggY = 0
eggX = 20
score = 0

def ProcessBasket():
    global basketX   

    if ((BrainPad.Digital.Read(BrainPad.Pin.ButtonA,BrainPad.Pin.PullUp)==0) and basketX > 0):
        basketX = basketX - 6

    if ((BrainPad.Digital.Read(BrainPad.Pin.ButtonB,BrainPad.Pin.PullUp)==0) and basketX < 110):
        basketX = basketX + 6 
        
def ProcessEgg():
    global eggY
    global eggX
    global basketX
    global score

    eggY = eggY + 3
    if eggY > 64:
        # Check for collision
        if eggX > basketX and eggX < basketX + 20:
            score = score + 1
            BrainPad.System.Beep(BrainPad.Pin.Piezo,1000,100)
        else:
            BrainPad.System.Beep(BrainPad.Pin.Piezo,256,100)
        # new egg
        eggY = 0
        eggX = random.randint(0,120)
        

while True:
    BrainPad.Display.Clear(0)
    BrainPad.Display.DrawCircle(1,eggX,eggY,3)
    BrainPad.Display.DrawFillRect(1,basketX,60,20,3)
    BrainPad.Display.DrawTextScale(score,1,0,0,3,2)
    BrainPad.Display.Show() 
    ProcessBasket()
    ProcessEgg()
    BrainPad.System.Wait(10)

What is Next?

Modify the code to change how the game works, or completely make a new game.

BrainStorm

Do video games really detect collision properly? Or it just checking for location? Things get more advanced in 3D space and advanced computing but will the answer be going the easy route? What about “falling” objects? Did we do proper gravity physics calculation? It was a simple addition. Can you think of video games where proper physics calculations are a must?