How I Wrote a Playable Web-Based Game Using AI

Web development has always fascinated me, but I’ve never had the patience (or, frankly, the brainpower) to “learn to code.” Years ago, when AI was popularized by ChatGPT, I remember hearing big promises about what AI could accomplish, including coding things for you, like games.

Growing up, my family played a board game similar to Parchisi that we called “Murder.” With members of our family now spread across the United States, we haven’t had the opportunity to play nearly as much as we did when I was growing up and seeing family every Sunday after church. For years, I’ve had the idea of creating a digital version of this analog game—but as previously stated, I never developed the skills necessary to code it. The alternatives (like SORRY or LUDO, both of which are in the App Store) weren’t close enough to satisfy my sense of nostalgia.

I meticulously outlined the rules of the game, even placing the board into a Google Sheet so I could explain movement through the game using a spreadsheet grid. I wrote out the rules in as much detail as possible. Years ago, I fed this material to AI, and it spit out responses—but nothing useful enough for someone like me, who really needed the majority of the work done. If I had even been an amateur coder back then, I might have been able to work with AI to achieve a reasonable result. Since I wasn’t, I gave up.

Grok (xAI)

More recently, I remember seeing news about xAI’s investment in a game-making environment. That prompted me to revisit my old files—the same ones that meticulously outlined the rules and gameplay but had previously gone nowhere. I uploaded them to Grok and asked it to make a basic version of the game.

It worked. It even gave me a preview screen where I could play a basic version of the game. I was stunned.

I asked Grok to summarize its work on the project. Here’s what it produced:

Summary of work on digitizing your family board game, PhonEos-M:

Initial Guidance: I recommended an agile approach, starting with a minimum viable product (MVP) for four players on a local computer setup. This allows for easy testing before scaling to web or app versions for remote play on Android devices. I suggested Python as the language due to its simplicity, with Pygame for graphics, and provided step-by-step environment setup instructions (install Python, VS Code, and pip install pygame).

MVP Code Delivery: I supplied a complete, runnable Python script (phoneos_m.py) that:
– Creates a 17×17 grid-based GUI window representing the board
– Draws the cross-shaped main track (black), work zones (gray), home zones (gray), and shortcut center (I9 in blue)
– Places 20 marbles (5 per player) in their starting “work” positions, colored differently for each player
– Simulates die rolls on mouse clicks (output to console for now)
– Includes data structures for key elements like the main track sequence, work/home coordinates, and marble tracking, directly based on your PDF spec and diagram

Next Steps Outlined: I proposed iterating in sprints—adding turn logic, movement rules (spawning on 1 or 6, clockwise only, no jumping your own marbles, “murder” on landing), shortcut mechanics, home entry, and win conditions. Once the local version works, we could expand to multiplayer networking or app deployment.

Project Management

While I’m not a coder, I’ve supervised web designers and developers for many years, and I use Agile SCRUM to manage not only web projects but marketing projects as well. I understand the value of project management. Leveraging what Grok created as the “minimum viable product,” and knowing where I ultimately wanted to end up, I began asking Grok for simple refinements. It successfully made those refinements—up to a point.

Eventually, once I was stuck with Grok, I decided to give Gemini a try.

Gemini (Google)

I uploaded the HTML and JavaScript files to Gemini and began asking it for refinements. It often asked me to edit parts of the code, but after I repeatedly asked it to regenerate the full HTML and JavaScript files, it was able to rewrite everything so I could simply overwrite the files using TextEdit on my Mac.

As the files grew longer, regeneration started taking more and more time. That’s when I decided to install Visual Studio Code so I could attempt to insert smaller code snippets generated by Gemini. That’s also when I discovered Codex.

I asked Gemini to summarize its work on the project. Here’s what it produced:

Summary of our collaborative work on the Mukdek project:

Phase 1: Technical Foundation & Core Development
– Built a Node.js and Socket.io server with a responsive HTML/CSS/JS frontend, deployed via GitHub to Render
– Implemented complex board logic including dice rolls, marble movement, safe zones, shortcuts, capturing (“murdering”), and win conditions
– Created a robust multiplayer lobby system with persistent sessions (reconnect support), color selection, host controls (kick/reset), and a multi-room architecture to support simultaneous games
– Added UX improvements such as Lightning Mode, ghost move previews, confetti celebrations, dynamic favicons, and game-stat tracking
– Developed AI opponents (“Bots”) with prioritized decision-making logic (Murder > Shortcut > Progress)
– Hardened the server against cheating and spam with input sanitization and rate limiting

Phase 2: Expanded Game Design & Rule Logic
– Conceptualized scaling from 2 to 14 players, including Duel (2-player), Classic (4-player), and Chaos (6-player) modes
– Codified house rules such as “Jorge’s Rule” (instant win condition) and two-dice split movement mechanics
– Refined UI and visual identity, including widescreen layout, segmented lobby zones, capture animations (“Splat”), and asynchronous persistence inspired by Words with Friends

Phase 3: 6-Player Adaptation (Current Session)
– Rewrote the original 4-player PDF rulebook to support six players while preserving tone and terminology (“Work,” “Home,” “Murdered”)
– Reverse-engineered the new board geometry to define precise grid coordinates for all zones
– Updated rules immediately when the board layout changed (work zones shifting from 1×5 strips to 2×2 blocks and a 19×19 grid), keeping documentation in perfect sync with the design

Codex (OpenAI)

Codex was a game-changer.

I explained that the project had been developed using Agile SCRUM methodology, and that now that Codex could see everything the game could do, it might have structured the project differently if it had been involved earlier. I asked what it would do to improve the structure of the game and how it could be developed better.

Codex suggested breaking the few existing files into many smaller ones, creating a new folder structure, and making other architectural improvements. It offered to make these changes itself, and I said yes. Without me having to copy, paste, or hunt for places to update code, it simply made the changes.

I continued the same iterative process I had used with Grok and Gemini—this time with Codex—and it was incredible. In fact, Codex is now helping me build an Android app version of the game that allows players on Android to play against people using a web browser.

Mukdek Can Be Played Here

Fans of NBC’s The Office will understand the name.

Disclaimers

Since I’m not a coder, I honestly have no idea whether the code itself is terrible or brilliant. A professional developer might look at it and say, “It’s a miracle this web app works at all,” or they might say, “This is actually pretty impressive.” I have no way of knowing.

Narrowcasting

I don’t expect anyone to play this game—maybe my family members, but that’s it. I believe AI will allow all of us to hear amazing music, watch compelling movies, and play incredible games, but only as defined by us. I think we’re moving away from monoculture broadcasting and toward uniquely human experiences tailored to each individual.

David May
Internet Marketing: David has enjoyed employment ever since he graduated from Chapman University as an undergraduate. He's got more than 8 years of marketing and 'sales' (Admission) in the education vertical and has managed Chapman's team of web gurus since the summer of 2011. He now serves as Chapman University's Director of Web and Interactive Marketing. So... we know what you are thinking - you don't want to hire someone with a day job. Well, get over it because that's how we can afford to keep our rates low. Video Production: David May's two short films have screened at over 100 film festivals. Both Fetch and Itsy Bitsy have won many awards including "best of fest." He has also had international syndication through his experience on the FOX Reality show "On the Lot" where he placed 12th out of 12,000 applicants. David has also directed/produced Marketing videos for Universities such as Chapman University and University of Colorado Health Sciences Center, and organizations such as WACAC.
http://www.pogonacreative.com
Previous
Previous

Geoff Ralston College Education: Forging Leadership in Safe AI

Next
Next

Timothy Scott Ralston College Journey: AI, Presence, and the Future of Hollywood Storytelling