Search justacoding.blog. [Enter] to search. Click anywhere to close.

October 24th, 2021

8 Simple JavaScript Games For Beginners

Here’s a list of 8 simple JavaScript games for beginners to create.

When first starting out with JavaScript, it’s helpful to have an interesting project to focus on. Something that’s not too difficult or too time-consuming, but also not too straightforward.

This selection of simple JavaScript games is ideal for beginners because the games are fun to build and universally recognizable.

You don’t need any special tooling or JavaScript game engines to create these games, you’ll just need a browser and a basic knowledge in JavaScript.

The JavaScript games are simple 2d games and animation is rarely required; this makes them suitable projects for beginners or entry-level developers to focus on.

And with that, let’s begin!

The game ideas

The JavaScript game ideas in this list have been ranked (roughly) in order of complexity to create.

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.

javascript reaction game
The button or input has 3 possible states

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 idea behind this JavaScript game idea goes something like this:

  • 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.

javascript timing game
Recall the correct sequence – the order in which the squares illuminate

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
simple javascript typing game
Type through as many words as you possibly can within the allotted time!

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.

4. Hangman

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
simple javascript hangman game
The classic literary game – hangman

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.

rgb colour picker game
What’s the RGB code for 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

Here’s an old school one that should be easy enough to make in JavaScript.

The rules of the game are as follows.

  • There is a 9×9 grid
  • One player is x, the other is o
  • Each player must attempt to line up 3 of their counters (x or 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.

javascript noughts and crosses
Tic-tac-toe, also known as noughts and crosses!

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.

7. Minesweeper

This JavaScript game idea is all about rebuilding a classic!

What’s minesweeper?

  • 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
javascript minesweeper
Watch out for those mines!

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
javascript snake
Collect the pieces of fruit to grow the snake

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.

These are simple JavaScript games, I was looking for something more complex?

These JavaScript games ideas are all about simple, 2d games that are fairly straightforward to recreate.

That’s why they are great exercises for beginner or entry-level JavaScript developers to consider.

If you’re more interested in advanced JavaScript games development, however, I’d recommend taking a look at this list of JavaScript game engines. Game engines like these ones are a core tool to acquaint yourself with if you’re specifically interested in using JavaScript for games.

A popular framework that I’ve personally used before would be Phaser — so this one in particular is recommended.

What are JavaScript game engines?

Think of a JavaScript game engine as sort of like a framework that can be used to create games. The engine abstracts a lot of complex functionalities to help simplify the development process in general.

There are many frameworks out there which you can use to create JavaScript games, both 2d and 3d.

It’s well worth taking a look at those frameworks and engines once you’re comfortable with the JavaScript fundamentals.

Other projects to work on

Firstly, I hope you’ve enjoyed this list of simple JavaScript games for beginners.

Hopefully you’ve found some game ideas you’d like to create for yourself!

With regards to other resources, justacoding.blog has a JavaScript category that may be of interest.

Be sure to check back later for more articles like this one!

Thanks for reading!

Have any questions? Ping me over at @justacodingblog
← Back to blog