N-Back Memory Game
Project Overview
The N-Back Game is a browser-based cognitive training application built with vanilla JavaScript that challenges players’ working memory through spatial and visual pattern recognition. Built with a retro 8-bit aesthetic using NES.css, the game features multiple original game modes that extend beyond traditional N-Back methodology, providing diverse approaches to memory training.
Players watch sequences of colored shapes appearing in grid positions and must identify matches, recall positions, or draw patterns from memory. With adjustable difficulty settings and persistent high score tracking, the game adapts to different skill levels while maintaining an engaging, arcade-like experience.
Core Features
State Management
The game uses localStorage for two key persistence features:
Settings Storage: All configuration parameters (grid size, N-back value, timing) persist across sessions, allowing players to maintain their preferred difficulty settings.
Nested High Score System: High scores are tracked with five-level nesting:
highScores[gameMode][nBack][gridSize][innerGridSize][timeInterval];This ensures fair comparison - scores achieved with different configurations don’t compete against each other. Each parameter combination has its own leaderboard.
Procedural Shape Generation
The ShapeSystem class generates random colored shapes represented as 2D boolean arrays. The system ensures:
- No all-empty shapes (at least one visible cell)
- No duplicates when an exclude list is provided
- Even color distribution across six hues (HSL spectrum at 60° intervals)
Responsive Grid System
The game dynamically constructs nested grids using DOM manipulation. Each cell in the main grid can contain a figure, which itself is a sub-grid of colored cells. The system handles:
- Square aspect ratio maintenance on window resize
- Adjacent cell border removal for cohesive shape appearance
- SVG-based pixel-art borders matching the retro theme
- Dynamic sizing based on available viewport space
Original Game Modes
The application features four distinct modes - three are original variations created specifically for this implementation.
Classic Mode (Traditional N-Back)
The standard N-Back implementation. Players watch colored shapes appearing in different positions and use three toggle buttons (Shape, Position, Color) to indicate which properties match the figure displayed N steps ago. Correct matches require toggling exactly the matching properties - no more, no less.
Draw Mode (Original)
An original mode that alternates between observation and reconstruction. The game shows new figures 75% of the time, building the memory buffer. The remaining 25%, the grid empties and players must:
- Click the grid position where the target figure appeared N steps ago
- Reconstruct the shape by clicking individual cells to activate/deactivate them
- Select the correct color from six palette buttons
- Submit their recreation for validation
This mode requires precise recall of position, shape topology, and color simultaneously - testing visual memory rather than pattern recognition.
Reverse Mode (Original)
An original inversion of the N-Back concept. Instead of “does this match N steps back?”, players answer “how many steps ago did I see this?”. The game builds a sequence of unique figures, then occasionally displays one from the current buffer at a random position. Players adjust a slider (range 1 to N) to indicate when they saw that exact figure, then submit their answer.
This mode shifts focus from recognition to temporal recall, requiring players to maintain chronological ordering of the sequence rather than just comparing against a single reference point.
Select All Mode (Original)
An original multi-target variant. After building the N-back buffer, the game occasionally fills the entire grid with random figures. Players must click ALL cells containing figures that share at least one property (position, shape, OR color) with the target from N steps ago.
Correct answers require selecting exactly the matching set - missing one or selecting extras fails the challenge. This tests sustained attention and parallel processing, as players compare multiple figures simultaneously against memory.
Configuration System
Four adjustable parameters control difficulty:
| Setting | Range | Effect |
|---|---|---|
| Grid Size | 3-5 | Outer grid dimensions (spatial complexity) |
| Inner Grid Size | 2-5 | Shape detail level (visual complexity) |
| N-Back | 1-20 | Memory depth required |
| Time Interval | 0.5-3s | Display duration per figure |
User Experience
Keyboard Controls:
- ESC: Pause/resume game, navigate back from menus
- S/P/C: Toggle shape/position/color in Classic mode
Game State Dialogs:
- Start prompt explaining controls before first round
- Pause overlay when ESC is pressed (resume with ESC)
- Exit confirmation preventing accidental streak loss
Design Philosophy
Streak-Based Scoring
The game tracks consecutive correct answers rather than total score. Each mistake resets to zero, making errors psychologically impactful and encouraging sustained focus over quantity.
Probabilistic Challenges
The 75/25 split between observation and challenge phases in Draw, Reverse, and Select All modes prevents predictability. Players can’t anticipate when they’ll be tested, forcing genuine memory engagement rather than pattern-based gameplay.
Configuration-Specific Leaderboards
By storing high scores per configuration, the game ensures fair competition. A 2-back streak with 1-second intervals doesn’t compete against 10-back with 3-second intervals - each setup has its own benchmark.