Basic Tic Tac Toe

Developer
Kelly
Size
2,588 Kb
Views
28,336
  1. Basic Tic Tac Toe Previews
  2. Basic Tic Tac Toe HTML Codes
  3. Basic Tic Tac Toe CSS Codes
  4. Basic Tic Tac Toe JS Codes

How do I make an basic tic tac toe?

What is a basic tic tac toe? How do you make a basic tic tac toe? This script and codes were developed by Kelly on 31 August 2022, Wednesday.

Basic Tic Tac Toe Previews
IQ Test

Basic Tic Tac Toe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic Tic Tac Toe</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class = "grid"> <div id = "a1" class = "square"></div> <div id = "a2" class = "square"></div> <div id = "a3" class = "square"></div> <div id = "b1" class = "square"></div> <div id = "b2" class = "square"></div> <div id = "b3" class = "square"></div> <div id = "c1" class = "square"></div> <div id = "c2" class = "square"></div> <div id = "c3" class = "square"></div> </div>
<body> <script src="js/index.js"></script>
</body>
</html>

Basic Tic Tac Toe - Script Codes CSS Codes

.grid { display: flex; /* establish flex container */ flex-wrap: wrap; /* enable flex items to wrap */
}
.square { flex: 0 0 32%; /* don't grow, don't shrink, width */ height: 100px; margin: 0px; background-color: #999;
}
#a1 { border-right-style: solid; border-bottom-style: solid;
}
#a2 { border-right-style: solid; border-left-style: solid; border-bottom-style: solid;
}
#a3 { border-left-style: solid; border-bottom-style: solid;
}
#b1 { border-right-style: solid; border-top-style: solid; border-bottom-style: solid;
}
#b2 { border-style: solid;
}
#b3 { border-left-style: solid; border-top-style: solid; border-bottom-style: solid;
}
#c1 { border-right-style: solid; border-top-style: solid;
}
#c2 { border-left-style:solid; border-right-style: solid; border-top-style: solid;
}
#c3 { border-left-style:solid; border-top-style: solid;
}

Basic Tic Tac Toe - Script Codes JS Codes

var board = { a1: " ", a2: " ", a3: " ", b1: " ", b2: " ", b3: " ", c1: " ", c2: " ", c3: " ",
}
var winConditions = [ ["a1", "a2", "a3"], ["b1", "b2", "b3"], ["c1", "c2", "c3"], ["a1", "b1", "c1"], ["a2", "b2", "c2"], ["a3", "b3", "c3"], ["a1", "b2", "c3"], ["a3", "b2", "c1"],
]
var listOfSquares = ["a1", "a2", "a3", "b1", "b2", "b3", "c1", "c2", "c3"]
function printBoard(){ console.log(board.a1 + "|" + board.a2 + "|" + board.a3); console.log(board.b1 + "|" + board.b2 + "|" + board.b3); console.log(board.c1 + "|" + board.c2 + "|" + board.c3);
}
function clearBoard(){ for (var x in board){ board[x] = " "; };
}
function playMove(player, square){ //ex playMove("X", "a2") board[square] = player;
}
function squareState(status, square){ return board[square] === status;
}
function isThreeInARow(status, array){ for (var i = 0; i < 3; i++){ if (board[array[i]] !== status){ return false; } } return true;
};
function isTwoOutOfThree(oOrX, array){ // returns a square to play or -1 var listOfOsOrXs = []; var listOfEmptySquares = []; for (var i = 0; i < 3 ; i++){ if (board[array[i]] === " "){ listOfEmptySquares.push(array[i]); } if (board[array[i]] === oOrX){ listOfOsOrXs.push(array[i]); } } if ((listOfOsOrXs.length === 2) && (listOfEmptySquares.length === 1)){ return listOfEmptySquares[0] } else{ return -1 }
}
function findTwoOutOfThree(status, array){ for (var i = 0; i < array.length; i++){ if(isTwoOutOfThree(status, array[i]) !== -1){ return isTwoOutOfThree(status, array[i]); } } return -1;
}
function findRandom(){ //needs something to check if all squares are occupied var randomSquare = listOfSquares[Math.floor(Math.random() * 9)]; if (board[randomSquare] === " "){ return randomSquare; } else{ return findRandom(); }
}
function isGameOver(){ for (var i = 0; i < winConditions.length; i++){ if (isThreeInARow("O", winConditions[i])){ return true; } if (isThreeInARow("X", winConditions[i])){ return true; }; }; return false;
}
var somePlayer = "X";
function switchSomePlayer(){ if (somePlayer === "X"){ somePlayer = "O"; return; } else { somePlayer = "X" }
}
function AI(player){ var opponent; if (player === "X"){ opponent = "O"; } else { opponent = "X"; } if (findTwoOutOfThree(player, winConditions) !== -1){ return findTwoOutOfThree(player, winConditions); } else if (findTwoOutOfThree(opponent, winConditions) !== -1){ return findTwoOutOfThree(opponent, winConditions); } else { return findRandom() }
}
/*
playMove("O", "a1");
playMove("X", AI("X"));
printBoard();
*/
Basic Tic Tac Toe - Script Codes
Basic Tic Tac Toe - Script Codes
Home Page Home
Developer Kelly
Username Kellyjohnbraun
Uploaded August 31, 2022
Rating 3
Size 2,588 Kb
Views 28,336
Do you need developer help for Basic Tic Tac Toe?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kelly (Kellyjohnbraun) Script Codes
Name
A Pen by Kelly
The Web and HTML, Basically
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!