Sand Drop - HTML5 PUZZLE GAME

Sand Drop – HTML5 Hybrid Puzzle Game

Sand Drop is not just another block-stacking game. It is a revolutionary hybrid that fuses the strategic challenge of classic arcade puzzles with the organic flow of falling-sand physics. Watch as crystalline blocks fall into place, shatter into individual sand cells, and cascade across the screen with realistic momentum.

Built with a neon-crystal aesthetic and optimized for both desktop and mobile, Sand Drop delivers a visually dynamic and satisfying puzzle experience. Whether you are a developer looking for a ready-to-deploy product or a player seeking a fresh challenge, Sand Drop offers deep mechanics and polished visual effects.

Live Demo | Watch Trailer

What’s Included

• Complete Source Code: Fully commented HTML, CSS, and JavaScript files.
• Game Assets: All visuals are procedurally generated in code. Includes placeholder sound effects (.mp3) for placement, line clear, and background music.
• Comprehensive Documentation: Detailed documentation covering installation, customization, architecture, and troubleshooting.
• License File: Regular and Extended license terms as per Envato requirements.

Key Features

Core Gameplay & Mechanics

• Hybrid Physics Engine: Combines tetromino-style falling blocks with granular sand physics. Blocks shatter into individual cells that pile and slide naturally.
• Strategic Depth: Includes 7 unique crystal shapes (I, O, T, L, J, S, Z) with 4 rotations each. Create full lines of connected, same-colored crystals.
• Innovative Line Clear System: Lines clear by connecting identical crystals from the left edge to the right edge using a flood-fill algorithm.
• Progressive Difficulty: Falling speed increases and duplicate color probability rises as you clear lines.
• Persistent Progression: Game state is automatically saved using localStorage, allowing session continuation anytime.

Visual & Audio Polish

• Dynamic Crystal Rendering: Code-generated crystal textures with gradient shading and edge highlights.
• Real-Time Glow Effects: Dual-buffer rendering system creates soft neon glow effects using ADD blending.
• Immersive Feedback: Screen shake effects and crisp sound design enhance block placement and line clears.
• Responsive UI: CSS flexbox-based interface adapts seamlessly across desktop and mobile devices.

Developer & Customization Friendly

• Centralized CONFIG Object: All core parameters such as grid size (100×160), block size, falling speed, colors, and visual effects are controlled from a single configuration object.
• Well-Documented Code: JSDoc comments explain classes, functions, and game state structure clearly.
• Touch & Keyboard Support: Arrow key controls for desktop and on-screen touch controls for mobile devices.
• Modular Architecture: Clean separation between rendering, physics, and game logic systems.
• No External Visual Assets: All textures and glow effects are generated procedurally in code.

Code Structure Overview

• CONFIG Object: Central control for balance and visual parameters.
• gameState Object: Stores grid matrix, score, and runtime data.
• Tetromino Class: Handles piece rotation, rendering, textures, and glow generation.
• Physics System: Governs falling, diagonal sliding, and rest states of sand cells.
• Flood-Fill Line Detection: Detects full connections from left to right edge.
• Rendering Pipeline: Separate buffers for base rendering and glow, combined with additive blending.
• Save/Load System: Uses localStorage to persist game state and progress.

UI & Screens

1. Splash Screen: Animated logo with loading bar.
2. Home Screen: Play and Continue buttons, audio sliders, and statistics display.
3. Game Screen:
   • Score, Lines, and Timer display
   • Main gameplay canvas
   • Next piece preview
   • Touch controls for mobile
   • Level progress bar
   • Pause and Game Over overlays

Easy Customization

Modify the CONFIG object to change grid size, speed, duplicate color probability, color palette, glow intensity, and screen shake strength. All key gameplay and visual parameters are centralized for quick adjustments.

Technical Requirements

• Browsers: Chrome, Firefox, Safari, Edge (latest two versions).
• Devices: Desktop, Laptop, Tablet, Mobile (iOS and Android).
• Dependencies: p5.js loaded via CDN for graphics and sound. No additional libraries required.

License & Support

• Regular License: Suitable for one free-to-play project (personal or client).
• Extended License: Required for paid end-user projects such as subscriptions or premium apps.
• Support: Use the CodeCanyon support system for assistance and technical questions.

Frequently Asked Questions

Can I change the grid size for performance?
Yes. Adjust GRID_WIDTH and GRID_HEIGHT inside the CONFIG object.

Can I customize the colors?
Yes. Modify the HUE_VALUES array inside CONFIG.COLORS with your preferred hue values (0–360).

Do I need a server to run the game?
No. You can open index.html locally for testing or upload the files to any standard web hosting service.

Why does sound not play on some mobile devices?
Mobile browsers require user interaction before enabling audio. Tap any button or interact with the screen after loading to activate sound.