Math Meteors - Educational Game
An educational math game where players solve arithmetic problems to destroy meteors and protect Earth. Features adaptive difficulty, responsive design optimized for different devices, and beautiful animations.
An educational math game where players solve arithmetic problems to destroy meteors and protect Earth. Features adaptive difficulty, responsive design optimized for different devices, and beautiful animations.
Project Overview
Math Meteors is an engaging educational game that makes learning math fun through interactive gameplay. Players must solve arithmetic problems to destroy incoming meteors before they collide with Earth, combining education with excitement in a visually appealing browser-based game. This project was created as a submission to [Vibe Jam](https://jam.pieter.com/), a game development jam focused on creating fun, engaging experiences.
Built with TypeScript and HTML5 Canvas, the game features adaptive difficulty that scales based on screen size and gameplay duration, ensuring an appropriate challenge for players of all skill levels. The smart meteor spawning system is optimized for different devices—phones see meteors only from the top with slower spawn rates, small landscape screens get meteors from top and bottom, while larger screens feature weighted distribution from all sides.
The game includes a persistent high score system using LocalStorage, beautiful animations and visual effects, and dynamic SVG Earth images that change based on remaining lives. When the game ends, players experience a dramatic apocalypse animation. The responsive design ensures smooth gameplay across all device types, from mobile phones to desktop monitors.
Key Features
- •Adaptive difficulty scaling based on screen size and gameplay time
- •Smart meteor spawning optimized for phones, tablets, and desktops
- •High score system with LocalStorage persistence
- •Beautiful animations and visual effects
- •Dynamic SVG Earth images that change with remaining lives
- •Dramatic apocalypse animation on game over
- •Responsive design for all device types
- •TypeScript development with hot reloading
Project Gallery
Technical Challenges & Solutions
Challenge 1
Implementing adaptive difficulty that scales appropriately across different devices
Solution
Designed a multi-factor difficulty system that considers both screen size and gameplay duration. Phone screens get slower spawn rates with meteors only from the top to prevent overwhelming players on small screens. Tablet and desktop screens gradually introduce meteors from multiple sides with weighted distribution. The difficulty curve ensures players have time to learn while maintaining challenge as they improve.
Challenge 2
Creating smooth animations and gameplay on HTML5 Canvas
Solution
Utilized requestAnimationFrame for consistent 60 FPS animation loops with Canvas API rendering. Implemented efficient sprite management and collision detection algorithms to maintain performance even with multiple meteors on screen simultaneously. The dramatic apocalypse animation on game over uses carefully timed visual effects without impacting frame rate.
Challenge 3
Building responsive meteor spawning logic for different screen orientations
Solution
Developed a smart spawning system that detects screen dimensions and orientation, then adjusts meteor entry points accordingly. Portrait phones get top-only spawning, landscape tablets use top and bottom, while larger displays employ weighted distribution from all four sides. This ensures gameplay feels natural regardless of device or orientation.
Challenge 4
Maintaining educational value while keeping gameplay engaging
Solution
Balanced math problem difficulty with game pacing to ensure players have time to think without breaking flow. Problems scale gradually in complexity, and the visual feedback (meteor destruction, Earth damage) provides immediate reinforcement. The high score system motivates repeated play, naturally leading to more math practice.
Results & Impact
Engaging educational experience that makes math practice fun
Smooth 60 FPS gameplay across all device types
Progressive difficulty that keeps players challenged but not frustrated
Successfully deployed to Vercel with instant loading
Technologies Used
Project Links
Interested in this project?
Let's discuss how I can help with your similar requirements.
Get in TouchSimilar Projects
Win95Games - Retro Gaming Platform
Collection of 6 classic Windows 95 games with authentic retro desktop experience. Features Minesweeper, Tetris, Arkanoid, Snake, 2048, and Pong in a pixel-perfect Windows 95 UI with window management and smooth animations.
AutoPartsDB - Enterprise Inventory System
Enterprise inventory management system that transformed a monolithic Excel file with 900+ columns into a relational database. Features relationship visualization for parts-suppliers-clients, work table sync functionality, and multi-language support.
X History - Chrome Extension
Chrome extension that tracks and saves X (Twitter) posts you view, with full-text search, masonry grid layout, and offline caching. Built with React 19, TypeScript, and Manifest V3.