# 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
Click the virtual machine below to start practicing