Funnily, the inspiration arose when we we noticed the label of coloured circles on the back of a bag of chips. When we saw the sequence of circles, the image is clear to our eyes. However, the moment we diverted our attention from the circles and tried to remember the sequence of the colors, we immediately lost our track of memory. In the market, there exists lots of brain teaser games and apps where the users are tested on their memories. However, these games usually come in the form of shapes, different objects such as cards, daily items, fruits, and most frequently, numbers. It was odd that hardly any memory games were associated with colors, and more deeply, different shades of the same color. When we try to memorize a list of objects, we often associate words with each object to help. However, how do we associate words with colors? Of course, it would be simple to memorize a sequence of basic colors with their corresponding words, but what if the shades of the same color are so close or similar that we often use the same word to categorize the two different shades of colors? How would our brain react to such challenge and solve the problem? What is the limit of our memory? How much more challenging is color memory compared to other objects? That is what we are trying to explore through this game. We want to challenge the users to find their own ways through challenging themselves to establish their own ways of memorization techniques.

What it does

Tinted Memories is a web based colour memory game that challenges the user's reaction speed, memory as well as sensitivity to colours. In each round, the user is provided with a sequence of coloured squares and the goal is to memorize the sequence of colours and being able to select the right colours from the colour pool provided and reform the sequence in order. As the level increases, the length of the sequence also increases, and the shades of the colours will become closer and closer to each other to become more challenging!

How we built it

We built it using JavaScript, CSS and HTML. We first designed a basic web page look, and planned out the basic functions of the games as well as the stages, buttons. Then, we searched for the colour schemes and imported them into our JavaScript program. After that, we implemented the basic functions in JavaScript and designed the webpage using HTML and CSS.

Challenges we ran into

We ran into many syntax challenges with all three languages. For example, when we tried to layout five circles in a row, we could not figure out syntax error that made the circles unable to align in the center. We tested several ways to fix the problem through research. At first, we used flex containers. We tried to justify space, however we could not detect a difference. We then implemented several other ways and eventually decided to use span to create the shapes and align them in the center. In JavaScript, we encountered several problems as well. As the colours imported were in hexadecimal digit, with # sign at the beginning, it was treated as an id sign instead of a variable.

Accomplishments that we're proud of

We managed to make something from scratch to a complete prototype of a web game, which is a new experience for each of us. Firstly, we are proud of our ideas as it has rarely been done before. It is a game that is not only entertaining, but can also help users train their ability to memorize and raise their sensibility to colours. Secondly, we are proud of the visual presentation of our web game which we believe the users will find very soothing to look at. Furthermore, we are very satisfied with the collaboration in the team. Instead of working individually on our own tasks, we were able to come as one and assist each other to finding solutions and provide suggestions. Last but not least, we are extremely proud of our improvement in debugging and not giving up! It was indeed a tough process being constantly struck by the disappointment that the code does not work, however we stayed till the very end and fixed it all!

What we learned

We learned a lot about integrating JavaScript with HTML and CSS. In HTML and CSS, we learned about how to implement flex containers, how to align and centre the flex containers and we found ways to transition into different stages of the game on the same webpage through the use of classes to sort the elements, and hide them from the user when they are not needed.

What's next for Tinted Memories

We're hoping to turn it into a mobile app in the future, and implement more and harder levels, such as longer sequence to memorize and closer shades of the same colour in the sequence and choice pool.

How to run Tinted Memories

Clone the repository, and then run the html website on local desktop.

Built With

Share this project: