2048 on a Touchscreen - Seeed Studio XIAO ESP32S3 - dumpling - CodeCraft Hub
Scene: Maker. Edge AI application on CodeCraft Hub for Maker use cases.
Devices / BOM: Seeed Studio XIAO ESP32S3, Round Display for Seeed Studio XIAO
Maker application on CodeCraft Hub. Play the classic 2048 number-merging game on a XIAO ESP32S3 round touch display — swipe to control tiles and merge your way to 2048.
Documentation
2048 is a globally popular number puzzle game with simple rules but deep challenge: on a 4×4 grid, swipe to make identical numbers collide and merge, building larger numbers until you reach 2048.
Final result: XIAO ESP32S3 connected to a round display shows a blue "2048" title, current score, and a 4×4 grid of colorful numbered tiles. Swipe on the screen to play; win or lose, a result screen appears, and tapping anywhere restarts the game.
In an educational setting, this project is ideal for helping students understand programming concepts like conditional logic, array operations, and state management. Students can start from a complete game example and see directly how "algorithms" turn into tangible, interactive experiences. The CodeCraft platform makes the entire process incredibly simple — students just describe their needs in natural language, and the platform automatically generates runnable code that can be flashed to hardware with one click. Teachers can easily integrate this project into classroom teaching, club activities, or science competitions, helping students complete the full learning journey from "understanding principles" to "hands-on practice" to "presenting results."
Deploy steps
- Preparation
Chrome / Edge / 360 Browser: Must support Web Serial API
CodeCraft Platform: Generate code online, no software installation needed: https://codecraft.seeed.cc
USB Cable: For connecting the device and flashing programs
Seeed Studio XIAO ESP32S3: Main controller board
Seeed Studio Round Display for XIAO: Round touch display expansion board (GC9A01 driver, CHSC6X touch)
- Build and Test with CodeCraft
Step 1: Open CodeCraft
Visit CodeCraft (Click here to visit the website)in your browser, log in, and create a new project.
Step 2: Enter Project Requirements
In the CodeCraft dialog, describe the features and effects you want to achieve.
Step 3: Flash the Program
After CodeCraft generates the project, connect the XIAO ESP32S3 to your computer with a USB cable. Select the correct device model and serial port in CodeCraft, click the flash button, and wait for it to complete.
Step 4: Test the Game
Once flashing is done, the round display will light up, showing the blue "2048" title, current score, and a 4×4 game grid. Swipe on the screen with your finger, and the tiles will move and merge in the swipe direction. If the title or score position isn't quite right, you can tell CodeCraft what the issue is and what you want it to look like, and it will adjust the layout.
- One-Click Deploy / Quick Start
Flash firmware to your device (in-app tool on CodeCraft Hub).
Connect the XIAO ESP32S3 to your computer with a USB cable, click the one-click flash plugin, select the correct device model and serial port, and wait for flashing to complete. Once done, the round display will immediately show the game screen — blue "2048" title, score number, and a 4×4 grid of colorful tiles. Swipe on the screen to control the tiles; after the game ends, tap anywhere to restart.
- Create Your Own Project with a Prompt
You can also refer to prompt.txt to regenerate this project in CodeCraft.
2048_prompt_en
- Q&A
Q1: The screen stays blank after flashing — what should I do?
First, make sure the XIAO and the round display board are fully snapped together with no bent or loose pins. Then check that your USB cable supports both power and data transfer (some charging-only cables won't work for flashing) — try a different cable.
Q2: Touch swiping doesn't respond?
Verify that the correct device model (XIAO ESP32S3) is selected in CodeCraft. If it is, try flashing again. Also, avoid using fingernails or sharp objects — capacitive touch screens require the pad of your finger.
Q3: The title or score is partially cut off?
This is a common issue with round displays — the screen is circular, so the four corners are clipped. If text is placed too close to the edges, it gets cut off. You can tell CodeCraft "move the title and score downward" or "center the text," and it will adjust the layout accordingly.