Echo Chamber is a social media content moderation simulation game where players control what society sees in their feed. Every decision to boost, hide, or ignore content shapes the mood of society and engagement metrics, leading to different endings based on your editorial style.
/game
├── echo-chamber.html # Main game UI and styling
├── game.js # Game logic and mechanics
└── README.md # Documentation
currentDay: Tracks game progression (1-10 days)engagement: Platform engagement metric (0-100%)mood: Society's emotional state (-50 to +50)politicalBias: Tracks left/right political leanpostHistory: Records all player decisions
- SVG City Map: Dynamic background that changes with mood
- Stick Figure NPCs: Animated characters that react to societal changes
- Floating Emojis: Visual feedback for player actions
Each day generates 3 posts with the following attributes:
- Positive: Community building, uplifting news
- Negative: Crime, disasters, conflicts
- Neutral: Weather, sports, general updates
- Low (1): Minor local events
- Medium (2): Significant community impact
- High (3): Major societal events
- Community, Politics, Crime, Culture, Environment, Economy, Sports, etc.
// Engagement boost - positive content is less viral but wholesome
if (tone === 'positive') {
engagement += intensity === 'high' ? 3 : intensity === 'medium' ? 2 : 1
} else {
// Negative/neutral content is more engaging (viral)
engagement += intensity === 'high' ? 15 : intensity === 'medium' ? 10 : 5
}
// Mood impact based on tone
mood += tone === 'positive' ? 10 : tone === 'negative' ? -15 : 2
// Political tracking (if political topic)
if (topic === 'politics') {
if (tone === 'positive') leftBias++
if (tone === 'negative') rightBias++
}engagement -= 5 // Reduced engagement from censorship
mood -= 5 // Society becomes suspiciousengagement -= 3 // Minimal engagement loss (increased from -2)
// No mood changeThe distribution of positive/negative/neutral posts changes based on current mood:
if (mood > 20) {
// Happy society sees more positive content
positive: 50%, negative: 20%, neutral: 30%
} else if (mood < -20) {
// Angry society sees more negative content
positive: 20%, negative: 50%, neutral: 30%
} else {
// Balanced distribution
positive: 33%, negative: 33%, neutral: 34%
}Stick figures react based on society's mood level:
| Mood Range | State | NPC Behavior |
|---|---|---|
| > 20 | Happy | Bouncing walk, waving arms, 😊 emissions |
| -10 to 20 | Normal | Casual walking, neutral expression |
| -30 to -10 | Angry | Fast walking, jerky movements, 😠 emissions |
| < -30 | Chaos | Running frantically, fighting, 💥 collisions |
- Walking Speed: Varies by mood state (1-8 units/frame)
- Collision Detection: Active in chaos mode (50px proximity)
- Emotion Emissions: Random chance based on state (0.5-2%)
The game ends after Day 10 with one of five possible endings:
- Condition:
mood ≥ 30 AND engagement < 50 - Strategy: Boost positive content consistently (6-8 times) while ignoring some posts to keep engagement low
- Result: Peaceful society but you're fired for low metrics
- Condition:
mood ≤ -30 AND engagement ≥ 50 - Strategy: Boost negative/controversial content for high engagement
- Result: City riots but you get promoted
- Condition: One political faction boosted >70% of the time
- Strategy: Consistently boost only positive OR only negative political content
- Result: Democracy dies, authoritarianism rises
- Condition:
engagement ≤ 10 - Strategy: Hide or ignore most content to tank engagement
- Result: Everyone abandons the platform
- Condition: All other cases
- Strategy: Mixed decisions without clear strategy
- Result: Status quo maintained, nothing changes
The updated engagement formulas create meaningful trade-offs:
- Positive content: Builds happiness but generates low engagement (realistic!)
- Negative content: Drives high engagement but creates societal anger
- The Dilemma: Choose between a content society or profitable metrics
| Mood Level | Visual Effect |
|---|---|
| > 20 | Bright blue buildings, increased brightness |
| < -20 | Dark gray buildings, reduced brightness |
| < -30 | Red "CHAOS" graffiti appears |
- Boost Positive: ❤️ appears
- Boost Negative: 😡 appears
- Hide Any: 🚫 appears
- Ignore: ➡️ appears
- NPC Collisions: 💥 appears
- Day Start: Generate 3 posts based on current mood distribution
- Player Decision: Choose to Boost/Hide/Ignore each post
- Immediate Feedback:
- Floating emoji appears
- Stats update (engagement/mood)
- NPCs react to decision
- Day Transition: After 1.5 second delay, advance to next day
- Repeat: Continue for 10 days
- Ending: Calculate final ending based on accumulated stats
- High Engagement: Boost controversial/negative content
- Positive Mood: Boost positive stories, hide negative ones
- Balanced Approach: Mix decisions to avoid extremes
- Watch NPCs: Their behavior indicates society's mood
- Track Metrics: Balance engagement vs mood for desired ending
- Stick figures use
setIntervalwith 50ms updates - Maximum 10 NPCs to maintain smooth animation
- Floating emojis auto-remove after 2 seconds
- SVG animations use CSS transforms for GPU acceleration
- Modern browsers with ES6 support
- SVG and CSS3 animations required
- Tested on Chrome, Firefox, Safari, Edge
Potential additions for extended gameplay:
- More ending variations
- Achievement system
- Daily challenges
- Multiplayer influence tracking
- Real-world event integration
- Custom post creation
- Difficulty settings
- Statistics dashboard
Built with vanilla JavaScript, HTML5, and SVG animations. No external dependencies required.