Vibe code your own game in 4 easy steps

For better or worse, generative AI tools can help businesses automate many creative tasks. Today, anyone can use helpful tools such as ChatGPT or Gemini to write essays and create images, videos, and songs.

In information technology, GenAI tools can help workers create simple applications very quickly. While coding experience certainly helps, as I shared in my recent piece covering learnings from vibe coding half a dozen apps, it is possible to create an app with no prior coding knowledge.

But how does the process of vibe coding actually work? Let’s walk through an actual vibe coding session, and you’ll see how I created an entire game from scratch. We’ll also discuss where coding skills are important, and where they’re not.

Putting a twist on a classic video game, using AI

I recently recorded a vibe coding demo that can help anyone create a game, using Google’s Gemini LLM and their Canvas tools. In just a few minutes, I created a basic Pong-like game, using plain-English AI prompts.

From there, I refined various elements of the game, including controls, gameplay, and visual aesthetics.

Check out the video below, or follow my step-by-step guide to creating a Pong game, using Google’s Gemini AI.

Step 1: Lay the groundwork of your game

• Creating a basic game is easy. Simply browse to https://gemini.google.com/ and select Canvas from the Tools dropdown menu, then request the type of game your want.
• In my demo, I asked Gemini to “create a game similar to Pong, where a human user plays against a computer player.” When I did this, I had a playable game in just 30 seconds. But the game was far from perfect, and that was just the beginning of the process.

Step 2: Identify areas for improvement, prompt for changes, repeat

• Immediately, I noticed that I could not control the paddle using the keyboard (only the mouse). Additionally, the game was too difficult. It was nearly impossible for a human player to score a point, and the ball was moving too fast.
• To correct for these quirks, I used plain-English prompts to tell Gemini what to change. For example, one prompt said, “I want to be able to use the arrow keys to move the paddle.”
• I wrote similar prompts to add an orange, retro 8-bit “Spiceworks Pong” title to the top of the screen, introduce a slight delay before the ball is put in play after each point is scored, and I changed the color of the background to green.
• After each prompt, test to verify that your changes were implemented. If you need additional refinement, continue to prompt until the behavior matches your expectations.

Step 3: Make more fundamental changes, if necessary

Minor changes are relatively easy to make, but larger changes might require additional digging. For example, I’ve always thought that Pong is a bit boring. To modernize the game dynamics, I introduced two balls at the same time by prompting, “Change the gameplay to create 2 balls at once during the game at all times.” This change made the game a lot more fun, but introduced new problems.

• After introducing two balls, it was too easy to win against the computer because the computer did not understand how to track the balls effectively. Despite continuously telling Gemini to make the computer player more intelligent, I was not getting the desired results.
•  It was time to dig into the code, to debug what was going wrong. I discovered that the code controlling the computer paddle simply tracked the closest ball, which is not the best strategy. To fix this, I had to explicitly tell Gemini how the computer should behave. Instead of just stating I wanted the computer to be smarter, I explicitly changed the logic by prompting, “change the computer player’s AI to track which ball will reach the end of the court first instead of tracking the closest ball.” Once the changes were implemented, the computer player was much harder to beat!

Step 4: Thoroughly test your app. If you aren’t happy, repeat Steps 2 and 3

• Think through the ways someone interacting with your application might use it. Try each of these use cases to ensure that the application behaves as expected. As you use the app more, you’ll likely discover areas for improvement.
• After each change, test each use case again to see if everything runs as expected. Sometimes changes in one area might impact other areas. If prompting doesn’t fix your issues — even after several tries — you can often find clues if you look directly at comments in the code, or in the code itself. If you know how to program, you can even edit the code directly.
• Repeat until you’re happy with your app!

Vibe coding is more of an art than a science

Vibe coding is quite intuitive and very useful for prototyping a new app. But you should know that just because something “works” does not mean that it’s ready to be deployed. Ideally, apps should be optimized, and additional testing needs to be done by someone who understands the risks involved with introducing anything new into a technology environment.

As I stated in my previous article, you should take great care to ensure that any vibe-coded apps are properly secured, and governance needs to be in place to ensure that you aren’t leaking sensitive data.

Additionally, if you’re deploying a vibe-coded app within a business, it’s probably best to have an experienced coder look over your work to ensure that it’s stable and won’t interfere with other applications.

In the end, vibe coding tools such as Google Gemini with Canvas can simplify the coding process tremendously, unlocking tremendous potential. However, as with any app, you must be careful to ensure that your program is stable, secure, and serves the purpose it was designed for.