Arrow Escape | HTML5 Neumorphic Puzzle Game

Arrow Escape | HTML5 Puzzle Game

Arrow Escape is a logic-based puzzle game built on a 2D coordinate grid system. The core objective is to move blocks off the board following the direction indicated by their arrows. Blocks can only move if their path is completely unobstructed by other blocks or the board boundaries.

Core Technology Stack

HTML5 / CSS3: Utilizes a “Neumorphic” UI style using complex box-shadows. Vanilla JavaScript: ES6+ logic for grid collision detection and animation.

Installation & Setup

Arrow Escape is designed as a standalone, single-file web application. It requires no build steps or package managers to run.

System Requirements

Modern Browser (Chrome, Firefox, Safari)

Local Deployment

Download the main zip file. Open the file in your preferred web browser.

Grid & Movement Logic

The game board is represented as a dynamic grid where each cell is either empty or occupied by a block object. Movement is validated by checking the vector path of a block’s assigned direction.

Level Design System

Levels are defined in a centralized JSON-like structure. Each level specifies board dimensions and a collection of block objects with relative spatial positioning.

Scoring & Metrics

While the primary goal is completion, the game tracks two efficiency metrics to determine player performance:

Move Count: Tracks total taps/clicks. Perfect scores require zero “blocked” attempts.

Time Elapsed: Measured in seconds from level initialization to final block removal.

The Star System (implemented in the victory screen) maps these metrics against “par” values defined for each level.