This article is about a video I made in Feburary of 2024 titled “I tried to create an Infinite Craft clone”. It’s been a while since then but I thought that even though the video goes through the entire unplanned coding process, a written version of the video would be nice to have as well.

What is infinite craft?

Let’s start off with the basics. Infinite craft is a web-based game made by Neal. It is a game about combining so called elements into new ones by dragging two of them together. There are several games of this concept out there, but what makes this one special is that all of the content of the game is AI generated.

The player drags two elements together and an AI (in this case Facebook’s Llama model) decides what to make of it. I thought that this could be a fun little challenge to try and figure out how to do this myself, and honestly, the most difficult part was getting the UI working.

Development

So lets get started on my development experience. I decided to go as vanilla as possible, with a pure vanilla JavaScript front-end environment and a basic NodeJS back-end which utilizes express.js to create a basic API endpoint for the AI interaction. In hindsight this is probably overkill, but it works!

Front end

In this next section I’m going to use the term “element cards” to refer to the HTML elements with the game element information inside.

The element cards work by having two variants of them, the cards in the aside list where all of the discovered elements are, and the cards that can be dragged by the player. Whenever a new element gets discovered, a static card is created in the sidebar which when clicked will create the draggable element card.

The draggable card are HTML elements with a fixed position that follow the mouse cursor until the mouse button is released. They must be able to do the following things:

• Drag and drop over other elements to combine them
• Drag into the side bar to delete them
• Right-click to delete them

The right clicking and dragging to delete them is pretty easy. Just destroy the HTML element on the contextmenu event, and whenever the x position of the element is bigger than the x position of the sidebar.

To get the combining to work, I set the pointer-events CSS property of the element cards to none whenever they were being dragged, and set it back to true when the player released their mouse button. This allowed me to check if, at the time of the mouse button release, there was any other element card that was currently being hovered. If so, that was the element card that the player wanted to combine with. Due to the pointer-events being set to none, the hover effect passes right through the element that is currently being dragged.

Then all thats left is to get the two elements to combine, which is the element that was last dragged and the element which was hovered as the mouse button was released when hovering, and send the two names of them over to the back-end to get them processed by the generative AI.

When we get back the response from the back-end, all we have to do is add another static element-card to the side bar. Discovered elements and the four starter elements are stored in the browsers local storage, just like in the original game. Whenever the page is first visited we check the local storage for existing entries and create the first element cards based on that information.

Back end

The surprisingly easy part of this whole thing.

As mentioned before, the back-end is also written in JavaScript with the use of NodeJS. Its entire purpose is to host the static front-end files and to provide an API endpoint for the front-end as to keep the API keys secure.

In my case, I decided to use OpenAI’s GPT API for this project. There really isn’t any good reason behind this and it may as well have been done with any other model. Some people mentioned Mistral as having been a good choice. I also used the official OpenAI module for NodeJS.

When sending the request to the AI API, we send two messages. The system message and the user message.

The system message contains the prompt for the AI, in other words what the AI is supposed to do with the user input. There we have to specify what happens, what to expect, and how to format the output given back to us. The OpenAI module has a setting for the response_format, and setting it to JSON should give us the right output, but being verbose can’t hurt (except for the token costs). Basically I just specify what fields must be present in the returning JSON and what they should contain.

This is the prompt I ended up writing and using for the project. I think it ended up working pretty well.

You are a helpful AI assistant that is tasked with creating the outputs for an element combination game. You receive 2 objects that are separated by a comma symbol. For example: "water,lava".
You have to return what element would make the most sense to be created by combining these two objects. You can create any object, person or thing from fiction or reality, as long as it makes sense for the two inputted objects to equal the new object.
You return a JSON that contains a field for the created object called "object", a field for a fitting emoji called "emoji", and a field called "success" that contains a boolean that is true if the two objects are able to be combined.
Do not respond with anything other than the mentioned format. If there is an error, or the combination is not possible otherwise, just respond with a json object that has the success value set to false. Keep the maximum amount of emojis to a count of 3 or below.
The name of the outputted object cannot contain a comma symbol.

All of this to combine two elements. Now we just need to create a function in JavaScript that takes two strings as input and passes it to the AI.

async function CombineElements(a, b) {
    ...
    // Make the OpenAI request
    const completion = await openai.chat.completions.create({
        messages: [
            {
                role: "system",
                content: prompt // prompt.txt file content
            },
            {
                role: "user",
                content: [a,b].join(",") // The two given elements; comma separated
            }
        ],
        ...
    })

    let message = completion.choices[0].message.content;
    if (!message) {
        return false;
    }

    // Parse the outputted text to JSON
    let json = JSON.parse(message);
    // Check if the new JSON object contains all the fields we need
    if (json.object && typeof json.success != "undefined" && json.emoji) {
        // Return the new object or false if the success parameter is false
        return json.success ? json : false;
    }

    ...
}

The full source code is linked below the article.

And thats it for the element generation! Overall pretty simple I’d say. With the given prompt the AI returns the name of the generated element alongside a fitting emoji. We send that back to the client and vòila! Now there is just one tiny important thing left…

Database storage

The game is fully playable the way it is right now, but there is one problem. Combined elements are only stored on the front-end per-client, which causes two problems. First, even if the same two elements are combined by the same or different players we make a request to the OpenAI API every time, which is very inefficient. Second, players never have the chance to share discoveries with each other as the result of two elements is pretty much random every time since it is newly generated for each request.

To solve this we have to store each successful combination in some sort of database. This will also make combining existing discoveries much faster as we will no longer have to wait on the AI.

For this project, I chose a simple PostgreSQL database. We don’t need anything special, just a single table with the following structure:

Field	Type	Description
id	string	A special generated key to index unique combinations
name	string	The name of the element
emoji	string	The emoji that goes along with the element

The original project has 3 more fields in addition to those listed above.

• element_a and element_b
  • These store the two elements that make up this one in plain-text. Not necessary for the base functionalty of the game, but useful if you ever wanted to look up what elements are made of.
• created_at and updated_at
  • The updated_at field is pretty much entirely useless, as the elements will never get updated, and the created_at field is also not necessary. It could be used to create some sort of global index to display when elements were discovered. (Could be a fun challenge for you?)

In order to make sure that only unique combinations are ever stored in the database it is important to create a key that is the same regardless of the order of the two elements. And I must say, I’m pretty pleased with the solution I came up with.

It is really simple, we put the names of the two elements inside of an array, trim the whitespace and turn them all into lower-case letters, and then sort the array alphabetically and join it together to a string. In the original project I also ended up base64 encoding the resulting string, which is also totally unecessary.

The resulting code looks something like this:

let id = [elemA, elemB].sort().join("").trim();

Then we just use this as the id of the newly inserted element. Then, for each incoming request to the element combination API endpoint, we generate the ID as seen above again, and check if it already exists inside of our database. And thats pretty much it!

Final thoughts

Overall I think this project was a fun learning experience for me, and I hope that you got something out of this as well. I also want to thank everyone on the support of the YouTube video!

Personally, I think that cloning existing projects is a good way of teaching yourself programming, as long as you never claim it as your own. It becomes much easier to work on something with a clear end-goal in mind. In this case, I mainly wanted to learn how the OpenAI API works.

I think there are some clear improvements to be made to this version. There are some issues when resizing the window, the drag & drop can feel a bit clunky, and there are some polishing steps missing that are present in the original, like a search, dark mode, …

But as a learning experience it works.

Thanks for reading!