Tic Tac Toe

Developer
Katie Inkblotty
Size
4,161 Kb
Views
46,552
  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?

Game built with jQuery and SCSS. What is a tic tac toe? How do you make a tic tac toe? This script and codes were developed by Katie Inkblotty on 08 August 2022, 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> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="pop-over start"> <h2>Which do you want to be?</h2> <button id='x'> <img src='https://d30y9cdsu7xlg0.cloudfront.net/png/105497-200.png' alt='x' id='x'></img> </button> <button id="o"> <img src='https://d30y9cdsu7xlg0.cloudfront.net/png/10051-200.png' alt='o'></img> </button>
</div>
<div class="pop-over end hidden"> <h2></h2> <button id="restart">Play Again</button>
</div>
<div class="board"> <div class="sect" id="sect1"></div> <div class="sect" id="sect2"></div> <div class="sect" id="sect3"></div> <div class="sect" id="sect4"></div> <div class="sect" id="sect5"></div> <div class="sect" id="sect6"></div> <div class="sect" id="sect7"></div> <div class="sect" id="sect8"></div> <div class="sect" id="sect9"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tic Tac Toe - Script Codes CSS Codes

body { background-color: #D7CBBD;
}
.hidden { display: none;
}
.pop-over { background-color: rgba(0, 0, 0, 0.6); color: #eee; height: 100vh; letter-spacing: 0.3em; margin-top: -2%; padding-top: 5%; position: fixed; text-align: center; width: 100%;
}
.pop-over h2 { margin-bottom: 2%;
}
.pop-over button { border-radius: 0.1em; color: black; font-size: 2em; padding: 0.5% 1%; width: auto;
}
.pop-over img { margin: 0; width: 80px;
}
.board { margin: 2% auto 0 auto; padding: 0; width: 321px;
}
.board div { margin: 0;
}
.board .sect { background-color: #646096; box-shadow: 2px 2px 3px black; cursor: pointer; display: inline-block; height: 100px; margin: 2px; padding: 0; text-align: center; width: 100px;
}
.board .sect span { border: 1px solid orange;
}
.board .sect img { height: 100px; margin: 0; padding: 0; width: 100px;
}
.board .sect.chosen { background-color: #928fb5; cursor: default; pointer-events: none;
}

Tic Tac Toe - Script Codes JS Codes

/* Add check & popup for player win */
var x = "<img src='https://d30y9cdsu7xlg0.cloudfront.net/png/105497-200.png' alt='x'></img>";
var o = "<img src='https://d30y9cdsu7xlg0.cloudfront.net/png/10051-200.png' alt='o'></img>";
var playerSym;
var compSym;
var computerWin = false;
var playerWin = false;
var available = ["#sect1", "#sect2", "#sect3", "#sect4", "#sect5", "#sect6", "#sect7", "#sect8", "#sect9"];
var playerTaken = [];
var compTaken = [];
function setXandO(xo) { if (xo === 'x') { playerSym = x; compSym = o; } else { playerSym = o; compSym = x; }
}
function matchesTwo(testArr, playerCompArr) { var numMatches = 0; playerCompArr.forEach(function(element) { if (testArr.indexOf(element) > -1) { numMatches++; } }); if (numMatches >= 2) { return true; } else { return false; }
}
function matchesThree(testArr, playerCompArr) { var numMatches = 0; playerCompArr.forEach(function(element) { if (testArr.indexOf(element) > -1) { numMatches++; } }); if (numMatches >= 3) { return true; } else { return false; }
}
function checkForWin() { var possibleWins = [ ["#sect1", "#sect2", "#sect3"], ["#sect4", "#sect5", "#sect6"], ['#sect7', '#sect8', '#sect9'], ["#sect1", "#sect4", "#sect7"], ['#sect2', '#sect5', '#sect8'], ['#sect3', '#sect6', '#sect9'], ['#sect1', '#sect5', '#sect9'], ['#sect3', '#sect5', '#sect7'] ]; var winStr = null; possibleWins.forEach(function(winSequence) { if (matchesThree(winSequence, playerTaken)) { playerWin = true; } else if (matchesTwo(winSequence, playerTaken)) { winSequence.forEach(function(space) { if (playerTaken.indexOf(space) === -1) { if (available.indexOf(space) > -1) { winStr = space; computerWin = false; } } }) } else if (matchesTwo(winSequence, compTaken)) { winSequence.forEach(function(space) { if (compTaken.indexOf(space) === -1) { if (available.indexOf(space) > -1) { winStr = space; computerWin = true; } } }) } }); return winStr;
}
function computerChoice() { var winningSpace = checkForWin(); if (winningSpace !== null) { //console.log(winningSpace); $(winningSpace).html(compSym); $(winningSpace).addClass('chosen'); compTaken.push(winningSpace); // remove space from available spaces available.splice(available.indexOf(winningSpace), 1); if (computerWin === true) { //console.log(winningSpace + " taken by computer"); $('.end').find('h2').html('Computer Wins!'); $('.end').removeClass('hidden'); } } else { if (playerWin) { $('.end').find('h2').html('You Win!'); $('.end').removeClass('hidden'); } else { var randNum = Math.floor(Math.random()*available.length); var randSpace = available[randNum]; $(randSpace).html(compSym); $(randSpace).addClass('chosen'); compTaken.push(randSpace); // remove choice from available choices available.splice(randNum, 1); } } /* debugging only console.log('Available: ' + available); console.log('Computer: ' + compTaken); console.log('Player: ' + playerTaken);*/
}
function addChoice(id){ playerTaken.push(id); checkForWin(); // remove choice from available choices var index = available.indexOf(id); available.splice(index,1);
};
$('button').on('click', function(e) { var symbol = e.target.alt; setXandO(symbol); e.stopPropagation(); $('.pop-over').addClass('hidden');
});
$('.sect').on('click', function(e) { var square = e.target; square.innerHTML = playerSym; square.classList.add("chosen"); addChoice("#" + square.id); if (available.length === 0) { $('.end').find('h2').html('You Tied!'); $('.end').removeClass('hidden'); } computerChoice(); e.stopPropagation();
});
$('#restart').on('click', function(e) { available = ["#sect1", "#sect2", "#sect3", "#sect4", "#sect5", "#sect6", "#sect7", "#sect8", "#sect9"]; playerTaken = []; compTaken = []; computerWin = false; playerWin = false; $('.end').find('h2').html(''); // clear board $('.sect').html(""); $('.sect').removeClass('chosen'); // pop up initial screen $('.end').addClass('hidden'); $('.start').removeClass('hidden');
})
Tic Tac Toe - Script Codes
Tic Tac Toe - Script Codes
Home Page Home
Developer Katie Inkblotty
Username inkblotty
Uploaded August 08, 2022
Rating 3
Size 4,161 Kb
Views 46,552
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!

Katie Inkblotty (inkblotty) Script Codes
Name
Google Calendar Event Feed
Cycling D3 Scatterplot
GeoLocation
Angular Task App
Simon game
FCC Camper Leaderboard
US GDP Bar Chart
JQuery Calculator
Twitch Live Channels
React Redux Task App
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!