Flappy Ball - AI-Assisted Development Log

A complete record of how I created Flappy Ball from scratch using AI tools, and how I leveraged AI to solve problems encountered during testing.

Project Overview

Flappy Ball is a mobile-first HTML5 game built with AI assistance.

Tech Stack:

• Vanilla JavaScript (ES6+)
• HTML5 Canvas
• CSS3 Responsive Design

---

AI Usage Workflow

Phase 1: Creating the Base Game

Goal: Let AI help build a playable game prototype

Prompt Example:

Help me create a Flappy Bird-like game using HTML5 Canvas and JavaScript.
Include the following features:
1. A ball affected by gravity
2. Randomly generated pipe obstacles
3. Tap or press spacebar to make the ball jump
4. Collision detection and scoring system
5. Game over and restart functionality

Please inherit from the existing GameBase class in the project.

AI Output Highlights:

• Created a complete game loop
• Implemented ball physics (gravity, velocity, jump)
• Generated pipe system
• Added collision detection

---

Phase 2: Mobile Adaptation Issues

Problem Encountered: When testing on mobile phones, the game screen became very small with black borders around it.

How to Describe the Problem to AI:

The game displays correctly on PC browsers, but when opened on a phone,
the screen becomes very small with black borders. I checked the code and
found that the canvas uses a fixed 600x700 size, then scales with CSS transform: scale().
What's causing this? How can I fix it?

AI Analysis:

• Root cause: Fixed-size canvas scaled with CSS causes the image to shrink
• Solution: Use actual screen dimensions for canvas on mobile devices

Follow-up Prompt:

Please modify the code so that mobile devices use actual screen dimensions,
while PC keeps the original scaling logic. Need to detect mobile devices and handle them separately.

---

Phase 3: Element Sizing Issues

Problem Encountered: Mobile view looks fine now, but the ball is too small, pipe gaps are too narrow, and fonts are unreadable.

How to Describe the Problem to AI:

The mobile canvas is now properly sized, but game elements are still designed for PC:
- The ball is only 15px, too small on mobile
- Pipe gaps of 150px appear too narrow on mobile
- Score text is unreadable

How can I make these elements automatically adjust based on screen size?

AI's Proposed Solution: Use percentages instead of fixed pixels, set parameters separately for mobile/PC:

Element	Mobile	PC
Ball Position	20% width	100px
Pipe Gap	25% height	150px
Pipe Width	10% width	60px
Score Font	15% width	72px

Prompt:

Please modify the setup method based on this parameter table to make game elements adaptive based on device type.

---

Phase 4: Background Animation Issues

Problem Encountered: The cloud animation in the background looks choppy on mobile, and positions are incorrect.

How to Describe the Problem to AI:

There are issues with the cloud background animation:
1. Clouds jump suddenly each time a pipe is passed
2. On mobile, cloud positions are too high up, unevenly distributed
3. Animation is not smooth enough

Here's the cloud-related code, please help optimize it.

AI Analysis:

• Issue 1: Cloud positions tied to pipes passed count, causing jumps
• Issue 2: Cloud count and positions use fixed values
• Issue 3: No time-delta-based animation

AI's Improvement Suggestions:

1. Use Date.now() for smooth time-based animation
2. Dynamically calculate cloud count based on screen height
3. Let different clouds move at different speeds for parallax effect

---

Testing Issues and AI Solutions

Issue 1: Mobile Screen Shrinking

Symptom: Game screen much smaller than phone screen with black borders

Question to AI:

The game screen becomes very small on mobile with black borders around it.
How do I make it display fullscreen on mobile?

AI Solution: Detect mobile devices and use actual screen dimensions directly

---

Issue 2: Game Elements Too Small

Symptom: Ball, pipes, and text are hard to see on mobile

Question to AI:

The mobile canvas is now fullscreen, but the ball is only 15px which is too small,
pipe gaps are too narrow, and fonts are unreadable. How do I make these elements
scale based on screen size?

AI Solution: Use percentages instead of fixed pixels, set separate parameters for mobile and PC

---

Issue 3: Background Animation Jitter

Symptom: Cloud movement is choppy, sudden jumps occur

Question to AI:

Background clouds jump suddenly each time a pipe is passed instead of moving smoothly.
Here's the relevant code: [attach code]

AI Solution: Use Date.now() for smooth time-based animation, decoupled from game events

---

Issue 4: Start Screen Size Mismatch

Symptom: PC start screen doesn't match game canvas size

Question to AI:

On PC, the start game interface is fullscreen, but the game canvas is 600x700 centered,
causing a size mismatch between the start screen and game screen. How to fix this?

AI Solution: Make start screen container use same size and centering logic as canvas

---

Tips for Collaborating with AI

1. Describe Problems Clearly

• ❌ Vague: "There's a problem with the game"
• ✅ Specific: "Mobile screen shrinks with black borders, canvas uses fixed size then CSS scales"

2. Provide Context

• Explain project structure (e.g., inherited base class)
• Attach relevant code snippets
• Mention solutions already attempted

3. Iterate Step by Step

Don't ask AI to complete everything at once. Instead:

1. Implement core functionality first
2. Test and discover issues
3. Describe problems to AI
4. Apply solutions
5. Continue testing

4. Validate AI Code

AI-generated code needs:

• Testing on real devices
• Checking edge cases
• Verifying performance

5. Keep Iteration Records

Document each AI conversation and solution for:

• Tracing problem roots
• Understanding modification reasons
• Future maintenance reference

---

Development Timeline

Phase	Issue/Requirement	AI Solution	Iterations
1	Create base game	Complete game framework	1
2	Mobile screen shrinking	Dynamic canvas size	2
3	Element sizing mismatch	Percentage parameters	2
4	Background animation jitter	Time-based animation	3
5	Chinese to English text	Text replacement	1

---

Common Prompt Templates

Creating New Features

Help me implement [feature description], including:
1. [Specific requirement 1]
2. [Specific requirement 2]
3. [Specific requirement 3]

Please use [tech stack/framework], following [project standards].

Fixing Bugs

I encountered an issue:
[Symptom description]
[Conditions when it occurs]
[Expected behavior]

Code Optimization

Please optimize this code:
[Goal: performance/readability/maintainability]
[Constraints]

Code Explanation

Please explain how this code works:
[attach code]

Especially:
1. [Specific point 1 you want to understand]
2. [Specific point 2 you want to understand]

---

Lessons Learned

1. AI is an assistant, not a replacement - Need to understand code principles, can't rely completely
2. Test-driven development - Test on real devices after every change
3. The more specific the problem description, the more effective AI help - Vague questions get vague answers
4. Keep conversation records - Useful for backtracking and knowledge retention
5. Multiple iterations are normal - Rarely is there a perfect solution on the first try

---

Play the Game

Ready to try it yourself? Play Flappy Ball now!

Want to build your own game? Check out our AI Coding Tools and AI Art Tools collections.