From Concept to Leaderboard: Coding a Custom Game with an AI Partner

As a developer and site owner, I constantly seek ways to increase engagement. While quality content is essential, interactivity drives user retention. I wanted to create a “sticky” experience—something fun that would encourage users to return daily to test their knowledge and compete for a spot on the leaderboard.

I decided to build a trivia game. However, I avoided standard static quiz plugins in favor of a dynamic experience featuring ascending difficulty, high-stakes decision-making, persistent score tracking, and a global leaderboard.

The challenge was scope. While I am proficient in PHP and JavaScript, building a full-stack game engine from scratch—including external API management, state handling, secure database writes, and UI polishing—is a significant undertaking. It is the type of project that often remains backlogged for months.

To accelerate the process, I utilized AI-assisted development, partnering with Google Gemini. This collaboration transformed a vague concept into a fully functional, gamified experience in a fraction of the time required for solo development.

Here is the behind-the-scenes process of building the 10-Streak Trivia Challenge.

The Concept: Beyond the Basic Quiz

Before writing code, I defined the game loop. I chose to leverage the Open Trivia DB API to source thousands of questions across various categories, ensuring gameplay remains fresh.

To move beyond a simple quiz, I outlined specific mechanics for Gemini:

• The 10-Streak Goal: Players must answer 10 consecutive questions correctly to win.
• Ascending Difficulty: The game begins with “Easy” questions and scales to “Medium” and “Hard” as the player’s streak increases.
• The “Roulette” Twist: This is the primary engagement hook. At random intervals between rounds 4 and 8, the game offers a choice: continue the current path or risk the entire streak on a single “Hard” question for an instant win.

Phase 1: Prototyping the Engine

My initial prompts were broad, describing a shortcode-based WordPress trivia game powered by the Open Trivia DB API. Gemini accounted for the WordPress environment immediately, providing a structured approach that separated the frontend interface (HTML/CSS rendered via PHP) from the core logic (JavaScript).

The “Aha!” Moment: Dynamic Difficulty

The first technical hurdle was adjusting difficulty based on the streak. I defined the logic: questions 1–3 are easy, 4–7 are medium, and 8–10 are hard. Gemini’s implementation within the JavaScript fetchQuestion function was efficient:

JavaScript

// Ascending Difficulty Logic
let difficulty = 'easy';
if (state.streak >= 3) difficulty = 'medium';
if (state.streak >= 7) difficulty = 'hard';
// Append difficulty to the API URL string...

This working logic provided the momentum to complete a basic game loop within hours.

Phase 2: Code Hygiene and Structural Rebuilding

As I added features like category selection, the JavaScript engine became a patchwork of disconnected functions. When I asked Gemini to integrate category logic, it instead suggested a consolidation. It recognized that game state management—tracking loading states, game-over triggers, and category selections—was becoming disorganized.

We rewrote the JavaScript engine to follow a cohesive lifecycle: Initialization -> Category Selection -> Main Game Loop -> End Game State. In this phase, the AI acted as a senior developer performing a code review, identifying architectural weaknesses before they became technical debt.

Phase 3: Backend Integration and Data Persistence

To make the game competitive, I needed to store scores. This required moving from client-side JavaScript to the WordPress backend. Gemini utilized a clear analogy to explain the architecture:

• The Bookshelf (Database Schema): We defined “Longest Streak” and “Total Wins” as valid user metadata in WordPress.
• The Librarian (REST API Controller): To ensure security, JavaScript cannot write directly to the database. We built a custom WordPress REST API endpoint to receive scores, verify user authentication via a secure nonce, and then update the database.
• The Reading Room (Frontend Display): We created shortcodes to retrieve this data for leaderboards and user profiles.

With Gemini’s assistance, I defined parameters such as data types and validation rules, resulting in robust PHP code that handles requests securely.

Phase 4: Gamification and Polish

Once the engine and database were connected, we focused on the user experience. We integrated canvas-based confetti for wins and a responsive UI using CSS variables that align with my theme’s aesthetic.

The Guest vs. User Dilemma

I wanted the game to be accessible to everyone while reserved score-saving for logged-in users. We engineered a “soft gate” where the JavaScript engine checks authentication status during initialization:

• Authenticated Users: The header displays their “Personal Best” in real-time.
• Guests: The header displays a prompt encouraging them to log in to track their progress.

This approach maximizes engagement while driving user registration.

The Result: The Global Leaderboard

The final component was the

shortcode. This queries the WordPress user database, sorts by the trivia_longest_streak meta key, and generates a competitive table. Seeing my own username atop the leaderboard during testing was a rewarding validation of the project.

Conclusion: Collaborative Development

Building this Trivia Game demonstrated the efficiency of AI-assisted workflows. Working with AI did not replace the need for coding knowledge; rather, it shifted my focus from repetitive syntax and boilerplate to architecture and user experience.

If you are a developer hesitant to integrate AI tools, consider this an invitation to experiment. These tools do not replace your skills—they amplify them.

Try to beat my streak of 10 at https://www.babbworks.com/trivia-roulette/