I Built 2 Browser Puzzle Games from Scratch A deep-dive into building Color Sort Puzzle and Block Blast

#gamedev #javascript #programming #webdev

I Built 2 Browser Puzzle Games from Scratch This Week 🎮

As part of my ongoing project — 7x.games — I'm building 150+ original,
SEO-optimized browser games. This week I shipped two puzzle games:

🧪 Color Sort Puzzle — pour colored liquids between test tubes to sort them by color
🧱 Block Blast — place Tetris-style blocks on an 8×8 grid, clear rows & columns

No game engines. No canvas libraries. Just React, and CSS.

Here's what I learned building both.

🧪 Color Sort Puzzle

The mechanic seems trivial but the solver logic is not.

The key challenge was level validation — generating a solvable puzzle
every time. I built a backtracking solver that simulates valid pour sequences
before presenting a level to the player.

// A pour is valid only if:
// - Source tube is not empty
// - Target tube is not full
// - Top color of source matches top color of target (or target is empty)
const isValidPour = (from, to) => {
  if (from.length === 0) return false
  if (to.length === TUBE_SIZE) return false
  if (to.length > 0 && to[to.length - 1] !== from[from.length - 1]) return false
  return true
}

Other interesting bits:

Undo stack with full state snapshots
Auto-win detection after each pour
50+ difficulty-scaled levels generated algorithmically

🧱 Block Blast

This one was trickier on the interaction side.

Drag-and-Drop with Proximity Snapping

Standard drag-and-drop maps your cursor to the grid. But on a crowded board,
being 1px off means you miss the gap entirely.

I implemented a 3×3 proximity search — the game scans a neighborhood
around your finger and snaps to the closest valid placement:

for (let dr = -1; dr <= 1; dr++) {
  for (let dc = -1; dc <= 1; dc++) {
    const r = baseRow + dr
    const c = baseCol + dc

    if (canPlaceBlock(grid, shape, r, c)) {
      const dist = Math.sqrt(dr * dr + dc * dc)
      if (dist < minDistance) {
        minDistance = dist
        bestPos = { row: r, col: c }
      }
    }
  }
}

This made the game feel 10x more playable on mobile immediately.

Web Audio Sound Effects — Zero Dependencies

Instead of loading audio files, I synthesized all sounds via the Web Audio API:

const playSound = (type) => {
  const ctx = new AudioContext()
  const osc = ctx.createOscillator()
  const gain = ctx.createGain()
  osc.connect(gain)
  gain.connect(ctx.destination)

  if (type === 'clear') {
    osc.type = 'triangle'
    osc.frequency.setValueAtTime(523.25, ctx.currentTime)              // C5
    osc.frequency.linearRampToValueAtTime(1046.50, ctx.currentTime + 0.3) // C6
    gain.gain.setValueAtTime(0.2, ctx.currentTime)
    gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3)
    osc.start()
    osc.stop(ctx.currentTime + 0.3)
  }
}

Three sounds (place, clear, game over) — 0 bytes of audio assets.

Mobile Scroll Freeze During Drag

The tricky part: you want the page to scroll normally, but freeze the moment
the user grabs a block.

React's synthetic touch events are passive by default, so preventDefault
doesn't work inside them. The fix: register a non-passive listener on
mount using a ref that updates synchronously:

const isDraggingRef = useRef(false)

useEffect(() => {
  const blockScroll = (e) => {
    if (isDraggingRef.current && e.cancelable) e.preventDefault()
  }
  // { passive: false } is KEY — allows preventDefault to work
  window.addEventListener('touchmove', blockScroll, { passive: false })
  return () => window.removeEventListener('touchmove', blockScroll)
}, [])

// Then on touchStart of a block:
isDraggingRef.current = true  // synchronous — no state lag

Using useState here would fail because the state update is async —
the browser already starts scrolling before React re-renders.

SEO Integration

Both games are pre-rendered static pages in Next.js with:

Full metadata object + OpenGraph tags in layout.js
VideoGame + FAQPage JSON-LD structured data via next/script
Registered in sitemap.xml automatically via the games registry
Long-form strategy articles on each game page for topical authority

What's Next

I'm continuing to build original games for 7x.games — the goal is 150+
fully SEO-optimized, original browser games. Each game is a standalone
Next.js static page with its own schema, metadata, and content strategy.

🔗 Play both games: