Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SK8-infi wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 199 additions & 0 deletions public/CSS_Math_Duel/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
# 🧮 CSS Math Duel - Two-Player Speed Math Race

A fast-paced, competitive math game where two players race to solve math problems and reach the finish line first! Built with HTML5, CSS3, and JavaScript.

## 🎯 Project Overview

CSS Math Duel is an educational game that combines learning with real-time competitive fun. Players solve math problems as quickly as possible, with each correct answer moving their avatar forward along a CSS-powered race track.

## 🚀 Features

### 🎮 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
- **Visual Race Track**: CSS Flexbox-powered track with progress indicators
- **Win Detection**: Automatic winner detection with celebration animations
- **Easy Restart**: Quick game reset functionality

### 🎨 Visual Features
- **Modern UI Design**: Clean, responsive interface with gradient backgrounds
- **Smooth Animations**: CSS keyframes for avatar movement and effects
- **Confetti Celebration**: Animated confetti when a player wins
- **Progress Tracking**: Visual progress bars and avatar positioning
- **Responsive Design**: Works on desktop, tablet, and mobile devices

### 🎯 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

## 🛠️ Tech Stack

- **HTML5**: Semantic markup and game structure
- **CSS3**: Flexbox, Grid, Keyframes, Transitions, and Animations
- **JavaScript**: ES6+ Classes, DOM manipulation, and game logic
- **Font Awesome**: Icons for enhanced UI
- **Google Fonts**: Inter font family for modern typography

## 🎮 How to Play

1. **Start the Game**: Click "Start Game" to begin
2. **Solve Math Problems**: Each player gets their own math question
3. **Type Your Answer**: Enter the correct answer in your input box
4. **Race to the Finish**: Correct answers move your avatar forward
5. **Win the Race**: First player to reach 100% wins!

### 🎯 Game Rules
- **Correct Answer**: Move forward 10% and get a new question
- **Wrong Answer**: Move backward 2% as a penalty
- **Win Condition**: Reach 100% progress to win
- **Scoring**: Track total correct answers for each player

## 📁 Project Structure

```
Games/CSS_Math_Duel/
├── index.html # Main game HTML file
├── style.css # CSS styles and animations
├── script.js # JavaScript game logic
└── README.md # Project documentation
```

## 🚀 Getting Started

### Prerequisites
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No additional dependencies required

### Installation
1. Clone or download the project
2. Navigate to `Games/CSS_Math_Duel/`
3. Open `index.html` in your web browser
4. Start playing!

### Development Setup
1. Open the project in your code editor
2. Make changes to HTML, CSS, or JavaScript files
3. Refresh the browser to see changes
4. No build process required - pure HTML/CSS/JS

## 🎨 Customization

### Adding New Math Operations
```javascript
// In script.js, modify the generateQuestion() method
const operations = [
{ symbol: '+', func: (a, b) => a + b },
{ symbol: '-', func: (a, b) => a - b },
{ symbol: '×', func: (a, b) => a * b },
{ symbol: '÷', func: (a, b) => Math.floor(a / b) } // Add division
];
```

### Changing Game Difficulty
```javascript
// Modify number ranges in generateQuestion()
const a = Math.floor(Math.random() * 20) + 1; // 1-20 instead of 1-12
const b = Math.floor(Math.random() * 20) + 1;
```

### Customizing Visuals
```css
/* In style.css, modify colors and animations */
.btn-primary {
background: linear-gradient(45deg, #your-color1, #your-color2);
}

.avatar {
font-size: 2.5rem; /* Change avatar size */
}
```

## 🎯 Game Logic

### Question Generation
```javascript
function generateQuestion() {
const operations = [
{ symbol: '+', func: (a, b) => a + b },
{ symbol: '-', func: (a, b) => a - b },
{ symbol: '×', func: (a, b) => a * b }
];

const operation = operations[Math.floor(Math.random() * operations.length)];
const a = Math.floor(Math.random() * 12) + 1;
const b = Math.floor(Math.random() * 12) + 1;

return {
question: `${a} ${operation.symbol} ${b}`,
answer: operation.func(a, b)
};
}
```

