|
|
 |
|
|
|
|
|
|
Programming Tic Tac Toe with ASP
Steve Marshall
May 7, 2002
The easiest way to learn a programming language is to actually sit down and write code. In this lesson, I will be showing you how to write a simple Tic Tac Toe program using query strings, variables, and if-then statements.
Click here to see the game in action.
The theory behind this program is that the tic tac toe board is drawn out using tables, and a white image is placed in each square of the board. When the player clicks on of the blank squares, the clear image is replaced with that player's letter (either 'X' or 'O'). Once one player gets 3 squares in a row, they win, or if the entire board is filled up without a winner, it is a tie. The number of wins and ties are kept track of and displayed below the game board.
To begin, start a blank document and save it as 'play.asp'
Alright, first we are going to define our variables. We will need a variable to keep track of who's turn it is ('turn'), two more variables to keep track of how many wins each player has ('xwins' & 'owins'), a variable to keep track of how many tie games there have been ('tie'), and nine variables to keep track of which player has control of each square of the board ('s1' - 's9').
Now we will provide you with the code for this program, and then we will go through and tell you what each part of it does.
<%
turn = request("turn")
xwins = request("xwins")
owins = request("owins")
tie = request("tie")
s1 = request("s1")
s2 = request("s2")
s3 = request("s3")
s4 = request("s4")
s5 = request("s5")
s6 = request("s6")
s7 = request("s7")
s8 = request("s8")
s9 = request("s9")
If turn = "x" Then
turn = "o"
Else
turn = "x"
End If
If xwins = "" Then
xwins = 0
End If
If owins = "" Then
owins = 0
End If
If tie = "" Then
tie = 0
End If
If s1 = s2 AND s1 = s3 AND s1 <> "" Then
If s1 = "x" Then
s1 = "x2"
s2 = "x2"
s3 = "x2"
xwins = xwins + 1
gameover = true
Else
s1 = "o2"
s2 = "o2"
s3 = "o2"
owins = owins + 1
gameover = true
End If
ElseIf s4 = s5 AND s4 = s6 AND s4 <> "" Then
If s4 = "x" Then
s4 = "x2"
s5 = "x2"
s6 = "x2"
xwins = xwins + 1
gameover = true
Else
s4 = "o2"
s5 = "o2"
s6 = "o2"
owins = owins + 1
gameover = true
End If
ElseIf s7 = s8 AND s7 = s9 AND s7 <> "" Then
If s7 = "x" Then
s7 = "x2"
s8 = "x2"
s9 = "x2"
xwins = xwins + 1
gameover = true
Else
s7 = "o2"
s8 = "o2"
s9 = "o2"
owins = owins + 1
gameover = true
End If
ElseIf s1 = s4 AND s1 = s7 AND s1 <> "" Then
If s1 = "x" Then
s1 = "x2"
s4 = "x2"
s7 = "x2"
xwins = xwins + 1
gameover = true
Else
s1 = "o2"
s4 = "o2"
s7 = "o2"
owins = owins + 1
gameover = true
End If
ElseIf s2 = s5 AND s2 = s8 AND s2 <> "" Then
If s2 = "x" Then
s2 = "x2"
s5 = "x2"
s8 = "x2"
xwins = xwins + 1
gameover = true
Else
s2 = "o2"
s5 = "o2"
s8 = "o2"
owins = owins + 1
gameover = true
End If
ElseIf s3 = s6 AND s3 = s9 AND s3 <> "" Then
If s3 = "x" Then
s3 = "x2"
s6 = "x2"
s9 = "x2"
xwins = xwins + 1
gameover = true
Else
s3 = "o2"
s6 = "o2"
s9 = "o2"
owins = owins + 1
gameover = true
End If
ElseIf s1 = s5 AND s1 = s9 AND s1 <> "" Then
If s1 = "x" Then
s1 = "x2"
s5 = "x2"
s9 = "x2"
xwins = xwins + 1
gameover = true
Else
s1 = "o2"
s5 = "o2"
s9 = "o2"
owins = owins + 1
gameover = true
End If
ElseIf s3 = s5 AND s3 = s7 AND s3 <> "" Then
If s3 = "x" Then
s3 = "x2"
s5 = "x2"
s7 = "x2"
xwins = xwins + 1
gameover = true
Else
s3 = "o2"
s5 = "o2"
s7 = "o2"
owins = owins + 1
gameover = true
End If
ElseIf s1 <> "" AND s2 <> "" AND s3 <> "" AND s4 <> ""
AND s5 <> "" AND s6 <> "" AND s7 <> "" AND s8 <> ""AND s9 <> "" Then
tie = tie + 1
gameover = true
End If
%>
<html>
<head>
<script language="JavaScript">
<!--
function MM_preloadImages() {
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<style>
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: none}
A:hover {color: "#FFFF80"}
</style>
<title>Tic Tac Toe</title>
</head>
<body bgcolor="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF"
marginheight="0" marginwidth="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" onLoad="MM_preloadImages('im/x.gif','im/x2.gif','im/o.gif','im/o2.gif')">
<table border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td height="50" width="50"><%If s1 <> "" Then%><img src="im/<%=s1%>.gif" height="50" width="50"><%Else%><%If gameover Then%><img src="im/clear.gif" height="50" width="50" border="0"><%Else%><a href="play.asp?turn=<%=turn%>&xwins=<%=xwins%>&owins=<%=owins%>&tie=<%=tie%>&s1=<%=turn%>&s2=<%=s2%>&s3=<%=s3%>&s4=<%=s4%>&s5=<%=s5%>&s6=<%=s6%>&s7=<%=s7%>&s8=<%=s8%>&s9=<%=s9%>"><img src="im/clear.gif" height="50" width="50" border="0"></a><%End If%><%End If%></td>
<td rowspan="5" width="5" bgcolor="#000000"><img src="im/clear.gif" height="1" width="5"></td>
<td height="50" width="50"><%If s2 <> "" Then%><img src="im/<%=s2%>.gif" height="50" width="50"><%Else%><%If gameover Then%><img src="im/clear.gif" height="50" width="50" border="0"><%Else%><a href="play.asp?turn=<%=turn%>&xwins=<%=xwins%>&owins=<%=owins%>&tie=<%=tie%>&s1=<%=s1%>&s2=<%=turn%>&s3=<%=s3%>&s4=<%=s4%>&s5=<%=s5%>&s6=<%=s6%>&s7=<%=s7%>&s8=<%=s8%>&s9=<%=s9%>"><img src="im/clear.gif" height="50" width="50" border="0"></a><%End If%><%End If%></td>
<td rowspan="5" width="5" bgcolor="#000000"><img src="im/clear.gif" height="1" width="5"></td>
<td height="50" width="50"><%If s3 <> "" Then%><img src="im/<%=s3%>.gif" height="50" width="50"><%Else%><%If gameover Then%><img src="im/clear.gif" height="50" width="50" border="0"><%Else%><a href="play.asp?turn=<%=turn%>&xwins=<%=xwins%>&owins=<%=owins%>&tie=<%=tie%>&s1=<%=s1%>&s2=<%=s2%>&s3=<%=turn%>&s4=<%=s4%>&s5=<%=s5%>&s6=<%=s6%>&s7=<%=s7%>&s8=<%=s8%>&s9=<%=s9%>"><img src="im/clear.gif" height="50" width="50" border="0"></a><%End If%><%End If%></td>
</tr>
<tr>
<td colspan="5" height="5" bgcolor="#000000"><img src="im/clear.gif" height="5" width="1"></td>
</tr>
<tr>
<td height="50" width="50"><%If s4 <> "" Then%><img src="im/<%=s4%>.gif" height="50" width="50"><%Else%><%If gameover Then%><img src="im/clear.gif" height="50" width="50" border="0"><%Else%><a href="play.asp?turn=<%=turn%>&xwins=<%=xwins%>&owins=<%=owins%>&tie=<%=tie%>&s1=<%=s1%>&s2=<%=s2%>&s3=<%=s3%>&s4=<%=turn%>&s5=<%=s5%>&s6=<%=s6%>&s7=<%=s7%>&s8=<%=s8%>&s9=<%=s9%>"><img src="im/clear.gif" height="50" width="50" border="0"></a><%End If%><%End If%></td>
<td height="50" width="50"><%If s5 <> "" Then%><img src="im/<%=s5%>.gif" height="50" width="50"><%Else%><%If gameover Then%><img src="im/clear.gif" height="50" width="50" border="0"><%Else%><a href="play.asp?turn=<%=turn%>&xwins=<%=xwins%>&owins=<%=owins%>&tie=<%=tie%>&s1=<%=s1%>&s2=<%=s2%>&s3=<%=s3%>&s4=<%=s4%>&s5=<%=turn%>&s6=<%=s6%>&s7=<%=s7%>&s8=<%=s8%>&s9=<%=s9%>"><img src="im/clear.gif" height="50" width="50" border="0"></a><%End If%><%End If%></td>
<td height="50" width="50"><%If s6 <> "" Then%><img src="im/<%=s6%>.gif" height="50" width="50"><%Else%><%If gameover Then%><img src="im/clear.gif" height="50" width="50" border="0"><%Else%><a href="play.asp?turn=<%=turn%>&xwins=<%=xwins%>&owins=<%=owins%>&tie=<%=tie%>&s1=<%=s1%>&s2=<%=s2%>&s3=<%=s3%>&s4=<%=s4%>&s5=<%=s5%>&s6=<%=turn%>&s7=<%=s7%>&s8=<%=s8%>&s9=<%=s9%>"><img src="im/clear.gif" height="50" width="50" border="0"></a><%End If%><%End If%></td>
</tr>
<tr>
<td colspan="5" height="5" bgcolor="#000000"><img src="im/clear.gif" height="5" width="1"></td>
</tr>
<tr>
<td height="50" width="50"><%If s7 <> "" Then%><img src="im/<%=s7%>.gif" height="50" width="50"><%Else%><%If gameover Then%><img src="im/clear.gif" height="50" width="50" border="0"><%Else%><a href="play.asp?turn=<%=turn%>&xwins=<%=xwins%>&owins=<%=owins%>&tie=<%=tie%>&s1=<%=s1%>&s2=<%=s2%>&s3=<%=s3%>&s4=<%=s4%>&s5=<%=s5%>&s6=<%=s6%>&s7=<%=turn%>&s8=<%=s8%>&s9=<%=s9%>"><img src="im/clear.gif" height="50" width="50" border="0"></a><%End If%><%End If%></td>
<td height="50" width="50"><%If s8 <> "" Then%><img src="im/<%=s8%>.gif" height="50" width="50"><%Else%><%If gameover Then%><img src="im/clear.gif" height="50" width="50" border="0"><%Else%><a href="play.asp?turn=<%=turn%>&xwins=<%=xwins%>&owins=<%=owins%>&tie=<%=tie%>&s1=<%=s1%>&s2=<%=s2%>&s3=<%=s3%>&s4=<%=s4%>&s5=<%=s5%>&s6=<%=s6%>&s7=<%=s7%>&s8=<%=turn%>&s9=<%=s9%>"><img src="im/clear.gif" height="50" width="50" border="0"></a><%End If%><%End If%></td>
<td height="50" width="50"><%If s9 <> "" Then%><img src="im/<%=s9%>.gif" height="50" width="50"><%Else%><%If gameover Then%><img src="im/clear.gif" height="50" width="50" border="0"><%Else%><a href="play.asp?turn=<%=turn%>&xwins=<%=xwins%>&owins=<%=owins%>&tie=<%=tie%>&s1=<%=s1%>&s2=<%=s2%>&s3=<%=s3%>&s4=<%=s4%>&s5=<%=s5%>&s6=<%=s6%>&s7=<%=s7%>&s8=<%=s8%>&s9=<%=turn%>"><img src="im/clear.gif" height="50" width="50" border="0"></a><%End If%><%End If%></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#000000">
<table border="0" cellpadding="0" cellspacing="1" width="100%">
<tr>
<td bgcolor="#184A7B" height="15" align="center"><font face="verdana" size="1" color="#FFFFFF"><b><%If gameover Then%><a href="play.asp?xwins=<%=xwins%>&owins=<%=owins%>&tie=<%=tie%>">Game Over</a><%Else%><%If turn="o" Then%>O<%Else%>X<%End If%>'s Turn<%End If%></b></font></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" height="15">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33%" align="center"><font face="verdana" size="1" color="#184A7B"><b>X: <%=xwins%></b></font></td>
<td width="34%" align="center"><font face="verdana" size="1" color="#184A7B"><b>O: <%=owins%></b></font></td>
<td width="33%" align="center"><font face="verdana" size="1" color="#184A7B"><b>Tie: <%=tie%></b></font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Continue -->
|
|
|
|
|
|
|
|
|
