React Native Game

Introduction

I've never actually worked with native mobile applications. Being a React developer, I always wanted to give it a try when React Native came around. And this is what I'm doing now.

Motivation

I want to get more experienced with React Native, as I've only done a couple of very basic courses, and now I want to try something of my own.

Here's the repository, if you wanna check out my progress as I go.

The Idea

Basically I created one of those memory games where the computer tells you a sequence, and you have to repeat it in order to move to the next level. As you need to repeat it, hence the name: Repeet.

And here's the very first sketch:

Tech Stack

As it's my first try, I kept it safe, and used the technologies I'm most used to: React + Typescript, Redux, Styled Components. For the simplicity sake of this project, I used Expo to make things quicker.

Progress

Here are the main milestones accomplished:

Registering user clicks

After envisioning the whole idea and creating the basic design/layout, the first thing I've made was creating the game rules. Here you can see the clicks causing the state to change (terminal window on the left). Hopefully what you're gonna see there will be self-explanatory:

Making the computer side

Of course the player won't be looking at a terminal window to know what sequence should be played. Therefore, I've made the computer twinkle the randomly generated sequences. I also added the countdown component, as well as the remaining attempts indicator:

Score and progress bar

I recently added the top header, which basically shows the player's score (the back button's still missing).

Notice there's also a progress bar that indicates how many signs the player has got right on each round:

Game mode, multi-language, modals and incremental difficulty

I added the game mode feature, through which the user will be able to select the default mode (4 buttons) or advanced (6 buttons). The countdown also changes according to that config. At this point, there's a silly button at the home screen, which soon would be replaced by a config component.

The multi-language only supports English and Portuguese at the moment, and it's based on the OS defined language.

There's also an incremental difficulty mechanism that makes the game harder as the player advances to higher levels. It's based on points, and basically what it does is to change the user to a different tier, with a different delay time (in milliseconds):

The ideal UX is still a work in progress, so I'll likely tune up the values above.

I also gave the user the choice to quit a game, by clicking on the header back button, which opens a modal. When the player loses, the modal on the right is shown:

Configuration

Later I created the config screen, and added a fancy spinning cog icon to access it, at the top right. On the configuration screen, the player will be able to select different game mode combinations:

• Sound 🔊

• • Simply allowing the player to choose to whether or not the whole app will play sounds.

• Difficulty 📊

  • This determines how fast the game is, and how many attempts the player will have available (2 on hard, 5 on easy).

• Mode ⚙️

  • The default one has 4 buttons, whereas the advanced one has 6. The more, the harder to memorize.

• Shuffle 🔀

  • It's an extra layer of difficulty. If the player sets it on, the computer board signs order will change at every round. This way the player will have to focus exclusively on the colors, and not their positions.

• Blindfolded 🙈

  • This must be the hardest one, where the computer board is hidden, and the player will have to repeat the keys by their sound. In this mode, there's a quick training screen before the game starts, just so the player can have some time to get used to the key notes and how they sound.

Combine all of the configurations above, and you'll have many different possible ways of playing it.

Are you an expert? Try playing it on hard (fast paced), advanced (6 buttons) and shuffle. Or even harder: blindfolded (which will basically cancel the shuffle mode, as it doesn't matter where the "invisible keys" are).

Android Support

Adding it to Android was not as straightforward as I thought it'd be, but not rocket science either. It was just about adjusting and tweaking a few CSS issues here and there:

Here's a video so you can understand better the sound experience, specially in the blindfolded mode:

Cool, isn't it? Now players will be able to compete with their friends!

Soon I'll work on having multiple High Score screens, or have different section tabs, to separate the scores according to the category (by difficulty, mode, etc).

This is a work in progress, I'll post more updates soon. By the way, you may also check my simple project board on Github.

Questions?

Don't hesitate to contact me if you have any questions or comments, they are all very much appreciated!

Have fun!