FreeCodeCamp - Tic Tac Toe Game

Developer
Veronika
Size
4,469 Kb
Views
18,216
  1. FreeCodeCamp - Tic Tac Toe Game Previews
  2. FreeCodeCamp - Tic Tac Toe Game HTML Codes
  3. FreeCodeCamp - Tic Tac Toe Game CSS Codes
  4. FreeCodeCamp - Tic Tac Toe Game JS Codes

How do I make an freecodecamp - tic tac toe game?

What is a freecodecamp - tic tac toe game? How do you make a freecodecamp - tic tac toe game? This script and codes were developed by Veronika on 30 November 2022, Wednesday.

FreeCodeCamp - Tic Tac Toe Game Previews
IQ Test

FreeCodeCamp - Tic Tac Toe Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FreeCodeCamp - Tic Tac Toe Game</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="board" id="board"> <div class="board__square" id="1" data-taken="false"> <svg> <g> <line class="X X1" x1="25" y1="25" x2="75" y2="75"></line> <line class="X X2" x1="75" y1="25" x2="25" y2="75"></line> </g> <g> <circle class="O" cx="50" cy="50" r="25"></circle> </g> </svg> </div> <div class="board__square" id="2" data-taken="false"> <svg> <g> <line class="X X1" x1="25" y1="25" x2="75" y2="75"></line> <line class="X X2" x1="75" y1="25" x2="25" y2="75"></line> </g> <g> <circle class="O" cx="50" cy="50" r="25"></circle> </g> </svg> </div> <div class="board__square" id="3" data-taken="false"> <svg> <g> <line class="X X1" x1="25" y1="25" x2="75" y2="75"></line> <line class="X X2" x1="75" y1="25" x2="25" y2="75"></line> </g> <g> <circle class="O" cx="50" cy="50" r="25"></circle> </g> </svg> </div> <div class="board__square" id="4" data-taken="false"> <svg> <g> <line class="X X1" x1="25" y1="25" x2="75" y2="75"></line> <line class="X X2" x1="75" y1="25" x2="25" y2="75"></line> </g> <g> <circle class="O" cx="50" cy="50" r="25"></circle> </g> </svg> </div> <div class="board__square" id="5" data-taken="false"> <svg> <g> <line class="X X1" x1="25" y1="25" x2="75" y2="75"></line> <line class="X X2" x1="75" y1="25" x2="25" y2="75"></line> </g> <g> <circle class="O" cx="50" cy="50" r="25"></circle> </g> </svg> </div> <div class="board__square" id="6" data-taken="false"> <svg> <g> <line class="X X1" x1="25" y1="25" x2="75" y2="75"></line> <line class="X X2" x1="75" y1="25" x2="25" y2="75"></line> </g> <g> <circle class="O" cx="50" cy="50" r="25"></circle> </g> </svg> </div> <div class="board__square" id="7" data-taken="false"> <svg> <g> <line class="X X1" x1="25" y1="25" x2="75" y2="75"></line> <line class="X X2" x1="75" y1="25" x2="25" y2="75"></line> </g> <g> <circle class="O" cx="50" cy="50" r="25"></circle> </g> </svg> </div> <div class="board__square" id="8" data-taken="false"> <svg> <g> <line class="X X1" x1="25" y1="25" x2="75" y2="75"></line> <line class="X X2" x1="75" y1="25" x2="25" y2="75"></line> </g> <g> <circle class="O" cx="50" cy="50" r="25"></circle> </g> </svg> </div> <div class="board__square" id="9" data-taken="false"> <svg> <g> <line class="X X1" x1="25" y1="25" x2="75" y2="75"></line> <line class="X X2" x1="75" y1="25" x2="25" y2="75"></line> </g> <g> <circle class="O" cx="50" cy="50" r="25"></circle> </g> </svg> </div> <div class="dialog" id="dialog">Do you want to play as X or O? <button id="x">X</button> <button id="o">O</button> </div> </div> <div class="result" id="result"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FreeCodeCamp - Tic Tac Toe Game - Script Codes CSS Codes

