And with that, let’s begin!
The game ideas
1. The reaction game
How the game works
The reaction game works as follows:
- The user clicks a button or some other form of input
- This input (or some other aspect of the user interface) changes colour to signify that the game has begun
- After a random amount of time; the input changes colour once more
- The user must click the input again as fast as they possibly can
The aim is to click the input as fast as possible and hence record a “faster” reaction time.
What you’ll need to do to build it
This game concept heavily revolves around timing methods, so you’ll be using
setTimeout a lot during the development of this game.
The timeout should be random, so the game doesn’t become too predictable and easy to time.
Triggering the start & stop of the game means you’ll need to effectively handle user input, also. And you’ll probably need to provide a mechanism to reset the game, too.
2. The memory game
What’s the memory game?
- The user is confronted with a grid of empty squares, let’s say there are 6 squares in the grid for now (3×2)
- A sequence is “flashed” to the user, so the squares illuminate in turn in a particular order or sequence
- The user must correctly replicate this sequence in order to pass the level
- Each level gets more difficult (longer sequences, faster flashing and so on)
So the memory game is all about recalling increasingly difficult sequences in turn to progress through the levels.
What tools you’ll need to utilize
This one relies on timing methods, too. However, the requirement is a bit more sophisticated as you’ll need to handle off/on states for the individual squares in the grid.
You’ll need an algorithm to produce a random sequence, whereby the difficult or complexity of this sequence can be controlled with different parameters.
As an example, a simple sequence may have 4 illuminations to replicate. The sequence may be traversed slowly.
A complex sequence may have 12 illuminations; and the illuminations may move more quickly. Making it harder to memorize or recollect the correct pattern.
You’ll need to cycle through these sequences (from easy to hard) as the player progresses through the levels.
3. The typing game
How the typing game should function
There are many possible permutations on this kind of game. I’ll outline one possible concept here:
- A word is presented in the middle of the screen
- The user must type out the word letter by letter
- On correctly typing a letter, the relevant letter in the UI should illuminate in some way
- On incorrect input; the remaining time should be decremented by 3 seconds or something similar
- The user would have 1 minute to enter in as many full words as possible
What you’ll need to do
Primarily, you’ll need to react to user input. This forms the basis of this game. Not only correct inputs, so when the user enters the expected letter correctly, but also incorrect inputs — so when the user enters any letter other than the next letter in the word.
Outside of this, you’ll need a dictionary of words (whereby one is selected at random for each turn of the game).
You’ll need to compare the user’s input with the displayed word, and then consequently handle the UI updates based on a correct or incorrect keystroke.
Alongside that, you’ll need to be actually timing the game. More specifically, you’ll need to terminate the game after 1 minute, making sure you’ve kept count of the number of correct words entered.
How the game works
This one’s a classic.
- The user is presented with some dashes (these represent letters in a randomly selected word)
- They must guess which letters appear in the word
- A correct guess would display the letter in the word (it is no longer obscured with a dash)
- An incorrect guess means the user loses a life
- The user must guess the word correctly before all of their lives have expired
What you’ll need
You’ll need a dictionary or collection of possible words for the user to guess from. You’ll then need to select one of these words at random.
Whilst the user guesses at the letters in the word; you’ll need to decrement their lives on incorrect guesses, but also monitor the state of the game so you can know when it’s over (ie. when the user has won).
This game revolves around managing user input as well as working with strings in general.
Edit: If you’re working with React in particular, be sure to check out our example Hangman game and accompanying tutorial!
5. Guess the colour
What’s this game?
- The user is presented with an RGB code eg.
255, 255, 0
- They must then pick what colour they think this code represents using an interactive colour picker
- The closer they get to the exact colour within the colour picker, the more points they are awarded
The game can also be played in reverse; so the user could be presented with the colour instead of the RGB code. They must then pick the appropriate RGB code to match this colour.
What you’ll need to do
You’ll need a nice colour-picker mechanism. Of course, there are existing libraries you can use for this. If you are feeling brave, however, you could also make your own.
Alongside this, you’ll need an effective mechanism to compare the expected answer with the user’s guess. Then allocate points based on this. Your algorithm will need to work consistently and always fairly award the appropriate amount of points based on how “close” the user’s guess actually was.
6. Tic tac toe (or noughts and crosses)
How this game is played
The rules of the game are as follows.
- There is a 9×9 grid
- One player is
x, the other is
- Each player must attempt to line up 3 of their counters (
o) in a line
- The line can be in any direction; vertical, horizontal or diagonal
When making this game, you could consider having a simple computerized opponent.
If not, you could cater towards 2 human players taking turns.
Tools you’ll be needing
There is no requirement for animation or timing or anything like that in this game.
You will, however, need to come up with a “turn-based” solution.
You’ll need to watch or monitor for the win condition with each passing turn until the game ends. This involves some simple logic. Your algorithm will need to be able to scan the board to look for a winning row in any direction every time the state of the game changes.
- There is a large grid
- There are some randomly planted “mines” hidden within this grid
- The user must find the mines and indicate their location with flags
- When the user clicks a square, the square will display a number, denoting how many mines are adjacent to this particular square
- If the user clicks on any of the mines, they lose, and the game is over
To build this game, you’ll need…
To start with, you’ll need some mechanism to generate the large grid. Then you’ll need to randomly place a specific number of mines.
From here, the main mechanism you’ll need to employ will be the display of the numerical values.
Again, you’ll need to track the winning state as well as the losing one.
8. Good old snake
How to play snake
Most of us are probably already familiar with snake. For clarities sake, though, let’s recap how it works.
- The user controls a “snake” amongst a grid of squares (or circles)
- They use the arrow keys to navigate the snake around the grid
- They must eat items (apple, pear, whatever it would be) in order to grow the snake
- As the snake grows, it becomes harder to contain within the grid
- The snake can collide with the walls as well as itself
- The aim is to grow the snake to be as long as possible
Skills and tools you’ll need to use
This game is different to the others in that utilizing animation becomes a bit more important.
It’s probably a good idea to use the
canvas API for this.
You’ll need to get comfortable with the basics of animation in this regard.
Once you have a suitably animated snake that can be controlled via user input (arrow keys) you’ll need to implement the other gameplay aspects as described.
A popular framework that I’ve personally used before would be Phaser — so this one in particular is recommended.
Other projects to work on
Hopefully you’ve found some game ideas you’d like to create for yourself!
Be sure to check back later for more articles like this one!