DEV Community: 7x Games

I built a free Boggle word game with a DFS grid solver and drag-to-select — here's how it works

7x Games — Sat, 04 Apr 2026 09:13:53 +0000

I just shipped Boggle Online on 7x.games — a free, browser-based Boggle word game. No login, no download. Here's a technical breakdown.

🎮 Play it → 7x.games/games/boggle-online
What it does
A grid of random letter dice is rolled. A countdown timer starts. You drag through adjacent letters to spell words — horizontally, vertically, or diagonally. Each die can only be used once per word. Longer words score exponentially more points.

Features:

🎲 Classic 4×4 (16 dice, 3 min) and Big 5×5 (25 dice, 4 min)
👆 Drag-to-select with undo — drag back to remove the last letter
🧠 DFS solver finds every valid word at game start
📊 Official Boggle scoring — 3-4 letters = 1pt, 5 = 2pts, 6 = 3pts, 7 = 5pts, 8+ = 11pts
⏱ Countdown timer with urgency colors (cyan → amber → red at 10s)
📖 3,000+ word dictionary merged from two curated sources
🏆 Best score persistence per grid mode in localStorage
🔊 Web Audio API sounds — no external audio files
📱 Full touch support for mobile/tablet
The grid solver — finding every valid word with DFS
When the game starts, I run a depth-first search from every cell to find all valid words the grid contains. This lets me show "words you missed" at the end.

javascript
function solveGrid(grid, size, dict) {
const found = new Set()
const visited = Array.from({ length: size }, () => Array(size).fill(false))
function dfs(r, c, word) {
if (word.length >= 3 && dict.has(word)) found.add(word)
if (word.length >= 8) return // cap depth
for (const [nr, nc] of getNeighbors(r, c, size)) {
if (visited[nr][nc]) continue
visited[nr][nc] = true
dfs(nr, nc, word + grid[nr][nc])
visited[nr][nc] = false
}
}
for (let r = 0; r < size; r++)
for (let c = 0; c < size; c++) {
visited[r][c] = true
dfs(r, c, grid[r][c])
visited[r][c] = false
}
return found
}
Key decisions:

Depth cap at 8 — words longer than 8 letters are extremely rare in Boggle and capping prevents exponential blowup on 5×5 grids
Set-based dictionary — O(1) lookups make the DFS fast. The dictionary is built at module load time from a comma-separated string
Backtracking visited array — standard DFS with mark/unmark ensures each die is used at most once per path
On a 4×4 grid this runs in ~5ms. On 5×5 it's ~20-50ms — fast enough to run synchronously on game start.

Official Boggle dice
I use the actual Boggle dice letter distributions, not random letters:

javascript
const DICE_4X4 = [
'AAEEGN', 'ABBJOO', 'ACHOPS', 'AFFKPS',
'AOOTTW', 'CIMOTU', 'DEILRX', 'DELRVY',
'DISTTY', 'EEGHNW', 'EEINSU', 'EHRTVW',
'EIOSST', 'ELRTTY', 'HIMNQU', 'HLNNRZ',
]
Each die has 6 faces. The dice are shuffled, then one random face is picked per die. This replicates the physical Boggle experience — certain letter combinations are more likely than pure randomness, creating grids that feel "right" with a good mix of vowels and consonants.

Drag-to-select with undo
The selection system needs to enforce adjacency and allow "undo" by dragging backwards:

javascript
const handlePointerMove = (e) => {
const cell = getCellFromEvent(e)
setSelectedPath(prev => {
// Undo: dragging back to second-to-last cell
if (prev.length >= 2) {
const secondLast = prev[prev.length - 2]
if (secondLast[0] === cell[0] && secondLast[1] === cell[1]) {
return prev.slice(0, -1) // remove last
}
}
// Skip if already in path
if (prev.some(([r, c]) => r === cell[0] && c === cell[1])) return prev
// Must be adjacent to last cell
if (!isAdjacent(prev[prev.length - 1], cell)) return prev
return [...prev, cell]
})
}
The undo mechanic is crucial — without it, one wrong drag means you have to release and start over. With it, you can "back up" naturally.

Dictionary: merging two word lists
I merged two sources for broad coverage:

javascript
import { BOGGLE_DICT } from '@/lib/boggleWords' // ~2,500 words (3-8 letters)
import { WORD_LIST } from '@/app/games/word-guess/words' // ~400 five-letter words
const FULL_DICT = new Set([...BOGGLE_DICT, ...WORD_LIST])
The boggleWords.js file stores all words as a single comma-separated string that's split into a Set at module load:

