45 JavaScript Games

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.

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.

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.

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.

This technical demo showcases a tile-based puzzle game built on the Diorama engine, leveraging the HTML Canvas API for rendering; smooth object movement is implemented via custom tweening utilities, such as Util.easeInOutQuad, with the retro-pixel aesthetic achieved using the CSS property image-rendering: pixelated;.

A fully playable chess demo featuring an optional random AI engine written in TypeScript, complete with game state management, move validation, and adjustable autoplay speed, all within a modern frontend.

Built on a performant, real-time rendering loop with custom mathematical utilities, this demo features robust entity management and advanced damage mechanics that trigger dynamic particle effects on every impact.

A dynamic Asteroids clone built on pure HTML Canvas, showcasing advanced vector graphics and utilizing manual pixel manipulation for realistic and high-impact particle explosions.

Leverages a sophisticated AI decision tree for competitive fight-or-flight behavior, combined with precise barycentric collision detection to calculate shot-to-rocket impacts based on geometric area.

Next-Gen Tic-Tac-Toe. The classic game with technical flair - features full accessibility (play with the keyboard!), a theme picker using localStorage, and a cool hover glow effect on the board using pure CSS.

This demo showcases a “match-three” game implementation in pure JavaScript, focusing on core game logic: detecting and clearing matches, generating “bomb” and “rainbow” power-ups, and handling board cascades. Technically, it illustrates how to manage complex game state without frameworks, using only JS, CSS, and GSAP for animations.

This demo shows a music rhythm game with dynamic CSS animations and Web Audio API for interactive sound. It features responsive UI, real-time score calculation, and adjustable difficulty.

This “Memory Match” game demo shows how to build a complete interactive game using pure JavaScript, including logic for randomizing elements, tracking pairs, and managing game state (score, board lock).

This is a complete implementation of the game “Battleship” using pure JavaScript, HTML, and CSS. The code includes the logic for ship placement, hit detection, sinking ships, and managing turns for both the player and the computer. A notable feature is the use of Base64 images for ship sprites and their dynamic rendering on the game board.

A pure JavaScript implementation of the classic puzzle, this demo highlights a robust game engine with responsive sizing, a dynamic move counter, and a winning state with a custom canvas animation. It’s a great example of building an entire application without frameworks.

A complete HTML5 Canvas implementation of Doodle Jump featuring sprite-based animations, realistic physics with gravity and acceleration, and procedurally generated platforms with different behaviors.

A faithful implementation of the classic Pacman game using vanilla JavaScript and HTML5 Canvas, featuring smooth sprite animation, collision detection, and original game mechanics with multiple ghost AI behaviors.