Ducks

A Memory Game that'll make you Quack.

Ducks is a web-based memory game that is all about finding the matching pair of rubber ducks, each of which is full of personality and character. The game allows for single-player gameplay, or against the computer, in a test of memory skills.

It uses simple and organised design so as to not distract the already hyper-focused players, and a calming blue and white colour scheme that allows for the ducks to stand out. A duck gallery was also drafted for users to learn more about the ducks, but was not fully programmed as it was not necessary to the gameplay.

Above demonstrates the Single Player gameplay for ducks. The user keeps turning cards over, matching the pairs of ducks, with the overall goal of clearing all the cards in as little turns as possible. Each card has been given plenty of life with hover effects and flip animations to enhance the user's experience.

The player can also compete against the computer, where the winner is whoever matches the most cards. The computer is actually programmed to replicate human memory capacity (more in the Designer's Notes below), which means it is possible to win, but it is definitely challenging. The video above is a timelapse of how I was absolutely destroyed by the computer in the game of memory.

'Ducks - Memory' can be played here.

Designer's Notes

Ducks Memory was a passion project taken on to test my Javascript skills. The UI design for both the desktop and mobile was done in Adobe Illustrator, and recreated properly for the web using HTML & CSS. The whole game is brought to life with Javascript, especially the computer's play method.

Below is the algorithm that was drafted as a reference to aid the programming of the computer's memory capacity and gameplay behaviour. To summarise, every card that is flipped over is added to the CPU's memory, with a countdown of how many turns ago. Over the course of the game, the countdown decreases until 0, which is when the CPU forgets that particular card. One the CPU's turn, it first checks its memory. If there is a pair of cards in its memory, it will flip them over. Otherwise, it will flip one random card, and try to pair it with another in its memory.

As for the collection of these little ducklings, all of them were 3D modelled in Blender and rendered as toons / still images as that's how they were best displayed in the game.

Posted on Nov 6, 2023

More by Ansaar

View profile