tic tac toe size(600,600); aim: how can we set up our canvas and display for a tic tac toe game? 1....
TRANSCRIPT
<head> <title>Tic Tac Toe</title> <script type="text/javascript"
src="http://www.scottbunin.com/processing.js"></script>
<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 quiz3. 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 quiz3. 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 quiz3. 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 quiz3. 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.