javascript
const RAW = "ACE,ACT,ADD,AGE,AGO,AID,AIM..."
export const BOGGLE_DICT = new Set(RAW.split(','))
This is ~17KB — small enough to bundle client-side without impacting load time, and the Set gives O(1) lookups during both the DFS solve and player word validation.

Audio without files
All sounds are synthesized using the Web Audio API:

javascript
function mkAudio() {
let ctx = null
const tone = (freq, type, duration, volume, delay) => {
const c = ctx, t = c.currentTime + delay
const osc = c.createOscillator(), gain = c.createGain()
osc.type = type
osc.frequency.setValueAtTime(freq, t)
gain.gain.setValueAtTime(volume, t)
gain.gain.exponentialRampToValueAtTime(0.001, t + duration)
osc.start(t); osc.stop(t + duration)
}
return {
found() { tone(523, 'sine', .1, .12); tone(659, 'sine', .1, .12, .09); tone(784, 'sine', .15, .12, .18) },
wrong() { tone(220, 'sawtooth', .12, .1) },
tick() { tone(800, 'sine', .03, .04) },
}
}
Zero audio files. The "found word" sound is an ascending C-E-G triad. The "wrong" sound is a low sawtooth buzz. The countdown tick is a subtle 800Hz blip. Total audio code: ~20 lines.

Scoring system
Following official Boggle scoring rules:

Word Length Points
3-4 letters 1
5 letters 2
6 letters 3
7 letters 5
8+ letters 11
The exponential scaling means one 7-letter word = five 3-letter words. This rewards pattern recognition and vocabulary depth over speed alone.

Stack
Next.js App Router
React hooks (useState, useEffect, useRef, useCallback)
Lucide React icons
Web Audio API for sounds
localStorage for best scores
Zero game engine dependencies
What I'd add next
Trie-based dictionary for prefix pruning (reject impossible paths early in DFS)
Multiplayer mode — same grid, compete on score via Firebase
Daily challenge — seeded grid so everyone solves the same one
Word definitions — show definitions of missed words to build vocabulary
Play it: 7x.games/games/boggle-online

I'm building 7x.games — a free, no-login arcade with 60+ browser games. If you have feedback or want to see specific features, drop a comment!

I built a free Word Search puzzle game with drag-to-select, 7 categories, and 3 difficulty levels — all in the browser

7x Games — Fri, 03 Apr 2026 10:24:36 +0000

I just shipped a Word Search puzzle game on 7x.games — completely free, no login, no download. Here's a breakdown of how I built it and the design decisions behind it.

🎮 Play it here → 7x.games/games/word-search
What it does
Classic word search: a grid of random letters with hidden words placed in straight lines. You click and drag across the letters to highlight a word. If it matches one from the list, it stays highlighted and gets crossed off. Find all the words as fast as you can.

Features:

🐾 7 categories — Animals, Countries, Sports, Food, Science, Nature, and Random Mix
🟢🟡🔴 3 difficulty levels — Easy (8×8, 5 words), Medium (10×10, 7 words), Hard (12×12, 9 words)
📐 Directional complexity — Easy goes right/down only. Medium adds diagonals. Hard adds backwards too
⏱ Timer with personal bests — Saved per category × difficulty combo in localStorage
🔊 Audio feedback — Satisfying sounds for selections, correct matches, wrong attempts, and puzzle completion
📱 Fully touch-responsive — Drag to select works on mobile/tablet with touchAction: none and proper touch event handling
🎨 Multi-color highlights — Each found word is highlighted in a different color so you can visually distinguish overlapping words
The grid generation algorithm
The core challenge is placing words into a grid without conflicts. Here's how I approached it:

javascript
function generateGrid(words, size, directions) {
const grid = Array.from({ length: size }, () => Array(size).fill(''))
const shuffled = [...words].sort(() => Math.random() - 0.5)
for (const word of shuffled) {
const dirs = [...directions].sort(() => Math.random() - 0.5)

    for (let attempt = 0; attempt < 100; attempt++) {
        const dir = dirs[attempt % dirs.length]
        const [dr, dc] = DIRECTION_DELTAS[dir]
        // ... clamp start position, check every cell
        // Allow overlap only if the existing letter matches
        if (grid[r][c] !== '' && grid[r][c] !== word[i]) break
    }
}
// Fill blanks with random letters
for (let r = 0; r < size; r++)
    for (let c = 0; c < size; c++)
        if (grid[r][c] === '') 
            grid[r][c] = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[Math.floor(Math.random() * 26)]

}
Key decisions:

Shuffle word order before placing — longer words placed first would always get priority, creating predictable layouts
100 attempts per word with rotating direction choices — balances placement success rate vs. generation speed
Allow letter overlap when characters match — this creates more compact, interesting puzzles and adds false leads for the player
Random filler letters — I considered weighting filler letters toward word-start letters for extra difficulty, but kept it uniform for now
Drag-to-select on touch and mouse
The selection system needs to work with both mouse and touch, constrained to straight lines only (horizontal, vertical, or 45° diagonal):

javascript
const computeLineCells = (start, end) => {
const [r1, c1] = start
const [r2, c2] = end
const dR = Math.abs(r2 - r1)
const dC = Math.abs(c2 - c1)
// Must be horizontal, vertical, or 45° diagonal
if (dR !== 0 && dC !== 0 && dR !== dC) return []
const steps = Math.max(dR, dC)
const dr = Math.sign(r2 - r1)
const dc = Math.sign(c2 - c1)

return Array.from({ length: steps + 1 }, (_, i) => 
    [r1 + dr * i, c1 + dc * i]
)

}
The dR !== dC check is the key constraint — it ensures the selection snaps to valid lines and ignores arbitrary diagonal drags. On touch devices, I set touchAction: 'none' on the grid container and prevent default on touchmove to stop page scrolling while dragging.

Word matching — forward and reverse
On Hard difficulty, words can be placed backwards. So the selection check tests both directions:

javascript
const selectedWord = cells.map(([r, c]) => grid[r][c]).join('')
const reversedWord = [...selectedWord].reverse().join('')
for (const placement of placements) {
if (placement.word === selectedWord || placement.word === reversedWord)
return placement.word
}
This means a player can drag in either direction to find a word — left-to-right or right-to-left both work.

