Browser Games

About These Games

All games on this page are written from scratch using pure HTML, CSS, and JavaScript — no frameworks, no third-party game engines, no trackers. They run entirely in your browser, load in under a second, and work offline once cached.

Each game is optimized for both touch (mobile/tablet) and pointer (desktop/laptop) input. Snake features a D-pad overlay and canvas swipe support. 2048 uses touch swipe with double-tap-to-undo. Memory Match and Tic Tac Toe are fully tap/click driven. Tetris and Breakout support keyboard, mouse, and on-screen mobile buttons.

Controls Quick Reference

• Snake — Arrow keys / WASD, swipe on canvas, or D-pad buttons. P = pause, R = restart.
• 2048 — Arrow keys / WASD, swipe to slide tiles, double-tap or Z to undo.
• Memory Match — Tap/click cards. Hint button reveals two cards briefly. New Game resets.
• Tic Tac Toe — Tap/click a cell. Toggle between vs AI and vs Human. Reset Scores clears counters.
• Tetris — Arrow keys to move/rotate, Space to hard drop, C to hold piece, P to pause.
• Breakout — Mouse or arrow keys to move paddle, click/Space to launch ball. Touch supported.
• Neon Clash — WASD + J/K/L (Player 1), Arrow keys + 1/2/3 (Player 2). Online: share room code.

The Technology Behind Browser Games

Every game on this page is built on two browser-native APIs: the HTML5 Canvas API for rendering game graphics, and the requestAnimationFrame loop for smooth, 60fps animation that synchronises with the display refresh rate. This combination produces game loops that are efficient, battery-friendly on mobile, and automatically pause when the browser tab is hidden — saving resources when the player switches away.

The Canvas API gives JavaScript direct access to a 2D pixel buffer. Every frame, the game clears the canvas and redraws all game objects — the snake's body segments, the falling Tetrimino, the ball and bricks in Breakout — from scratch. This immediate-mode rendering model is simpler than retained-mode DOM manipulation and performs well for fast-moving games where most of the screen changes every frame.

Game Development Concepts Demonstrated

These games collectively illustrate the core concepts of browser game development:

• Game loop & delta time — Snake and Breakout use interval-based loops; Tetris and 2048 use event-driven updates. Understanding when to use each pattern is a core game development skill.
• Collision detection — Breakout uses AABB (axis-aligned bounding box) collision between the ball and bricks. Snake detects self-collision by checking whether the head's grid position matches any body segment's position. Tic Tac Toe uses a win-state matrix check after each move.
• AI with Minimax — Tic Tac Toe's Hard AI uses the Minimax algorithm with alpha-beta pruning to evaluate every possible game state and select the optimal move. At full depth on a 3×3 board, Minimax is computationally trivial — making this an ideal teaching example for adversarial search.
• State machines — Every game manages a state machine: idle → playing → paused → game over → restarting. Correct state management prevents input from being processed in the wrong game phase.
• Touch & pointer unification — Handling both mouse events and touch events with the same code paths (using pointer events where supported, with touch event fallbacks) is a key challenge in building games that work on all devices.
• Local storage persistence — High scores in Snake, 2048, Tetris, and Breakout persist across sessions using localStorage. This is the simplest form of game save data in a browser context.
• Canvas scaling — Games dynamically resize the canvas to fit the available viewport space while maintaining the correct grid proportions. This requires recalculating cell sizes on every window resize event.

Privacy & Data

These games collect no personal data. There are no accounts, no analytics on gameplay, and no data transmitted to any server. High scores are stored in your browser's localStorage and remain on your device. Neon Clash's online multiplayer uses WebSockets only to relay control inputs between players in real time — no gameplay data is stored after a session ends.

All game assets (code, fonts, graphics) are loaded from this domain or from Google Fonts, which is a CDN request for stylesheet data only. No third-party trackers, social pixels, or advertising SDKs are embedded in the game pages.

Performance & Offline Play

Every game page is a single self-contained HTML file with inlined CSS and JavaScript. There are no external JavaScript dependencies. Page weight is kept minimal — the Snake page is under 30KB total before font loading. Once cached by your browser, all games except Neon Clash's online multiplayer mode work fully offline with no internet connection required.

Rendering is optimised to avoid unnecessary canvas redraws. Snake only redraws the head and tail cells that changed since the last frame, rather than clearing the entire canvas. Tetris caches the static portion of the board (settled pieces) separately from the active falling piece, reducing per-frame work at high piece counts.