How to Make a Simple Colour Matching Game Using HTML, CSS, and JavaScript.
Author -
Maketechstuff
November 09, 2023
0
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.
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.
<script>
let board = document.querySelector(".board");
let question = document.querySelector(".question");
let question_after = document.querySelector(".question_after");
// Different colors for balloons.
let colors_array = ["red", "yellow", "blue", "mediumvioletred", "violet", "orange", "darkblue", "pink", "brown", "darkviolet", "deepskyblue", "sandybrown", "hotpink", "palegreen", "yellowgreen"];
// Randomly sorting colors_array. So that we can get different color sequence when page refresh.
colors_array.sort(function (a, b) { return Math.random() - 0.5 });
// For storing colors from colors_array. We going to use this arry colors to fill in created balloons in board. This array colors are display in board.
let current_balloon_colors = [];
// This i variable is for getting the colors from current_balloon_colors array to add in created balloons.
let i = 0;
// For storing deleted balloon colors.
let deleted_ballon_colors = [];
// For storing the colors which is present in board after deleting or freed the balloons. Means storing the colors which are not common in current_balloon_colors array and deleted_ballon_colors array colors.
let updated_balloon_colors = [];
// Random number for getting random colors from array for question balloon.
let random_numbers = "";
let random_numbers_2 = "";
// Creating balloons. Remember to form less or equal balloons according to colors_array length.
for (let c = 0; c < colors_array.length; c++) {
// Storing the colors in current_balloon_colors array. We going to show this current_balloon_colors array colors in board (game board).
current_balloon_colors.push(colors_array[c]);
// console.log(current_balloon_colors);
i = c;
// declaring function to create balloon and adding different colors in it.
add_balloons();
// Creating random number for getting random colors from above current_balloon_colors array colors for question balloon.
random_numbers_2 = Math.floor(Math.random() * current_balloon_colors.length);
question.style.backgroundColor = current_balloon_colors[random_numbers_2];
question_after.style.borderBottomColor = current_balloon_colors[random_numbers_2];
}
function add_balloons() {
let balloon = document.createElement("div");
let balloon_after = document.createElement("div");
balloon.classList.add("balloon");
balloon_after.classList.add("balloon_after");
balloon.style.backgroundColor = current_balloon_colors[i];
balloon_after.style.borderBottomColor = current_balloon_colors[i];
balloon.appendChild(balloon_after);
board.appendChild(balloon);
let balloons = document.querySelectorAll(".balloon");
for (let b = 0; b < balloons.length; b++) {
const element = balloons[b];
// Run function on click on each balloon with class balloon.
element.onclick = function () {
// Checking if clicked balloon color in board and question balloon color is same or not.
// If same then we remove the clicked balloon color and change the color of question balloon color.
// If not same then we guide user with right color balloon to click.
if (question.style.backgroundColor === element.style.backgroundColor) {
// Adding animation.
element.style.transform = "translateY(-200px)";
element.style.opacity = "0";
element.style.transition = "1s";
setTimeout(() => {
element.style.width = "0";
element.style.height = "0";
element.style.margin = "0";
}, 1000);
setTimeout(() => {
// Deleting the right clicked balloon according to question balloon color.
element.remove();
// Showing end screen after all the balloons are free or deleted.
if(board.innerHTML === ""){
board.innerHTML = `<div class="end_screen"><p>Well Done!</p><button class="button">Play Again</button></div>`;
let button = document.querySelector(".button");
button.onclick = function(){
window.location.reload();
}
}
}, 2000);
// Adding deleted balloon to deleted_ballon_colors array.
deleted_ballon_colors.push(question.style.backgroundColor);
// Adding colors to updated_balloon_colors which are not same in deleted_ballon_colors array and current_balloon_colors array.
// Means we get the current balloon colors after deleting the balloon.
// From this updated_balloon_colors array we can take the random color to show in question balloon after deleting the previous color balloon.
// So basically this is for question balloon. To show another color from remaining color in board.
updated_balloon_colors = current_balloon_colors.filter(function(current_value){return deleted_ballon_colors.indexOf(current_value) == -1});
// Getting random number to get random color from updated_balloon_colors array.
random_numbers = Math.floor(Math.random() * updated_balloon_colors.length);
question.style.backgroundColor = updated_balloon_colors[random_numbers];
question_after.style.borderBottomColor = updated_balloon_colors[random_numbers];
} else {
// If user clicked on wrong balloon (means not clicked on the same color as question balloon has). Then guide user with right color balloon to click according to question balloon color.
for (let g = 0; g < current_balloon_colors.length; g++) {
const element = current_balloon_colors[g];
if(question.style.backgroundColor === element){
balloons[g].classList.add("active");
setTimeout(() => {
balloons[g].classList.remove("active");
}, 2000);
}
}
}
}
}
}
</script>
That’s it simple colour matching game is ready using html CSS and JavaScript.
Conclusion:
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.
Share your thoughts.