Just CSS. Absolutely NO jQuery/javascript or any other programming language.

Another update to a demonstration I produced on the 11th March 2022 using the latest styles available.

A simple game of Connect 4 for player v player.

The game always starts with a yellow disc.

Using the mouse just hover the column in which you want to drop your counter. This will show the counter above the column. Click the mouse to drop the counter.

On touch screens just tap the column in which you want to drop your counter.

Once a yellow disc is played the top of column discs changes to red, and once a red disc is played this changes back to yellow, and so on.

The CSS keeps track of discs played and will recognise a winning line, horizontal, vertical and diagonal.

Once a winning line is recognised the game will stop and the winner declared.

To play again just click/tap the 'New Game' button under the game and the game will reset.

This is also responsive so that the game will resize to suit all devices.

The 2022 game used the latest CSS available and took around 350 lines of CSS calculations. This version now takes around 100 lines.

The 2022 game also used labels for each checkbox (HTML - 184 lines), whereas this version uses no labels and radio inputs (HTML - 64 lines).

This demonstration uses fixed width calculations for wide screens using just two CSS variables in px sizes. When the browser window is less than 700px wide, the two CSS variables change to vw sizing and the demo becomes responsive.

The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet.