Gaming Introduction

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.

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 Line(), or we can use FillRect() to make a thicker line.

Remember, we must add the top lines that bring in the drawing libraries. Those lines will be excluded in the examples shown after.

using static BrainPad.Controller;
using static BrainPad.Display;

FillRect(10,60,20,3);
Show();
from BrainPad import *

FillRect(10,60,20,3)
Show()

Basket Control

ButtonA and ButtonB will be used to control the player (basket). There are complete lessons on In & Out control, but for now, all you need to know is that there is a Button() element that In() can read. A 1 is returned when a button is pressed, 0 when not pressed.

We will create a variable to keep track of the basket X position. When ButtonA is pressed, the basket is moved to the left decreasing the X position. When ButtonB is pressed, the basket is moved to the right by increasing the X position.

The speed of how much the basket is moving is controlled by how much we increment or decrement the position when a button is pressed. In this example, we decided to use 6. To keep this code separate and easier to manage, we will place it in its own function.

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;
var btnA = Button(ButtonA, 0.1);
var btnB = Button(ButtonB, 0.1);

void ProcessBasket() {
    if (In(btnA) == 1){
        basketX = basketX - 6;
    }
    if (In(btnB) == 1) {
        basketX = basketX + 6;
    }
}
basketX = 10
btnA = Button(ButtonA,0.1)
btnB = Button(ButtonB,0.1)

def ProcessBasket():
    global basketX
    global btnA
    global btnB

    if In(btnA) == 1:
        basketX = basketX - 6
    if In(btnB) == 1:
        basketX = basketX + 6


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

while (true) {
    Clear();
    FillRect(basketX , 60, 20, 3);
    Show();

    ProcessBasket();
}
while True:
    Clear()
    FillRect(basketX, 60, 20, 3)
    Show()

    ProcessBasket()

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

var basketX = 10;
var btnA = Button(ButtonA, 0.1);
var btnB = Button(ButtonB, 0.1);

void ProcessPlayer() {

    if (In(btnA) == 1) {
        basketX = basketX - 6;
    }
    if (In(btnB) == 1) {
        basketX = basketX + 6;
    }
}

while (true) {
    Clear();
    FillRect(basketX ,60,20,3);
    Show();
    ProcessBasket();
}
basketX = 10
btnA = Button(ButtonA,0.1)
btnB = Button(ButtonB,0.1)

def ProcessBasket():
    global basketX
    global btnA
    global btnB
    
    if In(btnA) == 1:
        basketX = basketX - 6
    if In(btnB) == 1:
        basketX = basketX + 6
        
while True:
    Clear()
    FillRect(basketX, 60, 20, 3)
    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.

var basketX = 10;
var btnA = Button(ButtonA, 0.1);
var btnB = Button(ButtonB, 0.1);
void ProcessBasket() {
    if (In(btnA) == 1 && basketX > 0) {
        basketX = basketX - 6;
    }
    if (In(btnB) == 1 && basketX < 110) {
        basketX = basketX + 6;
    }
}
basketX = 10
btnA = Button(ButtonA,0.1)
btnB = Button(ButtonB,0.1)

def ProcessBasket():
    global basketX
    global btnA
    global btnB
    
    if In(btnA) == 1 and basketX > 0:
        basketX = basketX - 6
    if In(btnB) == 1 and basketX < 110:
        basketX = basketX + 6

Falling Eggs

We’ll use a a Circle() as our egg with its location being eggY and eggX.

var eggY = 0;
var eggX = 20;

Circle(eggX, eggY, 3);
eggY = 0
eggX = 20

Circle(eggX, eggY, 3)

The eggs will always start on 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 ball position falling down. For the X axis position, we will use eggX variable. Let us just set it and keep it at 20 for now.

void ProcessEgg() {
    eggY = eggY + 3;
}
def ProcessEgg():
    global eggY
    eggY = eggY + 3

Update the main loop and try the game. The “egg” will fall down and that is about it. To see it again, you need to rerun your program or hit the reset button on the back.

while (true) {
    Clear();
    FillRect(basketX, 60, 20, 3);
    Circle(eggX, eggY, 3);
    Show();

    ProcessBasket();
    ProcessEgg();
}
while True:
    Clear()
    FillRect(basketX, 60, 20, 3)
    Circle(eggX, eggY, 3)
    Show()

    ProcessBasket()
    ProcessEgg()

A small change is needed to send the egg back to the top. Whenever the egg’s eggY reaches the bottom, we would set its position back to the top.

var eggY = 0;
var eggX = 20;

void ProcessEgg() {
    eggY = eggY + 3;
    if (eggY > 63) {
        eggY = 0;
    }
}
eggY = 0
eggX = 20

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

That is starting to look like a game. We now need to change where the egg falls down from. We want it coming down from a random location. Thankfully, the random is a built-in feature in most programming languages. If you’re not sure how random works, there is more information inside the Built-in functions lesson. For Python, don’t forget to add the line ‘import random’ at the top of our code. 

