Introduction
This is a submission for the GitHub Finish-Up-A-Thon Challenge.
I originally built a game where a cow jumps on floating market platforms. It was tightly coupled with real-time stock data (like NVDA and ASML) via a Python backend. But while revisiting this abandoned prototype, I had a realization: Children don't care about stock ticker symbols. They care about choices, personality, and immediate impact.
With GitHub Copilot as my co-pilot, I decided to finish and pivot this project. I transformed a complex stock simulator into an intuitive financial education game where a child's "Risk Profile" alters the very physics of the game world.
[GitHub] [https://github.com/sevasu77/cow-jump-financial-literacy/tree/main]
The Evolution: Before & After
- The Backstory & Pivot (The Human Intent) The original prototype was an adult-oriented "market tracker game." It required real-time API fetches, had messy if/else hardcoded logic for physics, and the text was too technical for younger minds. I wanted to turn it into a clean, arcade-like educational experience with 4 distinct asset classes:
🟦 AI Tech: High Risk / High Return (Heavy gravity, massive jump, narrow platforms)
🟩 Green Energy: Low Risk / Steady (Light gravity, low jump, extra-wide platforms)
🟨 Global Logistics: Balanced Growth (Standard physics)
🟥 Food Tech: Safety Net Insurance (Grants a one-time emergency recovery jump)
- Before (The Messy Conditional Branching) In the early prototype, changing styles required massive, hardcoded conditional branches. The game loop was a monolithic "spaghetti" function where physics, key inputs, and DOM rendering were all tangled together.
JavaScript
// BEFORE: Hardcoded nested logic inside startGame
function startGame(style) {
if(style === 'AI') {
jumpPower = -18 * (1 + marketBonus);
platWidth = 70;
styleLabel.innerText = "AIテクノロジー";
styleLabel.style.backgroundColor = "#3b82f6";
} else if(style === 'RE') {
// ... Repeated mud-style variables setting ...
}
}
- After (The Copilot Glow Up) Using Copilot's architectural analysis, I refactored the entire codebase into a clean, Data-Driven Architecture using a central STYLE_CONFIG table and fully decoupled the game loops.
JavaScript
// AFTER: Clean, Data-Driven Architecture suggested by Copilot
const STYLE_CONFIG = {
'AI': {
name: "AI Technology",
color: "#3b82f6",
platColor: "#3b82f6",
gravity: 0.45,
jumpPower: -20,
platWidth: 70,
hasExtraLife: false
},
'RE': { /* Safe & Steady parameters / },
'LG': { / Balanced Growth parameters / },
'FT': { / Safety Net Perks */ }
};
How GitHub Copilot Helped (The Completion Arc)
GitHub Copilot wasn’t just a code generator; it acted as a senior architect that helped me cross the finish line by forcing me to focus on code quality over feature-creep.
The Architecture Audit:
I asked Copilot to review my original messy prototype. It instantly flagged that my style logic was scattered. It suggested migrating to STYLE_CONFIG, which immediately eliminated all raw if-else blocks from the game setup.
Decoupling the Monolith (Function Splitting):
The original loop() function was over 100 lines long, making it a nightmare to debug. Copilot guided me to split the responsibilities into clear, single-purpose modules:
handleInput() (Input handling)
updatePhysics() (State management)
checkCollisions() (Collision logic)
handleCameraScroll() (Viewport adjustment)
render() (Pure visual synching)
Eliminating Magic Numbers:
Copilot swept through the code and gathered all raw screen dimensions and hardcoded layout bounds into a unified GAME_CONSTANTS object, giving the game long-term maintainability.
Tech Stack
Python & Streamlit: Core web wrapper and page configuration.
HTML5 / CSS3: Retro-inspired arcade UI frame.
Vanilla JavaScript: Decoupled, state-driven 2D physics engine.
What I Learned
The GitHub Finish-Up-A-Thon taught me that finishing a project isn't about padding it with 100 raw features. It’s about polishing the core user experience and leaving the codebase cleaner than you found it. GitHub Copilot shined brightest when helping me refactor, structure, and modularize an old idea into a robust, scalable reality. Now, adding a new "Investment Style" to teach children about finance takes less than 10 seconds—just add a new row to the config table!
Top comments (0)