Numbers Arena Project Report
1. The Concept
Numbers Arena is a fast-paced arcade game where players control an animated number, collect mathematical power-ups, and defeat enemies with lower values. Players must avoid stronger enemies and obstacles while increasing their score toward the round’s target.
The game includes addition, subtraction, multiplication, special rewards, AI-controlled enemies, progressive rounds, coins, upgrade cards, and high-score storage. Each round is designed to last approximately three to five minutes.
2. The Stack
The Stack: HTML5, CSS3, HTML5 Canvas, Vanilla JavaScript, Web Audio API, and LocalStorage.
The AI Assist: AI helped develop the game concept, gameplay logic, responsive UI/UX, collision handling, enemy behavior, sound design, performance optimization, visual effects, testing, and debugging.
3. The 1 Day Sprint
Morning (Hours 1–3): Defined the main game concept and created the basic HTML5 Canvas structure. Implemented player movement using mouse, touch, WASD, and arrow keys. Added number pickups, score calculation, obstacles, collision detection, and AI-controlled enemies.
Afternoon (Hours 4–6): Improved the player and enemy animations, added smooth movement, number squeezing for narrow paths, special power-ups, sound effects, garden-style obstacles, progressive rounds, coins, upgrade cards, and LocalStorage saving.
The Finish Line (Hours 7–8): Redesigned the Home, Pause, Card Shop, Win, and Lose screens using a responsive glassmorphism and neon style. Tested desktop, laptop, tablet, and mobile layouts in portrait and landscape modes. Fixed touch scrolling, button interaction, Canvas errors, and mobile performance issues.
4. The Roadblocks
Roadblocks: The main challenges were keeping touch movement smooth on mobile devices, preventing the player from getting stuck near obstacles, fitting long numbers through narrow paths, avoiding overlapping digits, and maintaining a responsive interface across different screen sizes and orientations.
Additional issues included AI enemies remaining inactive until the player approached, Card Shop scrolling being blocked by CSS overflow rules, buttons being cut off on small screens, and Canvas rendering errors when opening the shop before starting a game.
These problems were solved through smoother movement calculations, improved collision response, dynamic number compression, responsive layouts, touch-friendly scrolling, safer rendering checks, and repeated testing across multiple viewport sizes.
5. Key Takeaways
A simple arcade concept can become much more engaging when it includes responsive controls, satisfying animation, clear progression, suitable sound effects, and immediate visual feedback.
Mobile performance and usability should be considered from the beginning. Touch controls, screen orientation, safe areas, short landscape screens, and lower-powered devices require different design decisions from desktop development.
Testing the game at multiple screen sizes helped reveal problems that were not visible during normal desktop development. Small interaction details—such as smooth dragging, accessible buttons, and reliable scrolling—have a major effect on the player experience.
My final thought: Numbers Arena successfully developed from a simple number-collection idea into a responsive and engaging arcade game prototype. The project strengthened my understanding of JavaScript game development, Canvas rendering, responsive UI/UX, collision systems, AI behavior, performance optimization, and iterative problem-solving.