Welcome to the Scratch Card Game, a simple yet engaging web-based game where you can test your luck by revealing hidden values just like a real scratch card! Developed using HTML, CSS, and JavaScript, this game provides an interactive scratch-off experience, allowing players to uncover randomized values hidden beneath a colorful, scratchable surface. Each session presents a unique set of values, and the excitement builds as you "scratch" to see if you’ve found three matching amounts to win.

With a clean and responsive design, the Scratch Card Game is visually appealing and easy to play on both desktop and mobile devices. The game’s dynamic functionality ensures smooth scratch-off animations, with instant feedback on your potential win. This project demonstrates how frontend web technologies can come together to create an enjoyable user experience, combining randomized elements, responsive layouts, and interactive effects for a truly entertaining web application.

You may also check this simple HTML, CSS and JavaScript project:

• Working Analog Clock
• Multiple Image Upload Preview
• Modern Transparent Login Form
• Cat Breed Details Generator
• Food Recipes Nutrition Facts

Features:

• Scratch-off Interaction: Users can use their mouse or touch to "scratch" a layer off a virtual card, revealing hidden values.
• Randomized Values: Each time the game loads, the values on the card are randomized to provide a unique experience.
• Win Detection: The game checks if three or more of the revealed values match, and displays a win message if successful.
• Responsive Design: The layout and interactions are optimized for both desktop and mobile devices.
• Dynamic Visuals: The scratchable surface includes a colorful gradient overlay for a visually appealing effect.

Technologies Used:

• HTML: Structures the content, including the game container and hidden values.
• CSS: Styles the game interface, providing a modern, clean look with a responsive layout and gradient backgrounds.
• JavaScript: Powers the game's functionality, including the randomization of values, scratch-off interaction, and win condition detection.

How to Use:

1. Load the Game: Open the game in a browser to reveal the scratch card interface.
2. Scratch to Reveal: Click and drag (or tap and swipe on touch devices) over the scratch card area to gradually reveal hidden values underneath the surface.
3. Check for a Win: Once all values are revealed, the game will display a message to inform you if you've won by matching three or more of the same values. If not, you’ll see a message encouraging you to try again!

Sample Screenshots of the Project:

Landing Page

Scratching Card (Win)

How to Run?

• Download the provided source code zip file.
• Extract the downloaded zip file.
• Open the html file and you are now ready to go!

Video Demonstration for Installation/Setup:

Conclusion: