Slide Escape is a whole, ready-to-sell HTML5 sliding-block puzzle constructed totally in vanilla HTML5, CSS3, and vanilla JavaScript — no engine, no construct step, no exterior libraries. Open index.html immediately, or add the folder to any host, and it runs.
Gamers drag particular person blocks alongside their axes (horizontal blocks slide left/proper, vertical blocks slide up/down) to clear a path for one or two key blocks to succeed in their glowing exit slots. A heat wood world – 500 solver-verified puzzles throughout three issue tiers, twin‑key simple ranges, smooth wooden‑grain UI, and a each day problem – offers the puzzle actual depth with out a single exterior picture file.
Each visible – icons, HUD, board surroundings, exit slots – is hand‑drawn in code (inline SVG + pure CSS), so there are not any picture information or icon packs to license. The show fonts (Fraunces and Work Sans) are loaded through the Google Fonts CDN (fonts.googleapis.com) – they aren’t bundled regionally. An web connection is required on the primary go to to fetch them from the CDN; with out one, the browser falls again to a default system font and the sport nonetheless runs usually.
Methods to Play
Slide a block – drag it alongside its axis (horizontal ⇄ or vertical ⇅). Clear the trail so that each key block slides flush in opposition to its matching exit wall (proper, left, high, or backside). On twin‑key ranges, each keys should escape. The transfer counter tracks your effectivity – fewer strikes earn extra stars.
Core Gameplay
- 500 solver-verified ranges throughout 3 issue tiers:
- Straightforward (medium) – twin‑key puzzles with a beneficiant trace price range (3 hints).
- Onerous – single‑key puzzles, extra complicated block preparations (2 hints).
- Knowledgeable – single‑key puzzles with minimal trace assist (1 trace).
- Drag & slide controls – contact and mouse each work; blocks solely transfer alongside their axis and cease when blocked.
- 1–3 star score per stage primarily based on transfer effectivity vs. the extent’s minimal transfer depend.
- Undo – step again via your strikes one by one.
- Hints – faucet the trace button to focus on the following block to maneuver and present a directional arrow;
restricted per issue. - Exit slots – every key block has a devoted exit aspect; glow suggestions tells you when a secret’s
accurately positioned.
Development & Replayability
- Star-based development – unlock the following stage by incomes at the very least 1 star on the earlier one.
- Day by day Problem – a contemporary seeded stage on daily basis; completion resets at midnight native time and exhibits a countdown.
- Persistent progress – star assortment, each day completion standing, and sound choice are saved
throughlocalStorage. - Synthesized audio – wooden‑block “thock” on slide, nice chime on win, and lightweight UI clicks – all generated with WebAudio, no exterior information.
- Pause menu – resume, restart, or return to the foyer at any time.
Visible Presentation
- Wealthy wooden‑grain & brass theme – heat, tactile aesthetic with delicate shimmer animations.
- 100% code-drawn visuals – inline SVG icons, pure CSS wooden‑grain patterns, and customized brass accents; no picture information.
- Google Fonts typefaces (Fraunces, Work Sans) – loaded through Google Fonts CDN (third‑occasion service; web connection required on first load).
- Animated background – floating gentle orbs and a respiration glow add ambiance with out affecting efficiency.
- Absolutely responsive – scales accurately from small telephones to broad desktop home windows.
What’s Included
| File | Objective |
|---|---|
index.html |
Web page markup solely – no inline types or scripts |
belongings/css/fashion.css |
All styling, together with the Google Fonts import and the wooden‑grain theme |
belongings/js/levels-data.js |
500 solver-verified ranges with block information, issue, and minimal transfer counts |
belongings/js/script.js |
All recreation logic – solver engine, drag interplay, undo, hints, each day problem, audio, save system |
Documentation/documentation.html |
Full setup, customization, and FAQ documentation |
No construct instruments, no set up, nothing to compile.
Technical Specs
- Constructed with: Pure HTML5, CSS3, and vanilla JavaScript (no canvas required – DOM‑primarily based rendering)
- Dependencies: None (recreation code is self‑contained; Google Fonts are loaded from an exterior CDN –
see Web Requirement beneath) - Responsive: Sure, throughout all gadgets
- Browser compatibility: All present variations of Chrome, Safari, Firefox, and Edge – desktop and cellular
- Web requirement: An web connection is required as soon as to load the Google Fonts CDN fonts
(Fraunces and Work Sans throughfonts.googleapis.com). These are third‑occasion fonts served
by Google – exterior the writer’s management. If unavailable, the browser falls again to a default system font and the sport nonetheless runs usually. All recreation logic, visuals, and audio are generated in code with no different exterior calls.
