Memory Game

I’ve been using LLMs more as a helpful tool for coding. Recently, I installed Cursor, an IDE that uses LLMs to help with coding, to try it out and have felt a productivity boost by using it.

My daughter and I were playing a memory game where there’s pairs of cards and you have to find the pairs. My daughter told me that she would like to play this game but with cards of pictures of her family and friends. Instead of printing out cards, I thought it would be fun to build a digital version of the game. We decided to build it during the weekend. I also decided to use Cursor and to try to stick to natural language as much as possible. This way, my daughter could also participate in the process.

You can try out the final version of the game here. If you want to see the code, you can check it out here.

Initial Prototype

I first started with a simple prompt and asked Cursor to ask for clarifying questions (if any). It did a great job clarifying requirements and even suggested a few ideas. Here’s the conversation:

Me: We are going to create a front end only app (html).

The app is a memory game. Where in each player’s turn, they have to choose two cards that are upside down and turn the right side up. If the cards match, they take the cards with them and 1 point is added for them. Additionally, they can keep going until they choose a pair of cards that don’t match. The different thing here is that the player can upload their own photos to display in the game.

You start by clicking the “Start game” button. Then, you add the players by adding the name of each player. Then, you have an upload button to upload a list of photos to the game (minimum 10 photos). Then, the game starts by placing the pairs of photos in a random order.

Make sure that the photos aren’t displayed in a grid or table like structure (visibly). We want them to look as if they were on a table and not very neat (some slightly turned, etc).

Do you have any questions?

Cursor: I’ll help you create this memory game! Let me clarify a few points to ensure I understand the requirements correctly: Game Flow:

  • Click “Start Game”
  • Add player names (one by one?)
  • Upload photos (minimum 10)
  • Game begins with randomly placed cards

Card Layout:

  • Cards should look scattered/random on the screen
  • Not in a grid structure
  • Cards should have slight rotations to look more natural

Game Mechanics:

  • Players take turns
  • Player can continue if they find a match
  • Each match = 1 point

Questions I have:

  • Should there be a maximum number of players?
  • Should there be a maximum number of photos that can be uploaded?
  • Would you like the cards to have a specific back design when they’re face down?
  • Should there be any animations when cards are flipped?
  • Do you want to include any sound effects (for matches, flips, etc.)?
  • Should we add a game-end condition (when all pairs are found) with a winner announcement?
  • What should be the size of the cards on screen?
  • Would you like to include any additional features like:
  • Score display
  • Current player indicator
  • Timer
  • Restart game option

Please let me know your preferences for these points, and I can start creating the code with your specifications!

I think it did a great job understanding the requirements and then asking clarifying questions. After clarifying the questions, I asked Cursor to proceed to generate the code. After a few seconds, we had a working prototype. This is where the fun began since my daughter started to get excited and started to contribute ideas for improvements.

We moved things around for around 30 minutes and then, our first version was ready. One problem was that this was running on my machine and she had to load it in her iPad using my IP address. This was suboptimal since we needed to be on the same network and my machine needed to be on and running the server all the time. Additionally, the app wouldn’t work offline (i.e. while on a plane).

PWA v1

To address this, I asked Cursor to convert the app into a progressive web app (PWA). This would allow the app to be installed on the home screen of her iPad and work offline.

Cursor generated the code for the manifest and service worker. The manifest had links to icons that didn’t exist yet so we asked Cursor to generate an icon for the app. Cursor generated a pretty decent SVG, but we had to convert it manually to a PNG (I’m sure that we could’ve asked Cursor to write a script to do it for us, but I didn’t want to distract us from the fun).

We finally had an app with a service worker. We tried loading it on the iPad and it loaded, but then when I turned off my server, the app stopper working. The issue was that PWAs need to be served over HTTPS.

Netlify to the rescue

I had heard great things about Netlify, never got a chance to try it out. I thought it would be a good fit for this project since it would allow us to serve the app over HTTPS and would remove the need to have my machine running all the time. I pushed my code to Github and then deployed it to Netlify. The process was very straightforward and I was able to get the app running in a few minutes (even with my own domain). After this, I was able to install the app on my daughter’s iPad and it worked offline.

Working memory game app

Service worker issues

After a few games, we noticed a few bugs that we wanted to fix. We asked Cursor and it took care of them in a few iterations. However, the PWA code that Cursor generated led to our app to be cached forever. This means that the bug fixes were not being reflected in the app.

PWA v2

I asked Cursor to generate a new service worker that checks if there’s a new version of the app and prompts the user to update. With this change, we had a fully working app that we could install on our iPad and play offline.

Improvements

Alhtough the app works, I think that there’s still a lot of room for improvement. Even though Cursor generated working code, I think that the aesthetics of the app could be improved. I also think that there’s a lot of boilerplate code that could be removed.

I want to try out the game!

If you want to try out the game, you are in luck! I’ve deployed it to the following URL: https://memory-game.nicolasmesa.co/

Don’t worry, all of the photos are local (we don’t upload them anywhere) and they’re gone once you refresh the page.

I want to see the code!

You can check out the code for the game here. Note that I didn’t write any of it. We simply provided the requirements and guided Cursor to generate the code.

Conclusion

I really enjoyed building this with my daughter. It was a great way to bond and spend time together. I also think that it’s a great way to introduce her to the world of programming and how to iteratively build things. Finally, we’ve been playing the game before going to bed and it’s been a lot of fun!