Building a Web-Based Riddle Game with Amazon Q CLI: My Journey with “Riddle Me This”

Introduction

Recently, I embarked on a fun project to build a riddle game called “Riddle Me This” using Amazon Q CLI as my AI assistant. In this article, I’ll walk you through how I created both a console-based and web-based version of the game, the prompts I used, and what I learned along the way.

What is Amazon Q CLI?

Amazon Q is an AI assistant built by AWS that helps with coding tasks, infrastructure management, and software development. The CLI version allows you to interact with Amazon Q directly from your terminal, making it a powerful tool for developers.

Project Overview: Riddle Me This

“Riddle Me This” is an interactive riddle game with two versions:

1. A text-based console application
2. A web-based application using Flask and HTML/CSS/JavaScript

The game presents players with riddles, tracks their scores, provides hints after failed attempts, and maintains a leaderboard of high scores.

Setting Up the Environment

First, I set up my development environment:

# Create a project directory
mkdir riddle-me-this
cd riddle-me-this

# Initialize a virtual environment
python -m venv venv
source venv/bin/activate  # On Linux/macOS

# Install Flask for the web version
pip install flask

Using Amazon Q CLI to Build the Game

I used Amazon Q CLI to help me build the game by running:

q chat

This opened an interactive chat session where I could describe what I wanted to build and get code suggestions.

The Prompts I Used

Here are some of the key prompts I used with Amazon Q:

1. Initial console version:

   Create a simple text-based game called “Riddle Me This” in Python. The game should present riddles to the player, check answers, implement scoring, timing, hints after failed attempts, and store high scores.

2. Web-based version:

   Create a GUI version of the “Riddle Me This” game in Python with Flask for the backend and HTML/CSS/Javascript for the frontend. The main page should display riddles, provide input for answers, show hints after failed attempts, and track scores and time.

3. When I encountered installation issues:

   error: externally-managed-environment

Amazon Q provided solutions for handling this error by suggesting virtual environments.

What I Built

Console Version

The console version includes:

• A collection of riddles with questions, answers, and hints
• Player name input
• Scoring system (1 point per correct answer)
• Timer for each riddle and total game time
• Hints after 2 failed attempts
• High score system stored in a CSV file

Web Version

The web version expanded on this with:

• A Flask backend
• Responsive HTML/CSS frontend
• Welcome page for player name input
• Game page for displaying riddles and accepting answers
• Game over page showing final score
• High scores leaderboard
• Timer displayed on the game interface

Project Structure

riddle-me-this/
├── app.py                 # Flask application
├── high_scores.csv        # High scores data file
├── riddle_me_this.py      # Original console version
├── static/
│   └── css/
│       └── style.css      # CSS styles
└── templates/
    ├── game.html          # Game page template
    ├── game_over.html     # Game over page template
    ├── highscores.html    # High scores page template
    └── welcome.html       # Welcome page template

What I Learned

Through this project, I learned:

1. AI-Assisted Development: Amazon Q CLI significantly accelerated my development process by generating code, suggesting improvements, and helping with debugging.
2. Full-Stack Development: I gained experience building both backend (Python/Flask) and frontend (HTML/CSS/JavaScript) components.
3. Session Management: I learned how to manage user sessions in Flask to track game state.
4. Responsive Design: The web interface adapts to different screen sizes for a better user experience.
5. Error Handling: I implemented graceful error handling for invalid inputs and edge cases.
6. Virtual Environments: I learned the importance of using virtual environments to manage dependencies.

Challenges and Solutions

One challenge I faced was the externally-managed-environment error when installing Flask. Amazon Q suggested using a virtual environment, which solved the problem:

python -m venv venv
source venv/bin/activate
pip install flask

Future Improvements

Some ideas for future enhancements:

• Add difficulty levels
• Implement user authentication
• Add sound effects
• Create a multiplayer mode
• Add categories for riddles

Code Repository

You can find the complete code for this project on my GitHub repository: https://github.com/Yusra310/Riddle-me-this

Conclusion

Building “Riddle Me This” with Amazon Q CLI was a fun and educational experience. The AI assistant helped me quickly develop both console and web versions of the game, allowing me to focus on the creative aspects rather than getting stuck on implementation details.

If you’re interested in game development or learning web development with Flask, I encourage you to try building your own version of this game!