Connect 4 game in Blazor WebAssembly

Download the Connect 4 game, coded in Microsoft's newest web framework, Blazor WebAssembly.

Connect 4 is where you have two players, where one player is red and the other is yellow. Each player takes alternate turns, and drops their coloured disks into a 7 column by 6 row suspended grid.

When the player takes their turn, their disk will fall into the lowest unoccupied space in the column.

The aim of the game is for a player to get four of their pieces in a row. This can be done either horizontally, vertically, or diagonally.

This ASP.NET Core example is built up using C# and Razor component's. Not only can you play the game with this example, you can also keep track of the score, and reset the game.


This is the software that will need to be installed onto your machine.

Get The Application Working

These are the steps to get the application working.

  • Fill out the source code form. We will send you an email where you can download the source code.

You are now ready to go.

Open the Project in Visual Studio

Open up RoundTheCode.Connect4.sln in Visual Studio.

Start the project in Visual Studio.

Hit https://localhost:4100, and you can now play Connect 4 in your web browser.

More Information

This example was done as part of a live coding challenge that we did in YouTube.

We had an hour to code the application. Within that hour, we had to design the application, and build up the functionality. We also built a scoreboard for the game.

Have a watch back of our live stream to see how we went about building it.

In-addition, read about how we created Connect 4 in Blazor WebAssembly. Find out what approach we took, how we built up the application and see the code snippets used.