Problem scenario
You want to write a program using JavaScript. You want to play Tic-Tac-Toe. What do you do?
Solution
1. Save the file below as contint.html to your computer.
2. Open a web browser, preferably Firefox.
3. View the HTML file on your computer via the web browser. (e.g., c:\path\to\contint.html)
<!DOCTYPE html>
<html>
<body>
<h2>Play Tic-Tac-Toe with Anyone You Can Share a Keyboard With</h2>
<p> </p>
<p> ***************************************************************</p>
<p> To make your mark, use the legend below for your position: </p>
<p> ltc is left-top-corner, tm is top-middle, rtc is right-top-corner</p>
<p> lm is left-column-middle-row, c is center, mr is middlerow-right-column</p>
<p> lbc is left-bottom-corner, bm is bottom-middle, rbc is right-bottom-corner</p>
<p> ***************************************************************</p>
<p> This works best in Firefox. </p>
<p id="demo"></p>
<script>
curboard = [ " ", " ", " ", " ", " ", " ", " ", " ", " " ]
gameover = 0
leftcol = 0
midcol = 0
rightcol = 0
function printBoard(board) {
var x = board[0] + board[1] + board[2] + board[3] + board[4] + board[5] + board[6] + board[7] + board[8]
return x; // The function returns the product of p1 and p2
}
function mainControl(board, player) {
var place = prompt("Player " + player + ", please enter a place to make your mark");
var possiblepos = ["ltc", "tm", "rtc", "lm", "c", "mr", "lbc", "bm", "rbc"];
var validpos = (possiblepos.indexOf(place));
if (validpos < 0) {
alert("Warning: That was not a valid place on the board! See the legend. You will now be prompted to enter a place on the board again.")
mainControl(board, player)
}
moveMaker(board, place, player)
var heading = "Player " + player + " has just made a move. Here is the current board:"
widthcount = leftcol + midcol + rightcol
// when board is empty, it is never displayed.
if (widthcount == 1) {
var line1 = "____"
var line6 = "-------"
}
if (widthcount == 2) {
var line1 = "_____"
var line6 = "--------"
}
if (widthcount == 3) {
var line1 = "_____"
var line6 = "---------"
}
var line2 = "|"+ board[0] + "|" + board[1] + "|" + board[2] + "|"
var line4 = "|"+ board[3] + "|" + board[4] + "|" + board[5] + "|"
var line5 = "|"+ board[6] + "|" + board[7] + "|" + board[8] + "|"
var line7 = " "
var line8 = "Press 'Enter' or click 'OK' to continue."
var z = [
heading,
line1,
line2,
line6,
line4,
line6,
line5,
line6,
line7,
line8
].join("\n");
return z
}
function moveMaker(board, pos, player) {
if (pos == 'ltc') {
if (board[0] == ' ') {
board[0] = player
leftcol = 1
} else {
alert("That square has already been marked. Please try again.")
mainControl(board, player) }
} if (pos == 'tm') {
if (board[1] == ' ') {
midcol = 1
board[1] = player
} else {
alert("That square has already been marked. Please try again.")
mainControl(board, player) }
} if (pos == 'rtc') {
if (board[2] == ' ') {
rightcol = 1
board[2] = player
} else {
alert("That square has already been marked. Please try again.")
mainControl(board, player) }
} if (pos == 'lm') {
if (board[3] == ' ') {
board[3] = player
leftcol = 1
} else {
alert("That square has already been marked. Please try again.")
mainControl(board, player) }
} if (pos == 'c') {
if (board[4] == ' ') {
midcol = 1
board[4] = player
} else {
alert("That square has already been marked. Please try again.")
mainControl(board, player) }
} if (pos == 'mr') {
if (board[5] == ' ') {
board[5] = player
rightcol = 1
} else {
alert("That square has already been marked. Please try again.")
mainControl(board, player) }
} if (pos == 'lbc') {
if (board[6] == ' ') {
board[6] = player
leftcol = 1
} else {
alert("That square has already been marked. Please try again.")
mainControl(board, player) }
} if (pos == 'bm') {
if (board[7] == ' ') {
midcol = 1
board[7] = player
} else {
alert("That square has already been marked. Please try again.")
mainControl(board, player) }
} if (pos == 'rbc') {
if (board[8] == ' ') {
board[8] = player
rightcol = 1
} else {
alert("That square has already been marked. Please try again.")
mainControl(board, player) }
}
return board
}
function boardwinchecker(board) {
if (board[0] == board[4]) { // check the diagonal from left top to right bottom corner
if (board[4] == board[8]) {
if (board[4] != ' ') {
lastmessage = "Player " + board[0] + " wins! Do not press 'OK'. Please refresh the web page to play again."
alert(lastmessage)
gameover = 1
return
}
}
}
if (board[2] == board[4]) { // check the diagonal from right top to left bottom corner
if (board[4] == board[6]) {
if (board[6] != ' ') {
lastmessage = "Player " + board[2] + " wins! Do not press 'OK'. Please refresh the web page to play again."
alert(lastmessage)
gameover = 1
return
}
}
}
if (board[0] == board[3]) { // check the left column
if (board[3] == board[6]) {
if (board[6] != ' ') {
lastmessage = "Player " + board[0] + " wins! Do not press 'OK'. Please refresh the web page to play again."
alert(lastmessage)
gameover = 1
return
}
}
}
if (board[0] == board[1]) { // check the top row
if (board[1] == board[2]) {
if (board[0] != ' ') {
lastmessage = "Player " + board[0] + " wins! Do not press 'OK'. Please refresh the web page to play again."
alert(lastmessage)
gameover = 1
return
}
}
}
if (board[2] == board[5]) { // check right column
if (board[5] == board[8]) {
if (board[2] != ' ') {
lastmessage = "Player " + board[2] + " wins! Do not press 'OK'. Please refresh the web page to play again."
alert(lastmessage)
gameover = 1
return
}
}
}
if (board[6] == board[7]) { // check bottom row
if (board[7] == board[8]) {
if (board[8] != ' ') {
lastmessage = "Player " + board[6] + " wins! Do not press 'OK'. Please refresh the web page to play again."
alert(lastmessage)
gameover = 1
return
}
}
}
if (board[1] == board[4]) { // check middle column
if (board[4] == board[7]) {
if (board[1] != ' ') {
lastmessage = "Player " + board[1] + " wins! Do not press 'OK'. Please refresh the web page to play again."
alert(lastmessage)
gameover = 1
return
}
}
}
if (board[3] == board[4]) { // check middle row
if (board[4] == board[5]) {
if (board[3] != ' ') {
lastmessage = "Player " + board[3] + " wins! Do not press 'OK'. Please refresh the web page to play again."
alert(lastmessage)
gameover = 1
return
}
}
}
}
function boardcatchecker(board) {
if (board[0] != ' ') {
if (board[1] != ' ') {
if (board[2] != ' ') {
if (board[3] != ' ') {
if (board[4] != ' ') {
if (board[5] != ' ') {
if (board[6] != ' ') {
if (board[7] != ' ') {
if (board[8] != ' ') {
alert("Game over. Cat's game. It was a draw!")
alert("Please refresh the web page to play again.")
}
}
}
}
}
}
}
}
}
}
last = printBoard(curboard);
var1 = mainControl(curboard, "X")
alert(var1)
var2 = mainControl(curboard, "O")
alert(var2)
var3 = mainControl(curboard, "X")
alert(var3)
var4 = mainControl(curboard, "O")
alert(var4)
var5 = mainControl(curboard, "X")
alert(var5)
boardwinchecker(curboard)
if (gameover == 0) {
var6 = mainControl(curboard, "O")
alert(var6)
boardwinchecker(curboard) }
if (gameover == 0) {
var7 = mainControl(curboard, "X")
alert(var7)
boardwinchecker(curboard) }
if (gameover == 0) {
var8 = mainControl(curboard, "O")
alert(var8)
boardwinchecker(curboard) }
if (gameover == 0) {
var9 = mainControl(curboard, "X")
alert(var9)
boardwinchecker(curboard) }
if (gameover == 0) {
boardcatchecker(curboard) }
</script>
</body>
</html>