CSS Games

About a code

A Pure CSS Table Tennis Game

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Can Connect 4?

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Only Puzzle Game

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pure CSS Mine Sweeper

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Play CSS Space Invaders

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS/SVG Tic Tac Toe

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Whac-A-Mole

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Caretaker - A Pure CSS Horror/Puzzle Game

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

A Pure CSS Game - You Must Build a Lighthouse

100% CSS. No artificial colours or ingredients.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Rock-Paper-Scissors

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Tic-Tac-Toe

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Game: Stacker

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pure CSS Carnival Game

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pure CSS Tic-Tac-Toe

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css