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

Demo image: CSS Only Retro Dungeon Maze Puzzle

Author

  • Takane Ichinose

Made with

  • HTML (Pug) / CSS (SCSS)

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: -

Demo image: Play CSS Space Invaders

Author

  • Jon Slater

Made with

  • HTML / CSS

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: -

Demo image: NES Duck Hunt game in CSS

Author

  • Hai Le

Made with

  • HTML (Pug) / CSS (Less)

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: -

Demo image: Pure CSS/SVG Tic Tac Toe

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Pure CSS/SVG Tic Tac Toe

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Whac-A-Mole

Author

  • Deep Toaster

Made with

  • HTML / CSS

About a code

Pure CSS Whac-A-Mole

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

Responsive: no

Dependencies: -

Demo image: The Caretaker - A Pure CSS Horror/Puzzle Game

Author

  • Jamie Coulter

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

The Caretaker - A Pure CSS Horror/Puzzle Game

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

Responsive: no

Dependencies: -

Demo image: A Pure CSS Game - You Must Build a Lighthouse

Author

  • Ben Evans

Made with

  • HTML / CSS (SCSS)

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: -

Demo image: Plankman

Author

  • Alvaro Montoro

Made with

  • HTML / CSS

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: -

Demo image: CSS Rock-Paper-Scissors

Author

  • Alvaro Montoro

Made with

  • HTML / CSS

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: -

Demo image: CSS Tic-Tac-Toe

Author

  • Alvaro Montoro

Made with

  • HTML / CSS

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: -

Demo image: The Mine: No JS, CSS Only Adventure Game

Author

  • Jamie Coulter

Made with

  • HTML (Haml) / CSS (SCSS)

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: -

Demo image: Pure CSS Game: Stacker

Author

  • Jerry Low

Made with

  • HTML (Slim) / CSS (SCSS)

About a code

Pure CSS Game: Stacker

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

Responsive: no

Dependencies: -

Demo image: Pure CSS Carnival Game

Author

  • Una Kravets

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Carnival Game

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

Responsive: no

Dependencies: -

Demo image: Pure CSS Tic-Tac-Toe

Author

  • Žiga Miklič

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Tic-Tac-Toe

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

Responsive: yes

Dependencies: font-awesome.css