50+ JavaScript Games (Page 2)
Examples
Tile-Based Copycat Game
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;.
See the Pen Tile-Based Copycat Game.
Cheap AI Chess Game
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.
See the Pen Cheap AI Chess Game.
ASTEROIDS (Real-Time Rendering)
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.
See the Pen ASTEROIDS (Real-Time Rendering).
Canvasteroids Game
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.
See the Pen Canvasteroids Game.
Victorious Game (Advanced AI)
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.
See the Pen Victorious Game (Advanced AI).
Next-Gen Tic-Tac-Toe Game (Shiny Edges)
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.
See the Pen Next-Gen Tic-Tac-Toe Game (Shiny Edges).
Jeweled Game
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.
See the Pen Jeweled Game.
Lorde Hero Rhythm Game
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.
See the Pen Lorde Hero Rhythm Game.
Emoji Memory Match
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).
See the Pen Emoji Memory Match.
Flottenmanöver: A Battleship Game
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.
See the Pen Flottenmanöver: A Battleship Game.
Tower of Hanoi Game in Pure JavaScript
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.
See the Pen Tower of Hanoi Game in Pure JavaScript.
Doodle Jump Clone with HTML5 Canvas
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.
See the Pen Doodle Jump Clone with HTML5 Canvas.
Pacman Game with HTML5 Canvas and JavaScript
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.
See the Pen Pacman Game with HTML5 Canvas and JavaScript.