Introduction
While working on a netduino web server, I really liked the idea of doing some PHP-like preprocessing on the websites before they were returned for the client. Basically, the netduino would make a fantastic low power web server, and if I wasn’t expecting much traffic – I was thinking something for my own personal use – then it wouldn’t have to scale to a large number of users.
So, I wanted to add a mini compiler to it so that I could interpret some basic commands and create a small web page on the fly. Luckily, I decided to start small and implement tic tac toe. The basic idea was that the user would play against the server, so it would have to be capable of accepting the user’s choice of which square that they wanted and then make a move. The server would also have to determine who won or if the game was a tie.
Creating the Board
First off, I needed to create a game board. Here’s what the board looks like:
Along with the HTML code that creates the board:
<html>
<head>
<title>Tic Tac Toe</title>
<style type="text/css">
div.row {
height: 100px;
width: 306px;
margin-left: auto;
margin-right: auto;
}
div.col {
float: left;
height: 100px;
width: 100px;
font-size: 85px;
text-align: center;
}
div.center_row {
height: 100px;
width: 306px;
margin-left: auto;
margin-right: auto;
border-top: 3px solid black;
border-bottom: 3px solid black;
}
div.center_col {
float: left;
height: 100px;
width: 100px;
font-size: 85px;
text-align: center;
border-left: 3px solid black;
border-right: 3px solid black;
}
div.center {
margin-top: 40 px;
text-align: center;
}
button.empty {
height: 85px;
width: 85px;
margin-top: 7 px;
}
button.another {
font-size: 50 px;
}
</style>
</head>
<body>
<p style="font-size: 100px; text-align: center;">
<span style="color: red;">Tic</span>
<span style="color: blue;"> Tac </span>
<span style="color: black;">Toe</span>
</p>
<div class="row" style="margin-top: -50px;">
<div class="col">
<?sme $b00 ?>
</div>
<div class="center_col">
<?sme $b01 ?>
</div>
<div class="col">
<?sme $b02 ?>
</div>
</div>
<div class="center_row">
<div class="col">
<?sme $b10 ?>
</div>
<div class="center_col">
<?sme $b11 ?>
</div>
<div class="col">
<?sme $b12 ?>
</div>
</div>
<div class="row">
<div class="col">
<?sme $b20 ?>
</div>
<div class="center_col">
<?sme $b21 ?>
</div>
<div class="col">
<?sme $b22 ?>
</div>
</div>
<div class="center">
<?sme $another ?>
</div>
</body>
So, I used the same style as my previous post, where the custom code is enclosed with <?sme … ?> tags. Also, like last time, I just have a couple of “variables” that are going to get replaced with HTML code. The variables specify the board position, so the upper left hand square is $b00 and the middle square is $b11. The $another variable is a place holder to ask the user if they want to play another game.
So, this is not really close to a mini compiler at all. Luckily, I started small with just variables like last time. I was lucky because the latency on server responses was pretty slow. So slow, that I would claim that it is unusable. If a variable substitution doesn’t work, then there is no way that interpreting the code and then executing is going to have a reasonable response time. Therefore, I think that the complier idea is a bust, but I was still able to make a website to play tic tac toe against.
On the server side, it stores the state of the board and every time someone comes to the website they are presented with a blank board like the one above. This is done by replacing all of the board variables ($b00, etc.), with the following HTML code:
<button type=button class=\"empty\" onClick=\"location.href='tictactoe.sme?id=" + _id + "&loc=" + (3*row + col + 1) + "'\" />
Where id is a random number assigned to every game (so that the server can track the board state) and the loc is the board position, where the top left is 1 and the top right is 3. When the user clicks the button, they are redirected to a URL that looks something like this (I chose the upper right hand corner):
http://localhost:1554/tictactoe.sme?id=1128789054&loc=3
When the server receives a URL like this, it looks up the board associated with that id and selects the square for the user specified by the loc parameter. It then picks a move for itself and returns the board to the user.
Server Opponent AI
I implemented two algorithms for the computer. The first one I found from this website:
http://ethangunderson.com/blog/minimax-algorithm-in-c/
It is basically an optimal tic tac toe algorithm, so it will either win or tie. (It will never lose.) After a couple of times playing against it, I really wasn’t having any fun, so I decided to implement another strategy for the web server. This time it would randomly pick a square. This also didn’t turn out to be much fun to play against, but it was a little bit better because this time I could win!
So here it is in action. The first video is one of me playing against the optimal opponent and the web server is running on my desktop PC:
And the second video is of me playing against the random opponent and the web server is running on the netduino:
Conclusion
As you can see from the second video, the lag between me choosing a square and the web server responding is pretty long. Too long really. Therefore, I abandoned my original plan of creating a mini compiler and just stuck with my variable substitution code. If you have any questions about the implementation the code is attached or you can post a question/comment about the project to the comments section. I always like to hear feedback about my projects.