If statement not working? Player wins function Tic-Tac-Toe - javascript

var boxId = ['boxMid','boxLeft','boxRight','boxTopMid','boxTopRight','boxTopLeft','boxLow Mid','boxLowLeft','boxLowRight'];
var turn = 0;
var pOne = "X";
var pTwo = "O";
var blankBox = "";
var boxMid = document.getElementById('boxMid').innerhtml;
var boxLeft = document.getElementById('boxLeft').innerhtml;
var boxRight = document.getElementById('boxRight').innerhtml;
var boxTopMid = document.getElementById('boxTopMid').innerhtml;
var boxTopLeft = document.getElementById('boxTopLeft').innerhtml;
var boxTopRight = document.getElementById('boxTopRight').innerhtml;
var boxLowMid = document.getElementById('boxLowMid').innerhtml;
var boxLowLeft = document.getElementById('boxLowLeft').innerhtml;
var boxLowRight = document.getElementById('boxLowRight').innerhtml;
var i = 0;
My player win function is not working and I've had several others look at it, so I figured I would get an outside perspective.
function xWins() {
if(boxId[0,1,2] == 'X'||
boxTopLeft == "X" && boxTopMid == "X" && boxTopRight == "X"||
boxLowMid == "X" && boxLowLeft == "X" && boxLowRight == "X"||
boxMid == "X" && boxTopMid == "X" && boxLowMid == "X"||
boxLeft == "X" && boxTopLeft == "X" && boxLowLeft == "X"||
boxRight == "X" && boxTopRight == "X" && boxLowRight == "X"||
boxMid == "X" && boxTopLeft == "X" && boxLowRight == "X"||
boxMid == "X" && boxLowLeft == "X" && boxTopRight == "X" ) {
alert ('Player One Wins!');
turn = 1;
}
}
function oWins(){
if(boxId[0,1,2] == "O"||
boxTopLeft == "O" && boxTopMid == "O" && boxTopRight == "O"||
boxLowMid == "O" && boxLowLeft == "O" && boxLowRight == "O"||
boxMid == "O" && boxTopMid == "O" && boxLowMid == "O"||
boxLeft == "O" && boxTopLeft == "O" && boxLowLeft == "O"||
boxRight == "O" && boxTopRight == "O" && boxLowRight == "O"||
boxMid == "O" && boxTopLeft == "O" && boxLowRight == "O"||
boxMid == "O" && boxLowLeft == "O" && boxTopRight == "O" ) {
alert ('Player Two Wins!');
turn = 0;
}
}
function test(bx){
if(document.getElementById(boxId[bx]).innerHTML == ""){
if (turn<1) {
document.getElementById(boxId[bx]).innerHTML = pOne;
document.onclick (turn++);
oWins();
xWins();
}
if (turn == 1) {
document.getElementById(boxId[bx]).innerHTML = pTwo;
document.onclick (turn--);
oWins();
xWins();
}
}
}
function reset() {
for(i=0;i<boxId.length;i++)
document.getElementsByClassName('boxy')[i].innerHTML = blankBox;
}
As far as I know, everything else works except for my scoreboard, but I'll figure that out when I get there. Please keep in mind that I am a high school student that has less than 2 months of real experience coding, so I probably did some things that could've been a lot easier, and more DRY.

Cause of Bug: You are telling it that oWins() by calling the oWins function, where it runs through your cascasde of OR conditionals to which one of them is matching. So you have 2 problems. 1, that oWins() is always testing true via your OR statements, and 2, that xWins() is being called after the oWins() function that is evaluating to true each time. Stringing together OR conditionals like that is problematic and often difficult to debug.
if (turn == 1) {
document.getElementById(boxId[bx]).innerHTML = pTwo;
document.onclick (turn--);
oWins();
xWins();
}

Related

How can I make this JS repetitive code shorter

