Catch Makey Robot Video Game
1-2 hours
Ages 11+
What Will You Make?
We will create a video game with Wio terminal, where you will have to catch as many Makey Robots as you can, and be careful because it is a very fast robot.
What Will You Learn?
We will program the interaction using the IMU (Inertial Measurement Unit) to move within the game, as well as programming difficulty levels and a meter for scoring.
Grab your materials...let's get started!
Step 1
To start programming, we will open the Arduino IDE, go to preferences to Additional Boards Manager URLs and paste:
“https://files.seeedstudio.com/arduino/package_seeeduino_boards_index.json”
Step 2
We select Tools > Dashboard > Dashboard Manager, here we will search for Wio Terminal and download it. Select the entry in the menu, Tools > Dashboard. Selection of the Wio Terminal.
Step 3
Now add Sketch > Include Library > Manage Libraries, we add “LIS3DHTR”. To download the other library we go to Seeed_Arduino_LCD and add it by going to Sketch > Include Library > Add ZIP Library.
Step 4
Below the magnifying glass (Monitor Serial), we have a button and select “New Tab”, we will name it “Free_Fonts.h”, inside it we paste the following content: https://raw.githubusercontent.com/Diego-Luna/Maker-Camp-2022/main/Atrapa_a_makey/Free_Fonts.h
This to be able to have a better control of the sources, for our screen.
Let's start coding!
Step 5
It’s time to program, at the top we will bring our libraries and create a new class to use them:
#include”LIS3DHTR.h”
#include”TFT_eSPI.h”
#include”Free_Fonts.h”
LIS3DHTR<TwoWire> lis;
TFT_eSPI tft;
Step 6
We are going to create the variables that will help us with our gyroscope, Makey position, times and level. We will create a character string where we will store the level. We will have two other variables for the main colors of the game:
float x_values, y_values, z_values;
bool isOnTarget = false;
int MAKEYpos = 0;
unsigned long lastChangeTime = 0;
int MAKEYwaitTime = 0;
int level = 0;
char cadena_1[10];
uint32_t color_1 = TFT_RED;
uint32_t color_2 = 0xD85C5D;
int operation_x = 0;
int operation_y = 0;
Step 7
We are going to work on the “void setup”. We will start the serial communication and our sensory turn.
Important fact: It only runs once when we turn on the device.
void setup() {
Serial.begin(115200);
lis.begin(Wire1);
}
We check that the Gyro Sensor is working and prepare it for use:
if (!lis) {
Serial.println(“ERROR”);
while (1);
}
lis.setOutputDataRate(LIS3DHTR_DATARATE_25HZ); //Data output rate
lis.setFullScaleRange(LIS3DHTR_RANGE_2G); //Scale range set to 2g
We prepare our tft screen, start its communication, change the rotation and make it blank:
tft.begin();
tft.setRotation(3);
tft.fillScreen(TFT_WHITE);
It is time to declare what we are going to do in the buzzer pins, buttons, LED.
Important fact: In the “pinMode”, we specify if it is an input or output pin. Our wio terminal already has them integrated and to call it we use its name, for example “WIO_5S_PRESS” and we specify that it will give us a value with “INPUT_PULLUP”.
pinMode(WIO_5S_PRESS, INPUT_PULLUP);
pinMode(WIO_KEY_A, INPUT_PULLUP);
pinMode(WIO_KEY_B, INPUT_PULLUP);
pinMode(WIO_KEY_C, INPUT_PULLUP);
pinMode(WIO_BUZZER, OUTPUT);
pinMode(LED_BUILTIN, OUTPUT);
And to finish with the “void setup” we turn off our integrated led and call our “subtract” function.
digitalWrite(LED_BUILTIN, LOW);
restar();
}
Step 8
We will create the “restart” function, to restart information on the screen such as the name and its section.
void restar()
{
tft.fillScreen(TFT_WHITE);
tft.fillRect( 0, 0, 320, 60, color_1);
tft.setTextColor(TFT_WHITE);
tft.setFreeFont(FF23);
tft.drawString(“Maker Camp”, 10, 15);
}
Step 9
We are going to create the “Void Loop”, where we will move between the menu and the game.
Important fact: Within “void loop” we will program the logic of the game, this will be executed as long as our arduino has electricity.
void loop() {
if (MAKEYwaitTime == 0) {
menu();
} else {
game();
}
}
Step 10
Let’s create the “menu” function.
void menu()
{
}
Inside the function we write all the graphic parts of the screen to select the difficulty.
tft.setTextColor(TFT_BLACK);
tft.setFreeFont(FF22);
tft.drawString(“Select the level”, 75, 80);
tft.setFreeFont(FF21);
tft.drawString(“Easy”, 40, 130);
tft.drawString(“Normal”, 130, 130);
tft.drawString(“Hard”, 240, 130);
tft.drawString(“C”, 55, 170);
tft.drawString(“Button”, 30, 190);
tft.drawRect( 20, 160, 80, 60, TFT_BLACK);
tft.drawString(“B”, 155, 170);
tft.drawString(“Button”, 130, 190);
tft.drawRect( 120, 160, 80, 60, TFT_BLACK);
tft.drawString(“A”, 260, 170);
tft.drawString(“Button”, 235, 190);
tft.drawRect( 225, 160, 80, 60, TFT_BLACK);
Let’s put the difficulties.
if (digitalRead(WIO_KEY_A) == LOW) {
Serial.println(“A Key pressed”);
onButton(260, 170, “A”);
MAKEYwaitTime = 1000;
delay(2000);
restar();
}
else if (digitalRead(WIO_KEY_B) == LOW) {
Serial.println(“B Key pressed”);
onButton(155, 170, “B”);
MAKEYwaitTime = 2000;
delay(2000);
restar();
}
else if (digitalRead(WIO_KEY_C) == LOW) {
Serial.println(“C Key pressed”);
onButton(55, 170, “C”);
MAKEYwaitTime = 4000;
delay(2000);
restar();
}
Step 11
Now we will create the “onButton” function:
void onButton(int x, int y, char *b)
{
tft.fillRect( x – 35, y – 10, 80, 60, color_2);
tft.drawString(b, x, y);
tft.drawString(“Button”, x – 25, y + 20);
}
Step 12
Now we will program the video game, we go to the bottom of our code and create our function:
void game()
{
}
We put the following inside the function:
Important fact: The function “tft.drawString” only accepts character string, and to transform to character we use the function “sprintf” that comes by default in the c language, and I pass them to “level” to put it on screen.
tft.setTextColor(TFT_WHITE);
tft.setFreeFont(FF21);
tft.fillRect( 240, 10, 75, 17, color_1);
sprintf(cadena_1, “%d”, level);
tft.drawString(cadena_1, 270, 12);
tft.drawString(“Points”, 250, 32);
We save the values of our gyroscope:
x_values = lis.getAccelerationX();
y_values = lis.getAccelerationY();
We put a condition that when we have not found Mackay in a predetermined time, we restart the game
if (lastChangeTime + MAKEYwaitTime < millis()) {
generateRandomMAKEY();
level = 0;
}
We place two conditions, if we press the button, being in the same position as Makey we win a point, and if not, we restart the game.
drawHoles();
if (digitalRead(WIO_5S_PRESS) == LOW) {
if (isOnTarget) {
Serial.println(“Hit!”);
digitalWrite(LED_BUILTIN, HIGH);
analogWrite(WIO_BUZZER, 128);
delay(300);
digitalWrite(LED_BUILTIN, LOW);
analogWrite(WIO_BUZZER, 0);
level++;
}
}
if (digitalRead(WIO_5S_PRESS) == LOW) {
if (isOnTarget) {
Serial.println(“Hit!”);
digitalWrite(LED_BUILTIN, HIGH);
analogWrite(WIO_BUZZER, 128);
delay(300);
digitalWrite(LED_BUILTIN, LOW);
analogWrite(WIO_BUZZER, 0);
level++;
} else {
Serial.println(“Miss!”);
level = 0;
delay(300);
}
generateRandomMAKEY();
}
Step 13
We are going to create the “generateRandomMAKEY” function, we go to the end of the code and place:
Important fact: We use the “random” function, so that it gives us a number from 0 – 8, being a total of 9 positions, where Makey is in the table.
void generateRandomMAKEY() {
MAKEYpos = random(0, 9);
lastChangeTime = millis();
}
Step 14
It’s time to create the “drawHoles” function. We go to the end of our code and place:
void drawHoles() {
for (int i = -1; i <= 1; i++) {
for (int j = -1; j <= 1; j++) {
bool isShaded = (((int)(y_values * -5) + operation_y) == i) && (((int)(x_values * 5) – operation_x) == j);
calibrate_game();
int index = (i + 1) + (j + 1) * 3;
tft.fillRect(111 + i * 108, 125 + j * 60, 100, 52, isShaded ? color_2 : TFT_DARKGREY);
if (index == MAKEYpos) {
isOnTarget = isShaded;
if (isShaded == false) {
drawMAKEY(111 + i * 108, 125 + j * 60);
}
}
}
}
}
Step 15
The Calibration function, which will take the potion from the gyroscope and use it as a reference for the function “drawHoles”.
void calibrate_game() {
if (digitalRead(WIO_KEY_C) == LOW) {
Serial.println(“C Key pressed”);
operation_x = -((int)(x_values * -5));
operation_y = -((int)(y_values * -5));
}
}
Step 16
The last function is “drawMAKEY”, which will help us to draw it depending on the position in X and Y.
Important data: It is very important to specify the data type, for example a number, character, etc.
void drawMAKEY(int x, int y) {
tft.fillRect(x, y, 100, 52, TFT_RED);
tft.fillCircle(x + 50, y + 26, 20, TFT_WHITE);
tft.setTextColor(TFT_RED);
tft.setFreeFont(FF22);
tft.drawString(“M”, x + 40, y + 17);
tft.fillRect(x, y + 26 – 4, 30, 8, TFT_WHITE);
tft.fillRect(x + 60, y + 26 – 4, 40, 8, TFT_WHITE);
}
Let's test our code!
Step 17
Finally we are going to connect our Wio Terminal to our computer, We are going to select our board Tools > Board > Seeed samd > Wio Terminal. Then we go to Tools > Port and select our Wio Terminal and upload our code.
In a few seconds we will be able to see our menu on the Wio terminal screen and it’s time to play.
Finished Project
What Is Happening Here?
functions, variables, buttons
We are using the components of our Wio terminal to create a fun video game. Programming functions, variables, using IMU, buttons, the tft screen, among other things with the Wio Terminal, we create the logic of a video game by refreshing the screen with new information.
What Is Next?
Now experiment by adding new elements to customize your video game, change the colors of Makey Robot or include your initial, change the difficulty levels and add a new section to save the highest points.
Then try these projects...
About MoonMakers
MoonMakers — led by Camila and Diego Luna — are a community of creators passionate about knowledge. A Makerspace, an open space with different digital manufacturing machines. And a YouTube channel where we promote science, technology and the maker movement.
MoonMakers have collaborated with companies such as: Sesame Street, Make Community and in Mexico with Educational Television and Fundación Televisa, creating educational content.
We have given workshops throughout the Mexican Republic with: Talent Land, Secretary of Education in Jalisco, Conacyt, Centro Cultural España.
Materials:
- Wio Terminal
- Usbc to usb cable
Maker Camp Project Standards
Based on NGSS (Next Generation Science Standards)
NGSS (Next Generation Science Standards)
The Next Generation Science Standards (NGSS) are K–12 science content standards. Learn more.Forces and Motion
- 3-PS2-3. Ask questions to determine cause and effect relationships of electric or magnetic interactions between two objects not in contact with each other.
- HS-PS4-5. Communicate technical information about how some technological devices use the principles of wave behavior and wave interactions with matter to transmit and capture information and energy.
K–12 Computer Science Framework
The K–12 Computer Science Framework is designed to guide computer science from a subject for the fortunate few to an opportunity for all. The guiding practices include:- Fostering an Inclusive Computing Culture
- Collaborating Around Computing
- Recognizing and Defining Computational Problems
- Developing and Using Abstractions
- Creating Computational Artifacts
- Testing and Refining Computational Artifacts
- Communicating About Computing
ISTE Standards (International Society for Technology in Education)
The ISTE Standards provide the competencies for learning, teaching and leading in the digital age, providing a comprehensive roadmap for the effective use of technology in schools worldwide.1.1 Empowered Learner
- Summary: Students leverage technology to take an active role in choosing, achieving, and demonstrating competency in their learning goals, informed by the learning sciences.
- 1.1.a Students articulate and set personal learning goals, develop strategies leveraging technology to achieve them and reflect on the learning process itself to improve learning outcomes.
- 1.1.b Students build networks and customize their learning environments in ways that support the learning process.
- 1.1.c Students use technology to seek feedback that informs and improves their practice and to demonstrate their learning in a variety of ways.
- 1.1.d Students understand the fundamental concepts of technology operations, demonstrate the ability to choose, use and troubleshoot current technologies and are able to transfer their knowledge to explore emerging technologies.
1.2 Digital Citizen
- Summary: Students recognize the rights, responsibilities and opportunities of living, learning and working in an interconnected digital world, and they act and model in ways that are safe, legal and ethical.
- 1.2.a Students cultivate and manage their digital identity and reputation and are aware of the permanence of their actions in the digital world.
- 1.2.b Students engage in positive, safe, legal and ethical behavior when using technology, including social interactions online or when using networked devices.
- 1.2.c Students demonstrate an understanding of and respect for the rights and obligations of using and sharing intellectual property.
- 1.2.d Students manage their personal data to maintain digital privacy and security and are aware of data-collection technology used to track their navigation online.
1.3 Knowledge Constructor
- Summary: Students critically curate a variety of resources using digital tools to construct knowledge, produce creative artifacts and make meaningful learning experiences for themselves and others.
- 1.3.a Students plan and employ effective research strategies to locate information and other resources for their intellectual or creative pursuits.
- 1.3.b Students evaluate the accuracy, perspective, credibility and relevance of information, media, data or other resources.
- 1.3.c Students curate information from digital resources using a variety of tools and methods to create collections of artifacts that demonstrate meaningful connections or conclusions.
- 1.3.d Students build knowledge by actively exploring real-world issues and problems, developing ideas and theories and pursuing answers and solutions.
1.4 Innovative Designer
- Summary: Students use a variety of technologies within a design process to identify and solve problems by creating new, useful or imaginative solutions.
- 1.4.a Students know and use a deliberate design process for generating ideas, testing theories, creating innovative artifacts or solving authentic problems.
- 1.4.b Students select and use digital tools to plan and manage a design process that considers design constraints and calculated risks.
- 1.4.c Students develop, test and refine prototypes as part of a cyclical design process.
- 1.4.d Students exhibit a tolerance for ambiguity, perseverance and the capacity to work with open-ended problems.
1.5 Computational Thinker
- Summary: Students develop and employ strategies for understanding and solving problems in ways that leverage the power of technological methods to develop and test solutions.
- 1.5.a Students formulate problem definitions suited for technology-assisted methods such as data analysis, abstract models and algorithmic thinking in exploring and finding solutions.
- 1.5.b Students collect data or identify relevant data sets, use digital tools to analyze them, and represent data in various ways to facilitate problem-solving and decision-making.
- 1.5.c Students break problems into component parts, extract key information, and develop descriptive models to understand complex systems or facilitate problem-solving.
- 1.5.d Students understand how automation works and use algorithmic thinking to develop a sequence of steps to create and test automated solutions.
NGSS MS.Engineering Design
The Next Generation Science Standards (NGSS) are K–12 science content standards.- MS-ETS1-1. Define the criteria and constraints of a design problem with sufficient precision to ensure a successful solution, taking into account relevant scientific principles and potential impacts on people and the natural environment that may limit possible solutions.
- MS-ETS1-2. Evaluate competing design solutions using a systematic process to determine how well they meet the criteria and constraints of the problem.
- MS-ETS1-3. Analyze data from tests to determine similarities and differences among several design solutions to identify the best characteristics of each that can be combined into a new solution to better meet the criteria for success.
- MS-ETS1-4. Develop a model to generate data for iterative testing and modification of a proposed object, tool, or process such that an optimal design can be achieved.
NGSS HS.Engineering Design
The Next Generation Science Standards (NGSS) are K–12 science content standards.- HS-ETS1-1. Analyze a major global challenge to specify qualitative and quantitative criteria and constraints for solutions that account for societal needs and wants.
- HS-ETS1-2. Design a solution to a complex real-world problem by breaking it down into smaller, more manageable problems that can be solved through engineering.
- HS-ETS1-3. Evaluate a solution to a complex real-world problem based on prioritized criteria and trade-offs that account for a range of constraints, including cost, safety, reliability, and aesthetics as well as possible social, cultural, and environmental impacts.
- HS-ETS1-4. Use a computer simulation to model the impact of proposed solutions to a complex real-world problem with numerous criteria and constraints on interactions within and between systems relevant to the problem.
