DEV Community

Cover image for 🎮 Children Memory Games - 6 Interactive Educational Games for Kids
Sujah Ameer
Sujah Ameer

Posted on

🎮 Children Memory Games - 6 Interactive Educational Games for Kids

#devchallenge #githubchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Children Memory Games is a collection of six interactive, educational memory matching games designed specifically for children aged 5-6 years. Each game features a unique theme - Animals, Birds, Flowers, Fruits, Vegetables, and Vehicles - making learning fun and engaging!

🌟 Key Features

  • 6 Themed Games: Each with colorful emojis and child-friendly designs
  • 3 Difficulty Levels: Easy (6 pairs), Medium (12 pairs), and Hard (20 pairs)
  • Educational Value: Helps develop memory, concentration, visual recognition, and cognitive skills
  • Progress Tracking: Scores, moves, and star ratings with localStorage persistence
  • Audio Feedback: Dynamic sound effects using Web Audio API
  • Responsive Design: Works seamlessly on tablets, laptops, and desktops
  • Zero Dependencies: Pure HTML5, CSS3, and vanilla JavaScript - no frameworks needed!

💡 What This Project Means to Me

As a developer passionate about education, I wanted to create something that combines learning with fun. This project represents my commitment to making educational tools accessible to children everywhere. The games are completely free, have no ads, and can run offline - perfect for classrooms and homes alike.

The symmetric, colorful dashboard makes it easy for young children to navigate independently, fostering self-directed learning and boosting confidence as they improve their scores.

Demo

🎮 Live Project: Play the Games!

📸 Screenshots & Walkthrough

Main Dashboard

Main Dashboard
Symmetric grid layout with 6 themed game cards - easy for kids to navigate!

Game Selection Screen

Level Selection
Three difficulty levels with visual indicators and emoji icons

Gameplay

Gameplay
Colorful cards with smooth flip animations and real-time score tracking

Win Screen

Win Screen
Celebration screen with confetti animation and star rating

đŸŽĨ Video Walkthrough

đŸŽŦ Watch the Full Demo Video

🕹ī¸ Quick Feature Tour

  1. Dashboard Navigation: Click any game card to enter a themed game
  2. Level Selection: Choose Easy, Medium, or Hard based on skill level
  3. Card Matching: Flip two cards at a time to find matching pairs
  4. Scoring System: Earn points for matches, track moves, and achieve star ratings
  5. Audio Feedback: Hear happy sounds for correct matches and gentle tones for mismatches
  6. Progress Saving: Best scores automatically saved using localStorage

My Experience with GitHub Copilot CLI

🤖 How GitHub Copilot CLI Transformed My Development

GitHub Copilot CLI was an absolute game-changer throughout this project. Here's how it supercharged my development workflow:

1. Rapid File Creation & Structure Setup

Instead of manually creating each game folder and file structure, I used:

gh copilot suggest "create a folder structure for 6 themed memory games with HTML, CSS, and JS files"
Enter fullscreen mode Exit fullscreen mode

Copilot CLI suggested the perfect command sequence to scaffold all six game directories with their respective subdirectories. What would have taken 20+ minutes of manual work was done in seconds!

mkdir -p {AnimalsGame,BridsGame,FlowersGame,FruitsGame,VegetablesGame,VehiclesGame}/{css,js}
touch {AnimalsGame,BridsGame,FlowersGame,FruitsGame,VegetablesGame,VehiclesGame}/index.html
Enter fullscreen mode Exit fullscreen mode

2. Git Workflow Automation

When committing changes across multiple game folders, Copilot CLI helped me craft perfect commit messages:

gh copilot suggest "commit all changes with a descriptive message for adding audio feedback to all games"
Enter fullscreen mode Exit fullscreen mode

Result: git commit -m "feat: implement Web Audio API for dynamic sound effects across all 6 games"

This kept my commit history clean and professional without having to think about conventional commit formats.

3. Complex CSS Grid Debugging

I was struggling with the symmetric 3x2 grid layout for the dashboard. I asked:

gh copilot explain "why are my CSS grid items not centering properly in a 3-column layout"
Enter fullscreen mode Exit fullscreen mode

Copilot CLI explained the difference between justify-items and justify-content, and suggested using:

display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
Enter fullscreen mode Exit fullscreen mode

Time Saved: At least 30 minutes of trial-and-error!

4. localStorage Implementation

I needed to implement score persistence across all games. Instead of searching documentation, I asked:

gh copilot suggest "how do I save and retrieve best scores using localStorage in JavaScript"
Enter fullscreen mode Exit fullscreen mode

Copilot CLI provided a complete code snippet with error handling:

// Save best score
const saveBestScore = (score) => {
  try {
    const currentBest = parseInt(localStorage.getItem('bestScore')) || 0;
    if (score > currentBest) {
      localStorage.setItem('bestScore', score.toString());
    }
  } catch (error) {
    console.error('Error saving score:', error);
  }
};
Enter fullscreen mode Exit fullscreen mode

