A mobile detective game powered by AI where you interrogate suspects to solve the mystery!
Who ate Grandad's cake? You have 20 questions to find out...
Grandad's delicious cake has been eaten, and all that remains are crumbs! As the detective on the case, you must interrogate Grandad's two grandchildren - Charlotte and Gary - to determine who the culprit is. But there's a catch: you only have 20 questions!
This isn't your typical point-and-click adventure. Each conversation is unique because the NPCs are powered by AI through the Anthropic Claude API. Charlotte and Gary will respond naturally to your questions, remember what you've asked, and react based on their guilt (or innocence). Every playthrough is different!
Gameplay
Interrogation
- 🎨 Top-down 2D exploration - Navigate a charming pixel art world with virtual joystick controls
- 🤖 AI-Powered NPCs - Have real conversations with suspects powered by Claude AI
- 🕵️ Limited Questions - Only 20 questions to solve the case - choose wisely!
- 📱 Mobile-First Design - Optimized for mobile gameplay with touch controls
- 🗺️ Custom Tilemap - Explore a hand-crafted outdoor environment
- 💬 Dynamic Dialogue - Every conversation is unique based on your questions
- 🎯 Make Your Accusation - When you think you know who did it, make your guess!
- Explore the map using the virtual joystick
- Approach Charlotte or Gary to start a conversation
- Ask Questions to gather clues (you have 20 total!)
- Analyze their responses - are they hiding something?
- Make Your Guess by clicking the exclamation mark icon when ready
- Solve the Mystery - Did you catch the cake thief?
- Game Engine: Phaser 3 (v3.55.2)
- AI Backend: Anthropic Claude API (via Cloudflare Workers)
- Controls: Rex Virtual Joystick Plugin
- Map Design: Tiled Map Editor
- Frontend: Vanilla JavaScript, HTML5, CSS3
This game requires access to the Anthropic Claude API. The API calls are routed through a Cloudflare Worker for secure key management.
You'll need:
- An Anthropic API (or chosen LLM) key
- A Cloudflare Workers account (free tier works!)
- The Cloudflare Worker deployed at:
https://api-call.youruserhere.workers.dev/
The worker handles two endpoints:
POST /- Processes player questions and returns AI-generated NPC responsesPOST /guess- Validates the player's final accusation
Expected request format:
// For questions
{
"input": "Did you eat the cake?",
"npc": "charlotte" or "gary",
"sessionId": "unique-session-id"
}
// For guesses
{
"npc": "charlotte" or "gary",
"sessionId": "unique-session-id"
}Your Cloudflare Worker needs to be configured with:
- Anthropic API key stored as an environment variable
- Session management to maintain conversation context
- CORS headers enabled for web requests
- Clone this repository:
git clone https://github.com/yourusername/20-questions-game.git
cd 20-questions-game-
Set up your Cloudflare Worker:
- Create a new Cloudflare Worker
- Add your Anthropic API key to the worker's environment variables
- Deploy the worker and update the API endpoint in
script.js
-
Serve the game locally:
# Using Python
python -m http.server 8000
# Or using Node.js
npx http-server- Open your browser and navigate to
http://localhost:8000
├── index.html # Main menu
├── game.html # Game interface
├── script.js # Game logic and AI integration
├── style.css # Styling
├── sprites/ # Character and UI sprites
│ ├── player1sprite.png
│ ├── girl1sprite.png
│ ├── guy1sprite.png
│ ├── girl1.png
│ ├── guy1.png
│ ├── grandad.png
│ ├── homeicon.png
│ └── exclamationmarkicon.png
└── tileset/ # Map tiles and data
├── outside1.png
├── outside2.png
├── outside3.png
├── outsidemap.json
└── outsidemap.tmx
- Displayed at the top of the screen
- Increments with each question asked to either NPC
- When you reach 20 questions, you must make your accusation
- Click the ❗ icon (appears after 2 questions) to make an early guess
- Can you solve the case before running out of questions?
- Each playthrough generates a unique session ID
- Conversations are maintained throughout the session
- NPCs remember what you've discussed
- Charlotte and Gary have consistent personalities
- One is guilty, one is innocent (randomized each session)
- They respond naturally to your questions with context awareness
To modify how the NPCs behave, you'll need to update the system prompts in your Cloudflare Worker. You can adjust:
- Personality traits
- Response styles
- Guilt indicators
- Backstory details
Edit script.js to change:
- Maximum number of questions (line 495:
if (parseInt(questionCounter) >= 20)) - NPC movement speed (line 406:
randomSpeed()function) - Question counter reveal threshold (line 524: early guess availability)
Contributions are welcome! Here are some ideas for improvements:
- Add more NPCs and suspects
- Multiple mystery scenarios
- Hint system
- Difficulty levels
- Score tracking
- Sound effects and music
- Additional maps and locations
- Clue collection system
This project is open source and available under the MIT License.
- Phaser - Amazing game framework
- Anthropic Claude - AI-powered conversations
- Rex Virtual Joystick - Mobile controls plugin
- Tiled Map Editor - Level design tool
- Pixel art sprites and tilesets (credit original creators if using third-party assets)
- Camera occasionally needs manual reset after conversations
- Session persistence requires localStorage support
- Mobile keyboard can sometimes obscure input field
- Start broad - Ask general questions before getting specific
- Watch for contradictions - NPCs might slip up!
- Note their reactions - The AI generates contextual responses
- Don't waste questions - Think before you ask
- Trust your instincts - Sometimes the answer is in what they DON'T say
Ready to solve the mystery?
🍰 Good luck, Detective! 🔍