Tic Tac Toe

Developer
Brosis Mosis
Size
4,302 Kb
Views
2,024
  1. Tic Tac Toe Previews
  2. Tic Tac Toe HTML Codes
  3. Tic Tac Toe CSS Codes
  4. Tic Tac Toe JS Codes

How do I make an tic tac toe?

What is a tic tac toe? How do you make a tic tac toe? This script and codes were developed by Brosis Mosis on 30 January 2023, Monday.

Tic Tac Toe Previews
IQ Test

Tic Tac Toe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tic Tac Toe</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main class="container"> <div class="score-div"> <h1>Score</h1> <div><p>It's Your Score: <span id="your-score">0</span></p></div> <div><p>Draws: <span id="draws">0</span></p></div> <div><p>AI Score: <span id="computer-score">0</span></p></div> <p id="display-message">Who Should starts</p> </div> <div class="message-area"> </div> <div class="board"> <div id="0" class="top-left"></div><div id="1"></div><div id="2"></div> <div id="3"></div><div id="4"></div><div id="5"></div> <div id="6"></div><div id="7"></div><div id="8"></div> </div> <div class="button-container"> <button id="player-start">MMEEE!!!</button> <button id="computer-start">Or Ai.</button> </div> <div class="win-lines"> <div id="line-1" class="line"><hr /></div> <div id="line-2" class="line"><hr /></div> <div id="line-3" class="line"><hr /></div> <div id="col-1" class="col"><hr /></div> <div id="col-2" class="col"><hr /></div> <div id="col-3" class="col"><hr /></div> <div id="diag-1" class="diag"><hr /></div> <div id="diag-2" class="diag"><hr /></div> </div>
</main> <script src="js/index.js"></script>
</body>
</html>

Tic Tac Toe - Script Codes CSS Codes

body { font-family: Helvetica, sans-seriff; background: #1d2ab7;
}
h1 { font-size: 24px; margin-bottom: 0px;
}
hr { border: 1px dotted salmon;
}
button { border: 1px solid lightgrey; border-radius: 5px; padding: 10px; color: black; background: #00fff6; outline: none;
}
button:hover { border: 1px solid #ff0000; color: #00d8ff; background: #ff0000;
}
.container { position: relative; margin: 0 auto; text-align: center; width: 400px;
}
.score-div { margin-top: 50px; border: 1px solid #ff0000; border-radius: 10px; color: black;
}
.score-div div { display: inline-block; padding: 0px 20px;
}
.score-div > p { color: #ffa500; font-weight: bold; margin-bottom: 10px; margin-top: 5px; font-size: 14px;
}
.board { cursor: pointer; margin: 30px auto; width: 310px; text-align: center; display: flex; flex-wrap: wrap;
}
.board div { width: 100px; height: 100px; border: 1px solid #00a1ff; display: block;
}
.board div p { margin-top: 37px; font-weight: bold; font-size: 22px;
}
#player-start { float: left;
}
#computer-start { float: right;
}
.win-lines { clear: both; width: 100%;
}
.line { display: none; left: 58px; position: absolute; width: 70%;
}
.diag { display: none; position: absolute; width: 100%;
}
.col { display: none; position: absolute; width: 70%; top: 300px; transform: rotate(90deg);
}
#line-1 { top: 198px;
}
#line-2 { top: 300px;
}
#line-3 { top: 402px;
}
#col-1 { left: -44px;
}
#col-2 { left: 59px;
}
#col-3 { left: 161px;
}
#diag-1 { transform: rotate(45deg); top: 301px;
}
#diag-2 { transform: rotate(135deg); top: 299px;
}
.x-color { color: red;
}
.o-color { color: light blue;
}

Tic Tac Toe - Script Codes JS Codes

