Tic-Tac-Toe game in Blazor WebAssembly

Download the Tic-Tac-Toe game (also known as Noughts & Crosses) coded in Microsoft's newest web framework, Blazor WebAssembly.

Tic-Tac-Toe is where you have 2 players on a 3 x 3 grid. One of the players uses the 'O' mark (or noughts). The other play uses the 'X' mark (or crosses).

Each player takes alternate turns. The aim of the game is to get three in a row with their mark. They can either three in a row horizontally, vertically or diagonally. If no one gets three in a row, the game is drawn.

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.TicTacToe.sln in Visual Studio.

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

From there, you'll be able to play Tic Tac Toe in the web browser.

Click on the square that you wish to make your move and it will add the mark. Whenever a player gets three in a row, the web application will tell you who has won.

If all nine squares are marked and there is no winner, the web application will tell you it's a draw.

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 Tic-Tac-Toe in Blazor WebAssembly. Find out what approach we took, how we built up the application and see the code snippets used.