I just wrote this piece of code that does the thing it's supposed to do, although it's really messy and pretty repetitive and I'm wondering how can I make it much shorter and concise.
if(id==1 && player == "playerOne"){
Object.assign(playerOne, fighters[0])
}else if(id==1 && player =="playerTwo"){
Object.assign(playerTwo, fighters[0])
}
if(id==2 && player == "playerOne"){
Object.assign(playerOne, fighters[1])
}else if(id==2 && player =="playerTwo"){
Object.assign(playerTwo, fighters[1])
}
if(id==3 && player == "playerOne"){
Object.assign(playerOne, fighters[2])
}else if(id==3 && player =="playerTwo"){
Object.assign(playerTwo, fighters[2])
}
if(id==4 && player == "playerOne"){
Object.assign(playerOne, fighters[3])
}else if(id==4 && player =="playerTwo"){
Object.assign(playerTwo, fighters[3])
}
if(id==5 && player == "playerOne"){
Object.assign(playerOne, fighters[4])
}else if(id==5 && player =="playerTwo"){
Object.assign(playerTwo, fighters[4])
}
if(id==6 && player == "playerOne"){
Object.assign(playerOne, fighters[5])
}else if(id==6 && player =="playerTwo"){
Object.assign(playerTwo, fighters[5])
}
if(id==7 && player == "playerOne"){
Object.assign(playerOne, fighters[6])
}else if(id==7 && player =="playerTwo"){
Object.assign(playerTwo, fighters[6])
}
if(id==8 && player == "playerOne"){
Object.assign(playerOne, fighters[7])
}else if(id==8 && player =="playerTwo"){
Object.assign(playerTwo, fighters[7])
}
if(id==9 && player == "playerOne"){
Object.assign(playerOne, fighters[8])
}else if(id==9 && player =="playerTwo"){
Object.assign(playerTwo, fighters[8])
}
Thank you in advance!
Assuming
a) there are no more than two players
b) you don't care that this code handles id < 1 and id > 9
It looks to me like you could reduce this to a single line.
Object.assign(player == "playerOne" ? playerOne : playerTwo, fighters[id - 1])
What if you rewrite it to be something along the lines of
if (player == "playerOne") {
p = playerOne
} else if (player =="playerTwo") {
p = playerTwo
}
Object.assign(p, fighters[id - 1])
A for loop might be helpful:
for (let i = 1; i < 10; i++) {
if (id == i && player == "playerOne") {
Object.assign(playerOne, fighters[id - 1]);
} else if (id == i && player == "playerTwo") {
Object.assign(playerTwo, fighters[id - 1]);
}
}
Based on the assumptions in your example, that id must be between 1 and 9 and player can be anything, but must be playerOne or playerTwo:
for (var i = 1; i < 10; i++) {
if (id == i) {
if(player == "playerOne"){
Object.assign(playerOne, fighters[i - 1]);
} else if (player == "playerTwo") {
Object.assign(playerTwo, fighters[i - 1]);
}
}
}

Uncaught RangeError: Maximum call stack size exceeded, Program does not stop

