Build a Tic Tac Toe Game

Developer
Roksana
Size
3,883 Kb
Views
14,168
  1. Build a Tic Tac Toe Game Previews
  2. Build a Tic Tac Toe Game HTML Codes
  3. Build a Tic Tac Toe Game CSS Codes
  4. Build a Tic Tac Toe Game JS Codes

How do I make an build a tic tac toe game?

What is a build a tic tac toe game? How do you make a build a tic tac toe game? This script and codes were developed by Roksana on 20 November 2022, Sunday.

Build a Tic Tac Toe Game Previews
IQ Test

Build a Tic Tac Toe Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Build a Tic Tac Toe Game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Exercise - Build a Tic Tac Toe Game</title> <link rel="stylesheet" href="main.css" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" defer></script> <script src="main.js" defer></script>
</head>
<body> <header class="page-header"> <h1>Tic Tac Toe</h1> <h3>FreeCodeCamp</h3> </header> <div class="choice"> <h5>Would you like to be X or O?</h5> <button class="choice-button" id="X">X</button> <button class="choice-button" id="O">O</button> </div> <div class="playAgain"> <h4 class="youWin hidden">Congratulations! You won :)</h4> <h4 class="youLose hidden">Sorry! You lost!!</h4> <h4 class="tie hidden">Draw...</h4> <h5 class="playAgain-question">Would you like to play again?</h5> <button class="yesno-button" id="yes">YES</button> <button class="yesno-button" id="no">NO</button> </div> <div class="container-out"> <div class="container-in"> </div> </div> <footer> <p>by <a href="#">Roksana</a></p> </footer>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Build a Tic Tac Toe Game - Script Codes CSS Codes

html { font-size: 62.5%; margin: 0; padding: 0;
}
body { margin: 0; padding: 0; font-family: 'Raleway', sans-serif; font-size: 2.5rem; color: #85CB33; background: #001A23;
}
.page-header { width: 100%; text-align: center;
}
.page-header h3 { margin: 0;
}
.choice, .playAgain { color: #001A23; margin: auto; margin-top: 100px; padding: 20px 0; width: 300px; text-align: center; background-color: #85CB33; border-radius: 10px;
}
.playAgain { margin-top: 50px; width: 330px;
}
.choice h5 { margin: 10px 0; font-size: 2rem;
}
.choice .choice-button { width: 30px; height: 30px; font-size: 2rem; background-color: #B3EFB2; border-radius: 3px; cursor: pointer; border-style: none;
}
.playAgain .yesno-button { width: 60px; height: 30px; font-size: 1.8rem; background-color: #B3EFB2; border-radius: 3px; cursor: pointer; border-style: none;
}
h4, h5 { margin: 15px;
}
.hidden { display: none;
}
.container-out { width: 400px; height: 400px; background-color: #B3EFB2; margin: 0; margin: 50px auto 30px auto; text-align: center; color: #001A23; border-radius: 10px;
}
.container-in { width: 300px; height: 300px; margin: auto; padding-top: 50px;
}
.field { width: 100px; height: 100px; color: #001A23; float: left; font-size: 5rem; background-color: #B3EFB2; border: 1px solid #001A23;
}
footer { position: fixed; right: 10px; bottom: 5px; text-align: center; color: #85CB33; font-size: 1.8rem;
}
footer p { margin: 0; padding: 0;
}
footer a { text-decoration: none; color: #85CB33;
}

Build a Tic Tac Toe Game - Script Codes JS Codes

