Adding AI to Our First Game
Try to play the game now.
Did you win? If not, refresh the page and try again.
So where do we begin in adding AI (artificial intelligence) behavior to our code?
First, let's consider what we want our program to do? I wanted a tricky AI, but not unbeatable. If I had wanted unbeatable I would simply chain a bunch of conditional checks that say, "if the human player moves here, then take this space." Then no matter where the human player moved, the computer would know the perfect response. That is just no fun.
So I follow a much more simple logic. I have the computer scan the board. If there is the option to win, go ahead and take the winning move. If not, then scan the board again. If the human player has two in a row, then go for the block. If neither of those conditions are true, then throw out a random move.
It's that random move that gives the human player the advantage, and allows the computer to make mistakes. I love it.
Let's take a look at our code from before.
<!doctype html>
<html>
<head>
<title>Tic Tac Toe</title>
</head>
<body>
<canvas id="canvas" width="400" height="500" onclick="placeMove(event)">
Your browser does not support the canvas element.
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
//load a the font
const f = new FontFace("MyFont", "url(Quentincaps-owxKz.ttf)");
f.load().then(function(font) {
// Add font on the html page
document.fonts.add(font);
});
var space = ['b','b','b','b','b','b','b','b','b']
var text = "It is x's turn";
var turn = 'x';
var turnCount = 0;
var gamePlay = true;
const board = new Image();
board.src = "tictactoe.png";
board.width = "400";
board.height = "500";
board.onload = function() {
drawBoard();
};
function drawBoard() {
ctx.drawImage(board, 0, 0);
drawPicks();
checkForWin();
drawText();
}
function placeMove(event) {
if(gamePlay == true) {
let rect = canvas.getBoundingClientRect();
let locX = event.clientX - rect.left;
let locY = event.clientY - rect.top;
if(locX < 130 && locY < 130) {
if(space[0] == 'b') {
space[0] = turn;
nextTurn();
}
}
if(locX > 145 && locX < 255 && locY < 130) {
if(space[1] == 'b') {
space[1] = turn;
nextTurn();
}
}
if(locX > 275 && locY < 130) {
if(space[2] == 'b') {
space[2] = turn;
nextTurn();
}
}
if(locX < 130 && locY > 148 && locY < 262) {
if(space[3] == 'b') {
space[3] = turn;
nextTurn();
}
}
if(locX > 145 && locX < 255 && locY > 148 && locY < 262) {
if(space[4] == 'b') {
space[4] = turn;
nextTurn();
}
}
if(locX > 275 && locY > 148 && locY < 262) {
if(space[5] == 'b') {
space[5] = turn;
nextTurn();
}
}
if(locX < 130 && locY > 280) {
if(space[6] == 'b') {
space[6] = turn;
nextTurn();
}
}
if(locX > 145 && locX < 255 && locY > 280) {
if(space[7] == 'b') {
space[7] = turn;
nextTurn();
}
}
if(locX > 275 && locY > 280) {
if(space[8] == 'b') {
space[8] = turn;
nextTurn();
}
}
drawBoard();
}
}
function nextTurn() {
if(turn == 'x') {
turn = 'o';
text = "It is o's turn"
} else {
turn = 'x';
text = "It is x's turn";
}
turnCount++;
if(turnCount > 8) {
text = "It's a tie";
}
}
function drawPicks() {
ctx.textAlign = "start";
ctx.font = "90px MyFont";
ctx.fillStyle = "black";
if(space[0] != 'b') {
ctx.fillText(space[0], 60, 120);
}
if(space[1] != 'b') {
ctx.fillText(space[1], 180, 120);
}
if(space[2] != 'b') {
ctx.fillText(space[2], 300, 120);
}
if(space[3] != 'b') {
ctx.fillText(space[3], 60, 250);
}
if(space[4] != 'b') {
ctx.fillText(space[4], 180, 250);
}
if(space[5] != 'b') {
ctx.fillText(space[5], 300, 250);
}
if(space[6] != 'b') {
ctx.fillText(space[6], 60, 380);
}
if(space[7] != 'b') {
ctx.fillText(space[7], 180, 380);
}
if(space[8] != 'b') {
ctx.fillText(space[8], 300, 380);
}
}
function drawText() {
ctx.textAlign = "center";
ctx.fillStyle = "black";
ctx.font = "30px MyFont";
ctx.fillText(text, 200, 460);
}
function checkForWin() {
ctx.textAlign = "start";
ctx.font = "90px MyFont";
ctx.fillStyle = "red";
//Horizontal wins
if(space[0] != 'b' && space[0] == space[1] && space[0] == space[2]) {
text = "The " + space[0] + "'s win";
ctx.fillText(space[0], 60, 120);
ctx.fillText(space[1], 180, 120);
ctx.fillText(space[2], 300, 120);
gamePlay = false;
return;
}
if(space[3] != 'b' && space[3] == space[4] && space[3] == space[5]) {
text = "The " + space[3] + "'s win";
ctx.fillText(space[3], 60, 250);
ctx.fillText(space[4], 180, 250);
ctx.fillText(space[5], 300, 250);
gamePlay = false;
return;
}
if(space[6] != 'b' && space[6] == space[7] && space[6] == space[8]) {
text = "The " + space[6] + "'s win";
ctx.fillText(space[6], 60, 380);
ctx.fillText(space[7], 180, 380);
ctx.fillText(space[8], 300, 380);
gamePlay = false;
return;
}
//Verticle wins
if(space[0] != 'b' && space[0] == space[3] && space[0] == space[6]) {
text = "The " + space[0] + "'s win";
ctx.fillText(space[0], 60, 120);
ctx.fillText(space[3], 60, 250);
ctx.fillText(space[6], 60, 380);
gamePlay = false;
return;
}
if(space[1] != 'b' && space[1] == space[4] && space[1] == space[7]) {
text = "The " + space[1] + "'s win";
ctx.fillText(space[1], 180, 120);
ctx.fillText(space[4], 180, 250);
ctx.fillText(space[7], 180, 380);
gamePlay = false;
return;
}
if(space[2] != 'b' && space[2] == space[5] && space[2] == space[8]) {
text = "The " + space[2] + "'s win";
ctx.fillText(space[2], 300, 120);
ctx.fillText(space[5], 300, 250);
ctx.fillText(space[8], 300, 380);
gamePlay = false;
return;
}
//diagonal wins
if(space[0] != 'b' && space[0] == space[4] && space[0] == space[8]) {
text = "The " + space[0] + "'s win";
ctx.fillText(space[0], 60, 120);
ctx.fillText(space[4], 180, 250);
ctx.fillText(space[8], 300, 380);
gamePlay = false;
return;
}
if(space[6] != 'b' && space[6] == space[4] && space[6] == space[2]) {
text = "The " + space[6] + "'s win";
ctx.fillText(space[6], 60, 380);
ctx.fillText(space[4], 180, 250);
ctx.fillText(space[2], 300, 120);
gamePlay = false;
return;
}
}
</script>
</body>
</html>
Aw yes, ugly yet satisfying.
Let's start by changing the function called nextTurn.
function nextTurn() {
if(turn == 'x') {
turn = 'o';
text = "Computer's turn"
} else {
turn = 'x';
text = "It is x's turn";
}
turnCount++;
if(turnCount > 8) {
text = "It's a tie";
gamePlay = false;
}
}
I had to remember to add that part about gamePlay equals false, otherwise the whole world comes to a screeching end.
Next, we need to add a point in our code where the computer jumps in and makes a move. There is probably a hundred different ways you could do this, but I went with the end of the function called placeMove.
function placeMove(event) {
if(gamePlay == true) {
let rect = canvas.getBoundingClientRect();
let locX = event.clientX - rect.left;
let locY = event.clientY - rect.top;
if(locX < 130 && locY < 130) {
if(space[0] == 'b') {
space[0] = turn;
nextTurn();
}
}
if(locX > 145 && locX < 255 && locY < 130) {
if(space[1] == 'b') {
space[1] = turn;
nextTurn();
}
}
if(locX > 275 && locY < 130) {
if(space[2] == 'b') {
space[2] = turn;
nextTurn();
}
}
if(locX < 130 && locY > 148 && locY < 262) {
if(space[3] == 'b') {
space[3] = turn;
nextTurn();
}
}
if(locX > 145 && locX < 255 && locY > 148 && locY < 262) {
if(space[4] == 'b') {
space[4] = turn;
nextTurn();
}
}
if(locX > 275 && locY > 148 && locY < 262) {
if(space[5] == 'b') {
space[5] = turn;
nextTurn();
}
}
if(locX < 130 && locY > 280) {
if(space[6] == 'b') {
space[6] = turn;
nextTurn();
}
}
if(locX > 145 && locX < 255 && locY > 280) {
if(space[7] == 'b') {
space[7] = turn;
nextTurn();
}
}
if(locX > 275 && locY > 280) {
if(space[8] == 'b') {
space[8] = turn;
nextTurn();
}
}
drawBoard();
if(turn == 'o' && gamePlay == true) {
computerTurn();
}
}
}
I did a quick check to make sure it was the computer's turn and that the game was not over yet. Then I call a function named computerTurn. Let's write a new function called computerTurn and add it into our code after the placeMove function.
function computerTurn() {
randomMove();
drawBoard();
}
Wait, all I am doing here is making yet another call to a function named randomMove and then redrawing the board.
That is correct. All I want to do right now, is see if I can get the computer to make a random move. So let's write a function called randomMove.
function randomMove() {
while(true) {
let computerPick = Math.floor(Math.random() * 10);
if(space[computerPick] == 'b') {
space[computerPick] = turn;
nextTurn();
break;
}//if
}//while
}
In this function, we create a while loop. In the loop, the computer picks a random number from zero to nine. Then checks if that numbered space is blank. If not, the loop then continues on with a new random number until a space that isn't taken can be found. Once a blank space is found we break out of the loop, claim that space an call nextTurn.
Let's test the code.
I think it is working, but the computer moved so fast that it looks like I somehow claimed two spaces and now get to go again.
We need to slow the computer down just a bit. Modify the placeMove function again like this.
if(locX > 275 && locY > 280) {
if(space[8] == 'b') {
space[8] = turn;
nextTurn();
}
}
drawBoard();
setTimeout(function() {
if(turn == 'o' && gamePlay == true) {
computerTurn();
}
}, 1000);
}
}
Now before calling the computerTurn function, we make the program wait 1000 milliseconds. This slows the game down just enough.
Now test your code. Better?
Okay, so now we have the computer making random moves. Let's add some of that logic I talked about earlier. We are going to change our computerTurn function.
function computerTurn() {
//check for win
if(doubles('o')) { }
//check for block
else if(doubles('x')) { }
else { randomMove(); }
drawBoard();
}
This is madness! What did I do here?
I start with an if condition check. I am checking a function call named doubles, which takes an argument of either "o" or "x". The function will return either a true or false, but if true then what? There is nothing in my block of code just empty braces. That is because all the magic happens in my function named doubles.
The first time I call doubles it will be looking to see if the argument of "o" is doubled in any given row or column. If so, it will place the winning move. If there is no row with two o's then the doubles function returns false. Then we move on to call doubles again. This time supplying 'x' as the argument.
If there are two x's in a row, then the computer goes for the block. But if there are not two x's in any row, the function returns false, and then random move is finally called.
Here is the doubles function.
function doubles(value) {
//horizontal
if(space[0] == value && space[1] == value && space[2] == 'b') {
space[2] = turn;
nextTurn();
return true;
}
if(space[0] == value && space[2] == value && space[1] == 'b') {
space[1] = turn;
nextTurn();
return true;
}
if(space[2] == value && space[1] == value && space[0] == 'b') {
space[0] = turn;
nextTurn();
return true;
}
if(space[3] == value && space[4] == value && space[5] == 'b') {
space[5] = turn;
nextTurn();
return true;
}
if(space[3] == value && space[5] == value && space[4] == 'b') {
space[4] = turn;
nextTurn();
return true;
}
if(space[5] == value && space[4] == value && space[3] == 'b') {
space[3] = turn;
nextTurn();
return true;
}
if(space[6] == value && space[7] == value && space[8] == 'b') {
space[8] = turn;
nextTurn();
return true;
}
if(space[6] == value && space[8] == value && space[7] == 'b') {
space[7] = turn;
nextTurn();
return true;
}
if(space[8] == value && space[7] == value && space[6] == 'b') {
space[6] = turn;
nextTurn();
return true;
}
//verticle
if(space[0] == value && space[3] == value && space[6] == 'b') {
space[6] = turn;
nextTurn();
return true;
}
if(space[0] == value && space[6] == value && space[3] == 'b') {
space[3] = turn;
nextTurn();
return true;
}
if(space[6] == value && space[3] == value && space[0] == 'b') {
space[0] = turn;
nextTurn();
return true;
}
if(space[1] == value && space[4] == value && space[7] == 'b') {
space[7] = turn;
nextTurn();
return true;
}
if(space[1] == value && space[7] == value && space[4] == 'b') {
space[4] = turn;
nextTurn();
return true;
}
if(space[7] == value && space[4] == value && space[1] == 'b') {
space[1] = turn;
nextTurn();
return true;
}
if(space[2] == value && space[5] == value && space[8] == 'b') {
space[8] = turn;
nextTurn();
return true;
}
if(space[2] == value && space[8] == value && space[5] == 'b') {
space[5] = turn;
nextTurn();
return true;
}
if(space[8] == value && space[5] == value && space[2] == 'b') {
space[2] = turn;
nextTurn();
return true;
}
//diagonal
if(space[0] == value && space[4] == value && space[8] == 'b') {
space[8] = turn;
nextTurn();
return true;
}
if(space[0] == value && space[8] == value && space[4] == 'b') {
space[4] = turn;
nextTurn();
return true;
}
if(space[8] == value && space[4] == value && space[0] == 'b') {
space[0] = turn;
nextTurn();
return true;
}
if(space[6] == value && space[4] == value && space[2] == 'b') {
space[2] = turn;
nextTurn();
return true;
}
if(space[6] == value && space[2] == value && space[4] == 'b') {
space[4] = turn;
nextTurn();
return true;
}
if(space[4] == value && space[2] == value && space[6] == 'b') {
space[6] = turn;
nextTurn();
return true;
}
return false;
}
And that completes our single player Tic Tac Toe game. Just to be redundant, here is the complete game code.
<!doctype html>
<html>
<head>
<title>Tic Tac Toe</title>
</head>
<body>
<canvas id="canvas" width="400" height="500" onclick="placeMove(event)">
Your browser does not support the canvas element.
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
//load a the font
const f = new FontFace("MyFont", "url(Quentincaps-owxKz.ttf)");
f.load().then(function(font) {
// Add font on the html page
document.fonts.add(font);
});
var space = ['b','b','b','b','b','b','b','b','b']
var text = "It is x's turn";
var turn = 'x';
var turnCount = 0;
var gamePlay = true;
const board = new Image();
board.src = "tictactoe.png";
board.width = "400";
board.height = "500";
board.onload = function() {
drawBoard();
};
function drawBoard() {
ctx.drawImage(board, 0, 0);
drawPicks();
checkForWin();
drawText();
}
function placeMove(event) {
if(gamePlay == true) {
let rect = canvas.getBoundingClientRect();
let locX = event.clientX - rect.left;
let locY = event.clientY - rect.top;
if(locX < 130 && locY < 130) {
if(space[0] == 'b') {
space[0] = turn;
nextTurn();
}
}
if(locX > 145 && locX < 255 && locY < 130) {
if(space[1] == 'b') {
space[1] = turn;
nextTurn();
}
}
if(locX > 275 && locY < 130) {
if(space[2] == 'b') {
space[2] = turn;
nextTurn();
}
}
if(locX < 130 && locY > 148 && locY < 262) {
if(space[3] == 'b') {
space[3] = turn;
nextTurn();
}
}
if(locX > 145 && locX < 255 && locY > 148 && locY < 262) {
if(space[4] == 'b') {
space[4] = turn;
nextTurn();
}
}
if(locX > 275 && locY > 148 && locY < 262) {
if(space[5] == 'b') {
space[5] = turn;
nextTurn();
}
}
if(locX < 130 && locY > 280) {
if(space[6] == 'b') {
space[6] = turn;
nextTurn();
}
}
if(locX > 145 && locX < 255 && locY > 280) {
if(space[7] == 'b') {
space[7] = turn;
nextTurn();
}
}
if(locX > 275 && locY > 280) {
if(space[8] == 'b') {
space[8] = turn;
nextTurn();
}
}
drawBoard();
setTimeout(function() {
if(turn == 'o' && gamePlay == true) {
computerTurn();
}
}, 1000);
}
}
function computerTurn() {
//check for win
if(doubles('o')) { }
//check for block
else if(doubles('x')) { }
else { randomMove(); }
drawBoard();
}
function doubles(value) {
//horizontal
if(space[0] == value && space[1] == value && space[2] == 'b') {
space[2] = turn;
nextTurn();
return true;
}
if(space[0] == value && space[2] == value && space[1] == 'b') {
space[1] = turn;
nextTurn();
return true;
}
if(space[2] == value && space[1] == value && space[0] == 'b') {
space[0] = turn;
nextTurn();
return true;
}
if(space[3] == value && space[4] == value && space[5] == 'b') {
space[5] = turn;
nextTurn();
return true;
}
if(space[3] == value && space[5] == value && space[4] == 'b') {
space[4] = turn;
nextTurn();
return true;
}
if(space[5] == value && space[4] == value && space[3] == 'b') {
space[3] = turn;
nextTurn();
return true;
}
if(space[6] == value && space[7] == value && space[8] == 'b') {
space[8] = turn;
nextTurn();
return true;
}
if(space[6] == value && space[8] == value && space[7] == 'b') {
space[7] = turn;
nextTurn();
return true;
}
if(space[8] == value && space[7] == value && space[6] == 'b') {
space[6] = turn;
nextTurn();
return true;
}
//verticle
if(space[0] == value && space[3] == value && space[6] == 'b') {
space[6] = turn;
nextTurn();
return true;
}
if(space[0] == value && space[6] == value && space[3] == 'b') {
space[3] = turn;
nextTurn();
return true;
}
if(space[6] == value && space[3] == value && space[0] == 'b') {
space[0] = turn;
nextTurn();
return true;
}
if(space[1] == value && space[4] == value && space[7] == 'b') {
space[7] = turn;
nextTurn();
return true;
}
if(space[1] == value && space[7] == value && space[4] == 'b') {
space[4] = turn;
nextTurn();
return true;
}
if(space[7] == value && space[4] == value && space[1] == 'b') {
space[1] = turn;
nextTurn();
return true;
}
if(space[2] == value && space[5] == value && space[8] == 'b') {
space[8] = turn;
nextTurn();
return true;
}
if(space[2] == value && space[8] == value && space[5] == 'b') {
space[5] = turn;
nextTurn();
return true;
}
if(space[8] == value && space[5] == value && space[2] == 'b') {
space[2] = turn;
nextTurn();
return true;
}
//diagonal
if(space[0] == value && space[4] == value && space[8] == 'b') {
space[8] = turn;
nextTurn();
return true;
}
if(space[0] == value && space[8] == value && space[4] == 'b') {
space[4] = turn;
nextTurn();
return true;
}
if(space[8] == value && space[4] == value && space[0] == 'b') {
space[0] = turn;
nextTurn();
return true;
}
if(space[6] == value && space[4] == value && space[2] == 'b') {
space[2] = turn;
nextTurn();
return true;
}
if(space[6] == value && space[2] == value && space[4] == 'b') {
space[4] = turn;
nextTurn();
return true;
}
if(space[4] == value && space[2] == value && space[6] == 'b') {
space[6] = turn;
nextTurn();
return true;
}
return false;
}
function randomMove() {
while(true) {
let computerPick = Math.floor(Math.random() * 10);
if(space[computerPick] == 'b') {
space[computerPick] = turn;
nextTurn();
break;
}//if
}//while
}
function nextTurn() {
if(turn == 'x') {
turn = 'o';
text = "Computer's turn"
} else {
turn = 'x';
text = "It is x's turn";
}
turnCount++;
if(turnCount > 8) {
text = "It's a tie";
gamePlay = false;
}
}
function drawPicks() {
ctx.textAlign = "start";
ctx.font = "90px MyFont";
ctx.fillStyle = "black";
if(space[0] != 'b') {
ctx.fillText(space[0], 60, 120);
}
if(space[1] != 'b') {
ctx.fillText(space[1], 180, 120);
}
if(space[2] != 'b') {
ctx.fillText(space[2], 300, 120);
}
if(space[3] != 'b') {
ctx.fillText(space[3], 60, 250);
}
if(space[4] != 'b') {
ctx.fillText(space[4], 180, 250);
}
if(space[5] != 'b') {
ctx.fillText(space[5], 300, 250);
}
if(space[6] != 'b') {
ctx.fillText(space[6], 60, 380);
}
if(space[7] != 'b') {
ctx.fillText(space[7], 180, 380);
}
if(space[8] != 'b') {
ctx.fillText(space[8], 300, 380);
}
}
function drawText() {
ctx.textAlign = "center";
ctx.fillStyle = "black";
ctx.font = "30px MyFont";
ctx.fillText(text, 200, 460);
}
function checkForWin() {
ctx.textAlign = "start";
ctx.font = "90px MyFont";
ctx.fillStyle = "red";
//Horizontal wins
if(space[0] != 'b' && space[0] == space[1] && space[0] == space[2]) {
text = "The " + space[0] + "'s win";
ctx.fillText(space[0], 60, 120);
ctx.fillText(space[1], 180, 120);
ctx.fillText(space[2], 300, 120);
gamePlay = false;
return;
}
if(space[3] != 'b' && space[3] == space[4] && space[3] == space[5]) {
text = "The " + space[3] + "'s win";
ctx.fillText(space[3], 60, 250);
ctx.fillText(space[4], 180, 250);
ctx.fillText(space[5], 300, 250);
gamePlay = false;
return;
}
if(space[6] != 'b' && space[6] == space[7] && space[6] == space[8]) {
text = "The " + space[6] + "'s win";
ctx.fillText(space[6], 60, 380);
ctx.fillText(space[7], 180, 380);
ctx.fillText(space[8], 300, 380);
gamePlay = false;
return;
}
//Verticle wins
if(space[0] != 'b' && space[0] == space[3] && space[0] == space[6]) {
text = "The " + space[0] + "'s win";
ctx.fillText(space[0], 60, 120);
ctx.fillText(space[3], 60, 250);
ctx.fillText(space[6], 60, 380);
gamePlay = false;
return;
}
if(space[1] != 'b' && space[1] == space[4] && space[1] == space[7]) {
text = "The " + space[1] + "'s win";
ctx.fillText(space[1], 180, 120);
ctx.fillText(space[4], 180, 250);
ctx.fillText(space[7], 180, 380);
gamePlay = false;
return;
}
if(space[2] != 'b' && space[2] == space[5] && space[2] == space[8]) {
text = "The " + space[2] + "'s win";
ctx.fillText(space[2], 300, 120);
ctx.fillText(space[5], 300, 250);
ctx.fillText(space[8], 300, 380);
gamePlay = false;
return;
}
//diagonal wins
if(space[0] != 'b' && space[0] == space[4] && space[0] == space[8]) {
text = "The " + space[0] + "'s win";
ctx.fillText(space[0], 60, 120);
ctx.fillText(space[4], 180, 250);
ctx.fillText(space[8], 300, 380);
gamePlay = false;
return;
}
if(space[6] != 'b' && space[6] == space[4] && space[6] == space[2]) {
text = "The " + space[6] + "'s win";
ctx.fillText(space[6], 60, 380);
ctx.fillText(space[4], 180, 250);
ctx.fillText(space[2], 300, 120);
gamePlay = false;
return;
}
}
</script>
</body>
</html>
I hope you enjoyed this tutorial. Join me next time for a new game project.
Comments
Post a Comment