How to Make a Simple Colour Matching Game Using HTML, CSS, and JavaScript.


Colour matching games are a fun and educational way for people of all ages to improve their colour recognition skills. In this blog post, I'll show you how to make a simple colour matching game using HTML, CSS, and JavaScript.

color matching game in javascript.

The game will have one question balloon and one board filled with many colourful balloons. The question balloon will have one of the colours from the board balloons. The board balloons' colour sequence will change when the page refreshes, so that players get a different colour sequence each time they play.

To play the game, players must click on the same colour balloon in the board as the question balloon. If they click on the right colour balloon, that balloon will fly away and disappear, and the question balloon's colour will change randomly from the remaining board balloons. If they click on the wrong colour balloon, the right colour balloon will show an indicator to the player that it is the correct balloon to click.

After all the balloons have been flown away or deleted by the player, the game will show an end screen with some text and a button to play again.

You can see demo and whole video tutorial below.

Video tutorial on colour matching game using html CSS and JavaScript.

JavaScript Color Matching Game With Balloons.

In this simple colour matching game, we going to use many functions and method of JavaScript like for Loop, sort(), Math.floor(), Math.random(), appendChild(), array, filter(), indexOf() etc.

  • Forloop for creating many balloons according to number of colours in array.
  • appendChild() method for adding created balloons in document or board.
  • sort() function for setting random sequence of array element (colour names).
  • Math.floor() and Math.random() methods for generating random number for selecting random colour name from array.
  • Filter() and indexOf() method for creating new array by comparing two arrays. Here we created new array with colours for question balloon colour. In this array we going to store colours which are not same in board balloon colours and deleted or freed balloon colours. So that question balloon gets the colour from remaining balloons colour from board after deleting one.

You’ll get final source code (commented) of this game below.

That’s it simple colour matching game is ready using html CSS and JavaScript.


This is a simple colour matching game that you can make using HTML, CSS, and JavaScript. It is a fun and educational game for people of all ages.

You can add more functionality or features like:
  • Adding background game music.
  • Balloon click sound.
  • Adding levels to it.
  • Adding timer for player to fly all balloons within some time.
  • You can add text inside balloons like numbers and create match the numbers game etc.

Thanks for reading this far.

Post a Comment


Share your thoughts.

Post a Comment (0)
To Top