Hi everyone I'm making Tic-Tac-Toe Game for school. But when al boxes are checked i need the program to stop and say: you win, you lose, or draw.
But is doesn't. when you lose or win before al 9 boxes are checked it says you won or lose.
I also get this error when all boxes are checked:
Uncaught RangeError: Maximum call stack size exceeded
Code:
var button = [];
for (var i = 1; i < 10; i++) button[i] = document.getElementById('canvas'+i);
var ctx = [];
for (var i = 1; i < 10; i++) ctx[i] = button[i].getContext('2d');
var bDisabled= [];
for (var i = 1; i < 10; i++) bDisabled[i] = false;
var isResult = false;
var content = [];
function loop (x)
{
if(!bDisabled[x])
{
bDisabled[x] = true;
button[x].style.opacity = 0.7;
content[x] = 'x';
button[x].style.webkitTransform="rotatey(180deg)";
{
ctx[x].lineWidth=3;
ctx[x].beginPath( );
ctx[x].moveTo(10,10);
ctx[x].lineTo(40,40);
ctx[x].moveTo(40,10);
ctx[x].lineTo(10,40);
ctx[x].stroke();
ctx[x].closePath();
computerTurn();
}
setTimeout(checkWinner, 1000);
}
}
function computerTurn()
{
var r = Math.random();
if (r < 0.1 && !bDisabled[1]) draw0Steps(1);
else if (r < 0.2 && !bDisabled[2]) draw0Steps(2);
else if (r < 0.3 && !bDisabled[3]) draw0Steps(3);
else if (r < 0.4 && !bDisabled[4]) draw0Steps(4);
else if (r < 0.5 && !bDisabled[5]) draw0Steps(5);
else if (r < 0.6 && !bDisabled[6]) draw0Steps(6);
else if (r < 0.7 && !bDisabled[7]) draw0Steps(7);
else if (r < 0.8 && !bDisabled[8]) draw0Steps(8);
else if (r < 1 && !bDisabled[9]) draw0Steps(9);
else computerTurn();
}
function draw0Steps(x)
{
bDisabled[x]=true;
button[x].style.opacity=0.7;
content[x]='0';
button[x].style.webkitTransform="rotateX(180deg)";
setTimeout(function()
{
ctx[x].beginPath();
ctx[x].lineWidth=3;
ctx[x].arc(25,25,17,0,Math.PI*2,false);
ctx[x].stroke();
ctx[x].closePath();
}, 300);
}
function checkWinner()
{
if(!isResult)
{
if (content[1] == 'x' && content[2] == 'x' && content[3] == 'x') s howWinner('Je hebt gewonnen!');
else if (content[4] == 'x' && content[5] == 'x' && content[6] == 'x') showWinner('Je hebt gewonnen!');
else if (content[7] == 'x' && content[8] == 'x' && content[9] == 'x') showWinner('Je hebt gewonnen!');
else if (content[1] == 'x' && content[4] == 'x' && content[7] == 'x') showWinner('Je hebt gewonnen!');
else if (content[2] == 'x' && content[5] == 'x' && content[8] == 'x') showWinner('Je hebt gewonnen!');
else if (content[3] == 'x' && content[6] == 'x' && content[9] == 'x') showWinner('Je hebt gewonnen!');
else if (content[1] == 'x' && content[5] == 'x' && content[9] == 'x') showWinner('Je hebt gewonnen!');
else if (content[3] == 'x' && content[5] == 'x' && content[7] == 'x') showWinner('Je hebt gewonnen!');
else if (content[1] == '0' && content[2] == '0' && content[3] == '0') showWinner('Je hebt verloren!');
else if (content[4] == '0' && content[5] == '0' && content[6] == '0') showWinner('Je hebt verloren!');
else if (content[7] == '0' && content[8] == '0' && content[9] == '0') showWinner('Je hebt verloren!');
else if (content[1] == '0' && content[4] == '0' && content[7] == '0') showWinner('Je hebt verloren!');
else if (content[2] == '0' && content[5] == '0' && content[8] == '0') showWinner('Je hebt verloren!');
else if (content[3] == '0' && content[6] == '0' && content[9] == '0') showWinner('Je hebt verloren!');
else if (content[1] == '0' && content[5] == '0' && content[9] == '0') showWinner('Je hebt verloren!');
else if (content[3] == '0' && content[5] == '0' && content[7] == '0') showWinner('Je hebt verloren!');
else if(
(content[1]=='x' || content[1]=='0')&&
(content[2]=='x' || content[2]=='0')&&
(content[3]=='x' || content[3]=='0')&&
(content[4]=='x' || content[4]=='0')&&
(content[5]=='x' || content[5]=='0')&&
(content[6]=='x' || content[6]=='0')&&
(content[7]=='x' || content[7]=='0')&&
(content[8]=='x' || content[8]=='0')&&
(content[9]=='x' || content[9]=='0')
)
showWinner("Gelijkspel. Speel opnieuw!");
}
}
function showWinner(x)
{
alert(x);
isResult=true;
}

Javascript Rule of Three it's not working

