50+ JavaScript Games

An interactive memory game using custom CSS animations and linear() easing curves to reveal hidden emojis behind playful masks. Built with semantic button elements, accessibility attributes, and experimental squircle corners, it tracks active combos, tries, and high scores. Each card features a distinct CSS transform transition triggered on hover, focus, and selection states.

An advanced WebGL jigsaw puzzle simulation featuring realistic glass-like pieces powered by Three.js and Cannon.js. Each puzzle shape combines extruded spline geometries with compound rigid-body collision shapes to precisely model the jigsaw tabs and gravity. It includes an interactive preview container styled with a complex SVG halftone dot filter that fades dynamically using CSS @property transitions. (Requires: three.js, cannon.js)

Artillery Gorilla Canvas Retro Game is a plain JavaScript clone of the MS-DOS classic, QBasic Gorillas. Two gorillas on city rooftops take turns throwing explosive bananas, with calculations factoring in gravity, adjustable angles, and wind speed shown via an animated SVG windmill. It features single-player AI simulation, local two-player, dark/light modes, and destructible building hitboxes.

This is a 3D WebGL Shape Matcher Game. It utilizes the Three.js library to render a fully functional, physics-driven puzzle game directly in the browser. Its function is to demonstrate complex state management, 3D raycasting, and sequential animation chaining without the overhead of a dedicated game engine like Unity. (Requires: three.js, tween.js)

This is a Cinematic 3D Racing Pursuit Game. It renders an endless runner-style experience with high-speed lane switching, projectile combat, and dynamic obstacle generation. Its function is to demonstrate complex WebGL post-processing and real-time game loops inside the browser, transforming a static webpage into an interactive arcade environment. (Requires: three-js)

This is a Neon Retro Canvas Space Shooter. It is a fully self-contained arcade game rendered entirely within a web browser without external assets. Its function in a UI context is to demonstrate high-performance 2D rendering, touch-based virtual control schemes, and procedural audio synthesis.

This is an SVG Path Zuma Marble Shooter. It replicates the classic ball-matching arcade mechanic using a combination of SVG geometric data and a custom DOM-based rendering engine. Its function is to provide a complete, interactive game loop where players fire colored marbles to create matches of three or more along a complex, winding track defined by an invisible SVG path.

This is a Neon Vaporwave Pong Game (“CODEPONG 26”). It is a complete, browser-based arcade game rendered via the HTML5 Canvas 2D API. Its function is to provide a highly polished, playable experience that demonstrates advanced frontend techniques, including a custom physics engine, an adaptive AI opponent that gets harder as the game progresses, and programmatic audio synthesis for sound effects. (Requires: FontAwesome)

This is an Interactive Board Game Prototype (“Wildfire”). It is a standalone, browser-based puzzle game where the player defends a “home” tile from procedurally generated “fire” tiles spreading across a 6x6 grid. It functions as an excellent study in grid mathematics, DOM-based state management, and turn-based game loops built entirely without canvas rendering or heavy game engine frameworks.

This is an Interactive Sliding Grid Puzzle Game. It structures a multi-level spatial logic challenge entirely within the DOM. Its function is to demonstrate complex 2D state management, collision detection, and procedural grid generation without relying on the HTML Canvas API, utilizing standard HTML elements for interactive entertainment.

This is an HTML5 Canvas Stick Hero Game. It uses pure JavaScript and mathematical rendering to create an interactive 2D physics puzzle. The function is to demonstrate a continuous render loop controlled by user input timing, transforming simple mouse holds into spatial calculations.

This is a Procedural 3D Endless Runner Game. It utilizes Three.js to render a dynamically generated, infinite obstacle course. Its function is to deliver a complete, lane-based gameplay loop entirely within the browser. The environment and actors are constructed procedurally, eliminating external asset dependencies and ensuring instant execution. (Requires: three.js)

