Now accepting challengers

A flowchart game for future IT pros

Think in logic.
Play in flow.

Turn first-year flowchart lessons into a high-score run. Arrange real symbols, trace decisions, build combos, and defeat the final Boss Flow.

102 crafted flows3 difficulty routes0 accounts needed
Flowchart gameFLOWCHART CHALLENGE
1UP  02480♥ ♥ ♥
STAGE 04 ×2 COMBO
START
↓
VALID?
NO ↙↘ YES
RETRY
ADMIN?
⚡ BOSS FLOW APPROACHING ⚡
DRAG · PLACE · SOLVE
FLOWCHART FUNDAMENTALS◆REAL DECISION LOGIC◆ARCADE SCORE ATTACK◆BUILT FOR FRESHIES◆KEYBOARD FRIENDLY

01 // Player journey

From freshie to
flow champion.

Every screen moves the player forward with one clear choice. The game teaches the logic first, then adds speed, stakes, and a memorable final test.

01

Tag in

Enter a nickname—no sign-up or account.

02

Choose mode

Score Attack for action, Practice for learning.

03

Pick a route

Easy, Normal, or Hard controls flow complexity.

04

Build the logic

Drag, click, or use the keyboard to place symbols.

05

Beat the boss

Solve the branching final flow for double points.

06

Claim a rank

See the breakdown and join the local hall of fame.

Built to teach, designed to replay

Arcade energy.
Real learning.

The challenge is playful, but every interaction reinforces the standard visual language of algorithms.

  • Guided constructionAutomatic arrows keep attention on sequence and decisions.
  • Two-attempt feedbackA concise hint comes first; the full explanation appears after a miss.
  • Progressive complexityLinear routines grow into nested decisions, branches, and loops.
SYMBOL_DATABASE.EXE● ● ●
Start / EndTerminal
ActionProcess
Input / OutputData
Yes / NoDecision
Knowledge loaded100%

02 // System design

How the game
works underneath.

A small, local-first architecture keeps the event reliable. The entire experience runs in one browser with no server, login, or internet connection required.

01
UI

Player interface

React screens capture drag, click, touch, and keyboard actions.

INPUT LAYER
→
02
FX

Game engine

Grades slot mappings and calculates attempts, combos, lives, and time.

LOGIC LAYER
→
03
DB

Challenge library

Typed problem data supplies prompts, nodes, edges, hints, and solutions.

CONTENT LAYER
→
04
LS

Browser storage

Session recovery and local leaderboards persist on the event laptop.

STORAGE LAYER
A

Challenge boot

Four recently unseen problems and one matching boss are selected, shuffled, and saved for recovery.

B

Interaction loop

Every placement updates round state. A submission compares each slot with the validated answer map.

C

Feedback loop

Correct answers award score and energy. Misses reset combos, reveal guidance, and may remove a heart.

D

Round finish

The engine adds boss bonuses, creates a rank, stores the result, and refreshes the hall of fame.

Local-first by design

Nicknames and scores stay in this browser. Nothing is uploaded, synchronized, or shared online.

NO BACKEND

03 // Technology

The stack behind
the cabinet.

Modern web tools keep the game fast to load, easy to maintain, and safe to run on a single event laptop.

RE

React 19

Reusable game screens and reactive round state.

TS

TypeScript

Typed challenges, safer grading, and clear data models.

VX

Vinext + Vite

Fast local development at a fixed browser address.

CSS

Modern CSS

Responsive layouts, arcade effects, and reduced motion.

WA

Web Audio

Short local sound cues with a persistent mute control.

ST

Web Storage

Leaderboards in localStorage; live rounds in sessionStorage.

QA

Node tests

Automated checks for content, scoring, storage, and selection.

A11Y

Accessible input

Drag, click-to-place, focus styles, and keyboard controls.

Player one, ready?

Put your logic
on the leaderboard.

Choose a tag, pick a route, and start building flows.

Enter the arcade ↑