### Avatar Movement
```javascript
function updateAvatarPosition(player, percentage) {
const avatar = this.avatars[player];
const maxDistance = trackWidth - 60;
const distance = (percentage / 100) * maxDistance;

avatar.style.transform = `translateY(-50%) translateX(${distance}px)`;
}
```

## 🎨 CSS Features

### Keyframe Animations
```css
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(-50%) scale(1); }
40% { transform: translateY(-50%) scale(1.2); }
60% { transform: translateY(-50%) scale(1.1); }
}

@keyframes confettiFall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
```

### Responsive Design
```css
@media (max-width: 768px) {
.player-section {
grid-template-columns: 1fr;
gap: 15px;
}

.question {
font-size: 1.5rem;
}
}
```

## 🚀 Future Enhancements

### Potential Features
- **Multiple Difficulty Levels**: Easy, Medium, Hard modes
- **More Math Operations**: Division, exponents, fractions
- **Sound Effects**: Audio feedback for correct/incorrect answers
- **Timer Mode**: Race against the clock
- **Multiplayer Online**: Play with friends over the internet
- **Leaderboards**: Track high scores and fastest times
- **Custom Avatars**: Choose different character emojis
- **Power-ups**: Special abilities that affect gameplay

### Technical Improvements
- **Local Storage**: Save game statistics
- **Progressive Web App**: Install as a mobile app
- **Service Worker**: Offline functionality
- **WebSocket**: Real-time multiplayer
- **Canvas Graphics**: More advanced visual effects

---

**Happy Math Racing! 🏁🧮**
87 changes: 87 additions & 0 deletions public/CSS_Math_Duel/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Math Duel - Two-Player Speed Math Race</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
</head>
<body>
<div class="game-container">
<header class="game-header">
<h1>🧮 CSS Math Duel</h1>
<p>Two-Player Speed Math Race</p>
<div class="header-decoration">
<div class="decoration-line"></div>
<div class="decoration-dot"></div>
<div class="decoration-line"></div>
</div>
</header>

<div class="game-controls">
<button id="startBtn" class="btn btn-primary">Start Game</button>
<button id="restartBtn" class="btn btn-secondary" style="display: none;">Restart</button>
<div class="game-status">
<span id="gameStatus">Ready to race!</span>
</div>
</div>

<div class="race-track-container">
<div class="race-track">
<div class="finish-line">🏁</div>

<!-- Player 1 Section -->
<div class="player-section" id="player1-section">
<div class="player-info">
<h3>Player 1 🧍‍♂️</h3>
<div class="score">Score: <span id="score1">0</span></div>
</div>

<div class="player-track">
<div class="avatar" id="avatar1">🧍‍♂️</div>
<div class="track-progress"></div>
</div>

<div class="question-section">
<div class="question" id="question1">?</div>
<input type="number" id="answer1" placeholder="Your answer" disabled>
<div class="feedback" id="feedback1"></div>
</div>
</div>

<!-- Player 2 Section -->
<div class="player-section" id="player2-section">
<div class="player-info">
<h3>Player 2 🧍‍♀️</h3>
<div class="score">Score: <span id="score2">0</span></div>
</div>

<div class="player-track">
<div class="avatar" id="avatar2">🧍‍♀️</div>
<div class="track-progress"></div>
</div>

<div class="question-section">
<div class="question" id="question2">?</div>
<input type="number" id="answer2" placeholder="Your answer" disabled>
<div class="feedback" id="feedback2"></div>
</div>
</div>
</div>
</div>

<div class="winner-modal" id="winnerModal">
<div class="modal-content">
<h2 id="winnerText">🎉 Winner!</h2>
<p id="winnerDetails"></p>
<button id="playAgainBtn" class="btn btn-primary">Play Again</button>
</div>
</div>

<div class="confetti-container" id="confettiContainer"></div>
</div>

<script src="script.js"></script>
</body>
</html>
Loading