Prev << >> On to the next chapter: Polygons.
Can you beat the computer at tic-tac-toe?
<html> <head> <style> table { font: bold 32pt Arial Black,Arial,Sans-Serif; } td { height:64; width: 64; text-align: center } </style> </head> <body> <center> <h1>Tic Tac Toe</h1> <table id="game" frame="void" rules="all"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </center> <script src="jquery.js"></script> <script> var board = [0, 0, 0, 0, 0, 0, 0, 0, 0]; $('td').click(function() { // No move allowed if there is already a winner. if (winner(board) != 0) return; // The move is a number from 0 to 9. var move = $(this).prevAll().length + 3 * $(this).parent().prevAll().length; if (board[move] != 0) return; board[move] = 1; $(this).html('X'); if (winner(board) != 0) return; // Compute a computer response after a tiny delay. setTimeout(function() { var response = score(board, -1, 7).move; if (response == null) return; board[response] = -1; setTimeout(function() { $('#game td').eq(response).html('O'); }, 500); }, 0); }); // Returns the best move for the player as an // object: { move: (the move), win: (expected winner) }. function score(board, player, depth) { var w = winner(board); if (w != 0 || depth == 0) { return {move: null, win: w}; } var wins = {'-1': [], '0': [], '1': []}; for (var j = 0; j < 9; j++) { if (board[j] == 0) { // What if we move at spot #j? var copy = board.slice(0); copy[j] = player; // See what the other player would want to do. var t = score(copy, -player, depth - 1); wins[t.win].push({move: j, win: t.win}); } } // Pick a move with the best results for this player. // A win is better than a tie is better than a loss. var preference = [player, 0, -player]; for (var j = 0; j < preference.length; j++) { if (wins[preference[j]].length) { return pickrandom(wins[preference[j]]); } } return {move: null, win: 0}; // Nothing is legal. } // Tic Tac Toe rules - all possible three-in-a-rows: var rules = [ [0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6] ]; // Finds which player has a three-in-a-row on the board: // Return 1 for X, -1 for O, and zero for a draw. function winner(board) { for (var j = 0; j < rules.length; j++) { var player = board[rules[j][0]]; for (var k = 1; player != 0 && k < 3; k++) { if (player != board[rules[j][k]]) player = 0; } if (player != 0) return player; } return 0; } function pickrandom(array) { return array[Math.floor(Math.random() * array.length)]; } </script> </body> </html>