This rule of three needs to identify were is the X or Y and then calculate it from it's position and the type of the proporcion (direct or inverse). But for some reason the page in HTML it's returning the value "ERROR!" (set on the else condition).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="radio" id="inv">Inversamente</input>
<input type="radio" id="dir">Diretamente</input><br />
<input type="text" id="I1"></input>
<input type="text" id="I2"></input><br />
<input type="text" id="I3"></input>
<input type="text" id="I4"></input><br /><br />
<button id="button" onclick="button()">Calcular</button>
<script type="text/javascript">
function button() {
var i1 = parseInt(document.getElementById("I1"));
var i2 = parseInt(document.getElementById("I2"));
var i3 = parseInt(document.getElementById("I3"));
var i4 = parseInt(document.getElementById("I4"));
var i5 = document.getElementById("inv").value;
var i6 = document.getElementById("dir").value;
if (i1.value == "x" && i5.value === true || i1.value =="y" && i5.value === true){
var r1 = i3.value*i4.value/i2.value;
document.write("Resultado é " + r1);
}
else if (i1.value == "x" && i6.value === true || i1.value =="y" && i6.value === true) {
var r2 = i3.value*i2.value/i4.value;
document.write("Resultado é " + r2);
}
else if (i2.value == "x" && i5.value === true || i2.value =="y" && i5.value === true) {
var r3 = i3.value*i4.value/i1.value;
document.write("Resultado é " + r3);
}
else if (i2.value == "x" && i6.value === true || i2.value =="y" && i6.value ===true) {
var r4 = i1.value*i4.value/i3.value;
document.write("Resultado é " + r4);
}
else if (i3.value == "x" && i5.value === true || i3.value =="y" && i5.value === true) {
var r5 = i1.value*i2.value/i4.value;
document.write("Resultado é " + r5);
}
else if (i3.value == "x" && i6.value === true || i3.value =="y" && i6.value === true) {
var r6 = i1.value*i4.value/i2.value;
document.write("Resultado é " + r6);
}
else if (i4.value == "x" && i5.value === true || i4.value =="y" && i5.value === true) {
var r7 = i1.value*i2.value/i3.value;
document.write("Resultado é " + r7);
}
else if (i4.value == "x" && i6.value === true || i4.value =="y" && i6.value === true) {
var r8 = i2.value*i3.value/i1.value;
document.write("Resultado é " + r8);
}
else{
document.write("ERROR!");//whatever the case of the rule of the above, it aways return "ERROR!"
}
}
</script>
I'm sorry for my english. I'm brazilian.
You were running parseInt() on a DOM element instead of the element's value, but you're also looking for character input into anyone of those inputs. I've corrected the issues regarding value comparisons, but if all the inputs are not filled, you'll receive a NaN response.
Corrected JS:
function button() {
var i1 = document.getElementById("I1");
var i2 = document.getElementById("I2");
var i3 = document.getElementById("I3");
var i4 = document.getElementById("I4");
var i5 = document.getElementById("inv");
var i6 = document.getElementById("dir");
console.log(i1.value);
console.log(i2.value);
console.log(i3.value);
console.log(i4.value);
console.log(i5.checked);
console.log(i6.checked);
if (i1.value == "x" && i5.checked === true || i1.value == "y" && i5.checked === true) {
var r1 = i3.value * i4.value / i2.value;
console.log("Resultado é " + r1);
} else if (i1.value == "x" && i6.value === true || i1.value == "y" && i6.value === true) {
var r2 = i3.value * i2.value / i4.value;
console.log("Resultado é " + r2);
} else if (i2.value == "x" && i5.value === true || i2.value == "y" && i5.value === true) {
var r3 = i3.value * i4.value / i1.value;
console.log("Resultado é " + r3);
} else if (i2.value == "x" && i6.value === true || i2.value == "y" && i6.value === true) {
var r4 = i1.value * i4.value / i3.value;
console.log("Resultado é " + r4);
} else if (i3.value == "x" && i5.value === true || i3.value == "y" && i5.value === true) {
var r5 = i1.value * i2.value / i4.value;
console.log("Resultado é " + r5);
} else if (i3.value == "x" && i6.value === true || i3.value == "y" && i6.value === true) {
var r6 = i1.value * i4.value / i2.value;
console.log("Resultado é " + r6);
} else if (i4.value == "x" && i5.value === true || i4.value == "y" && i5.value === true) {
var r7 = i1.value * i2.value / i3.value;
console.log("Resultado é " + r7);
} else if (i4.value == "x" && i6.value === true || i4.value == "y" && i6.value === true) {
var r8 = i2.value * i3.value / i1.value;
console.log("Resultado é " + r8);
} else {
console.log("ERROR!"); //whatever the case of the rule of the above, it aways return "ERROR!"
}
}

