arrays - AI/Opponent Algorithm in Tic Tac Toe using Javascript -
i'm beginning programming student. i'm having little difficulty thinking through how ai functioning tic tac toe. know have far tackling problem, i'm having total code block! far, i've made player goes first, , cannot change cell chose during turn. i've started function determines computer during turn, long random number function. i've commented think have in code, , here's section i'm struggling with:
function computerturn () { var blanksquares = []; (var row = 0; row < maxrows; row++) { (var col = 0; col < maxcols; col++) { // if cell blank... add blanksquares [row,col] } } if (blanksquares.length != 0) { // pick random [row,cell] pair blanksquares // change pattern row,cell "o" } else { alert("game over"); } } } // generic random number function returns random integer between "zmin" , "zmax" function getrandomnum(zmin, zmax) { return math.floor(math.random() * (zmax - zmin + 1)) + zmin; } here full code:
<!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 reference stage var stage = document.queryselector("#stage"); // size , space of each cell var size = 290; var space = 0; // array dimensions - try changing these larger or smaller graphs var maxrows = 3; var maxcols = 3; // 2d array defines pattern var pattern = blankpattern(); // create divs , position them in stage... don't worry coloring them here!!!! (var row = 0; row < maxrows; row++) { (var col = 0; col < maxcols; col++) { // create div html element called cell var cell = document.createelement("div"); // set css class cell cell.setattribute("class", "cell"); // give each of created divs unique id // based on row# , col# // example : <div id="c-1-2" class="cell"></div> // in example, row = 1 , col = 2 cell.setattribute("id", "c-" + row + "-" + col); // !!!!! add click handler each of individual divs cell.addeventlistener("click", cellclick, false); // add div html element stage stage.appendchild(cell); // position cell in correct place // 10 pixels of space around 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() { // *********************************************************************** // function creates new 2d array based on size of maxrows , maxcols // cells of array initialized 0 // function returns new 2d array calling function // *********************************************************************** // create local variable hold 2d array var newpattern = []; // loop through rows (var row = 0; row < maxrows; row++) { // each row of array.. .is array... initialize 1 newpattern[row] = []; // loop through columns of array (var col = 0; col < maxcols; col++) { // initialize cell values 0 newpattern[row][col] = 0; } } // return new array calling function return newpattern; } function colorpattern() { // *********************************************************************** // function uses global variable "pattern" color divs // *********************************************************************** (var row = 0; row < maxrows; row++) { (var col = 0; col < maxcols; col++) { var cell = document.queryselector("#c-" + row + "-" + col); // color cell if it's array value "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 div id clicked on // hiding row , column in id // format of id "c-row#-col#" // example : <div id="c-1-2" class="cell"></div> // in example, row = 1 , col = 2 var zpos; thisid = "0-1" // "this" keyword returns html element 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); // have row , column div... change array if (pattern[thisrow][thiscol] === 0) { pattern[thisrow][thiscol] = 1; computerturn(); } colorpattern(); } function clickhandler () { pattern = blankpattern(); colorpattern(); } function computerturn () { var blanksquares = []; (var row = 0; row < maxrows; row++) { (var col = 0; col < maxcols; col++) { // if cell blank... add blanksquares [row,col] } } } if (blanksquares.length != 0) { // pick random [row,cell] pair blanksquares // change pattern row,cell "o" } else { alert("game over"); } } } // generic random number function returns random integer between "zmin" , "zmax" function getrandomnum(zmin, zmax) { return math.floor(math.random() * (zmax - zmin + 1)) + zmin; } </script> </body> </html>
Comments
Post a Comment