In this video, you will learn how to create a balloon color matching game using JavaScript. This game is perfect for all ages and is a great way to practice color recognition and matching skills.
The player will be given a question balloon color and will need to free a balloon from the balloon box that matches the question balloon color. If the player clicks on the wrong balloon color, the game will guide them to the right color balloon.
This video is a step-by-step tutorial on how to create this game from scratch. You will learn how to create the balloons, generate the balloons with different colors and different color sequences (random colors sequence on refresh), detect when the player clicks on a balloon, free the balloon, and guide the player to the right color balloon if clicked on wrong one.
Timestamps:
00:00 - Demonstration of Color Matching Game.
02:01 - HTML
02:55 - CSS
08:30 - JavaScript
09:05 - Adding different colors for balloons.
13:05 - Creating new elements (balloons) with different colors using javascript.
22:55 - Sorting array in a random sequence.
25:00 - Checking on click if colors of both elements (balloon which is clicked from balloon box or board and the balloon given for showing color (question balloon).) are matching or not.
27:21 - If both the balloons are of same color then we fly the clicked balloon and change the color of question balloon.
45:15 - Else guide the player to right balloon to click.
For Source Code Visit 👇:
www.maketechstuff.com/
You may have to search ('game') on website.
Hash Tags:
#html #css #javascript #javascriptprojects #javascriptanimation #javascriptgame #maketechstuff #balloongame