Build a Brick Breaker Game with Vibe Coding: Create and Share Mission Maps with Cursor AI
đŽ Brick Breaker Game Map Customization and Implementation Review
Recently, I discovered an interesting brick breaker game video on Threads.
đ Watch the video
Seeing the unique mission map in the video made me want to play it myself.
So I took this opportunity to implement the map using Cursor AI with Vibe Coding, and created a web app that includes SNS sharing functionality.
đ§ Actual Implementation Process Summary (Prompt Narrative)
| My Prompt | AI Response |
|---|---|
| "Implement the map structure exactly as described in the screenshot reference of the brick breaker game." | Generated initial map structure and defined passage and wall states |
| "Clearly define brick types and handle collision detection and clear conditions." | Implemented collision handling for breakable/unbreakable bricks/passages and game clear conditions |
| "After game completion, accept clear time and nickname input and implement SNS sharing functionality." | Implemented KakaoTalk and Twitter sharing features (including nickname in text generation) |
| "Capture the game screen when sharing and attach it." | Implemented canvas screenshot generation and URL inclusion for sharing â However, could not implement actual screenshot attachment due to URL limitations. |
𧊠Completed Map Features
- Fill entire width with green breakable bricks (rows 0-19)
- Place gray unbreakable walls in row 20
- Vertical passage starting from center (2 columns wide)
- U-shaped passage extending leftward, 4 columns wide â extending down 5 rows
- Passages completely surrounded by gray walls to prevent ball escape
- Ensure comfortable spacing between paddle and walls for pleasant gameplay environment
đšī¸ How to Play
- Start immediately in web browser without separate installation
- Destroy all bricks to automatically measure clear time
If failed, count progress result - Enter nickname â Share results via Twitter / KakaoTalk
đŦ Give it a try yourself!
https://hughqlee.com/brickbreaker
đ Leave your brick breaker record with your own nickname,
and share it on SNS to compare times with friends!
Made with Cursor AI + Vibe Coding â¨