var eggY = 0;
var eggX = 20;
var rnd = new System.Random();
void ProcessEgg() {
    eggY = eggY + 3;
    if (eggY > 63) {
        eggY = 0;
        eggX = rnd.Next(127);
    }
}
import random

eggY = 0
eggX = 20

def ProcessEgg():
    global eggY
    global eggX

    eggY = eggY + 3
    if eggY > 63:
        eggY = 0
        eggX = random.randint(0,127)

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. If the egg is within the basket, we will increase the score by one.

var eggY = 0;
var eggX = 20;
var rnd = new System.Random();
var score = 0;

void ProcessEgg() {
    eggY = eggY + 3;
    if (eggY > 63) {
        if(eggX> basketX && eggX < basketX+20) {
            score = score + 1;
        }
        eggY = 0;
        eggX = rnd.Next(127);
    }
}
eggY = 0
eggX = 20
score = 0

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

    eggY = eggY + 3
    if eggY > 63:
        if eggX > basketX and eggX < basketX+10:
            score = score + 1
  
        eggY = 0
        eggX = random.randint(0,127)

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

while (true) {
    Clear();
    FillRect(basketX, 60, 20, 3);
    Circle(eggX, eggY, 3);
    Text(score, 2, 2);
    Show();

    ProcessBasket();
    ProcessEgg();
}
while True:
    Clear()
    FillRect(basketX, 60, 20, 3)
    Circle(eggX, eggY, 3)
    Text(score, 2, 2)
    Show()
    ProcessBasket()
    ProcessEgg()

Making Noise!

How about some tone when the egg is caught and different tone when lost? Sound is generated with the built-in Sound element.

var eggY = 0;
var eggX = 20;
var score = 0;

var snd = Sound(Buzzer, 0.030, 10);

void ProcessEgg() 
    eggY = eggY + 3;
    if (eggY > 63) {
        if (eggX > basketX && eggX < basketX + 20) {
            score = score + 1;
            Out(snd, 3000);
        }
        else {
            Out(snd, 300);
        }
        eggY = 0;
        eggX = rnd.Next(127);
    }
}
eggY = 0
eggX = 20
score = 0

snd = Sound(Buzzer, 0.030, 10)

def ProcessEgg():
    global eggY
    global eggX
    global basketX
    global score
    global snd
    
    eggY = eggY + 3
    if eggY > 63:
        if eggX > basketX and eggX < basketX + 20:
            score = score + 1
            Out(snd,3000)
        else:
            Out(snd,300)
        
        eggY = 0
        eggX = random.randint(0,127)

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 static BrainPad.Controller;
using static BrainPad.Display;

var basketX = 10;
var btnA = Button(ButtonA, 0.1);
var btnB = Button(ButtonB, 0.1);
void ProcessBasket() {
    if (In(btnA) == 1 && basketX > 0) {
        basketX = basketX - 6;
    }
    if (In(btnB) == 1 && basketX < 110) {
        basketX = basketX + 6;
    }
}

var eggY = 0;
var eggX = 20;
var rnd = new System.Random();
var score = 0;
var snd = Sound(Buzzer, 0.030, 10);
void ProcessEgg() {
    eggY = eggY + 3;
    if (eggY > 63) {
        if (eggX > basketX && eggX < basketX + 20) {
            score = score + 1;
            Out(snd, 3000);
        }
        else {
            Out(snd, 300);
        }
        eggY = 0;
        eggX = rnd.Next(127);
    }
}

while (true) {
    Clear();
    FillRect(basketX, 60, 20, 3);
    Circle(eggX, eggY, 3);
    Text(score, 2, 2);
    Show();

    ProcessBasket();
    ProcessEgg();
}

from BrainPad import *
import random

basketX = 10
btnA = Button(ButtonA,0.1)
btnB = Button(ButtonB,0.1)

eggY = 0
eggX = 20
score = 0

snd = Sound(Buzzer, 0.030, 10);

def ProcessEgg():
    global eggY
    global eggX
    global basketX
    global score
    global snd
    
    eggY = eggY + 3
    if eggY > 63:
        if eggX > basketX and eggX < basketX + 20:
            score = score + 1
            Out(snd,3000)
        else:
            Out(snd,300)
        
        eggY = 0
        eggX = random.randint(0,127)

def ProcessBasket():
    global basketX
    global btnA
    global btnB
    
    if In(btnA) == 1 and basketX > 0:
        basketX = basketX - 6
    if In(btnB) == 1 and basketX < 110:
        basketX = basketX + 6
        
while True:
    Clear()
    FillRect(basketX, 60, 20, 3)
    Circle(eggX, eggY, 3)
    Text(score, 2, 2)
    Show()

    ProcessBasket()
    ProcessEgg()

What is Next?

Modify the code to change how the game works, or completely make a new game. Visit the Lesson Plan page to see what other lessons are available.

BrainStorm

In the early computer days, things were very simple and resources were severely limited. Game creators had to be very creative to make exciting games with limited resources. Can you think of examples that you are familiar with? Tetris? Packman? Mario?

Copyright © 2023 BrainPad, A GHI Electronics, LLC Trademark