SSOC25: 🧮 Add CSS Math Duel - Two-Player Speed Math Race Game

[SK8-infi]

Closes #258

📥 Pull Request

Description

🧮 Add CSS Math Duel - Two-Player Speed Math Race Game

📝 Description

Added a beautiful and engaging two-player math racing game to the Project Vault games collection. This educational game combines competitive gameplay with modern web design and smooth animations.

✨ Features Added

🎮 Gameplay Features

• 2-Player Split-Screen Mode: Play on the same device with side-by-side racing
• Random Math Problems: Addition, subtraction, and multiplication questions
• Real-Time Racing: Avatars move forward with each correct answer
• Speed-Based Progress: Faster responses = quicker progress
• Win Detection: Automatic winner detection with celebration animations
• Easy Restart: Quick game reset functionality

🎨 Visual Enhancements

• Modern UI Design: Glassmorphism effects with gradient backgrounds
• Smooth Animations: CSS keyframes for avatar movement and effects
• Confetti Celebration: Animated confetti and sparkles when a player wins
• Progress Tracking: Visual progress bars and avatar positioning
• Responsive Design: Works on desktop, tablet, and mobile devices
• Gradient Text Effects: Animated gradient text for titles and buttons
• Shimmer Effects: Subtle animations on race tracks and question boxes

🎯 Educational Features

• Math Practice: Addition, subtraction, and multiplication problems
• Speed Training: Improves mental math speed and accuracy
• Competitive Learning: Motivates players through friendly competition
• Immediate Feedback: Instant feedback on correct/incorrect answers

🛠️ Technical Implementation

Files Created:

• Games/CSS_Math_Duel/index.html - Main game interface
• Games/CSS_Math_Duel/style.css - Modern styling with animations
• Games/CSS_Math_Duel/script.js - Game logic with ES6+ classes
• Games/CSS_Math_Duel/README.md - Comprehensive documentation

Tech Stack:

• HTML5: Semantic markup and game structure
• CSS3: Flexbox, Grid, Keyframes, Transitions, and Animations
• JavaScript: ES6+ Classes, DOM manipulation, and game logic
• Google Fonts: Inter font family for modern typography

�� How It Works

1. Start Game: Click "Start Game" to begin
2. Solve Math Problems: Each player gets their own math question
3. Race to Win: Correct answers move avatars forward
4. Win Condition: First player to reach 100% progress wins!

�� Design Highlights

• Gradient Animations: Moving gradients on buttons, progress bars, and decorative elements
• Glassmorphism Effects: Modern backdrop blur and transparency effects
• Smooth Transitions: Cubic-bezier easing for all interactive elements
• Responsive Layout: Optimized for all device sizes
• Accessibility: Proper focus states and keyboard navigation

�� Responsive Design

• Desktop: Full-featured experience with side-by-side player sections
• Tablet: Optimized layout with maintained functionality
• Mobile: Stacked layout with touch-friendly controls

�� Game Features

• Question Generation: Random math problems with varying difficulty
• Avatar Movement: Smooth CSS transitions for player progress
• Score Tracking: Real-time score updates for each player
• Winner Celebration: Confetti animation and sparkle effects
• Game States: Proper state management for start, play, and end states

🔗 Integration

• Added to assets/html_files/games.html for easy access
• Links to GitHub repository for code viewing
• Follows existing project structure and naming conventions

📚 Documentation

• Comprehensive README with setup instructions
• Code comments for maintainability
• Feature documentation and customization guide

�� Educational Value

• Math Skills: Improves mental arithmetic speed and accuracy
• Competition: Motivates learning through friendly competition
• Speed Training: Encourages quick thinking and problem-solving
• Visual Feedback: Immediate reinforcement for correct answers

🔧 Customization Options

• Easy to modify math operations and difficulty levels
• Customizable colors and animations
• Extensible game logic for additional features

---

Ready for review! The CSS Math Duel game is now fully integrated into the Project Vault games collection with beautiful animations, responsive design, and engaging two-player gameplay. 🎮✨

---

This PR adds a complete, polished math racing game that enhances the educational value of the Project Vault while maintaining the high visual standards of the existing games collection.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Demo Video(Mandatory):

WhatsApp.Video.2025-07-30.at.02.22.12_61f88539.mp4

[netlify]

✅ Deploy Preview for webdevin100days ready!

Name	Link
🔨 Latest commit	a1b6759
🔍 Latest deploy log	https://app.netlify.com/projects/webdevin100days/deploys/68a8fa5366f6020008b49a75
😎 Deploy Preview	https://deploy-preview-757--webdevin100days.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

[SK8-infi]

@ruchikakengal can you please merge this .Since the contributions are coming to an end for SSOC .Thanks

[ruchikakengal]

add your project name and demo link of your project in app.js file @SK8-infi