IBCS1 - 1314 - March

Friday - Monday (3/28/14 - 3/31/14)

Agenda:

• Test your 1-player Tic-Tac-Toe game (make sure you have your 2-player version backed up!)
• Spend today improving the computer's move algorithm
  • What moves do you make that allow you to beat the computer?
  • Can you improve the computer's AI? (Hint: corners)
  • Improve your computer's AI by prioritizing corners after the center square

Wednesday - Thursday (3/26/14 - 3/27/14)

Agenda:

• Computer AI Walk-through

Monday - Tuesday (3/24/14 - 3/25/14)

Agenda:

• Complete and demo Tic-Tac-Toe (it is late at this point)
• Planning the Tic-Tac-Toe Artificial Intelligence
  1. Play Tic-Tac-Toe with a partner and document the priorities of your moves
  2. What is the first strategic move you look for?
  3. What is the next strategic move you look for?
  4. Are there defensive moves/checks that you look for? Describe what exactly you are checking.
  5. Are there offensive moves/checks that you look for? Describe what exactly you are checking.
• Plan using commented pseudocode, the different types of functions that you will create for the artificial intelligence. Describe each of the functions that you will need for your computer AI

Tuesday - Friday (3/18/14 - 3/21/14)

Agenda:

• Complete and demo Tic-Tac-Toe by the end of the week
• If you are done with Tic-Tac-Toe, then copy and paste your code to create a 1-player version
  • The 1-player version of Tic-Tac-Toe should allow the computer to automatically take a turn and move
  • The simplest way to do this would be to create a new function where the computer makes a move by evaluating the current board

Thursday - Friday (3/13/14 - 3/14/14)

Agenda:

• Setting up Tic-Tac-Toe
• Work on Tic-Tac-Toe

Tuesday - Wednesday (3/11/14 - 3/12/14)

Warmup:

• Take out a piece of paper
• Draw the figure on the board
• Determine all the red points of interest

Agenda:

• Work on Tic-Tac-Toe

Monday (3/10/14)

Warmup:

1. With a partner, play Tic-Tac-Toe
2. While you are playing Tic-Tac-Toe, create a flowchart to diagram a Tic-Tac-Toe program design
3. After your flowchart, list variables and functions that you will need to create for your game

Agenda:

1. As a class, we will create the pseudocode for the Tic-Tac-Toe program
2. After each line of pseudocode, we should ask ourselves:
   • What variables do we need? or what pieces of information must we track?
   • What functions do we need? What exactly do they need to do?
   • Is there something in this step that we do not know how to do?
3. 2D coordinate math
   • Assume you only have the variables cHeight and cWidth
   • On paper, calculate all the points of interest in Tic-TacToe using cHeight and cWidth
4. Create the drawBoard() function that draws the Tic-Tac-Toe board
   • You MUST draw the board using the cHeight and cWidth variables (i.e. NO HARD CODED coordinates)

Friday (3/7/14)

Agenda:

• Mozilla References
  • JavaScript
  • Canvas Tutorials
  • Event Reference
• Canvas References
  • Canvas Deep Dive
  • W3Schools HTML5 Canvas Tutorials
  • W3Schools Canvas Reference

Wednesday - Thursday (3/5/14 - 3/6/14)

Agenda:

• Demo/show Mr. Bui and missing assignments
• Introduction to HTML Canvas
  • Read and complete the tutorial: Basic usage of Canvas
  • Don't worry if you don't understand everything...this most important part is getting the A skeleton template
  • Also refer to this documentation: W3Schools HTML5 Canvas, which will explain different parts of the template
  • More Canvas Documentation: W3Schools Canvas Reference
  • If you're interested more canvas tutorials can be found here: Mozilla Canvas Tutorials
• Canvas Practice Assignment
  1. Create an HTML+JavaScript file named canvasPractice.html
  2. Use the skeleton template from Basic usage of Canvas
  3. Refer to W3Schools HTML5 Canvas for specific functions that will be helpful
  4. In the canvas, draw a stick figure with filled in squares or rectangles for hands and feet
  5. Under the stick figure, display a text message in the canvas that says "Computer Science Rocks!"
• Canvas + Mouse + Events
• Mozilla Web Event Reference

      var setup = function()
      {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var windowRect = canvas.getBoundingClientRect();
        
        var drawRect = function(evt)
        {
          ctx.fillRect(evt.clientX - windowRect.left, evt.clientY - windowRect.top, 20, 20);
        };
        
        canvas.addEventListener('click', drawRect);  
      };