Hello YouTube, this is Mary from Happy Coder.
In today's video, I'm going to show you how to build a Tic Tac Toe web app, which
is one of the advanced front end development projects from Free Code Camp, using simple
javascript and jQuery.
First, let's have a look at the completed product and its functionalities.
When the page is loaded, it shows two buttons for the user to choose a game: 1-player or
2-players game.
After the user had decided on playing in either 1 player / 2 players mode, it loads a different
set of buttons with a cross and a circle for the user to choose from.
Once the user had clicked on either the cross or the circle to represent his moves, the
game starts by showing a screen with a 3x3 grid, which comprises of 9 blank buttons.
The user / Player 1 makes the first move and the image representing his/her moves shows
on the clicked button.
The other image represents the computer / Player 2 ensues on the screen immediately.
At the end of the game, a message indicating "win" or "lose" or "game over,"
which represents a draw game is popped up and the page is reloaded with the initial
2 buttons for the user to start a new game.
Like always, I've included my codes as an html file named 'TicTacToe' in a shared
google drive folder, the link is in the description box.
Now let's examine my codes.
Here is my DOM structure.
In my HTML content, I built 13 buttons, and each of them will have a jquery on click event.
Although the 9 buttons comprising the 3x3 grid in the game look identical on the initial
screen, I have assigned them each a number as its ID, starting from 1 going from left
to right.
This allows me to identify the moves made by the users or the computer numerically.
Next, let's look at my javascript and jquery codes to see how all the functionalities are
achieved.
At the beginning of the script are all the variable declarations that would be used later
in the project.
The variable "array" holds all the numbers assigned to each button.
The variable "win" is an array holding all the possible combination of the numbers
to win the game, 3 rows 3 columns and two diagonals, each of the winning combination
is stored as a sub array.
Instead of going through every line, I want to focus on explaining the most difficult
part of my codes, which made all the magic happen.
As you can see on the screen, I built 8 functions, among which the custom function move() is
the most challenging, so let's start with this one.
This move() function is built for the one-player game, and it gives instruction to the computer
to counter the user's moves.
As this game consists 9 buttons which represent 9 moves and the user can click 5 buttons and
the computer 4 at most, I used one "if" and 4 "else if" statements to cover all
the 5 scenarios of the user's moves.
At the beginning of this function, I built a variable X and set it to a setTimeout function
which attaches the proper image to the button corresponding to the number picked by the
computer in half second after the user has made a move.
Next let's talk about the codes deployed instructing the computer which move, or rather,
which button to click:
The first step is rather simple.
After the user made the first move, I want the computer to generate a random number between
1 to 9.
Math.random() is the method to use.
Then I use an "if" statement to check if the randomly generated number is the same
as the one the user picked.
If the randomly generated number is identical to the user's first move, I would use "random
number + 1" as the computer's first move.
But if the random number is 9, "random number – 1" should be the move to play.
The second step: since the user has clicked 2 buttons, I want to check if these 2 numbers
are a part of a subarray in the array "win".
If yes, the computer needs to pick the button with the 3rd number in that subarray to destroy
the winning combination, and therefore prevent the user from winning the game.
The filter and indexOf methods can achieve this.
In the for loop, I filtered each subarray in the "win" array by the "player1"
array which holds all the numbers the user picked so far, the next is to return the number(s)
found in the winning combination array but not in the "player1" array to a variable
"pcWin".
Then I used an if statement to check if the length of pcWin is 1, in which case, it means
that he user is 1 step away from winning, therefore the content in the pcWin is the
number the computer should pick.
It's worth mentioning that the filter() method always return an array, therefore a
parseInt() method is called to convert it to a number.
If no single number is found through the filter function, which means the use hasn't picked
2 numbers to form a potential winning array, in that case, I can just generate another
random number among the numbers not picked by the user or the computer.
To achieve this, I built another filter function.
In this function, I made a new array "taken" and pushed all the numbers the user picked
and the 1st number the computer generated in the 1st step, then I filtered the "array"
array by the "taken" array to get all the numbers not used which are held in a new
array "pcWin2".
I used the Math.random() method again to pick a number from the "taken" array for the
computer to display.
For step 3 and 4, my logic is to check first if the numbers played by the computer are
already a part of a winning array.
If not, I want to check if the combination of every 2 numbers in the "player1" array
is a part of a winning array.
To achieve this, I used 4 if statements and 3 for loops in which I filtered the different
combination of the used numbers by each subarray in the "win" array.
The methods I used in the function are the same as in the previous step, the only difference
is that a different array should be used to hold the different combination of the used
numbers.
And the last step is to return a message "Game Over" for the game which doesn't have
a winning array built.
I built another function Over() which can be used by either 1-player or 2-players game.
In the Over() function, I used 2 if statements to check if the 1st player has clicked 5 buttons
and if any combination of these numbers forms a winning array.
If not, which means no one wins, I just use a clearInterval(x) statement to stop the computer
to display more images, and use setTimeOut() again to display a message "Game Over",
and lastly restarted the game by using location.reload()method.
Next, I'm gonna briefly show you how I check if the user wins the game, as the logic is
the same as mentioned in the previous function.
In the function wins(), I used 9 for loops and filter functions to check the combinations
of the user picked numbers against each subarray in the "win" array.
The filtered results are held in 9 variables named "checking1" up to "checking9".
If the length of any of the checking array is 0, which means all the 3 numbers from the
player1 array match the ones in a subarray in the "win" array, this is an indication
that the user has won the game and a winning message should be popped up by using setTimeout(),
alert(), clearInterval() methods.
This function applies to the one-player game.
I built another function "wins2" for the two-player game to pop a message when the
2nd player wins the game, the logic is the same, so I won't repeat here.
The rest of the codes are for the click events on the 9 buttons which are rather simple,
so I won't explain them in details in this video.
You may have a look at my codes if you are interested.
This wraps up today's video.
Hope it's been informative.
Please comment, like, share and subscribe to my channel.
See you in my next video.
Không có nhận xét nào:
Đăng nhận xét