Design choices
Dark theme with cyan accent (#22d3ee) — consistent with the 7x.games design system
Color-coded found words — 9 rotating highlight colors so overlapping words remain distinguishable
Progress bar — found/total with a gradient fill that grows visually with each find
Inline word list above the grid — found words get line-through and dim to 50% opacity instead of disappearing (keeps the list stable, no layout shifts)
Audio using Web Audio API — no external files, just synthesized tones with OscillatorNode. Found words get an ascending 3-note chime, wrong selections get a low buzz
Stack
Next.js (App Router)
React with hooks (useState, useEffect, useRef, useCallback)
Lucide React for icons
Web Audio API for sound effects
localStorage for persisting best times
Zero external game libraries
What I'd add next
Daily challenge mode — same puzzle for everyone, leaderboard comparison
Hint system — reveal the first letter of an unfound word
Custom word lists — let players paste their own vocabulary lists
Multiplayer race — two players solve the same grid simultaneously via Firebase
Play it: 7x.games/games/word-search

If you have feedback or feature ideas, drop a comment! I'm building the entire 7x.games arcade one game at a time — 60+ games and counting.

Follow me for more browser game dev posts. I'm building 7x.games — a free, no-login arcade with 60+ games.

Just Shipped Phase 6 of my 150-Game Challenge: The Deep Puzzles & Math Pack! 🧩🚀

7x Games — Thu, 02 Apr 2026 02:17:40 +0000

Hey DEV community! 👋

I'm currently on a crazy journey to build 150 web-based micro-games for my platform, 7x.games. I’ve just officially wrapped up Phase 6: Deep Puzzles, Hyper-Casual & Kids Math, taking the total completed games up another level!

Building this batch was particularly fun because it stretched across wildly different mechanics—from addictive idle loops to pure educational math logic.

Here’s what just went live: 🍪 Hyper-Casual & Idle: Cookie Clicker clone, Suika (Watermelon) Game clone, Idle Miner Clicker 🧠 Deep Puzzles: 2048 Multiplayer Variant, Memory Card Pro 🧮 Educational Math for Kids: Times Tables, Fractions, Math Bingo, Number Bonds, Money Math, and Roman Numerals!

A few takeaways from this phase:

Idle Mechanics: Getting the math right on idle incrementals (like Cookie Clicker & Idle Miner) so they remain engaging without breaking the game state is a balancing act!
Multiplayer State: Moving 2048 to a multiplayer variant was a fantastic technical challenge in handling real-time state synchronization.
Educational UI/UX: Designing for kids means bigger buttons, instant gratification (sound effects!), and clear, distraction-free UIs.
I'd love for you to try them out and try to break them! What phase/genres should I tackle next as I push toward that 150 mark?

Let me know what you think below! 👇

I added real-time online multiplayer to my Connect 4 browser game using Firebase

7x Games — Tue, 31 Mar 2026 16:10:52 +0000

Hey everyone! 👋

I just shipped a big update to my Connect 4 game on 7x.games — online multiplayer is now live!

What's new:
🌐 Online Multiplayer — play Connect 4 with anyone in the world in real-time
🔒 Private Rooms — create a room and share a unique invite link with a friend
⚡ Quick Match — get auto-paired with a random opponent
📤 Social Sharing — share invite links via WhatsApp, Telegram, Twitter/X, Facebook, or native share
🔗 URL Invites — friends click a ?room=XXXXXX link and they're straight into the game
📡 Real-time Sync — moves sync instantly between both players via Firebase Realtime Database
📱 Works on all devices — mobile, tablet, desktop — no app download needed
What was already there:
🤖 3 AI difficulty levels (Easy = random, Medium = minimax depth 4, Hard = minimax depth 7 with alpha-beta pruning)
👥 Local Pass & Play mode
🎨 4 board themes (Classic, Obsidian, Forest, Crimson)
🔊 Sound effects & disc drop animations
↩️ Undo support (local only)
Tech stack:
Next.js (React, App Router)
Firebase Realtime Database for room management & move sync
Web Audio API for sound effects
No external game engine — pure React + CSS animations
How multiplayer works:
Player 1 creates a room → Firebase stores room state
Player 1 shares the invite link
Player 2 opens the link → auto-joins the room
Both clients listen to the same Firebase path via onValue
When a player clicks a column, the move is pushed to Firebase
Both clients process the move locally — board state stays in sync
The room creator always plays as Red (goes first), and the joining player is Yellow.

Would love any feedback! Try it out: Click here

📋 Changelog / Release Notes
Connect 4 — v2.0 | Online Multiplayer Update
Release Date: March 31, 2026

✨ New Features
Online Multiplayer — Real-time 2-player matches via Firebase
Private Rooms — Create a room and share an invite link
Quick Match — Auto-pair with a random waiting player
Social Sharing — Share invite links via WhatsApp, Telegram, Twitter/X, Facebook
URL Invites — ?room=XXXXXX parameter for instant join
Opponent Disconnect Detection — Shows "Opponent Left" screen with return to lobby
Leave Game — Clean disconnect that marks the room as abandoned
🔧 Improvements
Sidebar ad fixed from aspect-square to fixed h-[250px] for proper tablet sizing
SEO metadata updated for online multiplayer keywords
FAQ expanded from 5 to 9 questions covering online features
New "Online Multiplayer" section in page SEO content
Quick Rules updated with 🌐 Online entry
🛡️ Preserved
All existing local play modes (vs Computer + vs Friend)
3 AI difficulty levels (Easy, Medium, Hard)
4 board themes
Undo support (local only)
Sound effects and animations

How I Built an Interactive "Number Bonds" Math Game using Next.js and Pure SVGs

7x Games — Mon, 30 Mar 2026 12:08:06 +0000

Hey DEV community! 👋

I just pushed a new educational puzzle game live on my web arcade, 7x.games. It’s called Number Bonds—a classic "part-part-whole" math concept where kids figure out how two smaller numbers combine to make a larger one.

While building educational games, I try to avoid heavy game engines like WebGL or Phaser. For a puzzle like this, DOM elements and React state are more than enough. But the challenge is making it look fluid, interactive, and visually appealing for kids without relying on massive image assets.

Here is a breakdown of how I engineered the UI and the math logic using Next.js, Tailwind CSS, and pure SVGs.

📐 1. The Visual Architecture: Pure SVG Connections
A Number Bond is typically represented as a large "Whole" circle connected by lines to two or more smaller "Part" circles.

Instead of exporting PNGs for every possible layout, I built a dynamic component. I used CSS Grid for the positioning of the HTML input bubbles, and placed an absolute-positioned layer underneath them to draw the connecting lines dynamically.

JavaScript
// Simplified example of the connecting lines

{/* Line from Left Part to Whole /}
x1="25%" y1="75%"
x2="50%" y2="25%"
stroke="rgba(255,255,255,0.2)"
strokeWidth="8"
strokeLinecap="round"
/>
{/ Line from Right Part to Whole */}
x1="75%" y1="75%"
x2="50%" y2="25%"
stroke="rgba(255,255,255,0.2)"
strokeWidth="8"
strokeLinecap="round"
/>

Because the lines are just SVG coordinates, they scale infinitely. Whether a kid is playing on a 4K smartboard or a tiny shattered iPhone screen, the geometry remains pixel-perfect.

🧠 2. The Deterministic Math Generator
A common trap in generating endless math problems is accidentally repeating the same question or creating impossible scenarios.

To solve this, I wrote a deterministic generator that calculates the "Whole" based on the selected difficulty limit, and then randomly splits it into two "Parts". The game randomly decides which of the three circles to leave blank.

JavaScript
function generateBond(maxTarget) {
// Generate the "Whole"
const whole = Math.floor(Math.random() * (maxTarget - 5 + 1)) + 5;

// Split into two parts
const part1 = Math.floor(Math.random() * (whole - 1)) + 1;
const part2 = whole - part1;

// Randomly select which bubble is the "question" (0 = Whole, 1 = Part1, 2 = Part2)
const hiddenIndex = Math.floor(Math.random() * 3);

return { whole, part1, part2, hiddenIndex };
}
This ensures the math is always clean, solvable, and fits perfectly within the difficulty tier the teacher selected.

⚡ 3. Kid-Friendly Input Handling
Typing on a mobile browser can be frustrating, especially for a 7-year-old. When you focus an , the mobile keyboard pushes the whole screen up, potentially hiding the game UI.

The Fix: I bypassed the native mobile keyboard entirely.
The input fields in the game are actually styled

elements. Below the Number Bond, I built a custom React numpad. When a user taps a number, it updates the React state of the active bubble instantly.

This keeps the user locked into the game view, prevents the UI from shifting, and allows for rapid-fire answering to build up combo streaks.

What's Next?
Building these lightweight, fast-loading educational games has been an awesome exercise in React state management and UI design. My next goal is to implement a classroom dashboard so teachers can generate custom room codes and track the high scores of their students live.

If you want to check out the UI animations or test your elementary math speed, you can play it here: Number Bonds on 7x.games

How do you handle custom inputs on mobile web apps? Do you stick to native keyboards or build custom numpads to control the UI experience? Let me know in the comments!

Building a Frictionless Real-Time Multiplayer Game with Next.js & Firebase 🐍🪜

7x Games — Sun, 29 Mar 2026 14:56:20 +0000

Hey DEV community! 👋

I just rolled out a massive update for my gaming platform, 7x.games, bringing real-time online multiplayer to a childhood classic: Snakes & Ladders.

When building browser games, my primary goal is always zero friction. If a user has to create an account, download an app, or navigate a confusing lobby system, they will bounce. I wanted players to be able to jump into a multiplayer match with a friend in under 5 seconds.

Here is a breakdown of how I built it, the stack I used, and a few UI/UX tricks I learned along the way.

🛠️ The Tech Stack
Frontend: Next.js (React)

Styling: Tailwind CSS

Backend/State Sync: Firebase Realtime Database

Hosting: Vercel

🧠 Challenge 1: Zero-Friction Invites (Deep Linking)
I didn't just want a "Room Code" system where player two has to manually type in a 6-letter string. I wanted them to click a link and instantly be in the game.

To do this, I utilized the Native Web Share API (navigator.share). When Player 1 creates a room, they click a share button that natively pops up their phone's share sheet (WhatsApp, iMessage, Twitter, etc.).

When Player 2 clicks that link, a useEffect catches the URL parameter (?room=XYZ123) and completely bypasses the lobby menu, dropping them straight into the "Enter Your Name" screen.

JavaScript
// Catching the invite link on mount
useEffect(() => {
const params = new URLSearchParams(window.location.search)
const roomParam = params.get('room')

if (roomParam && roomParam.length === 6) {
    setInvitedRoomId(roomParam.toUpperCase())
    setGameMode('online')
    setOnlineScreen('name') // Skip the lobby!
}

}, [])
🎨 Challenge 2: The "Bottom Player" UX Trick
In most board games, the player wants their avatar or dice to be at the bottom of the screen, closest to their thumbs.

The problem? In a standard multiplayer setup, Player 1 (Red) is always rendered at the bottom, and Player 2 (Green) is rendered at the top. If you join a friend's game, you are forced to play "upside down."

To fix this, I dynamically swapped the layout rows based on the user's playerSlot. If you are Player 2, the UI flips the top and bottom widget rows specifically for your screen, while Player 1 sees the normal layout.

JavaScript
{/* TOP ROW */}

{playerSlot === 'player2' ? (
     /* Render Opponent (Red) on top */
) : (
     /* Render Opponent (Green) on top */
)}

{/* ... Game Board ... */}

{/* BOTTOM ROW */}

{playerSlot === 'player2' ? (
     /* Render YOU (Green) on bottom */
) : (
     /* Render YOU (Red) on bottom */
)}

It’s a tiny visual change, but it makes the game feel incredibly polished and native.

⏱️ Challenge 3: Smart Matchmaking Fallbacks
I also added a "Quick Match" feature to pair random players together. But what happens if nobody else in the world is searching for a match at that exact second?

If a player waits more than 10 to 15 seconds, they will likely close the tab. To prevent this bounce rate, I added a hidden timer. If the player waits in a public lobby for 10 seconds, a menu gracefully fades in asking: "Taking too long?"

It gives them two fallback options:

🤖 Play vs Computer: Instantly destroys the online lobby, switches to Local mode, and drops them into a game against an AI bot.

👥 Invite a Friend Instead: Instantly converts their public matchmaking search into a Private Room so they can text a link to a friend.

Instead of a frustrating wait, the user is immediately re-engaged!

🎮 Try it out!
I’d love for the DEV community to try it out, poke around, and let me know what you think of the real-time syncing and animations!

Play it live here: Snakes and Ladders Multiplayer

If you've built real-time browser games using Firebase or WebSockets, let me know what your stack looks like in the comments below! 👇

Building an Educational Math Game with Next.js, Pure SVGs, and JSON-LD

7x Games — Sat, 28 Mar 2026 11:32:30 +0000

Hey DEV community! 👋

I recently added a new educational game to my web arcade, 7x.games, called Fraction Math Master.

Usually, when developers think of building web games, they immediately reach for Canvas, WebGL, or engines like Phaser. But for educational puzzle games, that is often overkill. I wanted to share how I built a highly interactive, fast, and SEO-optimized math game using pure React, Tailwind CSS, and SVGs.

Here is a breakdown of the technical hurdles and how I solved them.

🍕 1. Drawing Dynamic "Pizza Slices" with SVG Math
Kids learn fractions best visually. I needed a way to show a circle divided into any number of slices (denominator) with a specific number of them shaded in (numerator).

Instead of loading heavy image assets, I built a FractionCircle React component that generates SVG paths on the fly using basic trigonometry.

By calculating the angle of each slice ((2 * Math.PI) / denominator), I used Math.cos and Math.sin to draw exact SVG arcs.

JavaScript
// Simplified snippet of the SVG math
const cx = size / 2;
const cy = size / 2;
const r = size / 2 - 8;
const sliceAngle = (2 * Math.PI) / den;

const startAngle = -Math.PI / 2 + i * sliceAngle;
const endAngle = startAngle + sliceAngle;

const x1 = cx + r * Math.cos(startAngle);
const y1 = cy + r * Math.sin(startAngle);
const x2 = cx + r * Math.cos(endAngle);
const y2 = cy + r * Math.sin(endAngle);

// Draw the wedge!
const path = M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z;
Because it is pure SVG, it scales flawlessly on mobile screens, weighs literally bytes, and allows me to add smooth CSS transform: scale(1.03) pop animations when the user gets an answer correct.

🛑 2. Avoiding the "Infinite While Loop" Trap
The game generates dynamic multiple-choice questions (e.g., "Find an equivalent fraction for 2/4").

Initially, I used a while loop to generate random wrong answers. The logic was: Generate a random fraction. If it equals the correct answer, throw it out and loop again. The bug: If the math constraints were too tight (e.g., Easy Mode where the max denominator is 6), the random number generator could run out of unique wrong answers, trapping the browser in an infinite while loop and crashing the tab.

The Fix: I switched to a Deterministic Array Generator.
Instead of "guessing" random numbers, I wrote a helper function that instantly calculates every single possible wrong answer within the difficulty limits, pushes them into a pool, shuffles the pool, and returns the top 3.

JavaScript
// Pre-generate valid wrong answers to avoid infinite loops
function getSafeWrongs(correctN, correctD, count, maxD) {
const correctVal = correctN / correctD;
const pool = [];

for (let d = 2; d <= maxD + 5; d++) {
for (let n = 1; n < d; n++) {
if (n / d !== correctVal) {
pool.push({ num: n, den: d, label: ${n}/${d} });
}
}
}

shuffle(pool);
return pool.slice(0, count); // Guaranteed to never freeze!
}
Zero guessing. Zero chance of an infinite loop.

🔍 3. Enterprise SEO in Next.js (JSON-LD)
A web game is useless if no one plays it. To get this game ranking on Google for queries like "Fraction Games Online Free For Kids", standard

tags aren't enough.

Using Next.js App Router, I injected Google's native language—JSON-LD Schema Markup—directly into the layout.js of the game.

I used two specific schemas:

@type: VideoGame: Explicitly tells Google the genre, the audience (educational), and that it is free to play in a browser.

@type: FAQPage: I hardcoded common search queries (e.g., "How do you simplify a fraction?") directly into the schema. This allows Google to pull the game page directly into the "People Also Ask" dropdown boxes on search result pages.

JavaScript
export default function FractionMathLayout({ children }) {
return (
<>
type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(mySchemaObject) }} /> {children} </> ) } 🎮 The Result The result is a fast, responsive, and highly interactive educational game that requires zero external assets to run. It has 5 game modes (Identify, Compare, Equivalent, Simplify, Add/Sub) and a combo-streak system. If you want to check out the SVG UI animations or try to get a 10x combo streak, you can play it here: Fraction Math on 7x.games What is your preferred stack for building 2D web games? Do you always reach for Canvas, or do you use React/DOM elements for simpler mechanics? Let me know!

I built a Serverless Real-Time Multiplayer Game (Next.js + Firebase) 🚀

7x Games — Mon, 23 Mar 2026 17:59:57 +0000

Hey DEV community! 👋

I just hit a massive milestone on a side project I've been grinding on: I officially published 51 fully playable browser games on my arcade site, 7x.games.

To celebrate, I wanted game #51 to be special, so I built a Real-Time 1v1 2048 Multiplayer Battle.

Here is how I pulled off real-time multiplayer state syncing using a serverless frontend architecture:

The Stack:

Framework: Next.js (App Router)

Styling: Tailwind CSS (heavy use of neon box-shadows!)

Hosting: Vercel

Multiplayer Backend: Firebase Realtime Database

The Matchmaking Architecture Trick:
Vercel serverless functions aren't built for persistent WebSockets, so I offloaded the game state syncing entirely to Firebase.

The biggest risk with this setup is "Ghost Rooms"—players closing their tabs while waiting in a lobby, leaving junk data that clutters the database over time. To fix this, I used Firebase's onDisconnect().remove() rule. It attaches a heartbeat to the user's browser, and the moment they close the tab or lose connection, Firebase automatically deletes their lobby from the database. It keeps the matchmaking pool pristine without needing a dedicated backend cron job to clean up!

You can play the multiplayer mode here: 2048 Multiplayer