var score = { player: 0, draws: 0, computer: 0 }, winLine, maxVal = 10, minVal = -10, allowMoves = true;
function evalCollection(a, b, c) { if (a && b && c) { if (a === b && b === c) return a * maxVal; else return null; }
}
function isBoardFull(board) { if (board.every(function(element) { return element; })) return true; else return false;
}
function getEmpty(state) { var results = []; state.forEach(function(el, index) { if (!el) results.push(index); }); return results;
}
function evalBoard(state) { return evalCollection(state[0], state[1], state[2]) || evalCollection(state[3], state[4], state[5]) || evalCollection(state[6], state[7], state[8]) || evalCollection(state[0], state[3], state[6]) || evalCollection(state[1], state[4], state[7]) || evalCollection(state[2], state[5], state[8]) || evalCollection(state[0], state[4], state[8]) || evalCollection(state[2], state[4], state[6]);
}
function Move(position, player, state) { this.position = position this.player = player; this.state = []; this.children = []; state.forEach(function(el) { this.state.push(el); }, this); this.state[position] = player;
}
function generateScores(move) { if (evalBoard(move.state)) return evalBoard(move.state); if (isBoardFull(move.state)) return 0; else { var empty = getEmpty(move.state); var scores = []; empty.forEach(function(position, index) { move.children[index] = new Move(position, move.player * -1, move.state); }); for (var i = 0; i < move.children.length; i++) { scores.push(generateScores(move.children[i])); } //the following checks seem inverted because they are actually for the children, the player for the parent node will be oposite if (move.player == -1) return Math.max.apply(null, scores); if (move.player == 1) return Math.min.apply(null, scores); }
}
function getBestMove(state, player) { var empty = getEmpty(state); var scores = []; var returnPos; var defaultMove = new Move(returnPos, player, state) var children = []; var min = 1; var max = -1; var maxindex = 0; var minindex = 0; empty.forEach(function(position, index) { children[index] = new Move(position, player, state); scores[index] = generateScores(children[index]); if (scores[index] >= max) { maxindex = index; max = scores[index]; } if (scores[index] <= min) { minindex = index; min = scores[index]; } }); if (player == 1) return children[maxindex].position; else return children[minindex].position;
}
function generateStartPosition() { return 2 * Math.floor(5 * Math.random());
}
function resetBoard() { if (winLine) winLine.style.display = "none"; board = [0, 0, 0, 0, 0, 0, 0, 0, 0]; var current; for (var i = 0; i < 9; i++) { current = document.getElementById(i); current.innerHTML = ""; }
}
function isGameOver() { var full = isBoardFull(board); var winner = evalBoard(board); if (winner) { console.log("winner is: " + winner + " and humanplayer is: " + humanPlayer); allowMoves = false; winLine = drawWin(); if (winner == (humanPlayer * maxVal)) { //never going to happen :)) changeMessage("You win! Play again?"); score.player++; updateScore(winner); } else if (winner == (humanPlayer * minVal)) { changeMessage("The computer wins! Play again?"); score.computer++; updateScore(winner); } } if (full && !winner) { allowMoves = false; score.draws++; updateScore(winner); changeMessage("It's a draw. Play again?"); }
}
function changeMessage(message) { var target = document.getElementById("display-message"); target.textContent = message;
}
function updateScore(boardScore) { var target; var displayScore; if (boardScore == humanPlayer * 10) { target = document.getElementById("your-score"); displayScore = score.player; } else if (boardScore == humanPlayer * -10) { target = document.getElementById("computer-score"); displayScore = score.computer; } else { target = document.getElementById("draws"); displayScore = score.draws; } target.textContent = displayScore.toString();
}
function setUpListeners() { boardFE.addEventListener("click", function(event) { var selected = event.target.id; if (selected && board[selected] === 0 && allowMoves) { board[selected] = humanPlayer; placeChoice(humanPlayer, selected); //do 0 turn isGameOver(); if (allowMoves) { var response = getBestMove(board, humanPlayer * -1); placeChoice(humanPlayer * -1, response); board[response] = humanPlayer * -1; isGameOver(); } } });
}
function placeChoice(player, position) { var targetCell = document.getElementById(position.toString()); if (player == 1) { targetCell.innerHTML = '<p class="x-color">X</p>'; board[position] = 1; } else if (player == -1) { targetCell.innerHTML = '<p class="o-color">O<p/>'; board[position] == -1; }
}
function getWinLine() { if (board[0] && board[0] === board[1] && board[1] === board[2]) return 1; if (board[3] && board[3] === board[4] && board[4] === board[5]) return 2; if (board[6] && board[6] === board[7] && board[7] === board[8]) return 3; return null;
}
function getWinCol() { if (board[0] && board[0] === board[3] && board[3] === board[6]) return 1; if (board[1] && board[1] === board[4] && board[4] === board[7]) return 2; if (board[2] && board[2] === board[5] && board[5] === board[8]) return 3; return null;
}
function getWinDiag() { if (board[0] && board[0] === board[4] && board[4] === board[8]) return 1; if (board[2] && board[2] === board[4] && board[4] === board[6]) return 2; return null;
}
function drawWin() { var line = getWinLine(); var target; if (line) target = document.getElementById("line-" + line); var col = getWinCol(); if (col) target = document.getElementById("col-" + col); var diag = getWinDiag(); if (diag) target = document.getElementById("diag-" + diag); target.style.display = "block"; return target;
}
//set up event listeners on board
var boardFE = document.getElementsByClassName("board")[0];
var compStart = document.getElementById("computer-start");
compStart.addEventListener("click", function() { resetBoard(); allowMoves = true; humanPlayer = -1; setUpListeners(); var loc = generateStartPosition(); placeChoice(humanPlayer * -1, loc); board[loc] = humanPlayer * -1; changeMessage("Game in progress...");
});
var playerStart = document.getElementById("player-start");
playerStart.addEventListener("click", function() { resetBoard(); allowMoves = true; humanPlayer = 1; changeMessage("Game in progress..."); setUpListeners();
});
Tic Tac Toe - Script Codes
Tic Tac Toe - Script Codes
Home Page Home
Developer Brosis Mosis
Username kermet24
Uploaded January 30, 2023
Rating 3
Size 4,302 Kb
Views 2,024
Do you need developer help for 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!

Brosis Mosis (kermet24) Script Codes
Name
Chicken dancing
Brosis Mosis Portfilo
Gabe Newell
Rpg fail
Missile command
Star wars -includes mickey mouse
Infanite runner
The Indian in the cupboard
Chicken
Chicken Neon
Create amazing blog posts 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!