A simple Tic Tac Toe game using BlazorRajesh VijayBlockedUnblockFollowFollowingMay 18In this article we will create a simple Tic Tac Toe game using Blazor.
My goal was not to focus too much on the tic tac toe algorithm or to make the game “smart”, but to see how to build the game with just C# code and not using any JavaScript.
This is the final output.
We will use Visual Studio 2019 preview to create our project.
Make sure to install the latest Blazor extension from Visual Studio Marketplace.
We will start with designing the board.
Since the project templates use Bootstrap V.
4 we can use the row/cell bootstrap classes to build our board cells.
Our goal is to design a board with an initial look like this:Let’s start with adding a new game.
razor page and add the following HTML to design the board.
Next, we need to declare a list to hold the board values inside the @functions block.
var board = new List<string>();and we will initialize this list in a life cycle method called OnInit which is called when the component is initialized.
protected override void OnInit() { for (var i = 0; i < 9; i++) { board.
Add(null); } }To learn more about life cycle methods, you can visit here.
Next, let’s bind the click event to each cell using onclick event handler.
I am using the (x,y) coordinates as parameters to cell click event to identify the block.
Let’s add a CellClick event inside the @functions block.
In this method to keep the logic simple, we will assume the online player is ‘X’ and generate the opponent’s move by picking a random free spot from the board.
On each cell click we also have to check if it is a winning combination by checking three respective marks (X or O) horizontally vertically or diagonally.
Notice I am using this.
StateHasChanged() in many situations above wherever I am updating the board variable.
In order to manually refresh the UI we have to call the method StateHasChanged().
It tells the view it needs to re-render.
If it’s a winning condition then we have to highlight all three consecutive blocks and strike out the winning combinations.
For highlighting the cell let’s add a new class in site.
css.
highlight { background: #e7eb89;}and create a new method inside @functions block.
private string HighLight(int index) { if (results.
IndexOf(index) != -1) { return “highlight”; } return “dummy”;}since in checkWin( ) method we are capturing the winning combination in a list called ‘results’ we can check if the block index is contained in results array.
We will use the Razor syntax to bind the method that returns a class name.
<div class=”col-3 col-class text-center @HighLight(0)”Similarly to show the strike through we will add a new class in site.
css and add a method inside @functions block.
private string LineThru(int index) { if (results.
IndexOf(index) != -1) { return “line-through”; } return “dummy”; }Bind the new method to the span.
<span class=”@LineThru(0)” style=”font-size:xx-large”>@board[0]</span>You can view the entire source code here.
Demo.
.. More details