🎮 Building a Browser Game with AI Roles vs Plain ChatGPT - start to finish

Since I recently launched Rolyai, I wanted to show its power in action. I will walk you through how to make the most out of it and create a browser game from scratch step by step.

We’ll plan the architecture, implement the code and compare the results with plain ChatGPT.

TL; DR:

• Built a clicker game with Rolyais AI Roles and plain ChatGPT.

• Compared both versions step by step.

• Both worked - but Roles gave more direction & structure.

👉 What will we build 🍊:

I want to build a small clicker game called Oranges.

👉 Setup:

At first we initialized a next.js project with this command (We just used the default settings)

npx create-next-app@latest oranges-frontend \

This bootstrapped a new Next.js project.

👉 Architecture Planning:

1. To start, we select a Role. I selected the default Software Engineer since it is built to Plan good software architecture. (You can either use this Role or create your own one)

1. Next we prompt the AI and give it the context on what we are building, what language we’re using and what we want to achieve.

Voila, we got a really good code architecture 👌

At this point we could further discuss the structure of our project with the AI if we want changes.

1. In my case I was very pleased with the setup so I went on and added the folders and sites to our next.js project.

1. Since we want to use images for the different oranges, I searched for “Orange png” on Google, downloaded an Image I liked. After that I made two other variants for the upgraded oranges. 🎨

I stored them in the public/images directory like the AI told me to:

👉 Code implementation:

The next step was implementing the functions and page.

Our Software engineer already gave us some code suggestions for the project.

For demonstration purposes only, I copied all code directly without reviewing it first.

💡 Important Note:

• If you are building a serious project, don’t blindly copy code. You are the actual software engineer that directs the code and knows what’s best for the project!!! AI sometimes makes bad decisions and you have to redirect it in the right direction. Otherwise it will make your project much more complicated than it needs to be.

• AI is only there to give suggestions and write repetitive code for you that you already know how to write. If you don’t understand the code then:

  1. Let the AI explain everything to you until you conquered the knowledge and can explain everything yourself without questions marks in your head.

  2. Research on the internet to understand the code.

Let’s continue where we left.

The code that we got had some minor issues.

To fix those problems I switched to the Programmer Role. (Again if you want to, you can experiment and create your own Programmer role to fit your use case perfectly)

Now we solve every error step by step. Here the first two prompts + answer as an example of how that looked like:

💡 Tipp:

• With existing projects: give the AI your project structure first (folders and the files in the there WITHOUT the content in the files ⇒ on Windows you can type “tree /f” into the console).

• When working on parts of your code, always give the ai the path to where the component is that you are working on.

• Don’t dump all errors at once. Trust me, especially if you have lots of complicated errors, focusing on one or two at a time will 100% give you waaaayyy better results.🪄

At last the only change I made was changing the text color from gray to black.

👉 Result:

This is the result of our little Rolyai adventure:

I also uploaded a quick video on YT to show that it’s actually working:

https://youtu.be/4BWhtIP7Dc8

👉 Comparison ChatGPT vs Rolyai:

I used a completely fresh chat and gave ChatGPT the exact same prompt that I gave Roly:

Just like Roly, it too gave me a suggestion for the architecture:

After that I told GPT to implement everything. This time there were no errors

Here the result:

Compared to the version from Roly, the game is missing some features like:

• Images 🖼️

• Buying upgrades multiple times ⏫

• Having 3 oranges at once 🍊

So let’s add them:

Here again the video showing that it works: https://youtu.be/RVChMc33oiU

If you want to see the whole conversation, here the link to it: https://chatgpt.com/share/68c96f3f-d3d0-8003-9984-e9658ba738da

👉 Conclusion:

• Even though Rolyai uses ChatGPT as its LLM, we can see a direct difference between both Platforms behavior.

• This is because ChatGPT is made for conversations and pleasing everyone. It will keep things general at first and won’t take a side or commit to something too much unless you tell it to.

• Roly on the other hand uses a role based system and can be used to directly tell the AI in which direction you want to go.

• The difference isn’t the LLM itself, but how much control you take over it. With roles, AI becomes a precise tool instead of a general assistant.

GPT is like water. You just have to define what shape it should take. ✨

Cheers 🥂