(function () { $(document).ready(function() { drawTicTacToe(3); playGame(); }); function drawTicTacToe(size) { var index = 0; var sizeIn = size + "00"; var sizeOut = Number(sizeIn) + 100; var containerIn = $(".container-in"); var containerOut = $(".container-out"); containerIn.css({ "width": sizeIn, "height": sizeIn }); containerOut.css({ "width": sizeOut, "height": sizeOut }); for (var i = 1; i <= size; i++) { for (var j = 1; j <= size; j++) { var content = ""; content += "<button class='field' id='" + index + "'></button>"; containerIn.append(content); index++; } } } function playGame() { var machine, player; var container = $(".container-out"); var choiceButton = $(".choice-button"); var field = $(".field"); clearAll(); //turning X or O function chooseMark() { var X = "X"; var O = "O"; $(".choice").hide(); container.show(); var val = $(this).attr("id"); if (val === X) { player = X; return machine = O; } player = O; machine = X; } var gameOver = false; var turnPlayer = true; var currentBoard = [0, 0, 0, 0, 0, 0, 0, 0, 0]; function winning(whoWin) { $(".playAgain").show(); $("." + whoWin).removeClass("hidden"); field.off("click"); $(".yesno-button").click(yesOrNo); function yesOrNo() { var value = $(this).attr("id"); if (value === "yes") { return playGame(); } $(".playAgain-question").hide(); $(".yesno-button").hide(); } } function checker(element) { if (element === player) { winning("youWin"); gameOver = true; } if (element === machine) { winning("youLose"); gameOver = true; } } function checkWin() { var MAX_MOVES = 9; for (var i = 0; i <= 6; i+=3) { if ((currentBoard[i] === currentBoard[i + 1]) && (currentBoard[i + 1] === currentBoard[i + 2])) { checker(currentBoard[i]); } } for (var i = 0; i <= 2; i++) { if ((currentBoard[i] === currentBoard[i + 3]) && (currentBoard[i + 3] === currentBoard[i + 6])) { checker(currentBoard[i]); } } for (var i = 0, j = 4; i <= 2; i+=2, j-=2) { if ((currentBoard[i] === currentBoard[i + j]) && (currentBoard[i + j] === currentBoard[i + 2*j])) { checker(currentBoard[i]); } } if (turnNumber >= MAX_MOVES) { winning("tie"); } } function winOrBlock(who) { var whichField; for (var i = 0; i <= 6; i+=3) { //winning in rows if (currentBoard[i + 1] == who && currentBoard[i + 2] == who && currentBoard[i] == "") { return showSign(true, "#" + i, machine); } if (currentBoard[i] == who && currentBoard[i + 2] == who && currentBoard[i + 1] == "") { whichField = i + 1; return showSign(true, "#" + whichField, machine); } if (currentBoard[i] == who && currentBoard[i + 1] == who && currentBoard[i + 2] == "") { whichField = i + 2; return showSign(true, "#" + whichField, machine); } } for (var i = 0; i <= 2; i++) { //winning in columns if (currentBoard[i + 3] == who && currentBoard[i + 6] == who && currentBoard[i] == "") { return showSign(true, "#" + i, machine); } if (currentBoard[i] == who && currentBoard[i + 6] == who && currentBoard[i + 3] == "") { whichField = i + 3; return showSign(true, "#" + whichField, machine); } if (currentBoard[i] == who && currentBoard[i + 3] == who && currentBoard[i + 6] == "") { whichField = i + 6; return showSign(true, "#" + whichField, machine); } } for (var i = 0, j = 4; i <= 2; i+=2, j-=2) { //winning in diagonals if (currentBoard[i + j] == who && currentBoard[i + 2*j] == who && currentBoard[i] == "") { return showSign(true, "#" + i, machine); } if (currentBoard[i] == who && currentBoard[i + 2*j] == who && currentBoard[i + j] == "") { whichField = i + j; return showSign(true, "#" + whichField, machine); } if (currentBoard[i] == who && currentBoard[i + j] == who && currentBoard[i + 2*j] == "") { whichField = i + 2*j; return showSign(true, "#" + whichField, machine); } } } function machineTurn() { var blockWinning; if (!turnPlayer) { var secondChoice = [5, 8]; var oddChoice = [1, 3, 5, 7]; var randomChoice; //winning machine winOrBlock(machine); //blocking player-win winOrBlock(player); if ((currentBoard[0] == player && currentBoard[8] == player && !turnPlayer) || (currentBoard[2] == player && currentBoard[6] == player && !turnPlayer)) { randomChoice = oddChoice[Math.floor(Math.random() * oddChoice.length)]; return showSign(true, "#" + randomChoice, machine); } if (currentBoard[4] == "" && !turnPlayer) { return showSign(true, "#4", machine); } if (field.text().length <= 4 && !turnPlayer && currentBoard[0] == "") { return showSign(true, "#0", machine); } if (field.text().length <= 6 && !turnPlayer) { randomChoice = secondChoice[Math.floor(Math.random() * secondChoice.length)]; return showSign(true, "#" + randomChoice, machine); } if (!turnPlayer) { var random = Math.floor(Math.random() * 9); return showSign(true, "#" + random, machine); } } } function showSign(turn, clickedButton, who) { if ($(clickedButton).text() === "") { var i; turnPlayer = turn; turnNumber++; $(clickedButton).html(who); $(clickedButton).off("click"); i = $(clickedButton).attr("id"); currentBoard[i] = who; checkWin(); } if (turnNumber < 9 && !gameOver) { machineTurn(); checkWin(); } } function gameTurn() { if (turnPlayer) { showSign(false, this, player); } if (!gameOver) { machineTurn(); } } function clearAll() { $(".youWin").addClass("hidden"); $(".youLose").addClass("hidden"); $(".tie").addClass("hidden"); $(".choice").show(); container.hide(); $(".playAgain").hide(); choiceButton.click(chooseMark); field.click(gameTurn); field.html(""); turnNumber = 0; } }
})();
Build a Tic Tac Toe Game - Script Codes
Build a Tic Tac Toe Game - Script Codes
Home Page Home
Developer Roksana
Username roksanaop
Uploaded November 20, 2022
Rating 3
Size 3,883 Kb
Views 14,168
Do you need developer help for Build a 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!

Roksana (roksanaop) Script Codes
Name
Build a JavaScript Calculator
Build a Wikipedia Viewer - FCC
Image Processing
Build a Simon Game
Exercise - Build a Random Quote Machine
Exercise - Build a Tribute Page
Use the Twitchtv JSON API
Built a Tribute Page
Weather App
Build a Pomodoro Clock
Create amazing SEO 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!