Collection of free HTML and pure CSS game code examples from Codepen and other resources

A Pure CSS Table Tennis Game

No images. No JavaScript. Only CSS. And a few HTML radio inputs.

Can Connect 4?

CSS Only Puzzle Game

Pure CSS Mine Sweeper

CSS Only Retro Dungeon Maze Puzzle

This is a simple maze or dungeon escape game, with its functionality made entirely in CSS. The main goal of this game is to of course find the finish line. The main rule of this game is to click the horizontal or vertical tile beside the character. You may not click diagonally.

Play CSS Space Invaders

A reasonably complete version of Space Invaders, using only CSS, Includes a high score table.

NES Duck Hunt game in CSS

This is a remake of the classic NES game duck hunt in CSS, it is made up entirely of HTML and CSS, no images are used.

Pure CSS/SVG Tic Tac Toe

Pure CSS Whac-A-Mole

The Caretaker - A Pure CSS Horror/Puzzle Game

A Pure CSS Game - You Must Build a Lighthouse

100% CSS. No artificial colours or ingredients.

Plankman

Plankman is a pirate-themed version of the classic hangman game. It is developed using HTML and CSS without a single line of code.

CSS Rock-Paper-Scissors

A Rock-Paper-Scissor game developed in HTML+CSS without any JavaScript.

CSS Tic-Tac-Toe

Tic-Tac-Toe game developed using only HTML and CSS, without any JavaScript.

The Mine: No JS, CSS Only Adventure Game

The logic behind it is actually relatively simple and uses a 7+ year old technique. By clicking on an arrow (in this case a label), it checks the relevant input and then using the :checked pseudo selector, we can traverse down the DOM the correct amount of iterations and shift the entire viewport a whole 'segment' over. The lifts work entirely the same way except instead when we click down, we are actually checking the segment below.

Pure CSS Ghost Bustin' game with CSS Variables

A pure CSS game. A "whack-a-mole" type game where you bust ghosts by tapping them. It leverages checkbox tricks and the use of counter-increment to keep score. It also leverages CSS variables to assign scores to ghosts along with their speed and delay. Finally, it's wrapped in a form so we can reset everything with a type='reset' at the end.

Pure CSS Game: Stacker

Pure CSS Carnival Game

Pure CSS Tic-Tac-Toe