我是一名初学编程学生。我在思考如何让Tic Tac Toe的AI功能时遇到一些困难。我知道在处理问题时我必须做些什么，但我有一个完整的代码块！到目前为止，我已经做到了让玩家先行，并且无法改变他们在轮到他们时所选择的单元格。我还启动了一个功能，只要一个随机数功能，它就可以确定计算机在转弯时的作用。我已经在代码中评论了我认为我必须做的事情，以及我在努力解决的部分：
function computerTurn () {
var blankSquares = [];
for (var row = 0; row < MAXROWS; row++) {
for (var col = 0; col < MAXCOLS; col++) {
// if the cell is blank... add it to blankSquares [row,col]
}
}
if (blankSquares.length != 0) {
// pick a random [row,cell] pair from blankSquares
// change the pattern for this row,cell to be an "O"
} else {
alert("Game over");
}
}
}
// a generic random number function that returns a random integer between "zmin" and "zmax"
function getRandomNum(zmin, zmax) {
return Math.floor(Math.random() * (zmax - zmin + 1)) + zmin;
}
以下是完整代码：
<!doctype html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
#stage {
position:relative;
}
.cell {
position:absolute;
border:3px solid black;
background-color:white;
font-size: 300px;
text-align: center;
color: red;
}
#reset {
font-family: "Lucida Console", Monaco, monospace;
color: white;
height: 100px;
width: 150px;
background-color:black;
top: 45%;
left: 50%;
position: absolute;
font-size: 30px;
}
</style>
</head>
<body>
<div id="stage"></div>
<button id = "reset">Reset</button>
<script>
var reset = document.querySelector("#reset");
reset.style.cursor = "pointer";
reset.addEventListener("click", clickHandler, false);
// GRAB A REFERENCE TO THE STAGE
var stage = document.querySelector("#stage");
// THE SIZE AND SPACE OF EACH CELL
var SIZE = 290;
var SPACE = 0;
// THE ARRAY DIMENSIONS - TRY CHANGING THESE TO GET LARGER OR SMALLER GRAPHS
var MAXROWS = 3;
var MAXCOLS = 3;
// THE 2D ARRAY THAT DEFINES THE PATTERN
var pattern = blankPattern();
// CREATE THE DIVS and POSITION THEM IN THE STAGE... BUT DON'T WORRY ABOUT COLORING THEM HERE!!!!
for (var row = 0; row < MAXROWS; row++) {
for (var col = 0; col < MAXCOLS; col++) {
// CREATE A DIV HTML ELEMENT CALLED CELL
var cell = document.createElement("div");
// SET ITS CSS CLASS TO CELL
cell.setAttribute("class", "cell");
// GIVE EACH OF THE CREATED DIVS A UNIQUE ID
// BASED ON THE ROW# AND COL#
// EXAMPLE : <div id="c-1-2" class="cell"></div>
// In this example, row = 1 and col = 2
cell.setAttribute("id", "c-" + row + "-" + col);
// !!!!! ADD A CLICK HANDLER TO EACH OF THE INDIVIDUAL DIVS
cell.addEventListener("click", cellClick, false);
// ADD THE DIV HTML ELEMENT TO THE STAGE
stage.appendChild(cell);
// POSITION THE CELL IN THE CORRECT PLACE
// WITH 10 PIXELS OF SPACE AROUND IT
cell.style.width = SIZE + "px";
cell.style.height = SIZE + "px";
cell.style.top = row * (SIZE + SPACE) + "px";
cell.style.left = col * (SIZE + SPACE) + "px";
}
}
colorPattern();
// ***********************************************************************************************
// ***********************************************************************************************
// ***********************************************************************************************
// FUNCTION DECLARATIONS
// ***********************************************************************************************
// ***********************************************************************************************
// ***********************************************************************************************
// ***********************************************************************************************
function blankPattern() {
// ***********************************************************************
// This function creates a new 2D array based on the size of the MAXROWS and MAXCOLS
// All cells of the array are initialized to 0
// The function RETURNS this new 2D array back to the calling function
// ***********************************************************************
// CREATE A LOCAL VARIABLE TO HOLD THE 2D ARRAY
var newPattern = [];
// LOOP THROUGH ALL THE ROWS
for (var row = 0; row < MAXROWS; row++) {
// EACH ROW OF THE ARRAY.. .IS ALSO AN ARRAY... SO INITIALIZE IT TO BE ONE
newPattern[row] = [];
// LOOP THROUGH ALL THE COLUMNS OF THE ARRAY
for (var col = 0; col < MAXCOLS; col++) {
// INITIALIZE ALL THE CELL VALUES TO BE 0
newPattern[row][col] = 0;
}
}
// RETURN THIS NEW ARRAY BACK TO THE CALLING FUNCTION
return newPattern;
}
function colorPattern() {
// ***********************************************************************
// This function uses the GLOBAL VARIABLE "pattern" to color the divs
// ***********************************************************************
for (var row = 0; row < MAXROWS; row++) {
for (var col = 0; col < MAXCOLS; col++) {
var cell = document.querySelector("#c-" + row + "-" + col);
// COLOR THE CELL IF IT'S ARRAY VALUE IS "1"
if (pattern[row][col] === 0) {
cell.innerHTML = "";
} else if (pattern[row][col] === 1) {
cell.innerHTML = "X";
} else if (pattern[row][col] === 2) {
cell.innerHTML= "O";
}
}
}
}
function cellClick() {
// RIP APART THE DIV ID THAT WAS CLICKED ON
// WERE HIDING THE ROW AND COLUMN IN THE ID
// THE FORMAT OF THE ID IS "C-ROW#-COL#"
// EXAMPLE : <div id="c-1-2" class="cell"></div>
// In this example, row = 1 and col = 2
var zpos;
thisid = "0-1"
// THE "this" KEYWORD RETURNS THE HTML ELEMENT THAT WAS CLICKED ON
var thisid = this.id;
zpos = thisid.indexOf("-");
thisid = thisid.substr(zpos+1);
zpos = thisid.indexOf("-");
var thisRow = thisid.substr(0,zpos);
var thisCol = thisid.substr(zpos+1);
// now that we have the row and column for this div... change the array
if (pattern[thisRow][thisCol] === 0) {
pattern[thisRow][thisCol] = 1;
computerTurn();
}
colorPattern();
}
function clickHandler ()
{
pattern = blankPattern();
colorPattern();
}
function computerTurn () {
var blankSquares = [];
for (var row = 0; row < MAXROWS; row++) {
for (var col = 0; col < MAXCOLS; col++) {
// if the cell is blank... add it to blankSquares [row,col]
}
}
}
if (blankSquares.length != 0) {
// pick a random [row,cell] pair from blankSquares
// change the pattern for this row,cell to be an "O"
} else {
alert("Game over");
}
}
}
// a generic random number function that returns a random integer between "zmin" and "zmax"
function getRandomNum(zmin, zmax) {
return Math.floor(Math.random() * (zmax - zmin + 1)) + zmin;
}
</script>
</body>
</html>