Free Code Camp Zipline Project: Tic Tac Toe Game Part 1

Posted by

The Tic Tac Toe Zipline challenge is the 3rd challenge on Free Code Camp’s Front End certification track. The objectives of this project as found on FreeCodeCamp’s website are:

  • Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/KzXQgy/.
  • Make a game that allows the user to play against the computer.
  • Allow the game to reset as soon as the game is over so the user can play again.
  • Allow the user to choose whether they want to play as X or O.

In this post I want to discuss a couple of components of this project.  I’m going to start with the animation elements of this project.   While in the planning stages, I knew I wanted to have the title do a cool effect as the page loaded.  To achieve this, I put my title in an h1 element.  I gave the element a margin left of 100% to push it off the right side of the screen and made its width 300% to keep the letters on one line.  I made an CSS animation called “slidein” with one keyframe that performs that transition.  The transition reduced the margin-left from 100% to 0%, and the width from 300% to 100%.  Calling this animation for 3s, allowed the title to slide in from the right side of the screen.


@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Next I wanted to create a cool animation where the background of the square fades in as the symbol pops into the square. I did this by using the fadein (CSS) property in a keyframe for both the X and O classes. The X and O classes style each player’s boxes with different background colors and an X or O character as appropriate.  The animation and its keyframe changes the opacity from 0(fully transparent) to 1  (fully opaque or visible) over a duration of  1 second.  When the game is reset, the jQuery removeClass method removes the X and O classes from all square, which clears the board for the next game.


.X {
  background-color: #FB3953;
  font-weight:bold;
  animation: fadein 1s;
}
.X::before{
content:"X";
}
.O {
  background-color:lightblue;
  font-weight:bold;
  animation: fadein 1s;
}
.O::before{
content:"O";

}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

I then started thinking to myself, what can I do next to make the game more visually appealing.  Hmm…how about making the various game messages slide down and slide up when the human player chooses an option. I created a div with a class name “popup” was created to slide down, display messages such as player symbol choice, winner, and if the  game ends in a draw.   After the player makes a decision by clicking the button, the “popup” div would slide up off the screen.

I made this happen, by animating the slideDown and slideUp classes. The animation -fill-mode were set to forward to keep the animation from automatically looping.  The duration of the slideDown animation was set to  4 seconds, and the slideUp animation was set to  2 seconds.  The div’s “top” property  starts at -100%, which places it higher than the top of the screen (and out of view).  The animation transitions the top to 0% which causes the message to be displayed in the middle of the screen . JQuery’s removeClass and addClass methods are used to add and remove  the animation classes as needed.

.slideDown{
   animation: slideDown 4s;
   animation-fill-mode: forwards;
}

.slideUp{
   animation: slideUp 2s;
   animation-fill-mode: forwards;
}

@keyframes slideDown {
    from { top: -100%; }
    to   { top: 0%; }
}

@keyframes slideUp {
    from { top: 0%; }
    to   { top: -100%; }
}

The final animation effect of the game is the “veil” that was positioned over the game board and title. It’s positioned under the popup div by using the z-index property. As the page is loaded, the fadeOut class is removed and the fadeIn class is added to the veil causing the opacity  to change from 0  to 1 which darkens the game board. Then, after the player selects their symbol and the popup div slides up; the fadeIn class is removed, and the fadeOut class is added  which changes the opacity changes from 1 to 0. This makes the veil transparent and makes the game board visible again.  The veil provides a dark background to contrast with the game message popup and an obvious indicator of when the game is ready to be played.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s