Build a Scratch Card Web Game

# Introduction

In this project, we will guide you through the process of creating a simple web-based Scratch Card game. This game allows users to scratch off a gray overlay to reveal an underlying image, which will either be a "winner" or a "try again" message. We will use HTML for the structure, CSS for styling, and JavaScript for interactivity.

## 👀 Preview

<video src="https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/web/project-scratch-card-game/lab-1/assets/scratch_card.mp4" width="100%" autoplay loop muted></video>

## 🎯 Tasks

In this project, you will learn:

- How to set up a basic web project with HTML, CSS, and JavaScript
- How to manipulate the HTML5 canvas to create interactive effects
- How to use JavaScript to handle user interactions such as mouse clicks and movements
- How to work with images in web development, including loading and displaying them dynamically
- How to implement a simple game logic that randomly decides the outcome for the user

## 🏆 Achievements

After completing this project, you will be able to:

- Demonstrate a solid understanding of the HTML5 canvas and its capabilities for web-based games and interactive applications
- Showcase proficiency in using JavaScript to create dynamic content and respond to user inputs
- Integrate various web technologies to create a complete and functional web application
- Design a simple yet engaging user interface for a web-based game
- Apply basic game development concepts such as random outcomes and user interaction