Modern web games often rely on bloated frameworks. This project demonstrates the raw capability of the native Canvas API combined with lightweight physics. It is a satisfying, tactile experience where the user’s cursor becomes a blade. By implementing a custom particle system and separating the collision logic (SAT.js) from the rendering, we achieve a high-performance arcade feel that runs smoothly even on modest hardware. (Requires: sat-js, mg-engine-js)

Web games often get bogged down in heavy engines. This project is a love letter to the raw power of the HTML5 Canvas API. It is a pure, dependency-free arcade experience (save for a tiny sound synthesizer) that pits player reflexes against mathematical precision. You aren’t just moving pixels; you are navigating a vector field, dodging a ray-casting collision detector that speeds up as you survive. It is tense, fast, and built on solid geometry.

This 3D Tilt Maze Game recreates the classic wooden labyrinth toy using web technologies. By combining CSS perspective with JavaScript keyboard events, it simulates a physical board that tilts to roll a ball. The game includes a rudimentary physics engine for ball movement and wall collision, complete with multiple levels generated from array maps.

A retro-styled, full-screen Snake game rendered on HTML5 Canvas. JavaScript manages the game loop, collision detection, and array-based movement logic, while CSS provides a neon arcade aesthetic.

A massive, full-stack client-side game simulation (Snakes & Ladders) driven by imperative Vanilla JavaScript/jQuery.

A complex puzzle where each image fragment can be flipped or rotated in any direction, challenging the player’s spatial reasoning to reconstruct the original picture.

A full-featured browser game with retro aesthetics, procedural level generation, intelligent enemies, and a scoring system, running smoothly thanks to a combination of Canvas for static elements and DOM for dynamic content.

A DOM-based platformer engine that constructs levels from numeric arrays, utilizing document.elementFromPoint for real-time collision detection and physics simulation. The JavaScript game loop manages gravity, gamepad support, and level transitions, while intricate CSS gradients and animations bring the tile-based world and character to life.

This is a complete Minesweeper game built with vanilla JavaScript, featuring a recursive checktile function for game logic and a dynamic UI that is procedurally generated with a for loop. The modern, clean aesthetic is styled with SCSS and a themeable --main-color CSS variable, while a shake animation on game over adds a polished feel, creating a full-featured and engaging browser-based game.

This tower defense-style game leverages an object-oriented class hierarchy with p5.Vector physics to create dynamic ball interactions, where core gameplay revolves around protecting a central orb from attacker waves using a reload-managed cannon.

An implementation of a sliding puzzle using GSAP Draggable - featuring a custom snap function for grid alignment and onThrowComplete logic that uses hitTest to determine move validity and trigger the swap animation.

This maze puzzle is implemented using pure JavaScript and CSS 3D transforms which tilt the maze, creating the illusion of gravity and ball movement. The code features complex collision physics for balls hitting walls and “rolling” around corners with precise mathematical calculations.

The engine implements a lightweight game loop via requestAnimFrame for smooth rendering, featuring a scriptable and fully customizable map structure defined by a simple - easily modifiable - JavaScript object.

Vanilla JS game built with the Canvas API uses OOP principles for physics-based color-matching and implements dynamic difficulty scaling - gradually increasing ball velocity within an setInterval loop.

This pure Vanilla JS arcade game leverages the HTML Canvas API to render real-time projectile and enemy movement, utilizing sprites for an old-school look, and implements mouse-based aiming and firing for interactive defense against asteroids.

This demo implements a tilt-controlled marble labyrinth using the HTML Canvas API for rendering and custom physics logic in vanilla JavaScript to handle sphere movement, gravity simulation, and collision detection with the static map geometry.

This minimalist path-finding game uses SVG elements for a scalable and responsive rendering of the board and connections. The core JavaScript logic includes the getDistance utility function to determine the nearest neighbor and manages dynamic level progression based on performance.

This 2D arcade prototype, built with the Phaser.io framework, implements the core ’time moves only when you move’ mechanic by dynamically scaling the game’s internal speed based on real-time player input, delivering a unique strategic shooter experience.