EsploraTFTPong
A basic implementation of the classic game.
Esplora TFT Pong
This sketch is a very basic implementation of pong for the TFT screen with an Arduino Esplora.
This version of the game creates a rectangular platform that can move in two directions, and a ball that bounces against the edges of the screen as well as the movable platform. The slider on the Esplora controls the speed of the ball bouncing.
The example demonstrates collision detection between objects on the screen, as well as how to quickly update images without erasing the entire screen every
loop()Hardware Required
- Arduino Esplora 
- Arduino TFT screen 
Circuit
Attach the TFT screen to the socket on your Esplora, with the label "SD Card" facing up.
Code
To use the screen you must first include the SPI and TFT libraries. Don't forget to include the Esplora library as well.
1#include <Esplora.h>2#include <TFT.h>3#include <SPI.h>Set up the variables for the ball and paddle x & y positions, the ball's direction, and the previous locations of the ball and paddle.
1int paddleX = 0;2int paddleY = 0;3int oldPaddleX, oldPaddleY;4int ballDirectionX = 1;5int ballDirectionY = 1;6
7int ballX, ballY, oldBallX, oldBallY;In
setup()1void setup() {2
3  Serial.begin(9600);4
5  // initialize the display6
7  EsploraTFT.begin();8
9  // set the background the black10
11  EsploraTFT.background(0,0,0);12}loop()1void loop() {2
3  // save the width and height of the screen4
5  int myWidth = EsploraTFT.width();6
7  int myHeight = EsploraTFT.height();8
9  // map the paddle's location to the joystick's position10
11  paddleX = map(Esplora.readJoystickX(), 512, -512, 0, myWidth) - 20/2;12
13  paddleY = map(Esplora.readJoystickY(), -512, 512, 0, myHeight) - 5/2;14
15  Serial.print(paddleX);16
17  Serial.print(" ");18
19  Serial.println(paddleY);20
21  // set the fill color to black and erase the previous22
23  // position of the paddle if different from present24
25  EsploraTFT.fill(0,0,0);26
27  if (oldPaddleX != paddleX || oldPaddleY != paddleY) {28
29    EsploraTFT.rect(oldPaddleX, oldPaddleY, 20, 5);30
31  }32
33  // draw the paddle on screen, save the current position34
35  // as the previous.36
37  EsploraTFT.fill(255,255,255);38
39  EsploraTFT.rect(paddleX, paddleY, 20, 5);Save the paddle's current location as the previous location, so the next time through you can check if it has moved.
1oldPaddleX = paddleX;2
3  oldPaddleY = paddleY;At the end of
loop()moveBall()1int ballSpeed = map(Esplora.readSlider(), 0, 1023, 0, 80)+1;2
3  if (millis() % ballSpeed < 2) {4
5    moveBall();6
7  }8}moveBall()inPaddle()1void moveBall() {2
3  if (ballX > EsploraTFT.width() || ballX < 0) {4
5    ballDirectionX = -ballDirectionX;6
7  }8
9  if (ballY > EsploraTFT.height() || ballY < 0) {10
11    ballDirectionY = -ballDirectionY;12
13  }14
15  if (inPaddle(ballX, ballY, paddleX, paddleY, 20, 5)) {16
17    ballDirectionY = -ballDirectionY;18
19  }20
21  ballX += ballDirectionX;22
23  ballY += ballDirectionY;24
25  EsploraLCD.fill(0,0,0);26
27  if (oldBallX != ballX || oldBallY != ballY) {28
29    EsploraTFT.rect(oldBallX, oldBallY, 5, 5);30
31  }32
33  EsploraLCD.fill(255,255,255);34
35  EsploraLCD.rect(ballX, ballY, 5, 5);36
37  oldBallX = ballX;38
39  oldBallY = ballY;40}inPaddle()TRUEmoveBall()1boolean inPaddle(int x, int y, int rectX, int rectY, int rectWidth, int rectHeight) {2
3  boolean result = false;4
5  if ((x >= rectX && x <= (rectX + rectWidth)) &&6
7    (y >= rectY && y <= (rectY + rectHeight))) {8
9    result = true;10
11  }12
13  return result;14}The complete sketch is below :
1/*2
3 Esplora TFT Pong4
5
6
7 This example for the Esplora with an Arduino TFT screen reads8
9 the value of the joystick to move a rectangular platform10
11 on the x and y axes. The platform can intersect with a ball12
13 causing it to bounce. The Esplora's slider adjusts the speed14
15 of the ball.16
17
18
19 This example code is in the public domain.20
21
22
23 Created by Tom Igoe December 201224
25 Modified 15 April 2013 by Scott Fitzgerald26
27
28
29 http://arduino.cc/en/Tutorial/EsploraTFTPong30
31
32
33 */34
35#include <Esplora.h>36#include <Adafruit_GFX.h>    // Core graphics library37#include <Adafruit_ST7735.h> // Hardware-specific library38#include <TFT.h>            // Arduino LCD library39#include <SPI.h>40
41// variables for the position of the ball and paddle42int paddleX = 0;43int paddleY = 0;44int oldPaddleX, oldPaddleY;45int ballDirectionX = 1;46int ballDirectionY = 1;47
48int ballX, ballY, oldBallX, oldBallY;49
50void setup() {51
52  Serial.begin(9600);53
54  // initialize the display55
56  EsploraTFT.begin();57
58  // set the background the black59
60  EsploraTFT.background(0,0,0);61}62
63void loop() {64
65  // save the width and height of the screen66
67  int myWidth = EsploraTFT.width();68
69  int myHeight = EsploraTFT.height();70
71  // map the paddle's location to the joystick's position72
73  paddleX = map(Esplora.readJoystickX(), 512, -512, 0, myWidth) - 20/2;74
75  paddleY = map(Esplora.readJoystickY(), -512, 512, 0, myHeight) - 5/2;76
77  Serial.print(paddleX);78
79  Serial.print(" ");80
81  Serial.println(paddleY);82
83  // set the fill color to black and erase the previous84
85  // position of the paddle if different from present86
87  EsploraTFT.fill(0,0,0);88
89  if (oldPaddleX != paddleX || oldPaddleY != paddleY) {90
91    EsploraTFT.rect(oldPaddleX, oldPaddleY, 20, 5);92
93  }94
95  // draw the paddle on screen, save the current position96
97  // as the previous.98
99  EsploraTFT.fill(255,255,255);100
101  EsploraTFT.rect(paddleX, paddleY, 20, 5);102
103  oldPaddleX = paddleX;104
105  oldPaddleY = paddleY;106
107  // read the slider to determinde the speed of the ball108
109  int ballSpeed = map(Esplora.readSlider(), 0, 1023, 0, 80)+1;110
111  if (millis() % ballSpeed < 2) {112
113    moveBall();114
115  }116}117
118// this function determines the ball's position on screen119void moveBall() {120
121  // if the ball goes offscreen, reverse the direction:122
123  if (ballX > EsploraTFT.width() || ballX < 0) {124
125    ballDirectionX = -ballDirectionX;126
127  }128
129  if (ballY > EsploraTFT.height() || ballY < 0) {130
131    ballDirectionY = -ballDirectionY;132
133  }134
135  // check if the ball and the paddle occupy the same space on screen136
137  if (inPaddle(ballX, ballY, paddleX, paddleY, 20, 5)) {138
139    ballDirectionY = -ballDirectionY;140
141  }142
143  // update the ball's position144
145  ballX += ballDirectionX;146
147  ballY += ballDirectionY;148
149  // erase the ball's previous position150
151  EsploraTFT.fill(0,0,0);152
153  if (oldBallX != ballX || oldBallY != ballY) {154
155    EsploraTFT.rect(oldBallX, oldBallY, 5, 5);156
157  }158
159  // draw the ball's current position160
161  EsploraTFT.fill(255,255,255);162
163  EsploraTFT.rect(ballX, ballY, 5, 5);164
165  oldBallX = ballX;166
167  oldBallY = ballY;168
169}170
171// this function checks the position of the ball172// to see if it intersects with the paddle173boolean inPaddle(int x, int y, int rectX, int rectY, int rectWidth, int rectHeight) {174
175  boolean result = false;176
177  if ((x >= rectX && x <= (rectX + rectWidth)) &&178
179    (y >= rectY && y <= (rectY + rectHeight))) {180
181    result = true;182
183  }184
185  return result;186}Suggest changes
The content on docs.arduino.cc is facilitated through a public GitHub repository. If you see anything wrong, you can edit this page here.
License
The Arduino documentation is licensed under the Creative Commons Attribution-Share Alike 4.0 license.
