Lock Pattern Game

• 

  Logo

• 

  Playing screen

• 

  Game over screem

• 

  Leaderboard

The Inspiration

The project was inspired by the tactile security of smartphone lock patterns.
I wanted to transform a mundane utility into a high-speed memory challenge. The goal was to create a spatial rhythm puzzle where memory is rewarded with higher scores and increasing difficulty, turning a simple interface into a competitive game.

Building the Experience

The game centers on a 3×3 grid of responsive nodes.
I built a procedural pattern generator that respects spatial adjacency, ensuring every sequence is physically drawable without illogical jumps.

The core loop alternates between two phases:

• Display Phase: The Lens demonstrates the pattern using timed animations.
  
• Guess Phase: The user must replicate the pattern perfectly under a ticking clock.

The Technical Logic

To draw the connection lines in real time between nodes, the script calculates the distance $d$ between two points $P_1(x_1, y_1)$ and $P_2(x_2, y_2)$ to determine the line scale:

$$ d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2} $$

The rotation angle $\theta$ is dynamically updated using the arctangent of the directional vector, ensuring the line always follows the user’s finger:

$$ \theta = \operatorname{atan2}(y_2 - y_1, x_2 - x_1) $$

The final score is calculated based on pattern length $L$ and elapsed time $t$, weighted by a difficulty multiplier $D$:

$$ Score = \left( \frac{L \cdot 1000}{t} \right) \cdot D $$

Challenges Faced

The primary hurdle was memory and event cleanup.
When a user restarts or advances to a new level, previous animation timers (DelayedCallbackEvents) could overlap, creating ghost patterns. I solved this by implementing a robust safeRemove function that clears all active callbacks before initializing a new round.

Another challenge was touch precision. Making the system feel snappy required fine-tuning the touchTolerance. I also added a vertical offset correction to account for how users naturally touch the screen slightly below their line of sight.

What I Learned

• State Management: Coordinating transitions between Showing and Playing states without logic conflicts.
• Dynamic UI: Managing Screen Transform anchors to keep the grid perfectly centered across different smartphone aspect ratios.
• UX Feedback: Using color shifts and audio cues to provide immediate Match or Fail feedback—crucial for high-speed puzzle games.

Built With

• api
• javascript