.board { width: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: auto; margin-top: 4rem; position: relative;
}
.board__square { width: 100px; height: 100px; box-sizing: border-box;
}
.board div:nth-of-type(1), .board div:nth-of-type(2), .board div:nth-of-type(4), .board div:nth-of-type(5), .board div:nth-of-type(7), .board div:nth-of-type(8){ border-right: 3px solid rgb(200, 200, 200);
}
.board div:nth-of-type(1), .board div:nth-of-type(2), .board div:nth-of-type(3), .board div:nth-of-type(4), .board div:nth-of-type(5), .board div:nth-of-type(6){ border-bottom: 3px solid rgb(200, 200, 200);
}
.dialog { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(10, 10, 10); color: rgb(200, 200, 200); font-family: 'Permanent Marker', cursive; font-size: 2rem; text-align: center; letter-spacing: 0.1rem;
}
.dialog button { background-color: rgb(10, 10, 10); outline: none; border: 2px solid rgb(200, 200, 200); font-family: 'Permanent Marker', cursive; font-size: 1.6rem; margin: 2rem; padding: 10px 15px; color: rgb(200, 200, 200); cursor: pointer;
}
.dialog button:active { background-color: rgb(200, 200, 200); color: rgb(10, 10, 10);
}
.result { background-color: rgb(10, 10, 10); color: rgb(200, 200, 200); font-family: 'Permanent Marker', cursive; font-size: 2rem; text-align: center; letter-spacing: 0.1rem; margin-top: 1.5rem;
}
.X, .O { display: none;
}
.X { stroke: rgb(200, 200, 200); stroke-width: 10px; stroke-linecap: round; stroke-dasharray: 85px; stroke-dashoffset: 85px;
}
.O { stroke: rgb(200, 200, 200); stroke-width: 10px; stroke-linecap: round; fill: none; stroke-dasharray: 189px; stroke-dashoffset: 189px;
}
.O.draw { -webkit-animation: draw 500ms linear forwards; animation: draw 500ms linear forwards;
}
.X.draw { -webkit-animation: draw 250ms linear forwards; animation: draw 250ms linear forwards;
}
.X1.draw { -webkit-animation: draw 250ms 250ms linear forwards; animation: draw 250ms 250ms linear forwards;
}
.grow { -webkit-animation: grow 600ms 500ms linear alternate 6; animation: grow 600ms 500ms linear alternate 6;
}
@-webkit-keyframes draw { to { stroke-dashoffset: 0; }
}
@keyframes draw { to { stroke-dashoffset: 0; }
}
@-webkit-keyframes grow { to { -webkit-transform: scale(1.2) translate(-10px, -10px); transform: scale(1.2) translate(-10px, -10px); }
}
@keyframes grow { to { -webkit-transform: scale(1.2) translate(-10px, -10px); transform: scale(1.2) translate(-10px, -10px); }
}
.no-click { pointer-events: none;
}
body { background-color: rgb(10, 10, 10);
}
.container { width: 100%; overflow-x: hidden;
}

FreeCodeCamp - Tic Tac Toe Game - Script Codes JS Codes

