/** * Author: Jake, 12 August, 2019 * * Not intended to be a winnable game, but instead a basic model of Reactive Artificial Intelligence. **/ window.onload = () => { cvs = document.getElementById("canvas"); ctx = cvs.getContext("2d"); cvs.width = 300; cvs.height = 300; ctx.lineWidth = 4; ctx.fillStyle = "whitesmoke"; ctx.fillRect(0, 0, cvs.width, cvs.height); ctx.beginPath(); ctx.strokeStyle = "black"; ctx.moveTo(cvs.width/3, 0); ctx.lineTo(cvs.width/3, cvs.height); ctx.stroke(); ctx.moveTo(cvs.width/1.5, 0); ctx.lineTo(cvs.width/1.5, cvs.height); ctx.stroke(); ctx.moveTo(0, cvs.height/3); ctx.lineTo(cvs.width, cvs.height/3); ctx.stroke(); ctx.moveTo(0, cvs.height/1.5); ctx.lineTo(cvs.width, cvs.height/1.5); ctx.stroke(); ctx.closePath(); ctx.lineWidth = 5; p = new player("x"); m = new machine("o"); gameOn = true; write(("Your Turn ("+p.piece.toUpperCase()+")").fontcolor(p.color)); alert("Please comment if you run into a bug or are able to win!"); }; var ctx, cvs, grid = [false,false,false,false,false,false,false,false,false]; const mat = [[1,2,3],[1,4,7],[1,5,9],[7,8,9],[7,5,3],[9,6,3],[2,5,8],[4,5,6]]; function tile(n) { let x, y; switch(n) { case 1:x = 50;y = 50;break; case 2:x = 150;y = 50;break; case 3:x = 250;y = 50;break; case 4:x = 50;y = 150;break; case 5:x = 150;y = 150;break; case 6:x = 250;y = 150;break; case 7:x = 50;y = 250;break; case 8:x = 150;y = 250;break; case 9:x = 250;y = 250;break; } return [x,y]; } //remove piece arguments if deciding not to incorporate player choose piece/first turn function machine(piece) { this.piece = piece; this.color = "blue"; this.placements = []; this.placed = 0; } function player(piece) { this.piece = piece; this.color = "red"; this.placements = []; this.placed = 0; this.isTurn = true; } function place(n,piece) { if(gameOn) { if(piece.piece == "o") { ctx.strokeStyle = piece.color; ctx.beginPath(); ctx.arc(tile(n)[0], tile(n)[1], 40, 0, 2 * Math.PI); ctx.stroke(); ctx.closePath(); }//keep if intending to allow player choose piece else if(piece.piece == "x") { ctx.beginPath(); ctx.strokeStyle = piece.color; ctx.moveTo(tile(n)[0]-40, tile(n)[1]+40); ctx.lineTo(tile(n)[0]+40, tile(n)[1]-40); ctx.stroke(); ctx.moveTo(tile(n)[0]-40, tile(n)[1]-40); ctx.lineTo(tile(n)[0]+40, tile(n)[1]+40); ctx.stroke(); ctx.closePath(); } setOccupied(n,true); piece.placed+=1; } } function playerMove() { if(p.isTurn && gameOn) { let placement, x = event.offsetX, y = event.offsetY; if(y <= 100) y = 50; else if(y <= 200 && y > 100) y = 150; else if(y > 200) y = 250; if(x <= 100) x = 50; else if(x <= 200 && x > 100) x = 150; else if(x > 200) x = 250; for(i = 1; i < 10; i++) { if(x == tile(i)[0] && y == tile(i)[1]){ placement = i; } } if(!isOccupied(placement)) { place(placement,p); p.placements.push(placement); p.isTurn = false; write(("Machines Turn ("+m.piece.toUpperCase()+")").fontcolor(m.color)); check(); setTimeout(()=>{ machineMove(); }, 500); } } } function machineMove() { //Priority magnitude: WIN,COUNTER,CENTER,MINIMAX,AVAILABLE if(!gameOn) return; let placement = oneAway(m.placements); if(placement === 0) placement = oneAway(p.placements); if(placement === 0) { if(!isOccupied(5)) placement = 5; else if(isOccupied(5)) { let matchAt = [] for(var i = 0; i < p.placements.length; i++) { for(var j = 1; j <= grid.length; j++) { if(!isOccupied(j) && oneAway([p.placements[i],j]) > 0) matchAt.push(j); } } let most = frequent(matchAt,"most"), least = frequent(matchAt,"least") if(most.length == 1) placement = parseInt(most[0]); else if(most.length > 1 && matchAt.length != most.length) { if(most.length > 2) { placement = parseInt(most[0]); if(placement%2==0) placement = parseInt(most[1]); } else placement = parseInt(least[rand(0,least.length)], 10); } else { let O = [], E = []; for(i = 1; i <= grid.length; i++) { if(!isOccupied(i) && i%2==1) O.push(i); else if(!isOccupied(i) && i%2==0) E.push(i) } if(O.length>1) placement = O[rand(0,O.length)]; else placement = E[rand(0,E.length)]; } } } place(placement, m); m.placements.push(placement); write(("Your Turn ("+p.piece.toUpperCase()+")").fontcolor(p.color)); check(); p.isTurn = true; } function check(){ let winningCombo = new Set(); m.placements.forEach((placement) => { let match = []; mat.forEach((sq) => { sq.forEach((i) => { if(m.placements.includes(i)) match.push(i); }); let matches = [...new Set(match)]; if(sq.every(elem => matches.indexOf(elem) > -1)) { winningCombo = sq; write("THE WINNER IS "+" MACHINE!".fontcolor(m.color)); gameOn = false; } }); }); if(!grid.includes(false) && gameOn) { write("IT'S A DRAW!"); gameOn = false; } else { //copied from above. Remove player check when certain player cannot win p.placements.forEach((placement) => { let match = []; mat.forEach((sq) => { sq.forEach((i) => { if(p.placements.includes(i)) match.push(i); }); let matches = [...new Set(match)]; if(sq.every(elem => matches.indexOf(elem) > -1)) { winningCombo = sq; write("THE WINNER IS "+" YOU!!".fontcolor(p.color)); gameOn = false; } }); }); } if(!gameOn) { winningCombo.forEach((n) => { ctx.beginPath(); ctx.rect(tile(n)[0]-45, tile(n)[1]-45, 90, 90); ctx.stroke(); ctx.closePath(); }); } } /******* UTILTIES/READABILITY ******/ function isOccupied(n) { return grid[n-1]; } function setOccupied(n,bool) { grid[n-1] = bool; } function oneAway(a) { pick = 0 for(i = 0; i < mat.length;i++) { arr = mat[i]; let nw = [] for(j = 0; j < a.length ;j++) { if(arr.includes(a[j])) { nw.push(a[j]); } if(nw.length === 2) { nw = difference(arr, nw); if(!isOccupied(nw[0])) { pick = nw[0]; break; } } } } return pick; } function frequent(arr,freq) { let count = arr.reduce((a, c) => { a[c] = (a[c] || 0) + 1; if(a[c] > 0) { return a; } }, {}); let max = Math.max(...Object.values(count)); let min = Math.min(...Object.values(count)); let frequency; if(freq === "most") frequency = Object.keys(count).filter(k => count[k] === max); else if(freq === "least") frequency = Object.keys(count).filter(k => count[k] === min); return frequency; } function difference(searchArr,compareArr) { excluded = searchArr.filter((item) => { return !compareArr.includes(item); }); return excluded; } function rand(min, max) { return parseInt(Math.random() * (max - min) + min,10); } function write(s) { document.getElementById("turn").innerHTML = s; } function reset() { if(p.isTurn || !gameOn) { for(i = 1; i<10; i++) { ctx.clearRect(tile(i)[0]-48,tile(i)[1]-48,96,96) ctx.fillStyle = "whitesmoke"; ctx.fillRect(tile(i)[0]-48,tile(i)[1]-48,96,96) setOccupied(i,false) } write(("Your Turn ("+p.piece.toUpperCase()+")").fontcolor(p.color)); p = new player("x"); m = new machine("o"); gameOn = true; } }

[AI] Tic-Tac-Toe