Animal Crossing Memory Game

This is a memory card game inspired by Animal Crossing. Players must click on every unique villager card, with the cards shuffling after each selection, testing players' memory and observation skills.

Key features:

High-score keeping
Dynamic cards from External API
Dedicated proxy server with caching
Durstenfeld shuffle implementation

Homepage preview of Animal Crossing Memory Game

Why this project?

My motivation for this project was to practice building a React application, and making calls to an external API using the useEffect hook. I also wanted to gain confidence with React directory architecture, cohesive colour palettes, and Figma design skills. Later into the project I expanded the project scope to practice creating a proxy server to mask API calls. The original idea for the project came from The Odin Project, which provided the foundation for its scope and direction.

How did you do it?

React

Cloudflare

Nookipedia API

HTML

CSS

Theme and Styling

First of all I needed a theme for the game and after browsing through some APIs I decided on Animal Crossing with the Nookipedia API.

I based the colour scheme and fonts for the site off of this screen grab from the actual Animal Crossing series, and villiagers have their nameplace background and text colours taken straight from the game.

Animal Crossing cafe menu design minigame showcasing colours and fonts used in the page design

Proxy Server

This app has no backend so I needed a way to mask API calls from the user's browser so I decided to implement a proxy server using a Cloudflare Worker.

On loading, the app queries the proxy server which will either make the api request to Nookipedia, or if a previous request was made in the last day the cached results are returned instead. Then a random selection of 12 villagers are selected from that using a Durstenfeld Shuffle.

Diagram showing a Memory Card Game connecting to the Nookipedia API through a Cloudflare Worker Proxy

Since the worker is a free-tier service, it can have significant startup time if not called recently. To avoid long waits, the app includes default villager data to be displayed as a fallback.

Memory Card Game card grid using the fallback villagers

Deployment

As a static app, it's deployed on a Cloudflare pages instance.

Where can I see it?

Visit the page