Setting Up the Canvas
advertisement
<head> <title>Tic Tac Toe</title> <script type="text/javascript" src="http://www.scottbunin.com/processing.js"></scri pt> <script type="text/javascript" src="http://www.scottbunin.com/init.js"></script> </head> <body> <center> <script type="application/processing"> size(600,600); </script><canvas></canvas> </body> Aim: How can we set up our canvas and display for a Tic Tac Toe game? 1. Sketch the two drawings and write the two code examples. 2. Take quiz 3. Copy and paste first code example and save file to get started. 4. Input the 2nd code example. 5. From the information shown, expand the code to enable the rest of the board to show. 6. Improve the aesthetics of the page and canvas. Aim: How can we set up our game to respond to user input? 1. Sketch the two drawings and write the two code examples. 2. Take quiz 3. Use the code example to enable program to function as seen in the first drawing (slide 6). 4. Use the code example to enable program to function as seen in the first drawing (slide 8). 5. From the information shown, expand the code to enable the rest of the board to respond. 6. Improve the aesthetics of the page and canvas. Aim: How can we improve our program to recognize when the game is over? 1. Sketch the two drawings and write the two code examples. 2. Take quiz 3. Use the code example to enable program to function as seen in the first drawing (slide 11). 4. Use the code example to enable program to function as seen in the first drawing (slide 13). 5. From the information shown, expand the code to enable the rest of the board to respond. 6. Improve the aesthetics of the page and canvas. Aim: How can we improve our program to be a more challenging opponent? 1. Sketch the two drawings and write the two code examples. 2. Take quiz 3. Use the code example to enable the computer to block losses (slide 16-17). 4. Use the code example to have the computer take a winning move (slide 18-19). 5. From the information shown, expand the code to enable the rest of the board to respond. 6. Improve the aesthetics of the page and canvas. Functional Rubric (10 points each) • • • • Slide 2, setting up the canvas Slide 4, setting up the 9 boxes Slide 7, board responds to player move in 9 boxes Slide 9, computer respond by going in first available box for each of the 9 boxes • Slide 12, computer recognizes player winning • Slide 14, computer recognizes player loses • Slide 17, computer takes a win Aesthetics (30 points total) • The project has to look nice for the game to be complete. Try using simple shapes such as the line, ellipse and/or rect commands to improve how the pieces and board looks. Use the fill and stroke to set fun colors. Implement the random function for effects such as a pulsating color or shapes that bounce in place. By putting effort into aesthetics, a project will look nice. Making a Smarter Computer • The examples for the computer shown had a strategy where the computer would take a win and if a win was not available, take the first space available. Other strategies could include blocking the player and taking better squares such as the corner squares. Try to impress yourself by making a computer that can not be beaten by a player. College and Careers • Game engines and artificial intelligence are an up and coming field in computer science. There are college programs and a LOT of openings for people with these kind of skills. It’s not for everyone. However, if you like it and you are good at it you can earn wealth and perhaps even take over the world with a benevolent computerized overlord. Be nice to your computers and some day they may be nice to you. Aim: How can we complete and submit the project? 1. Write directions for 21 through 24 in technical journal. 2. Take quiz. 3. Verify all functional requirements are present from slide 21. 4. Complete and improve all aesthetics as suggested on slide 22. 5. Hand in project through online folder.