5. README Documentation

Creating comprehensive documentation is time-consuming. I used:

gh copilot suggest "generate a professional README structure for an educational game project"
Enter fullscreen mode Exit fullscreen mode

Copilot CLI outlined a perfect structure with badges, table of contents, installation instructions, and contributing guidelines - all tailored to my project!

6. Responsive Design Queries

When making the games mobile-friendly, I asked:

gh copilot explain "what's the best way to make a CSS grid responsive with media queries"
Enter fullscreen mode Exit fullscreen mode

Result: Clear explanation of breakpoint strategies and mobile-first design principles.

7. Audio Implementation Troubleshooting

The Web Audio API was new to me. Copilot CLI helped with:

gh copilot suggest "create a simple sound effect using Web Audio API for a kids game"
Enter fullscreen mode Exit fullscreen mode

It generated a clean, reusable audio module that I could adapt for match sounds, wrong sounds, and win celebrations.

📊 Impact on Development Experience

Aspect Without Copilot CLI With Copilot CLI Time Saved
Project Setup 1 hour 10 minutes 50 minutes
Git Commands 30 minutes/day 5 minutes/day 25 min/day
Documentation 3 hours 45 minutes 2+ hours
Debugging CSS 2 hours 30 minutes 1.5 hours
API Learning 1.5 hours 20 minutes 1+ hour
Total ~10 hours ~3 hours ~7 hours

💭 Key Takeaways

  1. Context-Aware Suggestions: Copilot CLI understood my project structure and provided relevant suggestions
  2. Learning While Building: Instead of just copying code, the explain command helped me understand why certain solutions work
  3. Reduced Context Switching: No need to open browser tabs for documentation - everything in the terminal
  4. Confidence Boost: Knowing I had an AI assistant made me more willing to try new APIs (like Web Audio API)
  5. Cleaner Commits: Better commit messages = better project history

đŸŽ¯ Favorite Copilot CLI Commands Used

  • gh copilot suggest - For generating complex command sequences
  • gh copilot explain - For understanding errors and concepts
  • Quick iteration: Ask → Test → Refine workflow was incredibly smooth

🛠ī¸ Technical Stack

  • Frontend: HTML5, CSS3 (Flexbox/Grid), Vanilla JavaScript (ES6+)
  • APIs: Web Audio API, localStorage API
  • Design: Responsive, mobile-first approach
  • Tools: GitHub Copilot CLI, Git, VS Code
  • Hosting: GitHub Pages ready

🚀 Future Enhancements

  • [ ] Add timer/countdown mode for advanced players
  • [ ] Implement multiplayer functionality (race against friends)
  • [ ] Create more themes (numbers, shapes, colors, letters)
  • [ ] Add language options (Spanish, French, etc.)
  • [ ] Include difficulty customization (custom number of pairs)
  • [ ] Accessibility improvements (screen reader support, keyboard navigation)
  • [ ] PWA conversion for offline play

🎓 What I Learned

  1. Web Audio API: Creating dynamic sound effects without external files
  2. localStorage Best Practices: Error handling and data persistence
  3. CSS Grid Mastery: Creating perfectly symmetric layouts
  4. Modular JavaScript: Separating concerns (game logic, audio, storage)
  5. GitHub Copilot CLI Workflow: Terminal-based AI assistance is incredibly powerful
  6. Child-Centric Design: Color psychology, large touch targets, positive reinforcement

🌟 Why GitHub Copilot CLI Was Essential

This project would have taken at least 2-3 times longer without GitHub Copilot CLI. The ability to:

  • Quickly generate boilerplate code
  • Get instant explanations for errors
  • Learn new APIs on-the-fly
  • Maintain consistent code patterns across six game folders

...made the development process not just faster, but more enjoyable and educational.

GitHub Copilot CLI isn't just a productivity tool - it's a learning companion that empowers developers to build better software faster.

đŸ“Ļ Try It Yourself 

# Clone the repository
git clone https://github.com/AslamSujah/children-memory-game.git

# Navigate to the project
cd children-memory-game

# Open in browser
open index.html
Enter fullscreen mode Exit fullscreen mode

No build process, no dependencies - just pure web technology! 🎉

🤝 Contributing

I'd love contributions! Whether it's new game themes, bug fixes, or accessibility improvements - feel free to:

  1. Fork the repo
  2. Create a feature branch
  3. Submit a pull request

Check out the Contributing Guidelines for more details.

đŸ“Ŧ Connect With Me

🏆 Acknowledgments

Special thanks to:

  • GitHub for the amazing Copilot CLI Challenge
  • DEV Community for the platform and support
  • All the kids who inspired this project

This project helps your child learn while having fun. ❤ī¸â¤ī¸â¤ī¸

Top comments (0)