Arduino Game Project – Replik von Flappy Bird für Arduino
In diesem Arduino-Projekt werden wir ein cooles Arduino-Spiel erstellen, eigentlich eine Nachbildung des beliebten Flappy Bird-Spiels für Smartphones, mit einem Arduino und einem TFT-Touchscreen. Sie können erfahren, wie es funktioniert, indem Sie sich das folgende Video ansehen oder den Text unten lesen.
Das Spiel ist ziemlich einfach, aber interessant und macht süchtig. Mit dem Touchscreen steuern wir den Vogel und versuchen, den sich bewegenden Säulen auszuweichen, deren Geschwindigkeit sich erhöht, wenn wir vorankommen. Außerdem kann das Spiel Ihre höchste Punktzahl speichern, selbst wenn Sie den Netzstecker ziehen.[/column]
Im vorherigen Tutorial (Arduino TFT Tutorial) haben wir ausführlich gelernt, wie man TFT-Touchscreens mit einem Arduino verwendet, und wir haben das Spielbeispiel in diesem Tutorial erklärt. Genau wie im vorherigen Tutorial werden wir nun Schritt für Schritt den Code hinter diesem Arduino-Spiel erklären.
Da der Code etwas länger ist und zum besseren Verständnis werde ich den Quellcode des Programms in Abschnitten mit Beschreibung für jeden Abschnitt veröffentlichen. Und am Ende dieses Artikels werde ich den vollständigen Quellcode posten.
Wir werden die UTFT- und URTouch-Bibliotheken von Henning Karlsen verwenden. Sie können diese Bibliotheken von seiner Website www.RinkyDinkElectronics.com herunterladen. Außerdem werden wir die EEPROM-Bibliothek verwenden, um die höchste Punktzahl im EEPROM zu speichern. Das EEPROM ist ein Speicher, der auch bei ausgeschaltetem Board Daten speichern kann.
Nachdem wir die Bibliotheken eingebunden haben, müssen wir die UTFT- und URTouch-Objekte erstellen sowie die für das Spiel benötigten Variablen definieren. Im Setup-Abschnitt müssen wir die Anzeige und die Berührung initiieren, die höchste Punktzahl aus dem EEPROM lesen und das Spiel mit der benutzerdefinierten Funktion „initiateGame()“ starten.
Mit der benutzerdefinierten Funktion „initiateGame()“ zeichnen wir also den Anfangszustand des Spiels und gehen wie folgt vor. Zuerst müssen wir den Bildschirm löschen, dann den blauen Hintergrund zeichnen, den unteren Abschnitt zeichnen, den Text hinzufügen und die benutzerdefinierte Funktion drawBird() aufrufen, um den Vogel zu zeichnen. Danach brauchen wir eine While-Schleife, die verhindert, dass das Spiel startet, bis wir auf den Bildschirm tippen. Wenn wir also in diesem Zustand sind, können wir, wenn wir die obere rechte Ecke drücken, die höchste Punktzahl auf Null zurücksetzen, und wenn wir irgendwo anders auf dem Bildschirm drücken, verlassen wir die While-Schleife und gelangen in die Hauptschleife des Codes which startet das Spiel.
Im Abschnitt der Hauptschleife haben wir die xP-Variable, die zum Zeichnen der Säulen verwendet wird, sowie die yP-Variable. Zu Beginn hat die xP-Variable den Wert 319 als Größe des Bildschirms und die yP-Variable den Wert 100, was die Höhe der ersten Säule ist. Bei jeder Iteration wird der Wert der xP-Variablen um den Wert der MovingRate-Variablen verringert, die zu Beginn den Wert 3 hat und sich im Laufe des Spiels erhöht.
Hier ist das Funktionsprinzip des Spiels:Wir haben 50 Pixel breite Säulen, die sich von rechts nach links bewegen, und jede nächste Säule hat eine andere zufällige Höhe. Um sie in Bewegung zu setzen, müssen wir logischerweise nach jeder Iteration den Bildschirm löschen und die Grafik mit den Säulen an ihrer neuen Position neu zeichnen. Aufgrund der geringen Bildwiederholfrequenz des Bildschirms können wir dies jedoch nicht tun, was zu einem Flackern der Grafik führen würde. Um alle seine Pixel zu aktivieren, braucht der Bildschirm etwas mehr Zeit, also müssen wir improvisieren und nur die Dinge neu zeichnen, die sich bewegen.
Schauen wir uns also an, wie die benutzerdefinierte Funktion drawPilars() das macht. Es nimmt die xP- und yP-Variablen und verwendet sie und die Funktion fillRect(), um die Säulen zu zeichnen. Bei jeder Iteration werden die Säulen an ihrer neuen Position mit zusätzlichen blauen Rechtecken von ihrer linken und rechten Seite gezeichnet, die die zuvor gezeichnete Säule löschen, und auf diese Weise machen wir tatsächlich die Improvisation, indem wir nur die sich bewegenden Säulen neu zeichnen. Die if-Anweisungen hier sind eine zusätzliche Improvisation, da die Funktion fillRect() aus irgendeinem Grund nicht funktionierte, wenn ihr Parameter „x2“ einen Wert außerhalb der Bildschirmgröße hatte. Außerdem müssen wir am Ende dieser benutzerdefinierten Funktion den Wert der erreichten Punktzahl drucken.
Zurück im Schleifenabschnitt haben wir die Variable yB, die die y-Position des Vogels ist und von der Fallgeschwindigkeit abhängt, die nach jeder Iteration erhöht wird, und auf diese Weise erhalten wir den Effekt von Beschleunigung oder Schwerkraft. Auch hier suchen wir nach Kollisionen und verwenden die if-Anweisungen, um den Vogel einzuschränken, sodass das Spiel vorbei ist, wenn er auf die Spitze, den Boden oder die Säulen trifft.
Als nächstes kommt die benutzerdefinierte Funktion drawBird() und wir wollen sehen, wie sie funktioniert. Der Vogel ist eigentlich ein Foto, das mit dem Tool ImageConverter565 von Henning Karlsen in eine Bitmap umgewandelt wird. Die mit dem Tool erstellte „.c“-Datei muss in das Verzeichnis aufgenommen werden, damit sie beim Starten der Skizze geladen wird. Außerdem müssen wir die Bitmap so definieren und mit der Funktion drawBitmap() werden wir das Foto auf dem Bildschirm zeichnen. Der Vogel hat eine feste X – Koordinate und die Variable yB als Y – Koordinate. Ähnlich wie bei den Säulen löschen wir den vorherigen Zustand des Vogels, indem wir zwei blaue Rechtecke über und unter dem Vogel zeichnen.
Zurück in der Schleife können wir sehen, dass, nachdem die Säule den Bildschirm durchlaufen hat, die xP-Variable auf 319 zurückgesetzt wird, yP einen neuen Zufallswert von 20 bis 100 für die Höhe der Säulen erhält und die Punktzahl um eins erhöht wird. Mit der nächsten if-Anweisung steuern wir den Vogel. Wenn wir auf den Bildschirm tippen, setzen wir die Fallrate auf negativ, was den Vogel zum Springen bringt, und die andere if-Anweisung lässt dies nicht zu, wenn wir nur den Bildschirm halten. Die letzte if-Anweisung dient der Schwierigkeit des Spiels und erhöht die Bewegungsgeschwindigkeit der Säulen nach jedem Feinpunkt.
Ok, was jetzt noch übrig bleibt, ist zu sehen, wie die benutzerdefinierte Funktion gameOver() funktioniert. Nach einer Verzögerung von einer Sekunde löscht es den Bildschirm, druckt die Punktzahl und etwas Text, wenn die Punktzahl höher als die höchste Punktzahl ist, wird sie in das EEPROM geschrieben, es werden alle Variablen auf ihre Startpositionswerte zurückgesetzt und am Ende Es ruft die benutzerdefinierte Funktion initiiertGame() auf, um das Spiel neu zu starten.
Das ist alles und ich hoffe, die Erklärung des Codes war klar genug. Wenn Sie Fragen haben, können Sie diese gerne im Kommentarbereich unten stellen.
Hier ist eine Download-Datei mit der Arduino-Skizze, dem Vogelbild und der Bitmap-Datei für den Vogel.Übersicht
Quellcode
#include <UTFT.h>
#include <URTouch.h>
#include <EEPROM.h>
//==== Creating Objects
UTFT myGLCD(SSD1289,38,39,40,41); //Parameters should be adjusted to your Display/Schield model
URTouch myTouch( 6, 5, 4, 3, 2);
//==== Defining Fonts
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A]; // Bird Bitmap
int x, y; // Variables for the coordinates where the display has been pressed
// Floppy Bird
int xP = 319;
int yP = 100;
int yB = 50;
int movingRate = 3;
int fallRateInt = 0;
float fallRate = 0;
int score = 0;
int lastSpeedUpScore = 0;
int highestScore;
boolean screenPressed = false;
boolean gameStarted = false;
void setup() {
// Initiate display
myGLCD.InitLCD();
myGLCD.clrScr();
myTouch.InitTouch();
myTouch.setPrecision(PREC_MEDIUM);
highestScore = EEPROM.read(0); // Read the highest score from the EEPROM
initiateGame(); // Initiate the game
} Codesprache:Arduino (arduino) 
// ===== initiateGame - Custom Function
void initiateGame() {
myGLCD.clrScr();
// Blue background
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0,0,319,239);
// Ground
myGLCD.setColor(221,216,148);
myGLCD.fillRect(0, 215, 319, 239);
myGLCD.setColor(47,175,68);
myGLCD.fillRect(0, 205, 319, 214);
// Text
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(221, 216, 148);
myGLCD.setFont(BigFont);
myGLCD.print("Score:",5,220);
myGLCD.setFont(SmallFont);
myGLCD.print("HowToMechatronics.com", 140, 220);
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(114, 198, 206);
myGLCD.print("Highest Score: ",5,5);
myGLCD.printNumI(highestScore, 120, 6);
myGLCD.print(">RESET<",255,5);
myGLCD.drawLine(0,23,319,23);
myGLCD.print("TAP TO START",CENTER,100);
drawBird(yB); // Draws the bird
// Wait until we tap the sreen
while (!gameStarted) {
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
// Reset higest score
if ((x>=250) && (x<=319) &&(y>=0) && (y<=28)) {
highestScore = 0;
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(120, 0, 150, 22);
myGLCD.setColor(0, 0, 0);
myGLCD.printNumI(highestScore, 120, 5);
}
if ((x>=0) && (x<=319) &&(y>=30) && (y<=239)) {
gameStarted = true;
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0, 0, 319, 32);
}
}
}
// Clears the text "TAP TO START" before the game start
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(85, 100, 235, 116);
} Codesprache:Arduino (arduino) // The Main Loop Section
void loop() {
xP=xP-movingRate; // xP - x coordinate of the pilars; range: 319 - (-51)
drawPilars(xP, yP); // Draws the pillars
// yB - y coordinate of the bird which depends on value of the fallingRate variable
yB+=fallRateInt;
fallRate=fallRate+0.4; // Each inetration the fall rate increase so that we can the effect of acceleration/ gravity
fallRateInt= int(fallRate);
// Checks for collision
if(yB>=180 || yB<=0){ // top and bottom
gameOver();
}
if((xP<=85) && (xP>=5) && (yB<=yP-2)){ // upper pillar
gameOver();
}
if((xP<=85) && (xP>=5) && (yB>=yP+60)){ // lower pillar
gameOver();
}
// Draws the bird
drawBird(yB);
// After the pillar has passed through the screen
if (xP<=-51){
xP=319; // Resets xP to 319
yP = rand() % 100+20; // Random number for the pillars height
score++; // Increase score by one
}
//==== Controlling the bird
if (myTouch.dataAvailable()&& !screenPressed) {
fallRate=-6; // Setting the fallRate negative will make the bird jump
screenPressed = true;
}
// Doesn't allow holding the screen / you must tap it
else if ( !myTouch.dataAvailable() && screenPressed){
screenPressed = false;
}
// After each five points, increases the moving rate of the pillars
if ((score - lastSpeedUpScore) == 5) {
lastSpeedUpScore = score;
movingRate++;
}
} Codesprache:Arduino (arduino) 
// ===== drawPlillars - Custom Function
void drawPilars(int x, int y) {
if (x>=270){
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(318, 0, x, y-1);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(319, 0, x-1, y);
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(318, y+81, x, 203);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(319, y+80, x-1, 204);
}
else if( x<=268) {
// Draws blue rectangle right of the pillar
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x+51, 0, x+60, y);
// Draws the pillar
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(x+49, 1, x+1, y-1);
// Draws the black frame of the pillar
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(x+50, 0, x, y);
// Draws the blue rectangle left of the pillar
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x-1, 0, x-3, y);
// The bottom pillar
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x+51, y+80, x+60, 204);
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(x+49, y+81, x+1, 203);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(x+50, y+80, x, 204);
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x-1, y+80, x-3, 204);
}
// Draws the score
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(221, 216, 148);
myGLCD.setFont(BigFont);
myGLCD.printNumI(score, 100, 220);
} Codesprache:Arduino (arduino) 
//====== drawBird() - Custom Function
void drawBird(int y) {
// Draws the bird - bitmap
myGLCD.drawBitmap (50, y, 35, 30, bird01);
// Draws blue rectangles above and below the bird in order to clear its previus state
myGLCD.setColor(114, 198, 206);
myGLCD.fillRoundRect(50,y,85,y-6);
myGLCD.fillRoundRect(50,y+30,85,y+36);
} Codesprache:Arduino (arduino) 
//======== gameOver() - Custom Function
void gameOver() {
delay(1000); // 1 second
// Clears the screen and prints the text
myGLCD.clrScr();
myGLCD.setColor(255, 255, 255);
myGLCD.setBackColor(0, 0, 0);
myGLCD.setFont(BigFont);
myGLCD.print("GAME OVER", CENTER, 40);
myGLCD.print("Score:", 100, 80);
myGLCD.printNumI(score,200, 80);
myGLCD.print("Restarting...", CENTER, 120);
myGLCD.setFont(SevenSegNumFont);
myGLCD.printNumI(2,CENTER, 150);
delay(1000);
myGLCD.printNumI(1,CENTER, 150);
delay(1000);
// Writes the highest score in the EEPROM
if (score > highestScore) {
highestScore = score;
EEPROM.write(0,highestScore);
}
// Resets the variables to start position values
xP=319;
yB=50;
fallRate=0;
score = 0;
lastSpeedUpScore = 0;
movingRate = 3;
gameStarted = false;
// Restart game
initiateGame();
} Codesprache:Arduino (arduino) Hier ist der vollständige Code des Spiels:
/* Arduino Game Proejct
* Program made by Dejan Nedelkovski,
* www.HowToMechatronics.com
*/
/* This program uses the UTFT and URTouch libraries
* made by Henning Karlsen.
* You can find and download them at:
* www.RinkyDinkElectronics.com
*/
#include <UTFT.h>
#include <URTouch.h>
#include <EEPROM.h>
//==== Creating Objects
UTFT myGLCD(SSD1289,38,39,40,41); //Parameters should be adjusted to your Display/Schield model
URTouch myTouch( 6, 5, 4, 3, 2);
//==== Defining Fonts
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A]; // Bird Bitmap
int x, y; // Variables for the coordinates where the display has been pressed
// Floppy Bird
int xP = 319;
int yP = 100;
int yB = 50;
int movingRate = 3;
int fallRateInt = 0;
float fallRate = 0;
int score = 0;
int lastSpeedUpScore = 0;
int highestScore;
boolean screenPressed = false;
boolean gameStarted = false;
void setup() {
// Initiate display
myGLCD.InitLCD();
myGLCD.clrScr();
myTouch.InitTouch();
myTouch.setPrecision(PREC_MEDIUM);
highestScore = EEPROM.read(0); // Read the highest score from the EEPROM
initiateGame(); // Initiate the game
}
void loop() {
xP=xP-movingRate; // xP - x coordinate of the pilars; range: 319 - (-51)
drawPilars(xP, yP); // Draws the pillars
// yB - y coordinate of the bird which depends on value of the fallingRate variable
yB+=fallRateInt;
fallRate=fallRate+0.4; // Each inetration the fall rate increase so that we can the effect of acceleration/ gravity
fallRateInt= int(fallRate);
// Checks for collision
if(yB>=180 || yB<=0){ // top and bottom
gameOver();
}
if((xP<=85) && (xP>=5) && (yB<=yP-2)){ // upper pillar
gameOver();
}
if((xP<=85) && (xP>=5) && (yB>=yP+60)){ // lower pillar
gameOver();
}
// Draws the bird
drawBird(yB);
// After the pillar has passed through the screen
if (xP<=-51){
xP=319; // Resets xP to 319
yP = rand() % 100+20; // Random number for the pillars height
score++; // Increase score by one
}
//==== Controlling the bird
if (myTouch.dataAvailable()&& !screenPressed) {
fallRate=-6; // Setting the fallRate negative will make the bird jump
screenPressed = true;
}
// Doesn't allow holding the screen / you must tap it
else if ( !myTouch.dataAvailable() && screenPressed){
screenPressed = false;
}
// After each five points, increases the moving rate of the pillars
if ((score - lastSpeedUpScore) == 5) {
lastSpeedUpScore = score;
movingRate++;
}
}
// ===== initiateGame - Custom Function
void initiateGame() {
myGLCD.clrScr();
// Blue background
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0,0,319,239);
// Ground
myGLCD.setColor(221,216,148);
myGLCD.fillRect(0, 215, 319, 239);
myGLCD.setColor(47,175,68);
myGLCD.fillRect(0, 205, 319, 214);
// Text
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(221, 216, 148);
myGLCD.setFont(BigFont);
myGLCD.print("Score:",5,220);
myGLCD.setFont(SmallFont);
myGLCD.print("HowToMechatronics.com", 140, 220);
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(114, 198, 206);
myGLCD.print("Highest Score: ",5,5);
myGLCD.printNumI(highestScore, 120, 6);
myGLCD.print(">RESET<",255,5);
myGLCD.drawLine(0,23,319,23);
myGLCD.print("TAP TO START",CENTER,100);
drawBird(yB); // Draws the bird
// Wait until we tap the sreen
while (!gameStarted) {
if (myTouch.dataAvailable()) {
myTouch.read();
x=myTouch.getX();
y=myTouch.getY();
// Reset higest score
if ((x>=250) && (x<=319) &&(y>=0) && (y<=28)) {
highestScore = 0;
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(120, 0, 150, 22);
myGLCD.setColor(0, 0, 0);
myGLCD.printNumI(highestScore, 120, 5);
}
if ((x>=0) && (x<=319) &&(y>=30) && (y<=239)) {
gameStarted = true;
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0, 0, 319, 32);
}
}
}
// Clears the text "TAP TO START" before the game start
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(85, 100, 235, 116);
}
// ===== drawPlillars - Custom Function
void drawPilars(int x, int y) {
if (x>=270){
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(318, 0, x, y-1);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(319, 0, x-1, y);
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(318, y+81, x, 203);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(319, y+80, x-1, 204);
}
else if( x<=268) {
// Draws blue rectangle right of the pillar
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x+51, 0, x+60, y);
// Draws the pillar
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(x+49, 1, x+1, y-1);
// Draws the black frame of the pillar
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(x+50, 0, x, y);
// Draws the blue rectangle left of the pillar
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x-1, 0, x-3, y);
// The bottom pillar
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x+51, y+80, x+60, 204);
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(x+49, y+81, x+1, 203);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(x+50, y+80, x, 204);
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x-1, y+80, x-3, 204);
}
// Draws the score
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(221, 216, 148);
myGLCD.setFont(BigFont);
myGLCD.printNumI(score, 100, 220);
}
//====== drawBird() - Custom Function
void drawBird(int y) {
// Draws the bird - bitmap
myGLCD.drawBitmap (50, y, 35, 30, bird01);
// Draws blue rectangles above and below the bird in order to clear its previus state
myGLCD.setColor(114, 198, 206);
myGLCD.fillRoundRect(50,y,85,y-6);
myGLCD.fillRoundRect(50,y+30,85,y+36);
}
//======== gameOver() - Custom Function
void gameOver() {
delay(3000); // 1 second
// Clears the screen and prints the text
myGLCD.clrScr();
myGLCD.setColor(255, 255, 255);
myGLCD.setBackColor(0, 0, 0);
myGLCD.setFont(BigFont);
myGLCD.print("GAME OVER", CENTER, 40);
myGLCD.print("Score:", 100, 80);
myGLCD.printNumI(score,200, 80);
myGLCD.print("Restarting...", CENTER, 120);
myGLCD.setFont(SevenSegNumFont);
myGLCD.printNumI(2,CENTER, 150);
delay(1000);
myGLCD.printNumI(1,CENTER, 150);
delay(1000);
// Writes the highest score in the EEPROM
if (score > highestScore) {
highestScore = score;
EEPROM.write(0,highestScore);
}
// Resets the variables to start position values
xP=319;
yB=50;
fallRate=0;
score = 0;
lastSpeedUpScore = 0;
movingRate = 3;
gameStarted = false;
// Restart game
initiateGame();
} Codesprache:Arduino (arduino)
Herstellungsprozess