Gem Drift – HTML5 Sliding Puzzle Game

One swipe. One plan. Can you reach the golden gate?

Gem Drift is an original sliding puzzle game built around a simple but challenging mechanic: swipe to move the ball, and it keeps sliding until it hits a wall. Plan every move carefully, collect the gem, avoid deadly spikes, use linked portals, and finish each level by stopping on the golden gate.

Featuring 100 handcrafted levels across 10 themed chapters, solver-checked puzzles, minimum-swipe par targets, smooth animations, and mobile-first controls, Gem Drift delivers a complete puzzle game experience for browsers and mobile devices.

Built with plain HTML, CSS, and JavaScript, the game requires no third-party libraries or build process. It includes an installable Progressive Web App (PWA), offline support, and a Capacitor project for buyers who want to build native Android and iOS applications.

Game Features

Original sliding mechanic: The ball continues moving until it reaches a wall, making every swipe a strategic decision.
100 puzzle levels: Explore 10 themed chapters, each with its own visual identity.
Solver-checked puzzles: Every level is checked by a solver for a valid solution.
Minimum-swipe par: Each level includes a reported optimal swipe target and a three-star rating system.
Interactive obstacles: Navigate walls and deadly spikes, collect gems, and use linked portal pairs.
Helpful hints: Reveal the shortest next swipe when you need assistance.
Unlimited undo: Reverse moves and experiment with different strategies.
Quick restart: Reset a level and try a new approach.
Polished animations: Enjoy smooth movement, trails, squash-and-stretch effects, particles, and celebratory confetti.
Generated audio: Sound effects are created in real time without bundled audio files.
Android vibration: Vibration feedback on supported Android devices.
Theme options: Choose dark, light, or automatic appearance.
Logo customisation: Select from six logo designs in Settings, including the browser tab icon.
Local save system: Save progress, earned stars, and settings on the device.
No ads or tracking: No advertising, analytics tracking, or network requests are included, as described.

10 Themed Chapters

Explore a collection of colourful environments as the puzzles progress through different themes.

Glacier
Aurora
Ember
Orchard
Dune
Lagoon
Neon
Candy
Void
Sunlit

How to Play

Swipe in the direction you want the ball to move.
The ball slides until it encounters a wall or another supported stopping condition.
Collect the required gem while avoiding deadly spikes.
Use linked portals to navigate the puzzle board.
Plan the fewest possible swipes to reach the golden gate.
Earn up to three stars by meeting the level’s scoring target.

Mobile-First Controls

Swipe controls for touchscreens.
Arrow-key controls for keyboard users.
WASD keyboard support.
Responsive layouts for different screen sizes.
Portrait and landscape orientation support.
Safe-area handling for devices with display notches.
Touch-focused behaviour designed to prevent unwanted pinch-zoom and pull-to-refresh interactions.

Progressive Web App and Offline Support

Gem Drift includes the files needed for an installable Progressive Web App, allowing players to add the game to their home screen on compatible devices.

Web app manifest.
Service worker and offline caching.
Home-screen icons for supported Android and iPhone experiences.
Responsive browser gameplay.
Local progress and settings storage.
No external fonts, images, or audio assets required by the game.

Note: Reliable PWA installation and service-worker functionality normally require HTTPS or a supported local development environment. Offline availability depends on successful caching of the required application files.

Build Android and iOS Apps

The download includes a ready-to-configure Capacitor project for packaging Gem Drift as an Android or iOS application.

Included native-wrapper project.
Android project workflow using Android Studio.
iOS project workflow using Xcode on a Mac.
Guidance for configuring app identity, icons, and branding.
Build and signing workflow for store submission.

The included project provides a starting point for native packaging. Buyers must configure the required SDKs, build the application, test it on target devices, and sign and publish it using their own developer accounts. Store approval is not guaranteed.

Easy Customisation

Adapt the game to your brand or project without needing a complicated build system.

Central configuration: Edit config.js to customise text, colours, chapters, level count, difficulty progression, and hint settings.
CSS variables: Adjust the visual theme and colour palette.
Branding guide: Follow the annotated documentation for changing the logo, game name, icons, and in-game objects.
Readable source: Work directly with the HTML, CSS, and JavaScript files.
Flexible deployment: Deploy to a compatible web host or embed the game in an iframe.

Technical Details

Technology: HTML5, CSS, and vanilla JavaScript.
Dependencies: No third-party JavaScript libraries are required, according to the supplied project description.
Build process: No frontend build step required.
Browser support: Modern browsers with the required JavaScript and web platform features.
Deployment: Local folder, web hosting, or iframe embedding, subject to browser security and hosting requirements.
Mobile packaging: Capacitor project for Android and iOS.

Included in the Download

game/ – Playable game source and icons.
documentation/ – HTML documentation and annotated branding guide.
native-wrapper/ – Capacitor project for Android and iOS app builds.
README.txt – Project overview and setup information.

Requirements

A modern web browser for browser-based gameplay.
A compatible web host for online deployment.
Android Studio and the required Android SDK for Android app builds.
A Mac with Xcode and the required Apple development tools for iOS app builds.

Credits and Assets

All game code, graphics, icons, and generated sounds are described as original assets created for Gem Drift. No third-party assets are included, according to the supplied project information.

Documentation and Support

HTML documentation is included to help with installation, customisation, branding, and mobile app packaging. Review the documentation before making modifications or requesting assistance.

Important Information

Native Android and iOS applications must be built and signed by the buyer.
App store developer accounts and any associated fees are not included.
Actual browser compatibility, offline behaviour, and native-wrapper functionality should be verified on target devices before release.
Minimum-swipe par values should be validated against the included solver and level data before advertising them as mathematically optimal.

Gem Drift | Ice Sliding Puzzle Game