1-2 hours
Ages 11+
¿Qué vas a hacer?
Crearemos un videojuego con Wio terminal, donde tendrás que atrapar la mayor cantidad de Makey Robots que puedas, y cuidado por que es un robot muy veloz.
¿Qué aprenderás?
Programaremos la interacción utilizando el IMU (Unidad de medición inercial) para movernos dentro del juego, al igual que programaremos niveles de dificultad y un medidor para la puntuación.
Coge tus materiales... ¡empecemos!
Paso 1
Para iniciar a programar, abriremos el Arduino IDE, vamos a preferencias a Additional Boards Manager URLs y pegamos:
“https://files.seeedstudio.com/arduino/package_seeeduino_boards_index.json”
Paso 2
Seleccionamos Herramientas > Tablero > Administrador de tableros, aquí buscaremos Wio Terminal y lo descargamos.Selecciona la entrada en el menú, Herramientas > Tablero. Selección de la Wio Terminal.
Paso 3
Ahora agrega las librerías Sketch > Include Library > Manage Libraries, agregamos “LIS3DHTR”. Para descargar la otra librería vamos a Seeed_Arduino_LCD y la agregamos vamos a Sketch > Include Library > Add ZIP Library.
Paso 4
Abajo de la lupa (Monitor Serial), tenemos un boton y seleccionamos “New Tab”, lo nombraremos “Free_Fonts.h”, dentro de el pegamos el contenido a continuacion: https://raw.githubusercontent.com/Diego-Luna/Maker-Camp-2022/main/Atrapa_a_makey/Free_Fonts.h
Esto para poder tener un mejor control de las fuentes, para nuestra pantalla.

¡Comencemos a codificar!
Paso 5
Es momento de programar, en la parte superior vamos a traer nuestras librerías y crearemos una nueva clase para usarlas:
#include”LIS3DHTR.h”
#include”TFT_eSPI.h”
#include”Free_Fonts.h”
LIS3DHTR<TwoWire> lis;
TFT_eSPI tft;

Paso 6
Vamos a crear las variables que nos ayudarán con nuestro giroscopio, posición de Makey, tiempos y nivel, Crearemos una cadena de caracteres donde almacenaremos el nivel. Tendremos otras dos variables para los colores principales del juego:
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;
Paso 7
Vamos a trabajar en el “void setup” .Iniciaremos la comunicación serial y de nuestro giro sensorial.
Dato importante: Solo se ejecuta una vez cuando encendemos el dispositivo.
void setup() {
Serial.begin(115200);
lis.begin(Wire1);
}
Comprobamos que el Girosensor está funcionando y lo preparamos para usar:
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
Preparamos nuestra pantalla tft, iniciamos su comunicación, cambiamos la rotación y la ponemos en blanco:
tft.begin();
tft.setRotation(3);
tft.fillScreen(TFT_WHITE);
Es momento de declarar que vamos a hacer en los pines buzzer, los botones, led.
Dato importante: En el “pinMode”, especificamos si es un pin de entrada o salida. Nuestra wio terminal ya los tiene integrados y para llamarlo usamos su nombre, por ejemplo “WIO_5S_PRESS” y le especificamos que nos dará un valor con “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);
Y para terminar con el “void setup” apagamos nuestro led integrado y llamamos a nuestra función “restar”.
digitalWrite(LED_BUILTIN, LOW);
restar();
}
Paso 8
Crearemos la función “restart”, para reiniciar información en pantalla como el nombre y su sección
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);
}
Paso 9
Vamos a crear el “Void Loop”, donde nos moveremos entre el menú y el juego.
Dato importante: Dentro de “void loop” programaremos la lógica del juego, esto se ejecutará siempre que nuestro arduino tenga electricidad.
void loop() {
if (MAKEYwaitTime == 0) {
menu();
} else {
game();
}
}
Paso 10
Vamos a crear la función “menu”
void menu()
{
}
Dentro de la función escribimos toda la parte gráfica de la pantalla para seleccionar la dificultad.
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);
Vamos a colocar las dificultades.
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();
}
Paso 11
Ahora crearemos la funcion “onButton”:
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);
}
Paso 12
Ahora programaremos el videojuego, vamos a la parte inferior de nuestro código y creamos nuestra función:
void game()
{
}
Colocamos lo siguiente dentro de la función:
Dato importante: La función “tft.drawString” solo acepta cadena de caracteres, y para transformar a carácter usamos la función “sprintf” que viene por default en el lenguaje c, y los paso a “level” para ponerlo en pantalla.
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);
Guardamos los valores de nuestro giroscopio:
x_values = lis.getAccelerationX();
y_values = lis.getAccelerationY();
Ponemos una condición para cuando no hemos encontrado a Mackay en un tiempo predeterminado, reiniciemos el juego
if (lastChangeTime + MAKEYwaitTime < millis()) {
generateRandomMAKEY();
level = 0;
}
Colocamos dos condiciones, si apretamos el botón, estando en la misma posición que Makey ganamos un punto, y si no es así reiniciamos el juego.
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();
}
Paso 13
Vamos a crear la función “generateRandomMAKEY”, vamos al final del código y colocamos:
Dato importante: Usamos la Función “random”, para que nos de un número del 0 – 8, siendo un total de 9 posiciones, donde está Makey en la tabla.
void generateRandomMAKEY() {
MAKEYpos = random(0, 9);
lastChangeTime = millis();
}
Paso 14
Es momento de crear la función “drawHoles”. Vamos al final de nuestro código y colocamos:
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);
}
}
}
}
}
Paso 15
La función de Calibración, que tomará la poción del giroscopio y lo usa de referencia para la función “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));
}
}
Paso 16
La última función es “drawMAKEY”, que nos ayudará a dibujar lo dependiendo la posición en X y Y.
Dato importante: Es muy importante especificar el tipo de dato por ejemplo un número, carácter, 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!
Paso 17
Por último vamos a conectar nuestra Wio Terminal a nuestra computadora, Vamos a seleccionar nuestra placa Tools > Board > Seeed samd > Wio Terminal. Después vamos a Tools > Port y seleccionamos nuestra Wio Terminal y subimos nuestro código.
En unos segundos vamos a poder ver nuestro menú en la pantalla de la Wio terminal y es momento de jugar.
Proyecto terminado

¿Qué está pasando aquí?
funciones, variables, botones
Estamos usando los componentes de nuestra Wio terminal para crear un divertido videojuego. Programando funciones, variables, utilizando IMU, botones, la pantalla tft, entre otras cosas más con la Wio Terminal, creamos la lógica de un video juego refrescando la pantalla con nueva información.
¿Qué es lo siguiente?
Ahora experimenta agregando nuevos elementos para personalizar tu videojuego, cambia los colores de Makey Robot o incluye tu inicial, cambia los niveles de dificultad y agrega una nueva sección para guardar los puntos más altos.
Entonces prueba estos proyectos...
Acerca de MoonMakers
MoonMakers — lideradas por Camila and Diego Luna — somos una comunidad de creadores apasionados por el conocimiento. Un Makerspace, un espacio abierto con diferentes máquinas de fabricación digital. Y un canal de YouTube donde promovemos la ciencia, la tecnología y el movimiento maker.
MoonMakers ha colaborado con empresas como: Sesame Street, Make Community y en México con Televisión Educativa y Fundación Televisa, creando contenido educativo.
Hemos imparto talleres por la República Mexicana con: Talent Land, Secretaría de educación en Jalisco, Conacyt, Centro Cultural España.

Materials:
- Wio Terminal
- Cable usbc a usb
See More Projects in these topics:
Electronics Games Programming STEM or STEAMSee More Projects from these themes:
Art/Craft Studio Carnival/Theme Park The Shop (Makerspace)MoonMakers
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.