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 code example has been updated to .NET 7.

The order process

When you purchase the code example, you'll be given a ZIP file that contains all the code files that you can download and extract onto your machine.

Simply add your e-mail address to the form below, agree to the terms and conditions, and you'll be redirected to our payment provider to take payment.

On successful payment, our payment provider will redirect you to a page where you can download the ZIP file. A link to download the ZIP file will also be emailed to you.

Software

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

• Visual Studio 2022. Version 17.7.4 or above. It will work with the free community version.
• .NET 7.0.11 SDK, or above.

Open the Project in Visual Studio

Open up RoundTheCode.Connect4.sln in Visual Studio.

Start the project in Visual Studio and it should automatically open https://localhost:4100 in a web browser.

From there, you'll be able to play Connect 4 in the web browser.

The web application will tell you whether it's red or yellow's turn next. Use your mouse cursor to select which column you wish to drop your disk into.

When there is four in a row, the web application will notify you that there has been a winner.

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.