Skip to content

Commit fcc8578

Browse files
Hrishikesh-DalalHrishikesh-Dalal
authored
Merge pull request #173 from Nischay-loq/color_constellation
Added color Constellation
2 parents febc03f + c86cd0a commit fcc8578

File tree

5 files changed

+1141
-0
lines changed

5 files changed

+1141
-0
lines changed

‎data/projects.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -310,5 +310,13 @@
310310
"category": "Fun UI / Visual",
311311
"categoryKey": "visual",
312312
"difficulty": "easy"
313+
},
314+
{
315+
"title": "Color Constellation",
316+
"slug": "color-constellation",
317+
"description": "Link stars to form constellations that match a given silhouette pattern. Lines cannot cross.",
318+
"category": "Small Games",
319+
"categoryKey": "games",
320+
"difficulty": "medium"
313321
}
314322
]

‎projects/color-constellation/README.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
# Color Constellation 🌟
2+
3+
A beautiful and interactive puzzle game where you connect stars to form constellations that match target patterns. Challenge your spatial reasoning skills while enjoying an animated night sky!
4+
5+
## 🎮 Features
6+
7+
### Core Gameplay
8+
- **Star Connection**: Click two stars to draw a connection between them
9+
- **Pattern Matching**: Match your constellation to the target pattern shown
10+
- **No Crossing Rule**: Lines cannot intersect with each other
11+
- **Progressive Difficulty**: 6+ levels with increasingly complex patterns
12+
13+
### Visual Enhancements
14+
- **Animated Night Sky**: Beautiful gradient background with twinkling stars
15+
- **Star Physics**: Optional gravity simulation that gently moves stars
16+
- **Glowing Effects**: Stars pulse and glow with dynamic lighting
17+
- **Smooth Animations**: Responsive canvas-based rendering
18+
19+
### Game Features
20+
- **Hint System**: Get hints for one connection (with score penalty)
21+
- **Score Tracking**: Earn points based on level difficulty
22+
- **Level Progression**: Unlock new constellation patterns
23+
- **Clear Function**: Reset all connections to start over
24+
25+
## 🎯 How to Play
26+
27+
1. **Observe the Target**: Look at the target constellation pattern in the left panel
28+
2. **Select Stars**: Click on a star to select it (it will be highlighted)
29+
3. **Create Connection**: Click on another star to draw a line between them
30+
4. **Match Pattern**: Continue connecting stars until you match the target
31+
5. **Check Your Work**: Click "Check Pattern" to verify your solution
32+
6. **Progress**: Successfully match the pattern to advance to the next level
33+
34+
## 🎨 Game Patterns
35+
36+
The game includes various constellation patterns:
37+
- **Level 1**: Simple Triangle (3 stars)
38+
- **Level 2**: Square (4 stars)
39+
- **Level 3**: Star Shape (10 stars)
40+
- **Level 4**: House (5 stars)
41+
- **Level 5**: Diamond with Center (5 stars)
42+
- **Level 6**: Complex Constellation (7 stars)
43+
44+
## ⌨️ Controls
45+
46+
- **Mouse Click**: Select and connect stars
47+
- **ESC Key**: Deselect current star
48+
- **Clear Button**: Remove all connections
49+
- **Hint Button**: Show one correct connection
50+
- **Check Pattern**: Verify if your constellation matches
51+
52+
## 🛠️ Technical Details
53+
54+
### Technologies Used
55+
- **HTML5 Canvas**: For rendering stars and connections
56+
- **Vanilla JavaScript**: No frameworks, pure ES6+
57+
- **CSS3**: Modern styling with gradients and animations
58+
- **RequestAnimationFrame**: Smooth 60fps animations
59+
60+
### Key Algorithms
61+
- **Line Intersection Detection**: Prevents lines from crossing
62+
- **Pattern Matching**: Compares user connections with target
63+
- **Gravity Simulation**: Optional physics for star movement
64+
- **Canvas Rendering**: Efficient drawing and updating
65+
66+
## ♿ Accessibility Features
67+
68+
- **Keyboard Support**: ESC key for deselection
69+
- **Focus Indicators**: Clear visual feedback for focused elements
70+
- **Reduced Motion**: Respects `prefers-reduced-motion` setting
71+
- **High Contrast**: Stars and connections are clearly visible
72+
- **Semantic HTML**: Proper structure for screen readers
73+
74+
## 🎯 Scoring System
75+
76+
- **Base Score**: 100 points × current level
77+
- **Hint Penalty**: -50 points if hint is used
78+
- **Progressive Rewards**: Higher levels give more points
79+
80+
## 🔧 Future Enhancements
81+
82+
Potential improvements:
83+
- More constellation patterns (zodiac signs, animals)
84+
- Difficulty modes (timed, limited connections)
85+
- Multiplayer mode
86+
- Custom constellation creator
87+
- Save/load game progress
88+
- Sound effects and music
89+
- Mobile touch support optimization
90+
- Achievement system
91+
92+
## 🌟 Game Design Notes
93+
94+
The game combines:
95+
- **Puzzle Solving**: Match patterns using logical thinking
96+
- **Spatial Reasoning**: Understand 2D relationships
97+
- **Strategy**: Plan connections to avoid crossing
98+
- **Visual Feedback**: Clear indication of success/failure
99+
100+
## 📱 Responsive Design
101+
102+
- Works on desktop and tablet devices
103+
- Adaptive canvas sizing
104+
- Responsive UI layout
105+
- Touch-friendly (basic support)
106+
107+
## 🎨 Art Style
108+
109+
- **Theme**: Night sky / astronomy
110+
- **Color Palette**: Deep purples, blues, and golden stars
111+
- **Effects**: Glow, twinkle, and gradient animations
112+
- **Style**: Modern, clean, and immersive
113+
114+
---
115+
116+
Enjoy connecting the stars! ✨