let threeInARows = [ [5, 4, 6], [1, 2, 3], [7, 8, 9], [1, 4, 7], [2, 5, 8], [3, 6, 9], [1, 5, 9], [3, 5, 7]
];
let gameover = false;
let userSymbol = 'X';
let computerSymbol = 'O';
function checkIndexes(arr, symbol) { let result = { takenNumber: 0, empty: [] } for (i of arr) { let dataTaken = $('#' + i).attr('data-taken'); if (dataTaken === symbol) { result.takenNumber++; } else if (dataTaken === 'false') { result.empty.push(i); } } return result;
}
function checkForForks(index, symbol){ let possibleForks = threeInARows.filter(function(a) { if (a.indexOf(index) != -1) { return true; } else { return false; } }); let counter = 0; for (a of possibleForks) { possibleFork = checkIndexes(a, symbol); if (possibleFork.takenNumber === 1 && possibleFork.empty.length === 2) { counter++; } } if (counter > 1) { return true; } else { return false; }
}
function checkThreeInARow(id, symbol) { for (arr of threeInARows) { if (arr.indexOf(parseInt(id)) != -1 && checkIndexes(arr, symbol).takenNumber === 3) { return arr; } } return false;
}
function checkDraw() { let numberOfEmpty = $('div[data-taken="false"]'); if (numberOfEmpty.length === 0) { return true; }
}
function whereToPutNext() { let bestNextMove, computer, user; let nextMoveRating = 0; for (arr of threeInARows) { computer = checkIndexes(arr, computerSymbol); user = checkIndexes(arr, userSymbol); //1 WIN if (nextMoveRating < 8 && computer.takenNumber === 2 && computer.empty.length === 1) { bestNextMove = computer.empty[0]; nextMoveRating = 8; console.log('win'); //2 BLOCK USER } else if (nextMoveRating < 7 && user.takenNumber === 2 && user.empty.length === 1) { bestNextMove = user.empty[0]; nextMoveRating = 7; console.log('block'); //3 FORK } else if (nextMoveRating < 6 && computer.takenNumber === 1 && computer.empty.length === 2) { if (checkForForks(computer.empty[0], computerSymbol)) { bestNextMove = computer.empty[0]; nextMoveRating = 6; console.log('fork'); } else if (checkForForks(computer.empty[1], computerSymbol)) { bestNextMove = computer.empty[1]; nextMoveRating = 6; console.log('fork'); } //4 BLOCK FORK } else if ( nextMoveRating < 5 && user.takenNumber === 1 && user.empty.length === 2 ) { if (checkForForks(user.empty[0], userSymbol)) { bestNextMove = user.empty[0]; nextMoveRating = 5; console.log('block fork'); } else if (checkForForks(user.empty[1], userSymbol)){ bestNextMove = user.empty[1]; nextMoveRating = 5; console.log('block fork'); } //5 CENTER } else if ( nextMoveRating < 4 && $('#5').attr('data-taken') == 'false') { bestNextMove = 5; nextMoveRating = 4; console.log('center'); //6 OPPOSITE CORNER } else if (nextMoveRating < 3 && $('#1').attr('data-taken') === userSymbol && $('#9').attr('data-taken') === 'false'){ bestNextMove = 9; nextMoveRating = 3; console.log('opp corner'); } else if (nextMoveRating < 3 && $('#3').attr('data-taken') === userSymbol && $('#7').attr('data-taken') === 'false'){ bestNextMove = 7; nextMoveRating = 3; console.log('opp corner'); } else if (nextMoveRating < 3 && $('#7').attr('data-taken') === userSymbol && $('#3').attr('data-taken') === 'false'){ bestNextMove = 3; nextMoveRating = 3; console.log('opp corner'); } else if (nextMoveRating < 3 && $('#9').attr('data-taken') === userSymbol && $('#1').attr('data-taken') === 'false'){ bestNextMove = 1; nextMoveRating = 3; console.log('opp corner'); //7 EMPTY CORNER } else if (nextMoveRating < 2 && $('#1').attr('data-taken') === 'false') { bestNextMove = 1; nextMoveRating = 2; console.log('corner'); } else if (nextMoveRating < 2 && $('#3').attr('data-taken') === 'false') { bestNextMove = 3; nextMoveRating = 2; console.log('corner'); } else if (nextMoveRating < 2 && $('#7').attr('data-taken') === 'false') { bestNextMove = 7; nextMoveRating = 2; console.log('corner'); } else if (nextMoveRating < 2 && $('#9').attr('data-taken') === 'false') { bestNextMove = 9; nextMoveRating = 2; console.log('corner'); //8 EMPTY SIDE } else if (nextMoveRating < 1 && $('div[data-taken="false"]')) { bestNextMove = $($('div[data-taken="false"]')[0]).attr('id'); nextMoveRating = 1; console.log('side'); } else { console.log('no better move found...'); } } return bestNextMove;
}
function markAsTaken($target, symbol) { $target.find('.' + symbol).show(); $target.find('.' + symbol).addClass('draw'); $target.attr('data-taken', symbol);
}
function resetGame() { let $squares = $('.board__square'); $squares.find('.O').hide(); $squares.find('.X').hide(); $('.draw').removeClass('draw'); $('.grow').removeClass('grow'); $('#result').text(''); $squares.attr('data-taken', 'false'); $('#board').removeClass('no-click'); gameover = false;
}
function setGameover(squares, message) { $('#board').addClass('no-click'); for (i of squares) { $('#' + i).find('g').addClass('grow'); $('#result').text(message); gameover = true; setTimeout(resetGame, 4500); }
}
function makeComputersMove() { let id = whereToPutNext(); let $target = $('#' + id); markAsTaken($target, computerSymbol); let result = checkThreeInARow($target.attr('id'), computerSymbol); if (result) { setGameover(result, 'You lost...'); } else if (checkDraw()) { $('#result').text('Draw'); setTimeout(resetGame, 3000); } else { $('#board').removeClass('no-click'); }
}
function makeUsersMove($target) { if ($target.attr('data-taken') === 'false') { $('#board').addClass('no-click'); markAsTaken($target, userSymbol); let result = checkThreeInARow($target.attr('id'), userSymbol); if (result) { setGameover(result, 'You won!'); } else if (checkDraw()) { $('#result').text('Draw'); setTimeout(resetGame, 3000); } else { setTimeout(makeComputersMove, 1000); } }
}
$('.board__square').click(function(e) { let $currentTarget = $(e.currentTarget); makeUsersMove($currentTarget);
});
$('#x').click(function() { $('#dialog').hide(); userSymbol = 'X'; computerSymbol = 'O';
});
$('#o').click(function() { $('#dialog').hide(); userSymbol = 'O'; computerSymbol = 'X';
});
FreeCodeCamp - Tic Tac Toe Game - Script Codes
FreeCodeCamp - Tic Tac Toe Game - Script Codes
Home Page Home
Developer Veronika
Username ivhed
Uploaded November 30, 2022
Rating 3
Size 4,469 Kb
Views 18,216
Do you need developer help for FreeCodeCamp - Tic Tac Toe Game?

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!

Veronika (ivhed) Script Codes
Name
FreeCodeCamp - Javascript Calculator
FreeCodeCamp - Twitch.tv
FreeCodeCamp - Markdown Previewer
Space Game Button
FreeCodeCamp - Personal Portfolio
CSS Filter Blur
CSS Course - Fixed layout
MorphSVG Fruit
SVG Snowflakes
Background blend mode
Create amazing web content 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!