HTML, CSS & JavaScript Scratch Card Game Free Source Code

✨ Key Features

🎨 Modern UI & Design

• Premium purple gradient theme

• Glassmorphism UI with soft shadows

• Fixed card size (450 × 320px) for consistent layout

• Fully responsive on mobile, tablet, and desktop

• Clean, professional, minimalist design

🎯 Realistic Scratch Mechanics

• Canvas-based metallic scratch effect

• Supports mouse & touch (desktop + mobile)

• Progressive prize reveal while scratching

• Auto reveal at 50% scratch completion

• Large scratch radius for smooth interaction

🎊 Smooth Animations & Effects

• Elegant entrance animations

• Confetti celebration (100+ particles)

• Animated prize icon & glowing effects

• Fullscreen win modal popup

• 60fps smooth performance

💰 Reward System

• 7 pre-configured prize types

• Random prize generation on each load

• Custom prize icons, text, colors, and gradients

• Ready-to-integrate claim reward system

• Prize data stored for backend/API integration

🎭 User Experience

• Clear “How It Works” instructions

• Dynamic progress messages while scratching

• Multiple CTAs: Claim Reward / Try Again

• Seamless reset for replay

• Touch-friendly and mobile optimized

🛠️ Technical Details

• Single HTML file (CSS + JS embedded)

• Pure Vanilla JavaScript (no libraries)

• Well-commented & clean code structure

• Cross-browser compatible

• Lightweight (~35KB)

• Easy to embed in any website or CMS

🎯 Perfect For

• Promotional & marketing campaigns

• Loyalty & reward systems

• Coupon & voucher distribution

• Landing pages & lead generation

• E-commerce engagement

• Events, contests & giveaways

• Mobile apps (WebView compatible)

📦 What’s Included

• ✅ Complete index.html file

• ✅ 7 customizable prize configurations

• ✅ Fullscreen win modal

• ✅ Confetti animation system

• ✅ Responsive & mobile-ready layout

• ✅ Clean, well-documented code

⚙️ Easy Customization

• Change prizes from a simple JS array

• Update colors to match your brand

• Adjust card size & scratch sensitivity

• Plug into APIs, analytics, or payment systems

• Add sound effects, tracking, or backend validation

🚀 Quick Start

1. Download the file

2. Open in any browser

3. Customize prizes & colors

4. Deploy instantly

No build tools. No setup. No dependencies.

📋 Quick Info

• Type: Interactive Web Game / Reward System

• Tech: HTML5 Canvas, CSS3, JavaScript

• File: Single HTML

• Size: ~6.7 kB

• Dependencies: None

• Mobile Support: iOS & Android

• Browser Support: All modern browsers

• Version: 1.0

• Last Updated: December 2025