Let me know what you think of the UI, or if you have any questions about setting up Next.js with Firebase!

Phase 5 Final Game Shipped — Doodle Jump Clone Live on 7x.games

7x Games — Sat, 21 Mar 2026 09:04:55 +0000

Phase 5 is Complete! 🎉

The final game of Phase 5 just went live on
7x.games — a Doodle Jump clone
built from scratch with vanilla JavaScript and Next.js.

👽 Play Doodle Jump Free

How I Built It

The core mechanic of Doodle Jump is surprisingly
tricky to get right in a browser:

The main challenges:

Infinite upward scrolling without actually moving the character up — instead the platforms move down
Procedural platform generation that feels fair but gets progressively harder
Mobile touch controls alongside keyboard support
Enemy spawning at higher scores without making it impossible

Tech used:

Rendering    → Canvas API
Game loop    → requestAnimationFrame
Controls     → Keyboard + Touch events
Storage      → localStorage for high scores
Framework    → Next.js 14
Language     → Vanilla JavaScript

The Infinite Scroll Trick

Most beginners try to move the character upward.
The correct approach is the opposite:

// Wrong approach ❌
character.y -= jumpForce

// Correct approach ✅
// Keep character centered, move everything else down
if (character.y < canvas.height / 2) {
  const offset = canvas.height / 2 - character.y
  character.y = canvas.height / 2
  platforms.forEach(p => p.y += offset)
  enemies.forEach(e => e.y += offset)
  score += offset * 0.1
}

