Fly a plane on your screen with the joystick

Your UNO becomes a game controller. It sends the joystick's position to the computer many times a second, and a plane in the browser game flies wherever you steer it: collect stars, dodge birds.
  • Level:Intermediate
  • Duration: 45 min
  • Ages 10+
  • Platform: Arduino

Tools for this lesson

Helpful for this build. Open a tool to see tips and more projects that use it.

Fly a plane on your screen with the joystick – EEMENTOR STEM™ lesson

Real game controllers are small computers too: they measure the sticks and buttons and send the numbers to the console many times a second. In this lesson your UNO does exactly that. It reads the joystick and sends a short line of text over the USB cable about 30 times a second, such as x:512,y:300,b:0. A game in the Arduino Playground on our website reads those lines and flies a plane: push the stick up and the plane climbs, push it right and it speeds ahead. Collect the stars and dodge the birds!

What you'll learn

  • How a joystick turns two directions into two numbers from 0 to 1023
  • How to send several values in one line over the Serial port
  • How a web page in Chrome or Edge can read your UNO with Web Serial
  • Why a "dead zone" in the middle makes steering feel better

What you need

  • UNO R3 board and USB cable (UNO R3 Starter Kit)
  • Joystick module (UNO R3 Starter Kit)
  • A computer with Chrome or Edge
  • Breadboard and jumper wires (UNO R3 Starter Kit)

Wiring

Breadboard wiring diagram: Fly a plane on your screen with the joystick
Breadboard view. Check each connection against the wiring table below.
From To
Joystick GND GND
Joystick +5V 5V
Joystick VRx UNO A0
Joystick VRy UNO A1
Joystick SW UNO pin 2
Example screen for: Fly a plane on your screen with the joystick
Example screen with sample values. Yours may look different.

The sketch

const int X_PIN = A0, Y_PIN = A1, BUTTON_PIN = 2;

void setup() {
  Serial.begin(115200);                   // fast, so the game feels smooth
  pinMode(BUTTON_PIN, INPUT_PULLUP);      // the joystick button connects SW to GND
}

void loop() {
  int x = analogRead(X_PIN);              // 0 (one side) ... about 512 (middle) ... 1023 (other side)
  int y = analogRead(Y_PIN);
  int pressed = digitalRead(BUTTON_PIN) == LOW ? 1 : 0;

  // One line per reading, for example: x:512,y:300,b:0
  Serial.print("x:");
  Serial.print(x);
  Serial.print(",y:");
  Serial.print(y);
  Serial.print(",b:");
  Serial.println(pressed);

  delay(30);                              // about 30 lines a second
}

Play it

  1. Upload the sketch. Open the Serial Monitor at 115200 baud for a moment to check that the numbers change when you move the joystick, then close the Serial Monitor: only one program can use the USB port at a time.
  2. Open the Arduino Playground in Chrome or Edge on a computer. These browsers can talk to a USB board through a feature called Web Serial.
  3. Click Connect your board, choose the port of your UNO (often called "USB Serial" or "CH340") and click Connect.
  4. Play! The status line says "Connected", and "Connection help" under the game shows the last line your UNO sent.

No board at hand? Click Play with the keyboard on the Playground page to try the game first.

If the plane goes down when you push up, tick Swap up and down under the game. Joystick modules are mounted in different directions, so the game lets you choose.

How it works

Inside the joystick are two potentiometers, one for left-right and one for up-down. Each one is a voltage divider, so analogRead() gives a number from 0 to 1023: about 512 in the middle and close to 0 or 1023 at the ends. The button underneath connects SW to GND when you press the stick down.

The sketch sends all three values as text, in a simple protocol that both sides agree on: name, colon, value, separated by commas, and a new line at the end. The game splits each line at the commas and colons and keeps the latest number for every name. This is easy for people to read too: open the Serial Monitor and you can see exactly what the game sees.

The game turns 0 to 1023 into -1 to +1 by subtracting 512 and dividing by 512. A joystick never rests at exactly 512, so the game ignores small values close to the middle. That dead zone stops the plane from drifting when you let go of the stick.

Try this next

  • Change delay(30) to delay(200) and feel how the plane starts to lag. How fast does a game controller need to be?
  • Add an LED on pin 9 that lights while the joystick is pushed far up: climbing at full power!
  • Open the Serial Plotter instead of the game to see x and y as two moving lines.

Troubleshooting

  • The plane drifts slowly on its own: your joystick rests a little away from 512. Look at the numbers in the Serial Monitor; the game's dead zone handles most joysticks, but a worn one may need replacing.
  • Left and right work, up and down don't: check the VRy wire on A1.
  • "Could not connect" or "Failed to open serial port": another program is using the port. Close the Serial Monitor and the Serial Plotter in the Arduino IDE, then click Connect again.
  • Connected, but nothing moves: open "Connection help" on the Playground page. If no lines arrive, check that the sketch uses Serial.begin(115200) and that you picked the UNO's port.

Build it yourself

Everything used in this lesson comes in one kit, with parts tested by our engineers.

UNO R3 Starter Kit | Arduino IDE Compatible | Free Tutorials $56.00

Shop the kit