Hello All, here is my current code for my tic tac toe game. I have only enabled the first few squares as buttons, as I am taking it bit by bit, however I was confused as to why the computer makes a move for the first two player moves, but after than does not. I have been staring at my code for hours trying a bunch of different things but have not found success yet. Good luck :
<!-- Reference the plugins -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/6a26d6855f.js"></script>
<link href="/hover/css/hover.css" />
<link href="/hover/css/hover-min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<!-- Reference above this line -->
<script>
$(document).ready(function () {
var player = "X";
var computer = "O";
$('.exes').click(function () {
player = "X";
computer = "O";
console.log(player, computer);
$('.exes').attr('class', 'colored');
$('.os').removeAttr('class', 'colored');
});
$('.os').click(function () {
player = "O";
computer = "X";
console.log(player, computer);
$('.os').attr('class', 'colored');
$('.exes').removeAttr('class', 'colored');
});
var winCombos = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 4, 8],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[6, 4, 2]
];
var playerArray = [];
var computerArray = [];
var choices = [".one",".two",".three", ".four", ".five", ".six", ".seven", ".eight", ".nine"];
var response = function() {return Math.floor(Math.random() * 8);};
var tmp = response();
//Check Number Function so that Points Don't overlap
function check() {
for (var i = 0; i<playerArray.length; i++) {
for(var j = i+1; j<computerArray.length; j++) {
if (tmp === playerArray[i] || tmp === computerArray[j]) {
tmp=response();
console.log(tmp);
check();
} else {
return;
}
}
}
}
//--------------------------------
$('.start').click(selections());
function selections () {
$('.one').click(function () {
playerArray.push(0);
$('.one').text(player);
check();
$(choices[tmp]).text(computer);
$(choices[tmp]).attr('class', 'coloredWhite');
computerArray.push(tmp);
console.log(computer);
selections();
});
$('.two').click(function () {
playerArray.push(1);
$('.two').text(player);
check();
$(choices[tmp]).text(computer);
$(choices[tmp]).attr('class', 'coloredWhite');
computerArray.push(tmp);
console.log(computer);
selections();
});
$('.three').click(function () {
playerArray.push(2);
$('.three').text(player);
check();
$(choices[tmp]).text(computer);
$(choices[tmp]).attr('class', 'coloredWhite');
computerArray.push(tmp);
console.log(computer);
selections();
});
$('.four').click(function () {
playerArray.push(3);
$('.four').text(player);
check();
$(choices[tmp]).text(computer);
$(choices[tmp]).attr('class', 'coloredWhite');
computerArray.push(tmp);
console.log(computer);
selections();
});
$('.five').click(function () {
playerArray.push(4);
$('.five').text(player);
check();
$(choices[tmp]).text(computer);
$(choices[tmp]).attr('class', 'coloredWhite');
computerArray.push(tmp);
console.log(computer);
selections();
});
$('.six').click(function () {
playerArray.push(5);
$('.six').text(player);
check();
$(choices[tmp]).text(computer);
$(choices[tmp]).attr('class', 'coloredWhite');
computerArray.push(tmp);
console.log(computer);
selections();
});
}
});
</script>
<style>
body {
background-color: rgb(56, 56, 56);
height: 2000px;
}
.game {
padding-top: 30px;
height: 1075px;
width: 1015px;
}
.selections {
height: 300px;
width: 300px;
margin-left: 20px;
margin-top: 20px;
background-color: rgb(120, 255, 0);
font-size: 200px;
font-family: "Press Start 2P";
text-align: center;
padding-left: 45px;
padding-top: 15px;
color:rgb(56, 56, 56);
}
h2 {
font-family: "Pacifico";
font-size: 50px;
color: rgb(255, 255, 255);
text-align: center;
}
h3 {
overflow: auto;
}
.letterSelection {
text-align: center;
font-family: "Press Start 2P";
color: white;
font-size: 100px;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
}
a.exes:hover, a.os:hover {
color: rgb(120, 255, 0);
}
h4 {
text-align: center;
color: white
}
button {
border-radius: 4px;
background-color: rgb(120, 255, 0);
border-color: inherit;
border-style: solid;
height: 100px;
width: 300px;
text-align: center;
margin-left: 340px;
}
.colored {
color: rgb(120, 255, 0);
}
.coloredWhite {
color: white;
}
</style>
<html>
<div class="container game">
<h2>Player v.s CPU Tic-Tac-Toe</h2>
<h4>Slect Which Letter You Prefer</h4>
<div class="letterSelection">
<a class="exes col-xs-6">X</a><a class="os col-xs-6">O</a>
</div>
<div class="mainGame">
<button class="start text-center" type="submit">Start Game</button>
<div class = "buttons">
<div class="selections col-md-4"><a href=" " onclick="return false" class="one"> </a></div>
<div class="selections col-md-4"><a href ='' onclick="return false" class="two"> </a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="three"> </a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="four"> </a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="five"> </a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="six"> </a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="seven"> </a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="eight"> </a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="nine"> </a></div>
</div>
</div>
</div>
</html>