This keeps the player visually centered while
the world scrolls — much smoother and easier
to control.

Platform Generation

function generatePlatform(y) {
  return {
    x: Math.random() * (canvas.width - PLATFORM_WIDTH),
    y: y,
    width: PLATFORM_WIDTH,
    type: score > 500 ? getRandomType() : 'normal'
  }
}

// Types unlock progressively
// normal    → always there
// moving    → unlocks at score 200
// breaking  → unlocks at score 500
// spring    → unlocks at score 300

Mobile Controls

Desktop uses arrow keys but mobile needs
touch/tilt support:

// Touch — tap left/right side of screen
canvas.addEventListener('touchstart', (e) => {
  const touch = e.touches[0]
  const midpoint = canvas.width / 2
  if (touch.clientX < midpoint) {
    keys.left = true
  } else {
    keys.right = true
  }
})

// Device tilt as alternative
window.addEventListener('deviceorientation', (e) => {
  if (e.gamma < -10) keys.left = true
  if (e.gamma > 10) keys.right = true
})

What's Next — Phase 6

Phase 5 is fully complete with 47 games live.
Phase 6 starts now focusing on Kids Math Games:

⏱️ Times Table Practice
🎰 Math Bingo
🔢 Number Bonds
➗ Fraction Math Game
💰 Money Math
🏛️ Roman Numerals Game
🍪 Cookie Clicker
🍉 Watermelon Game (Suika Clone)