‎projects/color-constellation/index.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Color Constellation - Vanilla Verse</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<header>
12+
<h1>🌟 Color Constellation</h1>
13+
<p class="subtitle">Connect the stars to match the constellation pattern</p>
14+
</header>
15+
16+
<div class="game-info">
17+
<div class="info-item">
18+
<span class="label">Level:</span>
19+
<span id="level" class="value">1</span>
20+
</div>
21+
<div class="info-item">
22+
<span class="label">Score:</span>
23+
<span id="score" class="value">0</span>
24+
</div>
25+
<div class="info-item">
26+
<span class="label">Connections:</span>
27+
<span id="connections" class="value">0/0</span>
28+
</div>
29+
</div>
30+
31+
<div class="game-area">
32+
<!-- Target Pattern Display -->
33+
<div class="target-container">
34+
<h3>Target Pattern</h3>
35+
<canvas id="targetCanvas"></canvas>
36+
</div>
37+
38+
<!-- Main Game Canvas -->
39+
<div class="canvas-container">
40+
<canvas id="gameCanvas"></canvas>
41+
<div id="message" class="message"></div>
42+
</div>
43+
</div>
44+
45+
<div class="controls">
46+
<button id="clearBtn" class="btn btn-secondary">Clear Connections</button>
47+
<button id="hintBtn" class="btn btn-hint">Show Hint</button>
48+
<button id="checkBtn" class="btn btn-primary">Check Pattern</button>
49+
<button id="nextBtn" class="btn btn-success" style="display: none;">Next Level</button>
50+
</div>
51+
52+
<div class="instructions">
53+
<h3>How to Play</h3>
54+
<ul>
55+
<li>Click two stars to connect them with a line</li>
56+
<li>Match the target constellation pattern shown above</li>
57+
<li>Lines cannot cross each other</li>
58+
<li>Click "Check Pattern" when you think you've matched it</li>
59+
<li>Use hints if you're stuck (costs points)</li>
60+
</ul>
61+
</div>
62+
</div>
63+
64+
<script src="main.js"></script>
65+
</body>
66+
</html>

0 commit comments

Comments
 (0)