Intro
I have been reading up on a whole lot of JavaScript and JQuery while getting ready to code again. These were the first coding languages I was introduced to so I think it's fitting that these are the first one's I'm working with here. When I set up my code the first couple of things that I wanted to set up was some comments to help me know what I was doing with the game.
Stating The game moves
Move function and starting variables
//start game
let currentMove = 'x';
const board = ['','','','','','','','','','']
//play Game function
function move(letter,obj){
$(obj).children('p').text(letter)
board[$(obj).children('p').attr('id')] = letter
}
First thing that I need to do was set up the variables that I needed too. I wanted an array to hold the board. This way I could tell which spot held what players move. Next I wanted to have a variable that I could change for whose turn it was. I did that by setting a variable and it will switch between x's and o's. After that I had to work on the game play. I needed a way for a player to move and for the players to switch.
First for the move function I used some jQuery and JavaScript. The prams will be letter which will be the current players move so and x or and o. the object will be whatever div the player presses on. This will make it so that the current div changes. Next the code inside. I have the first line using the objects child which is the paragraph element to change to the letter. The second line looks at what number is in the id of the paragraph. This will correspond to a spot in the array that is set for the board placing either an x or an o. with this the move is set up
Switch Player Function
function switchPlayer (letter){
if (letter == 'x') {
return 'o';
}else{
return 'x';
}
}
Next was how to switch players. This was going to be an easy function. I set one argument to be the letter of the move. I did this because the function will switch the currentmove variable based on the last move that was played.
End Game Functions
I'm going to work backwards to explain my functions since the thing that happens first will need help from everything that comes after.
Reset Board Function
function boardReset(){
$('.Game-Piece').text(' ')
}
The first function to talk about is the how we are going to reset the board after the game is over. The reset function is a basic function with no returns and no parameters. The only line in the code sets all the elements that have the class of game-piece to a blank string. This will reset the board.
Add Score Function
function addScore(letter){
let currentScore = parseInt($('#'+letter+'-points').text())
let newscore = currentScore + 1
$('#'+letter+'-points').text(newscore)
}
Next the add score function this function will add a score to the winning player. The parameter will be the letter of the winning player. Then the code will look at the score in html of the winning player. It will hold that number in code add one and then change the score on screen to the new one.
Wingame function
function winGame(letter){
let sequance = 1
wininterval = setInterval(function () {
if (sequance == 1) {
$('.Tac-Square').css('background-color','Green')
sequance = 0;
}else {
$('.Tac-Square').css('background-color','white')
sequance = 1;
}
}, 500);
setTimeout(function(){
clearInterval(wininterval)
boardReset();
},3000)
}
Then we get on to a bit more of a flash function the wingame function. This is purely to add some visual effect when a player wins. The parameter will be the letter of the winning player. Next I have a set interval which will shoot off every 0.5 seconds and a set timeout which will stop the interval after 3 seconds. I need a way to change the color of boxes and let the computer know which color is up. To solve this I used a variable that will change from 1 when it's green to 0 when it's white. Finally we set everything together and we have a board that flashes from green to white every 0.5 seconds for 3 seconds.
Wincheck function
function winCheck(letter,arr){
if (arr[4] == letter) {
if (arr[3] == letter) {
if (arr[5] == letter) {
winGame(letter);
addScore(letter);
}
}else if (arr[1] == letter) {
if (arr[7] == letter) {
winGame(letter);
addScore(letter);
}
}else if (arr[0] == letter) {
if (arr[8] == letter) {
winGame(letter);
}
}else if (arr[2] == letter) {
if (arr[6] == letter) {
winGame(letter);
addScore(letter);
}
}
}
if (arr[6] == letter) {
if (arr[3]== letter) {
if (arr[0] == letter) {
winGame(letter);
addScore(letter);
}
}else if (arr[7]==letter) {
if (arr[8] == letter) {
winGame(letter);
addScore(letter);
}
}
}
if (arr[2] == letter) {
if (arr[1] == letter) {
if (arr[0] == letter) {
winGame(letter);
addScore(letter);
}
}else if (arr[5] == letter) {
if (arr[8] == letter) {
winGame(letter);
addScore(letter);
}
}
}
}
Finally we have a long simple piece of code the wincheck function. This function will take two parameters. The first one is the letter that is being checked to see if the player won and the second is the array of the board. Now in tic tac toe there are only eight configurations that will win the game. I used three different if functions to look for a spot on the board that these configurations had to go through. Having a piece in the middle give you 4 chances. Then to get the other 4 I checked for a piece in the top corner and a piece in the opposite bottom corner. Now in each of these if function I have nested ifs that look to see if the player has the other two boxes needed to win. If so the game will be won, the board will flash and then reset as the score updates.
GameLoop Function
//game loop
$('.Tac-Square').click(function(){
move(currentMove,this)
winCheck(currentMove,board)
currentMove = switchPlayer(currentMove);
})
Finally let's talk about the game loop. This is where the function that controls the game and tell the computer when to use each function will go. First the game loop gets started when a player clicks on a div. this will put a piece in the spot that is going to get played. Once a piece is played it will look to see if the player wins. If they win the game will reset if not the next player will go and the piece will be switched.
Now there is still a lot of work that has to get put into this. I want to add a computer player and then I also need to make sure that a user can't go when the computer is playing and that a piece can't be switch. So see you in the next post.