Target: 160 total games by end of roadmap.

Play All 47 Games Free

🎮 7x.games — No download.
No login. Works on mobile and desktop instantly.

👽 Latest → Doodle Jump Clone

*Building in public — follow along as I go
from 47 → 160 games. Feedback welcome! 👇

I Built Helix Jump in the Browser (No Login, No Download)

7x Games — Thu, 19 Mar 2026 02:52:33 +0000

I just added a browser-based version of Helix Jump to my platform:

👉 https://7x.games/games/helix-jump

🎮 About the game

Helix Jump is a simple but addictive game where you:

Drop a ball through rotating platforms
Avoid dangerous sections
Try to survive as long as possible

⚡ What makes this version different

No login required
No downloads
Works instantly in browser
Mobile-friendly

🧠 Why I built it

I’m building a platform of instant-play browser games:

👉 https://7x.games

The goal is simple:

Open → Play → Enjoy

No friction.

🚀 Tech highlights

Built with canvas
Optimized for performance
Smooth animations and physics
Works on both desktop and mobile

🙌 Try it out

👉👉 https://7x.games/games/helix-jump

Would love feedback on gameplay, performance, or UX.

I built 44 browser games with no login — here’s what I learned

7x Games — Wed, 18 Mar 2026 12:04:46 +0000

Over the past few weeks, I built a browser-based gaming platform called 7x.games.

👉 You can try it here: https://7x.games

The idea was simple:

Play instantly. No login. No downloads.

🎮 Why I built this

Most gaming websites today have too much friction:

Signups

Ads everywhere

Slow loading

Too many distractions

I wanted something different:

⚡ Instant play

🧠 Brain + skill-based games

📱 Works on mobile & desktop

🚫 No login required

🧩 What I built

Right now, the platform has 44+ games, including:

Sudoku

Minesweeper

2048

Reaction Time Test

Typing Test

Chess, Ludo, and more

All of them run directly in the browser.

⚙️ Tech stack

I built everything using:

Next.js

Canvas API (for game rendering)

LocalStorage (for saving scores)

The biggest focus was performance and smooth gameplay.

🧠 Challenges I faced

Performance

Rendering games with animations, particles, and effects can get heavy.

I had to:

Optimize canvas rendering

Reduce unnecessary re-renders

Handle mobile performance carefully

UX simplicity

Keeping things simple was harder than it looks.

I removed:

Complex menus

Extra steps

Everything is one click → play.

SEO for games

Gaming websites are very competitive.

So I focused on:

Clean URLs (/games/sudoku)

Structured metadata

Content + FAQs for each game

📈 What’s happening now

The site is starting to get indexed by Google and receiving its first users.

It’s still early, but I’m learning a lot about:

SEO

user behavior

performance optimization

🚀 What’s next

Adding more games (goal: 100+)

Leaderboards & challenges

Improving mobile experience

Growing traffic organically

🙌 Would love your feedback

If you try it, let me know:

👉 Which game did you like?
👉 What should I improve?

Thanks for reading!