How can I write this javascript logic code into a more efficient/compact way? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 6 years ago.
Improve this question
In a project I am working on I have 21 buttons that all have active and inactive states. The state of certain buttons is affected by other buttons being pressed as well as that button being pressed. In my html I use ng-click to call a function updateActiveButtons(num) to activate or deactivate certain buttons.
The best way I could think of was to use an array of 21 elements, all of which were set to false by default and then changed when they were pressed.
The problem is that my code is UGLY and I know that there has to be a much better way to logic it out.
Here is my updateActiveButtons function:
/* Array for active buttons
0: Company Name 1: Country 2: Industry 3: Search 4: Company Name - Seller Name 5: Company Name - Buyer Name 6: Country - USA 7: Country - China 8: Country - Israel
9: Country - Russia 10: Country - India 11: Country - Japan 12: Industry - Tech 13: Industry - Consumer 14: Industry - Pharma 15: Industry - Financial 16: Industry - Biotech 17: Industry - Industrial
18: Date 19: Valuation 20: Industry - Business
*/
$scope.activeButtonArray = new Array(21);
for (var i = 0; i < $scope.activeButtonArray.length; i++) { $scope.activeButtonArray[i] = false; }
//pos = position in array
$scope.updateActiveButtons = function(pos) {
console.log($scope.activeButtonArray[20]);
if(pos != 0 || pos != 1 || pos != 2 || pos != 3 || pos != 4 || pos != 5) {
$scope.activeButtonArray[pos] = !$scope.activeButtonArray[pos];
} else if(pos == 3 && !$scope.activeButtonArray[pos]) {
$scope.activeButtonArray[pos] = true;
} else if(pos == 3 && $scope.activeButtonArray[pos]) {
$scope.activeButtonArray[pos] = false;
}
if(pos == 18 || pos == 19) {
$scope.activeButtonArray[0] = false;
if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) {
$scope.activeButtonArray[1] = false;
}
if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) {
$scope.activeButtonArray[2] = false;
}
}
if(pos == 0) {
$scope.activeButtonArray[0] = true;
if($scope.activeButtonArray[4] || $scope.activeButtonArray[5]) {
$scope.activeButtonArray[0] = true;
}
if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) {
$scope.activeButtonArray[1] = false;
}
if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) {
$scope.activeButtonArray[2] = false;
}
if($scope.search.text == undefined || $scope.search.text == '') {
$scope.activeButtonArray[3] = false;
}
}
if(pos == 1) {
if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) {
$scope.activeButtonArray[0] = false;
}
if($scope.activeButtonArray[6] == true || $scope.activeButtonArray[7] == true || $scope.activeButtonArray[8] == true || $scope.activeButtonArray[9] == true || $scope.activeButtonArray[10] == true || $scope.activeButtonArray[11] == true) {
$scope.activeButtonArray[1] = true;
}
if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) {
$scope.activeButtonArray[2] = false;
}
if($scope.search.text == undefined || $scope.search.text == '') {
$scope.activeButtonArray[3] = false;
}
}
if(pos == 2) {
if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) {
$scope.activeButtonArray[0] = false;
}
if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) {
$scope.activeButtonArray[1] = false;
}
if($scope.activeButtonArray[12] == true || $scope.activeButtonArray[13] == true || $scope.activeButtonArray[14] == true || $scope.activeButtonArray[15] == true || $scope.activeButtonArray[16] == true || $scope.activeButtonArray[17] == true || $scope.activeButtonArray[20] == true) {
$scope.activeButtonArray[2] = true;
}
if($scope.search.text == undefined || $scope.search.text == '') {
$scope.activeButtonArray[3] = false;
}
}
if(pos == 3) {
if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) {
$scope.activeButtonArray[0] = false;
}
if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) {
$scope.activeButtonArray[1] = false;
}
if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) {
$scope.activeButtonArray[2] = false;
}
}
if(pos == 4) {
$scope.activeButtonArray[4] = true;
$scope.activeButtonArray[5] = false;
}
if(pos == 5) {
$scope.activeButtonArray[4] = false;
$scope.activeButtonArray[5] = true;
}
}
I have a lot of repeated code that comes out in a way that just doesn't feel very well done or professional. I wouldn't be proud to send this to a client. Does anyone have any suggestions as to how I could make this better?
On way would be to replace entire conditions (or blocks) by methods/functions
so
if($scope.activeButtonArray[4] || $scope.activeButtonArray[5]) {
$scope.activeButtonArray[0] = true;
}
becomes
if (somethingIsSomething($scope))
This has the added benefit of be much more self-documenting so you can "read" what you're doing.
I liked pixelearth's recommendation to just create another function so I did.
I decided to make a function that took an array, a start, and a end point as parameters and return true if any of the array values in that range are true.
Here is the function:
var arrayContainsTrue = function(arr, start, end) {
for(var i = start; i <= end; i++) {
if(arr[i] == true) {
return true;
}
}
return false;
}
and then to shorten my code I just did this (with different start and end points based on what was needed):
if(!arrayContainsTrue($scope.activeButtonArray, 6, 11))

Javascript Tic Tac Toe- AI issue

