The Digital Canvas Engineering Logic in Block Sort Pro
Start there - most folks grab regular webpage bits when crafting online stuff. Boxes shaped by
A fresh start every time - that’s what the Canvas API feels like. Not a single button handed to us, no prebuilt designs. Just rows upon rows of tiny dots waiting to be changed. At its core sits something called a Context, our only tool for marking those dots. Step by step, through careful logic, we shaped stillness into motion. The outcome? A live game experience built without traditional servers. Each piece fits silently behind the scenes.
1. The Pulse of the Game requestAnimationFrame
A moving picture lets you push back, unlike any book on a shelf. Sixty snapshots each second keep the flicker alive - smooth because it never stops.
Back then, game makers on the web relied on setInterval(draw, 16). Still, it didn’t work well. Even when nobody watched the screen, the timer kept running. Because of that, frames updated at bad times - sometimes causing jagged visuals. Power got wasted too, especially on laptops.
When someone jumps to another tab to glance at a message, the game stops drawing frames on its own. Pausing happens right after the shift away. It waits without being told. The moment attention moves, visuals freeze. No extra steps needed. Background activity halts until return.Matching frame timing between game and screen stops choppy motion - works on any display, be it 60Hz or faster. A smoother look comes from syncing these updates directly.
When someone jumps to another tab to glance at a message, the game stops drawing frames on its own. Pausing happens right after the shift away. It waits without being told. The moment attention moves, visuals freeze. No extra steps needed. Background activity halts until return.
Matching frame timing between game and screen stops choppy motion - works on any display, be it 60Hz or faster. A smoother look comes from syncing these updates directly.
2. State Management The Brain Inside the Arrays
Bright shapes pop on screen - built for clarity - yet underneath, it's just rows of organized values. Though eyes catch color and contrast, the system runs on structured sequences. What shows up bold and clear to people exists as indexed entries behind the scenes. Always, the framework matters more than how it looks.
- A single tube inside Block Sort Pro acts like a pile - think of it as a list where only the top item matters most. What happens at the peak shapes how things move below. Movement follows strict rules, never skipping steps. Every addition lands on top, every removal starts there too. This setup controls flow without needing extra checks. Order emerges simply because access stays locked to one end.
- One spot holds red, another keeps red too - third marks blue, then green follows after. Numbers line up like steps: first two match, next climbs higher, last stretches beyond
[] holds nothing inside it
- Clicking a tube triggers the engine's core - not pixel scanning, but logic-based verification kicking in right away. The system responds by testing rules internally before anything else happens. Instead of watching colors shift, it checks conditions step by step. Inside, decisions form based on structure, not visuals. What follows is pure reasoning, no image analysis involved. Each move gets weighed through invisible criteria instantly. Rules activate once the signal arrives from user input. Only after passing internal tests does any change show up. Behind the scenes, clarity comes from order, never guesswork. That moment holds nothing but silent evaluation
Check Capacity When Destination Tube Length Below Four
Hold on - what happens when the target tube is empty? Or maybe the top items match? Think it through. Only move ahead if either spot's clear or colors line up right
It's when those checks pass that the system carries out the action. What makes storing game snapshots straightforward isn’t capturing pictures - it’s because the display part (Canvas) stays apart from the data part (Arrays), letting us stash compact number sequences instead.
3. Map clicks to interactions
A blank canvas holds no memory of shapes drawn on it. When someone taps the display, what comes back is simply an x and y number pair. From that point onward, figuring out which object got tapped becomes our task. Matching screen points to tubes relies on something known as hit detection. The process links physical touches to invisible boundaries around items.
Each tube's left edge comes from dividing the full canvas width by how many columns sit in the Bonte setup. To find where a tube begins horizontally, we work out $x_{pos}$ using that split. Canvas stretches wide, shared across sections placed side by side. One step at a time, positions lock into place through even spacing rules. The math behind $x_{pos}$ ties directly to layout count and overall size. Where a column starts depends entirely on those two inputs working together
A position along the horizontal axis comes from dividing the full canvas width by how many columns exist, then multiplying that number by where the current column sits in order. The result gives a spot based on layout structure and placement within it
When someone clicks between $x_{pos}$ and $x_{pos} + \text{Tube Width}$, the system picks the right array instantly. That math link turns a basic image into something you almost feel.
4. Smooth Animations Using Lerp
A glitchy game just jumps the block straight from Tube A to Tube B. Instead of that abrupt jump, motion now flows step by step - thanks to smooth positioning between points. Trig shapes help bend the path into a curve, making moves look natural. The result? Movement feels polished, not rushedAlong the horizontal line, travel goes straight between point X one and then X two. Movement happens step by step without jumping ahead.Midway through the move, the block jumps up a bit then settles down gently at the end - we shape that motion using sin of t times pi on the vertical axis.A smooth flow begins here, guiding each step so the puzzle seems to unfold on its own. Not rigid or cold, it moves like thought itself - loose, natural, quietly clicking into place.
5. The Winning Condition Algorithm Check
A space holds nothing at all - its count sits at zero. Empty slots stretch across it, unused.All four spots filled, each one matching the others exactly. Same value throughout, no gaps anywhere. Every position holds what the first does, nothing changed. Full set, all pieces look just like the first.
JavaScript
const isTubeComplete = (tube) => {
return tube.length === 0 || (tube.length === 4 && tube.every(val => val === tube[0]));
};Only when each tube shows true does the game mark it a success, shifting then to update the local data under bs_lvl while setting up the pathfinder method for what comes after.
Art Meets Math
A spinning rhythm drives the visuals, tied to math that runs deep beneath smooth movement. Frame by frame, updates flow through organized data sets instead of cluttered logic. Shapes respond with precision, their positions shaped by angles and distances. This structure keeps everything sharp, never slowing, always reacting.
A fresh take emerges - no servers needed - a game ready at once, guarding personal data carefully while fitting every display through the Bento Grid. Every player gets in, no matter how colors appear to them. This shows what happens when design shifts away from document-style web thinking toward living, breathing experiences