CSCI 121 - Lab 6

Lab Resources

Lab Instructions

In this lab you will update the tic-tac-toe game you developed in lab5.html, extending it to add additional JavaScript functionality and an external Cascading Style Sheet for stylizing the game. You must admit, the previous game was pretty visually boring. Please read through all of the instructions below before starting.

  1. Start: Using Brackets and your original lab5.html or the lab5.html of the instructor and copy it to a new a file named lab6.html.
  2. Include a title for the page with your name, class and lab, i.e. Your Name - CSCI 121, Lab 6 and repeat the title text as the heading for your page.
  3. Author an external style sheet named lab6.css and place all style rules within it (none internal in the STYLE block).
  4. Make sure to include a style rule with a selector that will act on the the empty spaces when hovered over changing, their background color.
  5. Let your imagination go wild and style other parts of the page and game board as you wish (but save time for the rest of the lab).
  6. You will have to develop a new function, with name of getWinner(), that checks if there is a winner. The function should:
    1. If there is a winner ("X" or "O"), currently no winner (but game continues), or no winner and game has ended then the function should return "X", "O", "", or "C", respectively.
    2. If there is a winner, the getWinner() function should change the color of the winning spaces to make it clear which spaces hold the winning moves. Use CSS for this (hint: classes).
  7. Call the getWinner() function within the clickSpace() function that already exists after processing a turn.
  8. After calling getWinner() within clickSpace()should change the paragraph below the table to indicate who won, if there is currently a winner. Remember, the game can end without any winner.
  9. The game should NOT continue after a winner has been detected (no additional moves). A global variable that holds the winner (as returned by getWinner()) is needed for this.
  10. Add a New Game button below the label paragraph that calls a function (yes, another function, whatever name you wish) that resets global variables, the label text and clears all spaces.
  11. Important notes/hints:
    1. Much of your time will be in authoring the getWinner() function so plan your time accordingly.
    2. Remember what it means to win at tic-tac-to and code the getWinner() function accordingly. The "three in a row" winning spaces can either be vertical (along the columns) or horizontal (along the rows), or one of the two diagonals.
    3. The getWinner() function could use one for loop for checking column winners and another for checking row winners (two loops). Additionally it will have two different conditionals, one for checking each diagonal. Another (a third) for loop will be needed to see if the board has an empty spaces in which to return no winner. Lastly, the function should return "C" (no winner, board full) if all other for loops and conditionals above yield no returns.
    4. Remember that the return statement of a function, whether used within a loop or a conditional will essentially prematurely end the function with no code below it in the function executing.
    5. Make sure to name the files: lab6.html and lab6.css
    6. Use the debugger in Chrome when testing.
    7. Test "as you go".
  12. Create a folder in your Google Drive named: Lab 6
  13. Upload the lab6.html and lab6.css files to Google Drive Lab 6 folder.
  14. Share the Lab 6 folder with thomas.rogers@millersville.edu.

Lab 6 Sample Solution

What follows is one possible solution to the lab: Lab 6 Sample