I am trying to build a simple game of Tic Tac Toe with an AI that can only win or draw. I have taken the brute force approach to building this AI as the minmax approach is fairly complicated seen as I am new to javascript. The AI seems to work but the problem I have is that it makes too many moves when it is the AI's turn, so sometimes the AI will take two squares when I want it to take only one and sometimes it won't make any moves at all.
Code:
$(document).ready(function() {
var userChoice;
var computerChoice;
var dialogBox = $("#dialogBox");
var s1 = $("#top-left");
var s2 = $("#top");
var s3 = $("#top-right");
var s4 = $("#left");
var s5 = $("#middle");
var s6 = $("#right");
var s7 = $("#bottom-left");
var s8 = $("#bottom");
var s9 = $("#bottom-right");
var turn = 1; // turn 1=computer turn 2=user
var countMoves = 9;
renderDialog();
dialogChoice(); // user chooses X or O
move();
// make dialog box
function renderDialog() {
var winW = window.innerWidth;
var centerDialog = (winW / 2) - (600 * 0.5); // to center
dialogBox.css("display", "block")
dialogBox.css("left", centerDialog + "px");
dialogBox.css("top", "100px")
}
// make dialog interactive
function dialogChoice() {
var cross = $('#cross');
var circle = $('#circle');
cross.on("click", function() {
dialogBox.css("display", "none");
userChoice = "X";
computerChoice = "O";
computerRandom();
});
circle.on("click", function() {
dialogBox.css("display", "none");
userChoice = "O";
computerChoice = "X";
computerRandom();
});
}
// make function to allow user to click on square to move
function move() {
$("#top-left").on("click", function() {
if ($("#top-left").html() === '') {
$("#top-left").text(userChoice);
turn = 1;
userTurn();
};
});
$("#top").on("click", function() {
if ($("#top").html() === '') {
$("#top").text(userChoice);
turn = 1;
userTurn();
};
});
$("#top-right").on("click", function() {
if ($("#top-right").html() === '') {
$("#top-right").text(userChoice);
turn = 1;
userTurn();
}
});
$("#left").on("click", function() {
if ($("#left").html() === '') {
$("#left").text(userChoice);
turn = 1;
userTurn();
};
});
$("#middle").on("click", function() {
if ($("#middle").html() === '') {
$("#middle").text(userChoice);
turn = 1;
userTurn();
};
});
$("#right").on("click", function() {
if ($("#right").html() === '') {
$("#right").text(userChoice);
turn = 1;
userTurn();
};
});
$("#bottom-left").on("click", function() {
if ($("#bottom-left").html() === '') {
$("#bottom-left").text(userChoice);
turn = 1;
userTurn();
};
});
$("#bottom").on("click", function() {
if ($("#bottom").html() === '') {
$("#bottom").text(userChoice);
turn = 1;
userTurn();
};
});
$("#bottom-right").on("click", function() {
if ($("#bottom-right").html() === '') {
$("#bottom-right").text(userChoice);
turn = 1;
userTurn();
};
});
};
// switch turns on every round aswell as check for gameover tests.
function userTurn() {
computerAI();
computerRandom();
countMoves--;
console.log(turn);
if (isWinner() || draw()) {
countMoves = 9;
restartGame();
}
};
//check for winner
function isWinner() {
var result = false;
// first row
if (s1.text() == "X" && s2.text() == "X" && s3.text() == "X" || s1.text() == "O" && s2.text() == "O" && s3.text() == "O") {
s1.css("background", "green");
s2.css("background", "green");
s3.css("background", "green");
result = true;
return result;
}
//seconds row
if (s4.text() == "X" && s5.text() == "X" && s6.text() == "X" || s4.text() == "O" && s5.text() == "O" && s6.text() == "O") {
s4.css("background", "green");
s5.css("background", "green");
s6.css("background", "green");
result = true;
return result;
}
//third row
if (s7.text() == "X" && s8.text() == "X" && s9.text() == "X" || s7.text() == "O" && s8.text() == "O" && s9.text() == "O") {
s7.css("background", "green");
s8.css("background", "green");
s9.css("background", "green");
result = true;
return result;
}
// first column
if (s1.text() == "X" && s4.text() == "X" && s7.text() == "X" || s1.text() == "O" && s4.text() == "O" && s7.text() == "O") {
s1.css("background", "green");
s4.css("background", "green");
s7.css("background", "green");
result = true
return result;
}
//second column
if (s2.text() == "X" && s5.text() == "X" && s8.text() == "X" || s2.text() == "O" && s5.text() == "O" && s8.text() == "O") {
s2.css("background", "green");
s5.css("background", "green");
s8.css("background", "green");
result = true
return result;
}
//third column
if (s3.text() == "X" && s6.text() == "X" && s9.text() == "X" || s3.text() == "O" && s6.text() == "O" && s9.text() == "O") {
s3.css("background", "green");
s6.css("background", "green");
s9.css("background", "green");
result = true
return result;
}
// first diagonal
if (s1.text() == "X" && s5.text() == "X" && s9.text() == "X" || s1.text() == "O" && s5.text() == "O" && s9.text() == "O") {
s1.css("background", "green");
s5.css("background", "green");
s9.css("background", "green");
result = true
return result;
}
//second diagonal
if (s3.text() == "X" && s5.text() == "X" && s7.text() == "X" || s3.text() == "O" && s5.text() == "O" && s7.text() == "O") {
s3.css("background", "green");
s5.css("background", "green");
s7.css("background", "green");
result = true
return result;
}
};
function draw() {
var result = false;
if (countMoves == 0) {
result = true;
}
return result;
}
function restartGame() {
setTimeout(function() {
$(".col-xs-4").text('');
$(".col-xs-4").css("background", "red");
if (s5.text() == '') {
s5.text(computerChoice)
};
}, 2000)
}
function computerAI() {
countMoves--;
if (turn == 1) {
computerWin()
};
if (turn == 1) {
computerBlock()
};
if (turn == 1) {
computerFork()
};
if (turn == 1) {
blockFork()
}
if (turn == 1) {
computerRandom();
}
};
// computer will block opponent move
function computerBlock() {
// first Row1
if (s1.text() == userChoice && s2.text() == userChoice && s3.text() == '') {
s3.text(computerChoice);
turn = 2;
};
//first Row2
if (s3.text() == userChoice && s2.text() == userChoice && s1.text() == '') {
s1.text(computerChoice);
turn = 2;
};
//first Row3
if (s1.text() == userChoice && s3.text() == userChoice && s2.text() == '') {
s2.text(computerChoice);
turn = 2;
};
//second Row
if (s4.text() == userChoice && s5.text() == userChoice && s6.text() == '') {
s6.text(computerChoice);
turn = 2;
};
//second Row2
if (s6.text() == userChoice && s5.text() == userChoice && s4.text() == '') {
s4.text(computerChoice);
turn = 2;
};
//second Row3
if (s6.text() == userChoice && s4.text() == userChoice && s5.text() == '') {
s5.text(computerChoice);
turn = 2;
};
//third row
if (s7.text() == userChoice && s8.text() == userChoice && s9.text() == '') {
s9.text(computerChoice);
turn = 2;
};
//third row2
if (s9.text() == userChoice && s8.text() == userChoice && s7.text() == '') {
s7.text(computerChoice);
turn = 2;
};
//third Row3
if (s9.text() == userChoice && s7.text() == userChoice && s8.text() == '') {
s8.text(computerChoice);
turn = 2;
};
//first column
if (s1.text() == userChoice && s3.text() == userChoice && s7.text() == '') {
s7.text(computerChoice);
turn = 2;
};
//first column2
if (s7.text() == userChoice && s4.text() == userChoice && s1.text() == '') {
s1.text(computerChoice);
turn = 2;
};
//first column3
if (s1.text() == userChoice && s7.text() == userChoice && s4.text() == '') {
s4.text(computerChoice);
turn = 2;
};
//second column
if (s2.text() == userChoice && s5.text() == userChoice && s8.text() == '') {
s8.text(computerChoice);
turn = 2;
};
//second column2
if (s8.text() == userChoice && s5.text() == userChoice && s2.text() == '') {
s2.text(computerChoice);
turn = 2;
};
//second column3
if (s2.text() == userChoice && s8.text() == userChoice && s5.text() == '') {
s5.text(computerChoice);
turn = 2;
};
//third column
if (s3.text() == userChoice && s6.text() == userChoice && s9.text() == '') {
s9.text(computerChoice);
turn = 2;
};
//third column2
if (s9.text() == userChoice && s6.text() == userChoice && s3.text() == '') {
s3.text(computerChoice);
turn = 2;
};
//third column3
if (s3.text() == userChoice && s9.text() == userChoice && s6.text() == '') {
s6.text(computerChoice);
turn = 2;
};
// first diagonal
if (s1.text() == userChoice && s5.text() == userChoice) {
s9.text(computerChoice);
turn = 2;
};
//first diagonal 2
if (s9.text() == userChoice && s5.text() == userChoice && s1.text() == '') {
s1.text(computerChoice);
turn = 2;
};
// first diagonal 3
if (s1.text() == userChoice && s9.text() == userChoice && s5.text() == '') {
s5.text(computerChoice);
turn = 2;
};
//second diagonal
if (s3.text() == userChoice && s5.text() == userChoice && s7.text() == '') {
s7.text(computerChoice);
turn = 2;
};
//second diagonal2
if (s7.text() == userChoice && s5.text() == userChoice && s3.text() == '') {
s3.text(computerChoice);
turn = 2;
};
//second diagonal 3
if (s7.text() == userChoice && s3.text() == userChoice && s5.text() == '') {
s5.text(computerChoice);
turn = 2;
};
};
// computer will make move to win
function computerWin() {
// take third for win
// first Row1
if (s1.text() == computerChoice && s2.text() == computerChoice && s3.text() == '') {
s3.text(computerChoice);
turn = 2;
};
//first Row2
if (s3.text() == computerChoice && s2.text() == computerChoice) {
s1.text(computerChoice);
turn = 2;
};
//second Row
if (s4.text() == computerChoice && s5.text() == computerChoice && s6.text() == '') {
s6.text(computerChoice);
turn = 2;
};
//second Row2
if (s6.text() == computerChoice && s5.text() == computerChoice && s4.text() == '') {
s4.text(computerChoice);
turn = 2;
};
//third row
if (s7.text() == computerChoice && s8.text() == computerChoice && s9.text() == '') {
s9.text(computerChoice);
turn = 2;
};
//third row2
if (s9.text() == computerChoice && s8.text() == computerChoice && s7.text() == '') {
s7.text(computerChoice);
turn = 2;
};
//first column
if (s1.text() == computerChoice && s3.text() == computerChoice && s7.text() == '') {
s7.text(computerChoice);
turn = 2;
};
//first column2
if (s7.text() == computerChoice && s4.text() == computerChoice && s1.text() == '') {
s1.text(computerChoice);
turn = 2;
};
//second column
if (s2.text() == computerChoice && s5.text() == computerChoice && s8.text() == '') {
s8.text(computerChoice);
turn = 2;
};
//second column2
if (s8.text() == computerChoice && s5.text() == computerChoice && s2.text() == '') {
s2.text(computerChoice);
turn = 2;
};
//third column
if (s3.text() == computerChoice && s6.text() == computerChoice && s9.text() == '') {
s9.text(computerChoice);
turn = 2;
};
//third column2
if (s9.text() == computerChoice && s6.text() == computerChoice && s3.text() == '') {
s3.text(computerChoice);
turn = 2;
};
// first diagonal
if (s1.text() == computerChoice && s5.text() == computerChoice && s9.text() == '') {
s9.text(computerChoice);
turn = 2;
};
//first diagonal2
if (s9.text() == computerChoice && s5.text() == computerChoice && s1.text() == '') {
s1.text(computerChoice);
turn = 2;
};
//second diagonal
if (s3.text() == computerChoice && s5.text() == computerChoice && s7.text() == '') {
s7.text(computerChoice);
turn = 2;
};
//second diagonal2
if (s7.text() == computerChoice && s5.text() == computerChoice && s3.text() == '') {
s3.text(computerChoice);
turn = 2;
};
};
// computer make move to create a fork
function computerFork() {
// fork1
if (s1.text() == computerChoice && s5.text() == computerChoice && s3.text() == '') {
s3.text(computerChoice);
turn = 2;
};
//fork2
if (s3.text() == computerChoice && s5.text() == computerChoice && s1.text() == '') {
s1.text(computerChoice);
turn = 2;
};
//fork3
if (s7.text() == computerChoice && s5.text() == computerChoice && s9.text() == '') {
s9.text(computerChoice);
turn = 2;
};
//fork4
if (s9.text() == computerChoice && s5.text() == computerChoice && s7.text() == '') {
s7.text(computerChoice);
turn = 2;
};
};
function blockFork() {
// fork1
if (s1.text() == userChoice && s5.text() == userChoice && s3.text() == '') {
s3.text(computerChoice);
turn = 2;
};
//fork2
if (s3.text() == userChoice && s5.text() == userChoice && s1.text() == '') {
s1.text(computerChoice);
turn = 2;
};
//fork3
if (s7.text() == userChoice && s5.text() == userChoice && s9.text() == '') {
s9.text(computerChoice);
turn = 2;
};
//fork4
if (s9.text() == userChoice && s5.text() == userChoice && s7.text() == '') {
s7.text(computerChoice);
turn = 2;
};
};
function computerRandom() {
var squareArr = [s1, s2, s3, s4, s5, s6, s7, s8, s9];
var randomNum = Math.floor(Math.random() * 8);
if (squareArr[randomNum].text() == '') {
squareArr[randomNum].text(computerChoice);
squareArr.splice(randomNum, 1);
turn = 2;
}
};
});
example:http://codepen.io/aliz16/full/yJgQQd/
Check you functions that play for the computer.
Let's take computerWin for an example. What is stopping the function from making multiple marks? Several Conditions could be true. Delegating the turn doesn't stop the checks.
P.S. not all lines are correct either.

Categories